:root {
    --orange: #ff5a00;
    --orange-deep: #e44100;
    --navy: #071936;
    --navy-soft: #0f2c56;
    --ink: #182235;
    --muted: #65758b;
    --line: rgba(15, 44, 86, 0.12);
    --bg: #f6f8fc;
    --white: #ffffff;
    --glass: rgba(255, 255, 255, 0.78);
    --shadow: 0 20px 60px rgba(7, 25, 54, 0.14);
    --radius: 24px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: Inter, Segoe UI, Roboto, Arial, sans-serif;
    color: var(--ink);
    background: radial-gradient(circle at top left, rgba(255, 90, 0, 0.12), transparent 34rem), var(--bg);
    line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
.muted { color: var(--muted); }

.top-strip {
    background: var(--navy);
    color: #eaf1ff;
    font-size: 0.9rem;
}
.strip-inner {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 8px 0;
}
.strip-inner a { color: #fff; font-weight: 800; }

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(18px);
}
.navbar {
    background: rgba(255,255,255,0.88);
    border-bottom: 1px solid var(--line);
}
.nav-inner {
    min-height: 78px;
    display: flex;
    align-items: center;
    gap: 1.2rem;
}
.brand, .footer-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: max-content;
}
.brand img { width: 52px; height: 52px; object-fit: contain; border-radius: 14px; }
.brand strong { display: block; color: var(--navy); font-size: 1.05rem; letter-spacing: -0.02em; }
.brand small { color: var(--orange); font-weight: 900; text-transform: uppercase; letter-spacing: 0.16em; }
.nav-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    flex: 1;
}
.nav-menu a {
    padding: 10px 10px;
    border-radius: 999px;
    color: #20324a;
    font-weight: 760;
    font-size: 0.92rem;
}
.nav-menu a:hover, .nav-menu a.active { background: rgba(255,90,0,0.11); color: var(--orange-deep); }
.cart-pill {
    background: var(--navy);
    color: #fff;
    border-radius: 999px;
    padding: 10px 14px;
    font-weight: 900;
    display: flex;
    align-items: center;
    gap: 8px;
}
.cart-pill span { background: var(--orange); color: #fff; min-width: 24px; height: 24px; display: grid; place-items: center; border-radius: 999px; }
.nav-toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.nav-toggle span { display: block; width: 26px; height: 3px; background: var(--navy); border-radius: 999px; margin: 5px 0; }

.hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--navy), #0c3672 52%, #ff5a00 170%);
    color: #fff;
    padding: 88px 0 54px;
}
.hero::after {
    content: '';
    position: absolute;
    width: 520px;
    height: 520px;
    right: -180px;
    top: -150px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,90,0,0.34), transparent 67%);
}
.hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 3rem;
    align-items: center;
}
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 13px;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 999px;
    background: rgba(255,255,255,0.11);
    color: #fff;
    font-weight: 900;
    font-size: 0.85rem;
}
.hero h1, .page-hero h1 {
    margin: 1.1rem 0;
    font-size: clamp(2.35rem, 5vw, 4.9rem);
    line-height: 0.98;
    letter-spacing: -0.065em;
}
.hero p { color: #d9e6ff; font-size: 1.08rem; max-width: 680px; }
.hero-actions, .section-actions, .card-actions, .form-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 1.5rem; }
.btn {
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 18px;
    border-radius: 999px;
    background: var(--orange);
    color: #fff;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(255,90,0,0.28);
}
.btn:hover { transform: translateY(-1px); }
.btn-outline { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.25); box-shadow: none; }
.btn-dark { background: var(--navy); box-shadow: 0 12px 28px rgba(7,25,54,0.2); }
.btn-light { background: #fff; color: var(--navy); box-shadow: none; }
.btn-small { padding: 9px 13px; font-size: 0.88rem; }
.hero-panel {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 32px;
    padding: 22px;
    box-shadow: 0 28px 80px rgba(0,0,0,0.2);
    backdrop-filter: blur(18px);
}
.panel-card {
    background: rgba(255,255,255,0.9);
    color: var(--ink);
    border-radius: 24px;
    padding: 20px;
    margin-bottom: 14px;
}
.panel-card:last-child { margin-bottom: 0; }
.panel-card strong { color: var(--navy); }
.panel-card span { color: var(--orange); font-weight: 900; }

.section { padding: 76px 0; }
.section-sm { padding: 48px 0; }
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 2rem;
    margin-bottom: 30px;
}
.section-header h2 { font-size: clamp(2rem, 3vw, 3.1rem); line-height: 1; letter-spacing: -0.055em; margin: 0 0 10px; color: var(--navy); }
.section-header p { color: var(--muted); max-width: 650px; margin: 0; }
.badge { color: var(--orange-deep); font-weight: 1000; text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.15em; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.card, .product-card, .service-card, .branch-card, .quote-box {
    background: var(--glass);
    border: 1px solid rgba(255,255,255,0.76);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 22px;
    backdrop-filter: blur(16px);
}
.department-card { position: relative; overflow: hidden; min-height: 320px; }
.department-card::after { content: ''; position: absolute; inset: auto -38px -60px auto; width: 180px; height: 180px; border-radius: 50%; background: rgba(255,90,0,0.12); }
.icon-bubble { width: 58px; height: 58px; border-radius: 20px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(255,90,0,0.15), rgba(7,25,54,0.08)); font-size: 1.75rem; }
.card h3, .product-card h3, .service-card h3, .branch-card h3 { margin: 16px 0 8px; color: var(--navy); line-height: 1.15; }
.card p, .product-card p, .service-card p, .branch-card p { color: var(--muted); margin: 0 0 14px; }
.check-list { list-style: none; padding: 0; margin: 16px 0; }
.check-list li { position: relative; padding-left: 25px; margin: 8px 0; color: #34465f; }
.check-list li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--orange); font-weight: 1000; }

.counter-band { margin-top: -28px; position: relative; z-index: 3; }
.counter-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    background: #fff;
    border-radius: 28px;
    box-shadow: var(--shadow);
    padding: 20px;
}
.counter { padding: 20px; border-right: 1px solid var(--line); }
.counter:last-child { border-right: 0; }
.counter strong { display: block; color: var(--orange-deep); font-size: 2.2rem; line-height: 1; }
.counter span { color: var(--navy); font-weight: 900; }
.counter small { color: var(--muted); display: block; margin-top: 5px; }

.page-hero {
    padding: 72px 0;
    background: linear-gradient(135deg, rgba(7,25,54,0.98), rgba(12,54,114,0.92)), radial-gradient(circle at right top, rgba(255,90,0,0.45), transparent 30rem);
    color: #fff;
}
.page-hero p { max-width: 760px; color: #d9e6ff; font-size: 1.08rem; }
.breadcrumb { color: #9fb6d7; font-weight: 800; }

.product-toolbar {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 22px;
}
.input, select, textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 13px 14px;
    font: inherit;
    background: #fff;
    color: var(--ink);
    outline: none;
}
.input:focus, select:focus, textarea:focus { border-color: rgba(255,90,0,0.55); box-shadow: 0 0 0 4px rgba(255,90,0,0.1); }
.product-toolbar .input { max-width: 330px; }
.product-toolbar select { max-width: 220px; }
.product-image {
    height: 170px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255,90,0,0.1), rgba(7,25,54,0.08));
    display: grid;
    place-items: center;
    overflow: hidden;
    margin-bottom: 15px;
}
.product-image img { width: 100%; height: 100%; object-fit: cover; }
.price-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 14px 0; }
.price { color: var(--orange-deep); font-weight: 1000; font-size: 1.08rem; }
.tag { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 999px; background: rgba(255,90,0,0.12); color: var(--orange-deep); font-weight: 900; font-size: 0.8rem; }

.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: center;
}
.feature-box {
    background: linear-gradient(135deg, var(--navy), var(--navy-soft));
    color: #fff;
    border-radius: 34px;
    padding: 30px;
    box-shadow: var(--shadow);
}
.feature-box p { color: #d9e6ff; }
.feature-box .check-list li { color: #eaf1ff; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-grid .full { grid-column: 1 / -1; }
.form-card { background: #fff; border-radius: 28px; box-shadow: var(--shadow); padding: 24px; border: 1px solid var(--line); }
.alert {
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(255,90,0,0.1);
    border: 1px solid rgba(255,90,0,0.2);
    color: var(--navy);
    margin-bottom: 16px;
}
.cart-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 24px; overflow: hidden; box-shadow: var(--shadow); }
.cart-table th, .cart-table td { padding: 15px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.cart-table th { background: var(--navy); color: #fff; }
.cart-table tr:last-child td { border-bottom: 0; }
.qty-input { max-width: 82px; }

.site-footer { background: var(--navy); color: #eaf1ff; margin-top: 60px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2rem; padding: 54px 0; }
.footer-grid h4 { color: #fff; margin: 0 0 12px; }
.footer-grid a { display: block; color: #c7d8f5; margin: 8px 0; }
.footer-grid p { color: #c7d8f5; margin: 8px 0; }
.footer-brand img { width: 52px; height: 52px; border-radius: 14px; object-fit: contain; background: #fff; }
.footer-brand span { color: #fff; font-weight: 1000; font-size: 1.15rem; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); padding: 16px 0; }
.footer-bottom .container { display: flex; justify-content: space-between; gap: 1rem; color: #b4c7e8; }
.whatsapp-float {
    position: fixed;
    right: 18px;
    bottom: 18px;
    background: #25D366;
    color: #fff;
    padding: 13px 16px;
    border-radius: 999px;
    font-weight: 1000;
    box-shadow: 0 14px 35px rgba(37,211,102,0.32);
    z-index: 80;
}

@media (max-width: 980px) {
    .nav-toggle { display: block; margin-left: auto; }
    .nav-menu {
        display: none;
        position: absolute;
        left: 16px;
        right: 16px;
        top: 118px;
        flex-direction: column;
        align-items: stretch;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 24px;
        box-shadow: var(--shadow);
        padding: 14px;
    }
    .nav-menu.show { display: flex; }
    .nav-menu a { border-radius: 14px; }
    .cart-pill { margin-left: 0; }
    .hero-grid, .split { grid-template-columns: 1fr; }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .counter-grid { grid-template-columns: repeat(2, 1fr); }
    .counter:nth-child(2) { border-right: 0; }
}

@media (max-width: 650px) {
    .strip-inner { flex-direction: column; gap: 3px; }
    .hero { padding: 58px 0 40px; }
    .section { padding: 52px 0; }
    .section-header { display: block; }
    .grid-3, .grid-4, .grid-2, .footer-grid, .counter-grid, .form-grid { grid-template-columns: 1fr; }
    .counter { border-right: 0; border-bottom: 1px solid var(--line); }
    .counter:last-child { border-bottom: 0; }
    .nav-inner { flex-wrap: wrap; }
    .cart-pill { padding: 9px 12px; }
    .cart-table { display: block; overflow-x: auto; }
    .hero h1, .page-hero h1 { font-size: 2.45rem; }
}


/* -------------------------------------------------------
   OrangeMoon Modern Motion Layer v1.01
   Adds smooth reveal, premium hover states, animated hero,
   count-up support and respectful reduced-motion handling.
------------------------------------------------------- */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(circle at 12% 18%, rgba(255,90,0,0.10), transparent 26rem),
        radial-gradient(circle at 86% 22%, rgba(7,25,54,0.10), transparent 28rem),
        radial-gradient(circle at 50% 92%, rgba(255,90,0,0.07), transparent 24rem);
    animation: pageGlowDrift 18s ease-in-out infinite alternate;
}

.site-header .navbar,
.btn,
.card,
.product-card,
.service-card,
.branch-card,
.quote-box,
.panel-card,
.product-image img,
.cart-pill,
.brand img,
.input,
select,
textarea,
.whatsapp-float {
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease, color .28s ease, filter .28s ease, opacity .28s ease;
}

.site-header.is-scrolled .navbar {
    background: rgba(255,255,255,0.94);
    box-shadow: 0 12px 35px rgba(7,25,54,0.10);
}

.brand:hover img {
    transform: rotate(-3deg) scale(1.04);
    box-shadow: 0 12px 28px rgba(255,90,0,0.20);
}

.nav-menu a {
    position: relative;
    overflow: hidden;
}
.nav-menu a::after {
    content: '';
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: 5px;
    height: 2px;
    border-radius: 999px;
    background: var(--orange);
    transition: left .25s ease, right .25s ease;
}
.nav-menu a:hover::after,
.nav-menu a.active::after { left: 18px; right: 18px; }

.hero {
    isolation: isolate;
    background-size: 160% 160%;
    animation: heroGradientShift 14s ease-in-out infinite alternate;
}
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: .24;
    background-image:
        linear-gradient(rgba(255,255,255,0.09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.09) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: radial-gradient(circle at center, black, transparent 78%);
    animation: gridDrift 28s linear infinite;
}
.hero::after {
    animation: heroOrbFloat 10s ease-in-out infinite alternate;
    filter: blur(2px);
}
.hero h1,
.page-hero h1 {
    text-wrap: balance;
}
.motion-ready .hero .eyebrow,
.motion-ready .hero h1,
.motion-ready .hero p,
.motion-ready .hero-actions,
.motion-ready .hero-panel {
    opacity: 0;
    transform: translateY(22px);
    animation: heroIntro .82s cubic-bezier(.2,.9,.2,1) forwards;
}
.motion-ready .hero h1 { animation-delay: .10s; }
.motion-ready .hero p { animation-delay: .22s; }
.motion-ready .hero-actions { animation-delay: .34s; }
.motion-ready .hero-panel { animation-delay: .46s; }

.hero-panel {
    position: relative;
    overflow: hidden;
    animation: panelFloat 6.8s ease-in-out infinite;
}
.hero-panel::before {
    content: '';
    position: absolute;
    inset: -50%;
    background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,0.22), transparent 65%);
    transform: translateX(-55%) rotate(12deg);
    animation: glassSweep 7s ease-in-out infinite;
}
.panel-card { position: relative; z-index: 1; }
.panel-card:hover { transform: translateX(8px) scale(1.015); }

.btn {
    position: relative;
    overflow: hidden;
    transform: translateZ(0);
}
.btn::after {
    content: '';
    position: absolute;
    inset: -40% -70%;
    background: linear-gradient(90deg, transparent 30%, rgba(255,255,255,0.35), transparent 70%);
    transform: translateX(-100%) rotate(12deg);
    transition: transform .55s ease;
}
.btn:hover {
    transform: translateY(-3px);
    filter: saturate(1.06);
    box-shadow: 0 18px 38px rgba(255,90,0,0.30);
}
.btn:hover::after { transform: translateX(100%) rotate(12deg); }
.btn-dark:hover { box-shadow: 0 18px 38px rgba(7,25,54,0.24); }
.cart-pill:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(7,25,54,0.18); }

.card,
.product-card,
.service-card,
.branch-card,
.quote-box,
.form-card,
.feature-box {
    will-change: transform;
}
.card:hover,
.product-card:hover,
.service-card:hover,
.branch-card:hover,
.quote-box:hover {
    transform: translateY(-8px);
    box-shadow: 0 28px 70px rgba(7,25,54,0.17);
    border-color: rgba(255,90,0,0.22);
}
.department-card::before,
.product-card::before,
.service-card::before,
.branch-card::before,
.quote-box::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(255,90,0,0.34), rgba(255,255,255,0.05), rgba(7,25,54,0.22));
    opacity: 0;
    pointer-events: none;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    transition: opacity .28s ease;
}
.department-card:hover::before,
.product-card:hover::before,
.service-card:hover::before,
.branch-card:hover::before,
.quote-box:hover::before { opacity: 1; }
.product-card,
.service-card,
.branch-card,
.quote-box { position: relative; overflow: hidden; }
.product-card:hover .product-image img { transform: scale(1.08); }
.icon-bubble { animation: softBounce 4.2s ease-in-out infinite; }

.counter {
    position: relative;
    overflow: hidden;
}
.counter::after {
    content: '';
    position: absolute;
    inset: auto 14px 0 14px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--orange), transparent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .9s cubic-bezier(.2,.9,.2,1);
}
.counter.is-visible::after { transform: scaleX(1); }
.counter strong {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.05em;
}
.counter strong.is-counting { filter: drop-shadow(0 8px 18px rgba(255,90,0,0.22)); }

.motion-ready .reveal-item {
    opacity: 0;
    transform: translateY(28px) scale(.985);
    filter: blur(8px);
    transition: opacity .72s ease, transform .72s cubic-bezier(.2,.9,.2,1), filter .72s ease;
}
.motion-ready .reveal-item.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

.page-hero {
    position: relative;
    overflow: hidden;
}
.page-hero::after {
    content: '';
    position: absolute;
    width: 420px;
    height: 420px;
    right: -140px;
    top: -160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,90,0,0.30), transparent 70%);
    animation: heroOrbFloat 9s ease-in-out infinite alternate;
}
.page-hero .container { position: relative; z-index: 1; }

.form-card,
.cart-table,
.feature-box {
    animation: calmRise .65s cubic-bezier(.2,.9,.2,1) both;
}

.whatsapp-float {
    animation: whatsappFloat 3.2s ease-in-out infinite;
}
.whatsapp-float::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: inherit;
    border: 1px solid rgba(37,211,102,0.38);
    animation: whatsappPulse 1.9s ease-out infinite;
}

@keyframes heroIntro {
    to { opacity: 1; transform: translateY(0); }
}
@keyframes heroGradientShift {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}
@keyframes heroOrbFloat {
    0% { transform: translate3d(0,0,0) scale(1); }
    100% { transform: translate3d(-44px,34px,0) scale(1.12); }
}
@keyframes gridDrift {
    from { background-position: 0 0, 0 0; }
    to { background-position: 104px 52px, 52px 104px; }
}
@keyframes panelFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
@keyframes glassSweep {
    0%, 38% { transform: translateX(-65%) rotate(12deg); }
    62%, 100% { transform: translateX(65%) rotate(12deg); }
}
@keyframes softBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}
@keyframes calmRise {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes whatsappFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}
@keyframes whatsappPulse {
    0% { opacity: .65; transform: scale(.92); }
    100% { opacity: 0; transform: scale(1.22); }
}
@keyframes pageGlowDrift {
    from { transform: translate3d(0,0,0) scale(1); }
    to { transform: translate3d(0,-18px,0) scale(1.03); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
    .motion-ready .reveal-item,
    .motion-ready .hero .eyebrow,
    .motion-ready .hero h1,
    .motion-ready .hero p,
    .motion-ready .hero-actions,
    .motion-ready .hero-panel {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}

/* -------------------------------------------------------
   OrangeMoon Webflow-Style Motion Layer v1.02
   Adds 3D parallax, text assembly and department vibes.
------------------------------------------------------- */
.hero-webflow,
.webflow-page-hero,
.experience-strip {
    isolation: isolate;
    transform-style: preserve-3d;
}
.hero-webflow {
    min-height: 650px;
    display: grid;
    align-items: center;
    perspective: 1200px;
}
.hero-copy,
.hero-panel,
.page-hero .container,
.experience-grid {
    position: relative;
    z-index: 2;
}
.hero-scene {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.scene-layer {
    position: absolute;
    display: block;
    will-change: transform;
    transform: translate3d(0,0,0);
}
.scene-orb {
    border-radius: 999px;
    filter: blur(2px);
    opacity: .88;
}
.scene-orb-one {
    width: 360px;
    height: 360px;
    left: -110px;
    top: 118px;
    background: radial-gradient(circle, rgba(255,90,0,.42), rgba(255,90,0,.08) 54%, transparent 72%);
}
.scene-orb-two {
    width: 260px;
    height: 260px;
    right: 8%;
    bottom: 6%;
    background: radial-gradient(circle, rgba(255,255,255,.20), rgba(255,90,0,.16) 58%, transparent 76%);
}
.scene-grid {
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.075) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.075) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(circle at 60% 42%, #000 0, transparent 67%);
    opacity: .65;
}
.scene-chip {
    padding: 10px 15px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(255,255,255,.12);
    color: #fff;
    font-weight: 1000;
    letter-spacing: .12em;
    backdrop-filter: blur(14px);
    box-shadow: 0 20px 60px rgba(0,0,0,.16);
}
.chip-camera { left: 8%; top: 22%; }
.chip-gps { right: 12%; top: 20%; }
.chip-ai { right: 21%; bottom: 18%; }
.hero-panel,
.tilt-card {
    transform-style: preserve-3d;
    backface-visibility: hidden;
}
.hero-panel .panel-card,
.story-panel h3,
.story-panel p,
.story-panel span,
.department-card > *,
.product-card > *,
.service-card > *,
.branch-card > *,
.feature-box > * {
    transform: translateZ(18px);
}
.text-assembly {
    display: block;
    overflow: hidden;
}
.text-assembly .word {
    display: inline-block;
    opacity: 0;
    transform: translate3d(0, 112%, 0) rotateX(64deg);
    transform-origin: left bottom;
    transition:
        opacity .72s ease,
        transform .88s cubic-bezier(.18, .92, .2, 1);
    transition-delay: calc(var(--word-index, 0) * 42ms);
    will-change: transform, opacity;
}
.text-assembly.is-visible .word {
    opacity: 1;
    transform: translate3d(0,0,0) rotateX(0);
}
.experience-strip {
    position: relative;
    overflow: hidden;
    padding: 96px 0;
    color: #fff;
    background:
        radial-gradient(circle at 15% 15%, rgba(255,90,0,.34), transparent 28rem),
        radial-gradient(circle at 86% 72%, rgba(255,255,255,.13), transparent 28rem),
        linear-gradient(135deg, #06152f 0%, #0a2b59 48%, #111c35 100%);
}
.experience-strip::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
    background-size: 72px 72px;
    transform: rotate(-2deg) scale(1.08);
    opacity: .8;
    animation: gridDrift 22s linear infinite;
}
.experience-grid {
    display: grid;
    grid-template-columns: .92fr 1.08fr;
    align-items: start;
    gap: 3rem;
}
.experience-copy {
    position: sticky;
    top: 140px;
    align-self: start;
}
.experience-copy h2 {
    margin: 12px 0 16px;
    color: #fff;
    font-size: clamp(2.2rem, 4vw, 4.4rem);
    line-height: .96;
    letter-spacing: -.065em;
}
.experience-copy p {
    color: #d8e7ff;
    max-width: 560px;
}
.experience-strip .badge {
    color: #ffb38a;
}
.experience-stack {
    display: grid;
    gap: 1.2rem;
    perspective: 1100px;
}
.story-panel {
    position: relative;
    min-height: 230px;
    overflow: hidden;
    border-radius: 34px;
    padding: 30px;
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 30px 90px rgba(0,0,0,.24);
    transform-style: preserve-3d;
}
.story-panel::before {
    content: '';
    position: absolute;
    inset: -1px;
    background:
        radial-gradient(circle at 18% 8%, rgba(255,255,255,.26), transparent 18rem),
        linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
    opacity: .96;
}
.story-panel::after {
    content: '';
    position: absolute;
    width: 260px;
    height: 260px;
    right: -82px;
    bottom: -112px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.18);
    background: radial-gradient(circle, rgba(255,255,255,.12), transparent 64%);
}
.story-panel span {
    position: relative;
    z-index: 1;
    color: rgba(255,255,255,.68);
    font-size: .86rem;
    font-weight: 1000;
    letter-spacing: .24em;
}
.story-panel h3 {
    position: relative;
    z-index: 1;
    margin: 38px 0 8px;
    color: #fff;
    font-size: clamp(1.7rem, 3vw, 2.6rem);
    line-height: 1;
    letter-spacing: -.045em;
}
.story-panel p {
    position: relative;
    z-index: 1;
    color: rgba(255,255,255,.82);
    max-width: 620px;
    margin: 0;
}
.vibe-surveillance { background: linear-gradient(135deg, #0b244c, #102f64 48%, #ff5a00 150%); }
.vibe-tracking { background: linear-gradient(135deg, #052b36, #0b4a63 48%, #ff5a00 145%); }
.vibe-digital { background: linear-gradient(135deg, #1c1747, #0a2c5e 48%, #ff5a00 150%); }
.department-card.vibe-surveillance::after,
.department-card.vibe-tracking::after,
.department-card.vibe-digital::after {
    opacity: .96;
}
.department-card.vibe-surveillance::after { background: radial-gradient(circle, rgba(255,90,0,.15), transparent 68%); }
.department-card.vibe-tracking::after { background: radial-gradient(circle, rgba(0,143,161,.16), transparent 68%); }
.department-card.vibe-digital::after { background: radial-gradient(circle, rgba(78,91,255,.15), transparent 68%); }
.webflow-page-hero {
    min-height: 370px;
    display: grid;
    align-items: center;
    perspective: 1000px;
}
.webflow-page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 82% 34%, rgba(255,90,0,.24), transparent 20rem),
        linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
    background-size: auto, 64px 64px, 64px 64px;
    transform: translateZ(-1px);
    opacity: .75;
}
.motion-shelf .counter-grid {
    transform-style: preserve-3d;
}
.motion-shelf .counter:nth-child(odd) { transform: translateZ(8px); }
.motion-shelf .counter:nth-child(even) { transform: translateZ(18px); }
.tilt-card {
    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease,
        filter .22s ease;
}
.tilt-card.is-tilting {
    transition: transform .04s linear, box-shadow .18s ease;
    box-shadow: 0 32px 86px rgba(7,25,54,.20);
}
.product-card,
.service-card,
.branch-card,
.feature-box,
.card {
    transform-style: preserve-3d;
}

@media (max-width: 980px) {
    .hero-webflow { min-height: auto; }
    .experience-grid { grid-template-columns: 1fr; }
    .experience-copy { position: relative; top: 0; }
    .scene-chip { display: none; }
}
@media (max-width: 650px) {
    .experience-strip { padding: 64px 0; }
    .experience-copy h2 { font-size: 2.5rem; }
    .story-panel { min-height: 210px; padding: 24px; border-radius: 26px; }
    .text-assembly .word { transition-delay: calc(var(--word-index, 0) * 22ms); }
}
@media (prefers-reduced-motion: reduce) {
    .text-assembly .word,
    .text-assembly.is-visible .word {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .experience-strip::before {
        animation: none !important;
    }
}

/* -------------------------------------------------------
   OrangeMoon Readability Hotfix v1.02B
   Fixes low-contrast text on the dark Webflow-style department cards.
------------------------------------------------------- */
.department-card.vibe-surveillance,
.department-card.vibe-tracking,
.department-card.vibe-digital {
    color: #ffffff;
    border-color: rgba(255,255,255,0.24);
    box-shadow: 0 28px 76px rgba(7,25,54,0.24);
}
.department-card.vibe-surveillance {
    background:
        linear-gradient(135deg, rgba(5,18,42,0.96), rgba(12,39,82,0.94) 48%, rgba(255,90,0,0.34) 150%),
        linear-gradient(135deg, #0b244c, #102f64 48%, #ff5a00 150%);
}
.department-card.vibe-tracking {
    background:
        linear-gradient(135deg, rgba(3,33,44,0.96), rgba(6,62,84,0.94) 48%, rgba(255,90,0,0.32) 150%),
        linear-gradient(135deg, #052b36, #0b4a63 48%, #ff5a00 145%);
}
.department-card.vibe-digital {
    background:
        linear-gradient(135deg, rgba(20,18,66,0.96), rgba(9,40,88,0.94) 48%, rgba(255,90,0,0.32) 150%),
        linear-gradient(135deg, #1c1747, #0a2c5e 48%, #ff5a00 150%);
}
.department-card.vibe-surveillance > *,
.department-card.vibe-tracking > *,
.department-card.vibe-digital > * {
    position: relative;
    z-index: 2;
}
.department-card.vibe-surveillance::after,
.department-card.vibe-tracking::after,
.department-card.vibe-digital::after {
    z-index: 0;
    opacity: 0.7;
}
.department-card.vibe-surveillance::before,
.department-card.vibe-tracking::before,
.department-card.vibe-digital::before {
    z-index: 3;
}
.department-card.vibe-surveillance h3,
.department-card.vibe-tracking h3,
.department-card.vibe-digital h3 {
    color: #ffffff;
    text-shadow: 0 2px 16px rgba(0,0,0,0.35);
}
.department-card.vibe-surveillance p,
.department-card.vibe-tracking p,
.department-card.vibe-digital p {
    color: #edf5ff;
    font-weight: 650;
    text-shadow: 0 1px 14px rgba(0,0,0,0.30);
}
.department-card.vibe-surveillance .check-list li,
.department-card.vibe-tracking .check-list li,
.department-card.vibe-digital .check-list li {
    color: #f7fbff;
    font-weight: 700;
    text-shadow: 0 1px 14px rgba(0,0,0,0.34);
}
.department-card.vibe-surveillance .check-list li::before,
.department-card.vibe-tracking .check-list li::before,
.department-card.vibe-digital .check-list li::before {
    color: #ff7a1a;
    text-shadow: 0 0 16px rgba(255,90,0,0.75);
}
.department-card.vibe-surveillance .icon-bubble,
.department-card.vibe-tracking .icon-bubble,
.department-card.vibe-digital .icon-bubble {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 18px 42px rgba(0,0,0,0.18);
}
.department-card.vibe-surveillance .btn-dark,
.department-card.vibe-tracking .btn-dark,
.department-card.vibe-digital .btn-dark {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.18);
    color: #ffffff;
    box-shadow: none;
}
.department-card.vibe-surveillance .btn,
.department-card.vibe-tracking .btn,
.department-card.vibe-digital .btn {
    text-shadow: none;
}

/* -------------------------------------------------------
   OrangeMoon Premium Primary Motion Layer v1.04
   Restores the main OrangeMoon corporate look while adding
   large hero motion graphics, parallax depth, hover effects
   and small micro-interactions.
------------------------------------------------------- */
:root {
    --motion-orange: #ff5a00;
    --motion-orange-soft: #ff8a3d;
    --motion-navy: #071936;
    --motion-blue: #0b3978;
    --motion-glow: rgba(255,90,0,.38);
}

body {
    scroll-behavior: smooth;
}

.hero-premium {
    min-height: 720px;
    padding: 104px 0 76px;
    background:
        radial-gradient(circle at 13% 18%, rgba(255,90,0,.35), transparent 23rem),
        radial-gradient(circle at 88% 18%, rgba(255,255,255,.14), transparent 22rem),
        radial-gradient(circle at 70% 90%, rgba(255,90,0,.24), transparent 28rem),
        linear-gradient(135deg, #06142c 0%, #081f46 38%, #0b3978 66%, #111a32 100%);
    isolation: isolate;
    perspective: 1300px;
}
.hero-premium::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(115deg, transparent 0 48%, rgba(255,90,0,.10) 48% 52%, transparent 52% 100%),
        radial-gradient(circle at 50% 30%, rgba(255,255,255,.08), transparent 25rem);
    opacity: .88;
    pointer-events: none;
}
.hero-premium::after {
    width: 760px;
    height: 760px;
    right: -310px;
    top: -270px;
    background: radial-gradient(circle, rgba(255,90,0,.42), rgba(255,90,0,.13) 42%, transparent 68%);
    animation: premiumOrbBreath 10s ease-in-out infinite alternate;
}
.premium-hero-grid {
    align-items: center;
    gap: 4rem;
}
.hero-premium .hero-copy {
    max-width: 820px;
}
.hero-premium .hero h1,
.hero-premium h1 {
    text-wrap: balance;
    text-shadow: 0 14px 60px rgba(0,0,0,.30);
}
.hero-premium .hero-copy p {
    color: #eef6ff;
    font-size: clamp(1.03rem, 1.35vw, 1.22rem);
    line-height: 1.78;
    text-shadow: 0 2px 20px rgba(0,0,0,.24);
}
.hero-motion-stage {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.premium-grid {
    inset: -4%;
    background-image:
        linear-gradient(rgba(255,255,255,.075) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.075) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(circle at 54% 42%, #000 0 42%, transparent 72%);
    opacity: .6;
    animation: premiumGridDrift 28s linear infinite;
}
.premium-scanline {
    width: 150%;
    height: 160px;
    left: -25%;
    top: 18%;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,.10), rgba(255,90,0,.16), transparent);
    filter: blur(2px);
    transform: rotate(-9deg);
    opacity: .7;
    animation: scanMove 8s ease-in-out infinite;
}
.premium-orb {
    position: absolute;
    display: block;
    border-radius: 999px;
    filter: blur(3px);
}
.premium-orb-one {
    width: 410px;
    height: 410px;
    left: -120px;
    top: 135px;
    background: radial-gradient(circle, rgba(255,90,0,.42), rgba(255,90,0,.08) 58%, transparent 76%);
    animation: floatSlow 8s ease-in-out infinite alternate;
}
.premium-orb-two {
    width: 330px;
    height: 330px;
    right: 7%;
    bottom: 5%;
    background: radial-gradient(circle, rgba(255,255,255,.18), rgba(255,90,0,.15) 55%, transparent 74%);
    animation: floatSlow 10s ease-in-out infinite alternate-reverse;
}
.premium-chip {
    padding: 11px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.25);
    background: rgba(255,255,255,.12);
    color: #fff;
    font-weight: 1000;
    letter-spacing: .10em;
    backdrop-filter: blur(18px);
    box-shadow: 0 22px 68px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.18);
    animation: chipFloat 6s ease-in-out infinite alternate;
}
.chip-repair { left: 38%; bottom: 12%; animation-delay: .9s; }
.premium-chip.chip-camera { animation-delay: .1s; }
.premium-chip.chip-gps { animation-delay: .45s; }
.premium-chip.chip-ai { animation-delay: .75s; }
.hero-orbit {
    width: 470px;
    height: 470px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
    right: 4%;
    top: 16%;
    box-shadow: inset 0 0 80px rgba(255,90,0,.08), 0 0 90px rgba(255,90,0,.10);
    animation: orbitRotate 23s linear infinite;
}
.hero-orbit::before,
.hero-orbit::after {
    content: '';
    position: absolute;
    border-radius: inherit;
    border: 1px dashed rgba(255,255,255,.12);
}
.hero-orbit::before { inset: 64px; }
.hero-orbit::after { inset: 126px; border-style: solid; opacity: .55; }
.hero-orbit span {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: var(--motion-orange);
    box-shadow: 0 0 24px rgba(255,90,0,.8);
}
.hero-orbit span:nth-child(1) { left: 50%; top: -6px; }
.hero-orbit span:nth-child(2) { right: 31px; bottom: 94px; background: #fff; box-shadow: 0 0 24px rgba(255,255,255,.7); }
.hero-orbit span:nth-child(3) { left: 54px; bottom: 66px; }
.orbit-two {
    width: 610px;
    height: 610px;
    right: -2%;
    top: 8%;
    opacity: .58;
    animation-duration: 35s;
    animation-direction: reverse;
}
.hero-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    margin-top: 1.4rem;
}
.hero-trust-row span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    color: #fff;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
    font-weight: 850;
    backdrop-filter: blur(12px);
}
.hero-trust-row span::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--motion-orange);
    box-shadow: 0 0 16px rgba(255,90,0,.8);
}
.premium-console {
    position: relative;
    overflow: hidden;
    padding: 0;
    border-radius: 36px;
    background: rgba(255,255,255,.105);
    border: 1px solid rgba(255,255,255,.22);
    box-shadow: 0 36px 110px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.18);
}
.premium-console::before {
    content: '';
    position: absolute;
    inset: -60px;
    background: conic-gradient(from 180deg, transparent, rgba(255,90,0,.30), transparent, rgba(255,255,255,.18), transparent);
    opacity: .64;
    animation: consoleGlowRotate 15s linear infinite;
}
.premium-console::after {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: 35px;
    background: linear-gradient(145deg, rgba(7,25,54,.92), rgba(8,36,76,.80));
    z-index: 0;
}
.premium-console > * {
    position: relative;
    z-index: 1;
}
.console-topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 17px 18px;
    border-bottom: 1px solid rgba(255,255,255,.12);
    color: #fff;
}
.console-topbar span {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--motion-orange);
    box-shadow: 0 0 16px rgba(255,90,0,.65);
}
.console-topbar span:nth-child(2) { background: #ffb46e; }
.console-topbar span:nth-child(3) { background: #fff; opacity: .75; }
.console-topbar strong {
    margin-left: auto;
    font-size: .82rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.78);
}
.console-screen {
    display: grid;
    grid-template-columns: .86fr 1.14fr;
    gap: 18px;
    padding: 20px;
    align-items: center;
}
.radar-widget {
    position: relative;
    aspect-ratio: 1/1;
    min-height: 230px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(circle, rgba(255,90,0,.12), transparent 45%),
        linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px),
        rgba(255,255,255,.06);
    background-size: auto, 28px 28px, 28px 28px, auto;
    border: 1px solid rgba(255,255,255,.16);
}
.radar-widget::before,
.radar-widget::after {
    content: '';
    position: absolute;
    inset: 50%;
    width: 1px;
    height: 100%;
    background: rgba(255,255,255,.14);
    transform: translate(-50%, -50%);
}
.radar-widget::after {
    width: 100%;
    height: 1px;
}
.radar-ring {
    position: absolute;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.16);
}
.ring-a { inset: 18%; }
.ring-b { inset: 34%; }
.radar-sweep {
    position: absolute;
    inset: 0;
    background: conic-gradient(from 0deg, rgba(255,90,0,.38), transparent 34%, transparent 100%);
    animation: radarSweep 4.6s linear infinite;
    mix-blend-mode: screen;
}
.radar-core {
    position: relative;
    z-index: 2;
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    border-radius: 24px;
    background: #fff;
    color: var(--motion-navy);
    font-weight: 1000;
    box-shadow: 0 20px 55px rgba(0,0,0,.22), 0 0 0 8px rgba(255,255,255,.06);
}
.radar-dot {
    position: absolute;
    width: 11px;
    height: 11px;
    border-radius: 999px;
    background: var(--motion-orange);
    box-shadow: 0 0 18px rgba(255,90,0,.86);
    z-index: 2;
    animation: dotPulse 1.8s ease-in-out infinite;
}
.dot-one { left: 31%; top: 23%; }
.dot-two { right: 22%; top: 45%; animation-delay: .45s; }
.dot-three { left: 44%; bottom: 18%; animation-delay: .75s; }
.console-list {
    display: grid;
    gap: 12px;
}
.console-item {
    position: relative;
    overflow: hidden;
    padding: 14px 14px 14px 54px;
    border-radius: 20px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    transition: transform .22s ease, background .22s ease, border-color .22s ease;
}
.console-item:hover,
.console-item.active {
    transform: translateX(4px);
    background: rgba(255,90,0,.16);
    border-color: rgba(255,90,0,.35);
}
.console-item span {
    position: absolute;
    left: 14px;
    top: 15px;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    color: #fff;
    font-size: .74rem;
    font-weight: 1000;
}
.console-item strong {
    display: block;
    color: #fff;
    font-size: .98rem;
    line-height: 1.1;
}
.console-item small {
    display: block;
    margin-top: 6px;
    color: rgba(255,255,255,.72);
    line-height: 1.45;
}
.console-metrics {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1px;
    border-top: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.08);
}
.console-metrics div {
    padding: 17px 15px;
    background: rgba(255,255,255,.04);
}
.console-metrics strong {
    display: block;
    color: #fff;
    font-size: 1.35rem;
    line-height: 1;
}
.console-metrics span {
    display: block;
    margin-top: 5px;
    color: rgba(255,255,255,.68);
    font-size: .8rem;
    font-weight: 750;
}

/* stronger hover effects for the main commercial cards */
.card,
.product-card,
.service-card,
.branch-card,
.feature-box,
.quote-box,
.form-card {
    transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, border-color .28s ease, filter .28s ease;
}
.card:hover,
.product-card:hover,
.service-card:hover,
.branch-card:hover,
.feature-box:hover,
.quote-box:hover,
.form-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 28px 80px rgba(7,25,54,.17);
    border-color: rgba(255,90,0,.26);
}
.product-card:hover .product-image img {
    transform: scale(1.075) rotate(.4deg);
}
.nav-menu a,
.cart-pill,
.whatsapp-float,
.btn {
    position: relative;
    overflow: hidden;
}
.btn:active,
.cart-pill:active,
.whatsapp-float:active {
    transform: translateY(1px) scale(.985);
}
.button-ripple {
    position: absolute;
    border-radius: 999px;
    transform: scale(0);
    background: rgba(255,255,255,.45);
    pointer-events: none;
    animation: ripplePop .62s ease-out forwards;
}
.nav-menu a::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 6px;
    height: 2px;
    border-radius: 999px;
    background: var(--motion-orange);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .22s ease;
}
.nav-menu a:hover::after,
.nav-menu a.active::after {
    transform: scaleX(1);
}
.counter {
    transition: transform .25s ease, box-shadow .25s ease;
}
.counter:hover {
    transform: translateY(-6px) scale(1.015);
}
.section {
    position: relative;
    overflow: clip;
}
.section::before {
    content: '';
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 999px;
    right: -130px;
    top: 8%;
    background: radial-gradient(circle, rgba(255,90,0,.08), transparent 70%);
    pointer-events: none;
    transform: translate3d(0, calc(var(--section-shift, 0) * 1px), 0);
}
.motion-ready .section-header,
.motion-ready .card,
.motion-ready .product-card,
.motion-ready .service-card,
.motion-ready .branch-card,
.motion-ready .feature-box,
.motion-ready .quote-box {
    will-change: transform, opacity;
}

@keyframes premiumOrbBreath {
    from { transform: translate3d(0,0,0) scale(.94); opacity: .74; }
    to { transform: translate3d(-30px,34px,0) scale(1.07); opacity: 1; }
}
@keyframes premiumGridDrift {
    from { background-position: 0 0, 0 0; }
    to { background-position: 128px 80px, 128px 80px; }
}
@keyframes scanMove {
    0%, 100% { transform: translateY(-160px) rotate(-9deg); opacity: .18; }
    45%, 55% { opacity: .7; }
    50% { transform: translateY(430px) rotate(-9deg); }
}
@keyframes floatSlow {
    from { transform: translate3d(0,0,0) scale(.98); }
    to { transform: translate3d(28px,-24px,0) scale(1.05); }
}
@keyframes chipFloat {
    from { transform: translate3d(0,0,0); }
    to { transform: translate3d(0,-14px,0); }
}
@keyframes orbitRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes consoleGlowRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes radarSweep {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes dotPulse {
    0%, 100% { transform: scale(1); opacity: .75; }
    50% { transform: scale(1.45); opacity: 1; }
}
@keyframes ripplePop {
    to { transform: scale(3.5); opacity: 0; }
}

@media (max-width: 1080px) {
    .premium-hero-grid { grid-template-columns: 1fr; }
    .premium-console { max-width: 780px; }
    .hero-orbit { right: -180px; opacity: .36; }
}
@media (max-width: 720px) {
    .hero-premium { min-height: auto; padding: 72px 0 52px; }
    .console-screen { grid-template-columns: 1fr; }
    .radar-widget { min-height: 220px; }
    .console-metrics { grid-template-columns: 1fr; }
    .hero-trust-row span { font-size: .85rem; }
    .premium-chip, .hero-orbit { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .premium-grid,
    .premium-scanline,
    .premium-orb,
    .premium-chip,
    .hero-orbit,
    .premium-console::before,
    .radar-sweep,
    .radar-dot,
    .hero-premium::after {
        animation: none !important;
    }
}
:root {
  --orange: #ff7a00;
  --orange-deep: #e45700;
  --orange-soft: #ffb15e;
  --navy: #07111f;
  --navy-2: #0c1d32;
  --ink: #eaf2ff;
  --muted: #a9b7cc;
  --white: #ffffff;
  --glass: rgba(255, 255, 255, 0.08);
  --glass-strong: rgba(255, 255, 255, 0.13);
  --border: rgba(255, 255, 255, 0.16);
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
  --radius-lg: 30px;
  --radius-md: 20px;
  --radius-sm: 14px;
  --max: 1180px;
  --ease: cubic-bezier(.2,.8,.2,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 15% 10%, rgba(255, 122, 0, 0.22), transparent 28rem),
    radial-gradient(circle at 82% 15%, rgba(46, 169, 255, 0.15), transparent 26rem),
    linear-gradient(130deg, #050a12 0%, #07111f 42%, #0d1a2b 100%);
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -6rem;
  padding: .8rem 1rem;
  background: var(--white);
  color: var(--navy);
  border-radius: 999px;
  z-index: 999;
  transition: top .25s var(--ease);
}
.skip-link:focus { top: 1rem; }

.background-orbit {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: -2;
}
.bg-glow {
  position: absolute;
  width: 46rem;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(65px);
  opacity: .38;
  animation: glowDrift 12s ease-in-out infinite alternate;
}
.glow-one { left: -12rem; top: 8rem; background: rgba(255, 122, 0, .42); }
.glow-two { right: -18rem; top: 16rem; background: rgba(15, 103, 184, .32); animation-delay: -5s; }
.bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 70px 70px;
  mask-image: linear-gradient(to bottom, transparent, black 18%, black 78%, transparent);
  animation: gridMove 22s linear infinite;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 1rem clamp(1rem, 3vw, 2rem);
  transition: padding .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.is-scrolled {
  padding-top: .65rem;
  padding-bottom: .65rem;
  background: rgba(5, 10, 18, .72);
  backdrop-filter: blur(18px);
  box-shadow: 0 12px 40px rgba(0,0,0,.28);
}
.nav-shell {
  max-width: var(--max);
  margin: 0 auto;
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: .7rem .85rem .7rem 1rem;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(20px);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  min-width: max-content;
  font-weight: 900;
  letter-spacing: .04em;
}
.brand-logo { width: 154px; max-height: 48px; object-fit: contain; }
.brand-fallback {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 1rem;
  border-radius: 999px;
  color: var(--white);
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(135deg, rgba(255,122,0,.28), rgba(255,255,255,.08));
}
.brand-fallback span { color: var(--orange); }
.nav-links {
  display: flex;
  align-items: center;
  gap: .4rem;
}
.nav-links a {
  position: relative;
  padding: .85rem 1rem;
  border-radius: 999px;
  color: rgba(234,242,255,.84);
  font-weight: 700;
  font-size: .94rem;
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.nav-links a:hover { color: var(--white); background: rgba(255,255,255,.1); transform: translateY(-2px); }
.nav-links .nav-cta {
  color: #1b0d02;
  background: linear-gradient(135deg, var(--orange), var(--orange-soft));
  box-shadow: 0 14px 34px rgba(255, 122, 0, .26);
}
.nav-links .nav-cta:hover { background: linear-gradient(135deg, var(--orange-soft), var(--orange)); color: #1b0d02; }
.nav-toggle { display: none; }

.section { position: relative; padding: 6.5rem clamp(1rem, 4vw, 2rem); }
.section-inner { width: min(100%, var(--max)); margin: 0 auto; }
.hero { min-height: 100svh; display: grid; align-items: center; padding-top: 8rem; overflow: hidden; }
.hero-content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(340px, .94fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
.hero-layer { position: absolute; inset: 0; pointer-events: none; }
.layer-grid {
  background: linear-gradient(90deg, rgba(255,122,0,.09) 1px, transparent 1px), linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 110px 110px;
  transform: perspective(750px) rotateX(60deg) translateY(16%);
  transform-origin: bottom;
  opacity: .35;
}
.layer-rings::before,
.layer-rings::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 122, 0, .24);
  width: 48vw;
  aspect-ratio: 1;
  right: 6vw;
  top: 17vh;
  animation: orbitPulse 7s ease-in-out infinite alternate;
}
.layer-rings::after { width: 32vw; right: 14vw; top: 23vh; border-color: rgba(255,255,255,.16); animation-delay: -2s; }
.layer-noise {
  opacity: .16;
  background-image: radial-gradient(circle at 50% 50%, rgba(255,255,255,.18) 1px, transparent 1px);
  background-size: 4px 4px;
  mask-image: linear-gradient(to bottom, black, transparent 84%);
}
.eyebrow {
  margin: 0 0 1rem;
  color: var(--orange-soft);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 900;
  font-size: .8rem;
}
h1, h2, h3, p { margin-top: 0; }
h1 {
  max-width: 800px;
  font-size: clamp(3rem, 7vw, 6.8rem);
  line-height: .92;
  letter-spacing: -.07em;
  margin-bottom: 1.4rem;
}
h2 {
  font-size: clamp(2.1rem, 4vw, 4rem);
  line-height: 1.03;
  letter-spacing: -.05em;
  margin-bottom: 1.1rem;
}
h3 { font-size: 1.35rem; margin-bottom: .7rem; }
p { color: var(--muted); line-height: 1.75; }
.hero-lead { max-width: 720px; font-size: clamp(1.04rem, 2vw, 1.25rem); }
.assemble-text { color: transparent; position: relative; min-height: 1em; }
.assemble-text .char {
  display: inline-block;
  color: var(--ink);
  transform: translateY(1.2em) rotate(8deg);
  opacity: 0;
  filter: blur(9px);
  animation: assemble .72s var(--ease) forwards;
}
.hero-actions, .mini-cta, .contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  align-items: center;
}
.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: .95rem 1.35rem;
  border-radius: 999px;
  font-weight: 900;
  overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.btn:hover { transform: translateY(-3px) scale(1.015); }
.btn-primary {
  color: #210e00;
  background: linear-gradient(135deg, var(--orange), var(--orange-soft));
  box-shadow: 0 18px 42px rgba(255, 122, 0, .28);
}
.btn-ghost {
  color: var(--white);
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(15px);
}
.btn-ghost:hover { border-color: rgba(255,122,0,.52); box-shadow: 0 18px 40px rgba(0,0,0,.28); }
.ripple .ripple-dot {
  position: absolute;
  width: 12px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255,255,255,.52);
  transform: translate(-50%, -50%) scale(0);
  animation: ripple .62s ease-out forwards;
  pointer-events: none;
  z-index: -1;
}
.trust-strip {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
}
.trust-strip span {
  padding: .65rem .9rem;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: rgba(234,242,255,.82);
  font-weight: 800;
  font-size: .9rem;
}

.hero-visual { position: relative; min-height: 560px; display: grid; place-items: center; }
.motion-console {
  position: relative;
  width: min(92vw, 520px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,122,0,.18), transparent 22%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.12), transparent 43%),
    rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: var(--shadow), inset 0 0 60px rgba(255,122,0,.1);
  overflow: hidden;
  backdrop-filter: blur(18px);
}
.scanline {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.04), rgba(255,255,255,.04) 1px, transparent 1px, transparent 7px);
  animation: scanMove 4s linear infinite;
  opacity: .75;
}
.orbit {
  position: absolute;
  inset: 9%;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
  animation: orbitSpin 16s linear infinite;
}
.orbit::before {
  content: "";
  position: absolute;
  width: 12px;
  aspect-ratio: 1;
  border-radius: 50%;
  top: -6px;
  left: 48%;
  background: var(--orange);
  box-shadow: 0 0 22px var(--orange);
}
.orbit-b { inset: 20%; animation-duration: 11s; animation-direction: reverse; border-color: rgba(255,122,0,.34); }
.orbit-c { inset: 31%; animation-duration: 8s; border-style: dashed; opacity: .72; }
.radar-sweep {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255,122,0,.0), rgba(255,122,0,.42), rgba(255,122,0,.0) 23%);
  animation: orbitSpin 4s linear infinite;
  mix-blend-mode: screen;
}
.moon-core {
  position: absolute;
  inset: 35%;
  display: grid;
  place-items: center;
  text-align: center;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(255,122,0,.95), rgba(255,183,92,.94));
  color: #220e00;
  box-shadow: 0 0 56px rgba(255, 122, 0, .52), inset 0 0 22px rgba(255,255,255,.24);
}
.moon-core strong { font-size: clamp(2.2rem, 5vw, 4rem); letter-spacing: -.08em; line-height: .88; }
.moon-core small { font-size: .72rem; letter-spacing: .18em; font-weight: 950; }
.core-pulse {
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.28);
  animation: corePulse 1.9s ease-out infinite;
}
.node {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .58rem .78rem;
  border-radius: 999px;
  font-weight: 950;
  font-size: .78rem;
  letter-spacing: .06em;
  background: rgba(5, 10, 18, .62);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 16px 34px rgba(0,0,0,.28);
  animation: nodeFloat 4s ease-in-out infinite alternate;
}
.node span {
  width: 9px; aspect-ratio: 1; border-radius: 50%; background: var(--orange); box-shadow: 0 0 16px var(--orange);
}
.node-cctv { top: 16%; left: 12%; }
.node-gps { right: 10%; top: 23%; animation-delay: -.7s; }
.node-ai { left: 10%; bottom: 20%; animation-delay: -1.1s; }
.node-repairs { right: 8%; bottom: 17%; animation-delay: -1.9s; }
.console-status {
  position: absolute;
  left: 50%;
  bottom: 6%;
  transform: translateX(-50%);
  min-width: max-content;
  padding: .75rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(5,10,18,.58);
  backdrop-filter: blur(14px);
  color: rgba(234,242,255,.9);
  font-weight: 850;
  font-size: .87rem;
}
.status-dot {
  display: inline-block;
  width: 10px; aspect-ratio: 1; border-radius: 50%; margin-right: .45rem; background: #42ff9b; box-shadow: 0 0 16px #42ff9b;
}
.floating-chip {
  position: absolute;
  padding: .85rem 1rem;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(16px);
  color: rgba(255,255,255,.94);
  box-shadow: 0 20px 48px rgba(0,0,0,.28);
  font-weight: 900;
  animation: chipFloat 5.2s ease-in-out infinite alternate;
}
.chip-cctv { left: 0; top: 14%; }
.chip-gps { right: -2%; top: 9%; animation-delay: -1.3s; }
.chip-ai { left: 4%; bottom: 10%; animation-delay: -2.2s; }
.chip-repairs { right: 0; bottom: 2%; animation-delay: -.6s; }

.glass-card {
  border: 1px solid var(--border);
  background: linear-gradient(145deg, rgba(255,255,255,.1), rgba(255,255,255,.045));
  box-shadow: 0 22px 70px rgba(0,0,0,.22);
  backdrop-filter: blur(18px);
}
.stats-section { padding-top: 2rem; padding-bottom: 2rem; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.stat-card { padding: 1.3rem; border-radius: var(--radius-md); }
.stat-card strong { display: block; color: var(--white); font-size: clamp(2rem, 4vw, 3.3rem); letter-spacing: -.06em; }
.stat-card span { color: var(--muted); font-weight: 800; }
.section-heading { max-width: 840px; margin-bottom: 2.3rem; }
.solution-grid, .product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.solution-card {
  position: relative;
  min-height: 430px;
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.solution-card::before, .product-card::before, .stack-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), rgba(255,122,0,.24), transparent 17rem);
  opacity: 0;
  transition: opacity .35s var(--ease);
  pointer-events: none;
}
.solution-card:hover::before, .product-card:hover::before, .stack-card:hover::before { opacity: 1; }
.card-icon {
  width: 62px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 20px;
  color: #220e00;
  background: linear-gradient(135deg, var(--orange), var(--orange-soft));
  font-size: 1.5rem;
  box-shadow: 0 18px 36px rgba(255,122,0,.26);
  margin-bottom: 1.4rem;
}
.solution-card ul { padding: 0; margin: 1.2rem 0 0; list-style: none; }
.solution-card li {
  position: relative;
  padding: .68rem 0 .68rem 1.65rem;
  color: rgba(234,242,255,.88);
  border-top: 1px solid rgba(255,255,255,.08);
  font-weight: 750;
}
.solution-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1rem;
  width: .55rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 12px var(--orange);
}
.hover-lift {
  transform-style: preserve-3d;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.hover-lift:hover {
  transform: translateY(-12px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  border-color: rgba(255,122,0,.44);
  box-shadow: 0 34px 90px rgba(0,0,0,.36);
}
.console-section { overflow: hidden; }
.console-layout { display: grid; grid-template-columns: .86fr 1.14fr; gap: 2rem; align-items: center; }
.console-copy p { max-width: 620px; }
.premium-console {
  position: relative;
  min-height: 520px;
  padding: 1rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.console-topbar {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem .9rem;
  border-radius: 18px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.1);
  font-size: .78rem;
  letter-spacing: .1em;
  color: rgba(234,242,255,.86);
}
.console-topbar span { width: 10px; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.4); }
.console-topbar span:first-child { background: #ff615e; }
.console-topbar span:nth-child(2) { background: #ffbd43; }
.console-topbar span:nth-child(3) { background: #35e681; }
.console-topbar strong { margin-left: auto; }
.console-grid-lines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,122,0,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(circle at 50% 50%, black, transparent 74%);
  animation: gridMove 15s linear infinite;
}
.console-panels {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.console-panel {
  min-height: 156px;
  padding: 1.2rem;
  border-radius: 24px;
  background: rgba(5, 10, 18, .54);
  border: 1px solid rgba(255,255,255,.13);
  overflow: hidden;
}
.console-panel small { color: var(--orange-soft); letter-spacing: .12em; font-weight: 950; }
.console-panel strong { display: block; margin: .45rem 0 1.1rem; font-size: 1.45rem; }
.console-panel.active { box-shadow: inset 0 0 50px rgba(255,122,0,.08); }
.mini-progress { display: block; height: 10px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.mini-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--orange), var(--orange-soft)); animation: progressBreath 2.2s ease-in-out infinite alternate; }
.mini-map { position: relative; display: block; height: 52px; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background: radial-gradient(circle at 20% 40%, rgba(255,122,0,.32), transparent 8px), radial-gradient(circle at 70% 52%, rgba(66,255,155,.28), transparent 7px); }
.mini-map i { position: absolute; width: 8px; aspect-ratio: 1; border-radius: 50%; background: var(--orange); box-shadow: 0 0 18px var(--orange); animation: pinPulse 1.5s ease-in-out infinite; }
.mini-map i:first-child { left: 23%; top: 38%; }
.mini-map i:nth-child(2) { left: 55%; top: 58%; animation-delay: -.35s; }
.mini-map i:nth-child(3) { right: 14%; top: 28%; animation-delay: -.75s; }
.wave-bars { display: flex; gap: .35rem; align-items: end; height: 56px; }
.wave-bars i { width: 14px; border-radius: 999px; background: linear-gradient(to top, var(--orange), var(--orange-soft)); animation: barWave 1.2s ease-in-out infinite alternate; }
.wave-bars i:first-child { height: 32%; }
.wave-bars i:nth-child(2) { height: 80%; animation-delay: -.2s; }
.wave-bars i:nth-child(3) { height: 55%; animation-delay: -.4s; }
.wave-bars i:nth-child(4) { height: 94%; animation-delay: -.6s; }
.support-pulse { display: block; width: 56px; aspect-ratio: 1; border-radius: 50%; background: rgba(255,122,0,.18); border: 1px solid rgba(255,122,0,.42); box-shadow: 0 0 36px rgba(255,122,0,.35); animation: corePulse 1.7s ease-out infinite; }
.console-feed {
  position: relative;
  z-index: 2;
  margin-top: 1rem;
  padding: 1rem;
  min-height: 142px;
  border-radius: 22px;
  background: rgba(5, 10, 18, .54);
  border: 1px solid rgba(255,255,255,.13);
  display: grid;
  gap: .65rem;
}
.console-feed span {
  color: rgba(234,242,255,.82);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: .92rem;
  overflow: hidden;
  white-space: nowrap;
  border-right: 1px solid rgba(255,122,0,.65);
  width: 0;
  animation: typing 5s steps(38, end) infinite;
}
.console-feed span:nth-child(2) { animation-delay: .5s; }
.console-feed span:nth-child(3) { animation-delay: 1s; }
.console-feed span:nth-child(4) { animation-delay: 1.5s; }
.products .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.product-card {
  position: relative;
  min-height: 430px;
  padding: 1.1rem;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,.13);
  background: linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.045));
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.22);
}
.product-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  padding: .5rem .7rem;
  border-radius: 999px;
  background: rgba(5,10,18,.58);
  border: 1px solid rgba(255,255,255,.15);
  color: var(--orange-soft);
  font-size: .78rem;
  font-weight: 950;
}
.product-art {
  position: relative;
  height: 170px;
  border-radius: 24px;
  margin-bottom: 1.2rem;
  background:
    radial-gradient(circle at 40% 28%, rgba(255,122,0,.42), transparent 54px),
    linear-gradient(145deg, rgba(255,255,255,.1), rgba(255,255,255,.035));
  border: 1px solid rgba(255,255,255,.12);
  overflow: hidden;
}
.product-art::before, .product-art::after {
  content: "";
  position: absolute;
  inset: 22%;
  border-radius: 28px;
  border: 2px solid rgba(255,255,255,.42);
  transform: rotate(-8deg);
}
.product-art::after { inset: 34% 27%; border-color: rgba(255,122,0,.58); transform: rotate(8deg); }
.gps-art::before { border-radius: 50%; inset: 20%; }
.gps-art::after { border-radius: 50%; inset: 38%; background: var(--orange); box-shadow: 0 0 34px var(--orange); }
.ai-art::before { border-radius: 18px; inset: 25% 18%; transform: rotate(0deg); }
.ai-art::after { border-radius: 50%; inset: 38%; }
.repair-art::before { inset: 25% 35%; border-radius: 18px; transform: rotate(0deg); }
.repair-art::after { inset: 50% 18% 30% 18%; border-radius: 999px; }
.product-card h3, .product-card p, .product-link { position: relative; z-index: 2; }
.product-link {
  position: absolute;
  left: 1.1rem;
  right: 1.1rem;
  bottom: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border-radius: 999px;
  background: rgba(255,122,0,.14);
  border: 1px solid rgba(255,122,0,.34);
  color: var(--white);
  font-weight: 950;
  overflow: hidden;
}
.digital-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: 2rem; align-items: center; }
.digital-stack { display: grid; gap: 1rem; }
.stack-card {
  position: relative;
  padding: 1.25rem 1.25rem 1.25rem 5.3rem;
  min-height: 150px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(255,255,255,.07);
  overflow: hidden;
}
.stack-card span {
  position: absolute;
  left: 1.2rem;
  top: 1.2rem;
  width: 54px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--orange), var(--orange-soft));
  color: #220e00;
  font-weight: 950;
}
.contact-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: center;
  padding: clamp(1.4rem, 4vw, 2.2rem);
  border-radius: var(--radius-lg);
}
.contact-card h2 { max-width: 760px; }
.contact-actions { justify-content: flex-end; max-width: 360px; }
.contact-actions .btn { width: 100%; }
.site-footer { padding: 2rem clamp(1rem, 4vw, 2rem); border-top: 1px solid rgba(255,255,255,.08); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--muted); }
.footer-inner p { margin: 0; }
.footer-inner a { color: var(--orange-soft); font-weight: 850; }

.reveal-up { opacity: 0; transform: translateY(30px); transition: opacity .75s var(--ease), transform .75s var(--ease); }
.reveal-up.is-visible { opacity: 1; transform: translateY(0); }
.delay-1 { transition-delay: .1s; }
.delay-2 { transition-delay: .2s; }
.delay-3 { transition-delay: .3s; }

@keyframes assemble { to { opacity: 1; transform: translateY(0) rotate(0); filter: blur(0); } }
@keyframes ripple { to { transform: translate(-50%, -50%) scale(24); opacity: 0; } }
@keyframes glowDrift { to { transform: translate(5rem, 2rem) scale(1.08); } }
@keyframes gridMove { to { background-position: 120px 120px; } }
@keyframes orbitPulse { to { transform: scale(1.08); opacity: .9; } }
@keyframes orbitSpin { to { transform: rotate(360deg); } }
@keyframes scanMove { to { background-position-y: 80px; } }
@keyframes corePulse { 0% { transform: scale(.8); opacity: .9; } 80%, 100% { transform: scale(1.35); opacity: 0; } }
@keyframes nodeFloat { to { transform: translateY(-12px); } }
@keyframes chipFloat { to { transform: translate3d(12px, -16px, 0); } }
@keyframes progressBreath { to { filter: brightness(1.5); } }
@keyframes pinPulse { 50% { transform: scale(1.55); } }
@keyframes barWave { to { transform: scaleY(.52); filter: brightness(1.5); } }
@keyframes typing { 0%, 18% { width: 0; } 42%, 72% { width: 100%; } 100% { width: 0; } }

@media (max-width: 1080px) {
  .hero-content, .console-layout, .digital-layout, .contact-card { grid-template-columns: 1fr; }
  .hero { padding-top: 7rem; }
  .hero-visual { min-height: 470px; }
  .products .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-actions { max-width: 100%; justify-content: flex-start; }
  .contact-actions .btn { width: auto; }
}

@media (max-width: 820px) {
  .nav-shell { border-radius: 28px; align-items: flex-start; }
  .nav-toggle {
    display: grid;
    place-items: center;
    width: 46px;
    aspect-ratio: 1;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 15px;
    background: rgba(255,255,255,.08);
    color: var(--white);
  }
  .nav-toggle span { display: block; width: 18px; height: 2px; background: var(--white); margin: 2px 0; border-radius: 999px; transition: transform .25s var(--ease), opacity .25s var(--ease); }
  .nav-toggle.is-open span:first-child { transform: translateY(6px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(2) { opacity: 0; }
  .nav-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .nav-links {
    position: absolute;
    top: calc(100% + .6rem);
    left: 1rem;
    right: 1rem;
    display: grid;
    gap: .25rem;
    padding: .75rem;
    border-radius: 24px;
    background: rgba(5, 10, 18, .92);
    border: 1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(20px);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s var(--ease), transform .25s var(--ease);
  }
  .nav-links.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .solution-grid { grid-template-columns: 1fr; }
  .console-panels { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .section { padding: 4.6rem 1rem; }
  .hero { padding-top: 7.2rem; }
  h1 { font-size: clamp(2.75rem, 16vw, 4.2rem); }
  .hero-visual { min-height: 410px; }
  .motion-console { width: min(94vw, 380px); }
  .floating-chip { font-size: .8rem; padding: .65rem .72rem; }
  .chip-cctv { left: -2%; top: 4%; }
  .chip-gps { right: -3%; top: 10%; }
  .chip-ai { left: -1%; bottom: 9%; }
  .chip-repairs { right: -3%; bottom: -1%; }
  .products .product-grid, .stats-grid { grid-template-columns: 1fr; }
  .product-card { min-height: 390px; }
  .digital-copy .mini-cta, .hero-actions { align-items: stretch; }
  .digital-copy .btn, .hero-actions .btn { width: 100%; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
  [data-parallax] { transform: none !important; }
  .assemble-text { color: var(--ink); }
  .assemble-text .char { opacity: 1; transform: none; filter: none; animation: none; }
}

/* === v1.05 adopted motion interface compatibility === */
body { min-height: 100vh; }
main { position: relative; z-index: 1; }
.site-header { z-index: 1000; }
.brand-logo { width: 46px; height: 46px; border-radius: 16px; object-fit: contain; background: rgba(255,255,255,.92); padding: 5px; }
.nav-links a.active { color: var(--white); background: rgba(255, 122, 0, .16); border-color: rgba(255, 122, 0, .35); }
.cart-pill { display: inline-flex; align-items: center; gap: .45rem; padding: .72rem .95rem; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid var(--border); color: var(--ink); font-weight: 800; box-shadow: none; }
.cart-pill span { min-width: 1.35rem; height: 1.35rem; display: inline-grid; place-items: center; border-radius: 999px; background: linear-gradient(135deg, var(--orange), var(--orange-deep)); color: #fff; font-size: .75rem; }
.page-hero { padding: 9.5rem 0 4rem; position: relative; overflow: hidden; background: radial-gradient(circle at 15% 20%, rgba(255,122,0,.2), transparent 25rem), radial-gradient(circle at 88% 10%, rgba(46,169,255,.14), transparent 22rem); }
.page-hero::before { content:""; position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size:70px 70px; opacity:.65; pointer-events:none; }
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1, .section-header h2, .feature-box h2 { color: var(--white); }
.page-hero p, .section-header p, .feature-box p, .muted { color: var(--muted); }
.breadcrumb, .badge, .tag { color: #fff; background: rgba(255,122,0,.14); border: 1px solid rgba(255,122,0,.32); border-radius: 999px; padding: .42rem .75rem; display: inline-flex; width: fit-content; font-weight: 800; }
.container { width: min(var(--max), calc(100% - 2rem)); margin-inline: auto; }
.section-sm { padding-top: 4rem; padding-bottom: 4rem; }
.section-header { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom: 2rem; }
.section-header h2 { margin: .6rem 0 0; font-size: clamp(2rem, 4vw, 3.3rem); line-height: 1.05; }
.grid-3, .grid-4 { display:grid; gap:1.3rem; }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { display:grid; grid-template-columns: 1.08fr .92fr; gap:2rem; align-items:center; }
.card, .service-card, .department-card, .branch-card, .quote-box, .feature-box, .form-card { background: linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.055)); border:1px solid var(--border); border-radius: var(--radius-lg); padding: 1.35rem; box-shadow: var(--shadow); color: var(--ink); }
.product-card { color: var(--ink); }
.product-card p, .card p, .service-card p, .department-card p, .branch-card p, .quote-box p, .form-card p { color: var(--muted); }
.product-image { min-height: 170px; display:grid; place-items:center; border-radius: 22px; background: radial-gradient(circle at 35% 25%, rgba(255,122,0,.22), rgba(255,255,255,.045)); border: 1px solid rgba(255,255,255,.1); overflow:hidden; margin-bottom:1rem; }
.product-image img { width: 100%; max-height: 150px; object-fit: contain; padding: 1rem; }
.price-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin: 1rem 0; }
.price { color: var(--orange-soft); }
.card-actions, .hero-actions, .form-actions, .section-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; }
.btn-small { padding:.7rem .95rem; font-size:.9rem; }
.btn-dark { background: linear-gradient(135deg, #051225, #0b1e36); color:#fff; border-color: rgba(255,255,255,.14); }
.btn-light, .btn-outline { background: rgba(255,255,255,.08); color: var(--ink); border:1px solid var(--border); }
.input, input, select, textarea { width:100%; border:1px solid rgba(255,255,255,.17); background: rgba(255,255,255,.08); color: var(--ink); border-radius: 16px; padding: .95rem 1rem; outline:none; font: inherit; }
select option { color:#07111f; }
textarea { min-height: 130px; resize: vertical; }
label { color: var(--ink); font-weight: 800; display:block; margin: .4rem 0 .35rem; }
.form-grid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:1rem; }
.form-grid .full { grid-column: 1 / -1; }
.product-toolbar { display:grid; grid-template-columns: 1.5fr .9fr auto auto; gap:.8rem; margin-bottom: 1.4rem; padding: 1rem; border:1px solid var(--border); border-radius: 24px; background: rgba(255,255,255,.07); }
.check-list { list-style:none; padding:0; margin:1.1rem 0; display:grid; gap:.8rem; }
.check-list li { color: var(--muted); padding-left: 1.8rem; position: relative; }
.check-list li::before { content:'✓'; position:absolute; left:0; color: var(--orange); font-weight:900; }
.alert { padding: 1rem 1.1rem; border-radius: 18px; background: rgba(255,122,0,.1); border: 1px solid rgba(255,122,0,.28); color: #ffd4ad; margin-bottom:1rem; }
.cart-table { width:100%; border-collapse: separate; border-spacing:0 10px; }
.cart-table th, .cart-table td { text-align:left; padding: 1rem; color: var(--ink); background: rgba(255,255,255,.06); }
.cart-table th { color: var(--orange-soft); }
.qty-input { max-width: 90px; }
.site-footer { position:relative; z-index:2; }
.footer-inner { display:flex; justify-content:space-between; gap:1rem; align-items:center; }
.whatsapp-float { position: fixed; right: 1.15rem; bottom: 1.15rem; z-index: 1200; display:inline-flex; align-items:center; justify-content:center; padding:.9rem 1rem; border-radius:999px; background: linear-gradient(135deg,#14b85a,#0d8f43); color:#fff; font-weight:900; box-shadow: 0 20px 40px rgba(0,0,0,.25); animation: whatsappPulse 2.1s infinite; }
@keyframes whatsappPulse { 0%,100% { transform: translateY(0); box-shadow:0 20px 40px rgba(0,0,0,.25);} 50% { transform: translateY(-4px); box-shadow:0 28px 55px rgba(20,184,90,.22);} }
@media (max-width: 980px) { .grid-3, .grid-4, .split, .form-grid { grid-template-columns:1fr; } .product-toolbar { grid-template-columns:1fr; } .section-header { display:block; } .cart-pill { margin-left:auto; } }
@media (max-width: 760px) { .cart-pill { padding:.55rem .75rem; } .footer-inner { flex-direction:column; text-align:center; } .page-hero { padding-top: 8rem; } }

/* -------------------------------------------------------
   OrangeMoon v1.06 Public Motion Polish
   Keeps the adopted interface, then improves inner-page hero
   motion graphics, parallax depth, hover feedback and text clarity.
------------------------------------------------------- */
.public-site main { overflow: hidden; }
.public-site .page-hero {
  min-height: 520px;
  display: flex;
  align-items: center;
  isolation: isolate;
  padding: 10rem 0 4.5rem;
  background:
    radial-gradient(circle at 16% 18%, rgba(255,122,0,.24), transparent 27rem),
    radial-gradient(circle at 88% 16%, rgba(46,169,255,.15), transparent 25rem),
    linear-gradient(135deg, rgba(5,10,18,.92), rgba(7,17,31,.94));
}
.public-site .page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 84px 84px;
  transform: perspective(900px) rotateX(58deg) translateY(12%);
  transform-origin: bottom;
  opacity: .5;
  animation: omPageGridDrift 26s linear infinite;
}
.public-site .page-hero::after {
  content: "";
  position: absolute;
  width: min(38vw, 440px);
  aspect-ratio: 1;
  right: max(1.5rem, calc((100vw - var(--max)) / 2));
  top: 52%;
  translate: 0 -50%;
  z-index: -1;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, rgba(255,122,0,.9) 0 3.8%, transparent 4.1% 100%),
    repeating-radial-gradient(circle at center, transparent 0 20%, rgba(255,255,255,.16) 20.4% 20.8%, transparent 21.2% 33%),
    conic-gradient(from 35deg, rgba(255,122,0,0), rgba(255,122,0,.58), rgba(46,169,255,.22), rgba(255,122,0,0) 34%);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 0 70px rgba(255,122,0,.22), inset 0 0 56px rgba(255,255,255,.08);
  opacity: .92;
  animation: omHeroRadarSpin 9s linear infinite, omHeroFloat 7s ease-in-out infinite alternate;
  mask-image: radial-gradient(circle, black 0 69%, transparent 72%);
}
.public-site .page-hero .container {
  position: relative;
  padding-right: min(42vw, 480px);
}
.public-site .page-hero .container::after {
  content: "SECURITY • GPS • DIGITAL";
  position: absolute;
  right: 0;
  top: 50%;
  translate: 0 -50%;
  width: min(34vw, 390px);
  min-height: 220px;
  display: grid;
  place-items: end center;
  padding: 1.1rem;
  border-radius: 34px;
  color: rgba(234,242,255,.76);
  text-align: center;
  font-size: .8rem;
  letter-spacing: .16em;
  font-weight: 950;
  background:
    linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.035)),
    radial-gradient(circle at 50% 30%, rgba(255,122,0,.18), transparent 7rem);
  border: 1px solid rgba(255,255,255,.13);
  box-shadow: 0 28px 80px rgba(0,0,0,.26);
  backdrop-filter: blur(18px);
  pointer-events: none;
}
.public-site.page-security .page-hero .container::after { content: "CCTV • ALARMS • ACCESS"; }
.public-site.page-gps .page-hero .container::after { content: "VEHICLE • HUMAN • ASSET"; }
.public-site.page-digital .page-hero .container::after { content: "AI • WEBSITES • MOBILE APPS"; }
.public-site.page-support .page-hero .container::after { content: "REPAIRS • SERVICE • SUPPORT"; }
.public-site.page-products .page-hero .container::after { content: "SHOP • INSTALL • MAINTAIN"; }
.public-site.page-branches .page-hero .container::after { content: "IBADAN • ABEOKUTA • ABUJA"; }
.public-site.page-contact .page-hero .container::after { content: "QUOTE • WHATSAPP • SUPPORT"; }
.public-site .page-hero h1 {
  max-width: 820px;
  color: #fff;
  text-shadow: 0 16px 50px rgba(0,0,0,.32);
}
.public-site .page-hero p {
  max-width: 760px;
  color: rgba(234,242,255,.78);
  font-size: clamp(1rem, 1.6vw, 1.18rem);
}
.public-site .breadcrumb,
.public-site .badge,
.public-site .tag {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 10px 28px rgba(0,0,0,.14);
}
.public-site .section {
  background:
    radial-gradient(circle at 8% 12%, rgba(255,122,0,.08), transparent 20rem),
    radial-gradient(circle at 90% 20%, rgba(46,169,255,.07), transparent 20rem);
}
.public-site .section:nth-of-type(even) {
  background:
    radial-gradient(circle at 90% 10%, rgba(255,122,0,.09), transparent 21rem),
    radial-gradient(circle at 12% 50%, rgba(46,169,255,.06), transparent 20rem);
}
.public-site .card,
.public-site .service-card,
.public-site .department-card,
.public-site .branch-card,
.public-site .quote-box,
.public-site .feature-box,
.public-site .form-card,
.public-site .product-card {
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
}
.public-site .card::after,
.public-site .service-card::after,
.public-site .department-card::after,
.public-site .branch-card::after,
.public-site .quote-box::after,
.public-site .feature-box::after,
.public-site .form-card::after,
.public-site .product-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(255,122,0,.17), transparent 28%);
  opacity: 0;
  transition: opacity .25s var(--ease);
  pointer-events: none;
}
.public-site .card:hover::after,
.public-site .service-card:hover::after,
.public-site .department-card:hover::after,
.public-site .branch-card:hover::after,
.public-site .quote-box:hover::after,
.public-site .feature-box:hover::after,
.public-site .form-card:hover::after,
.public-site .product-card:hover::after { opacity: 1; }
.public-site .hover-lift,
.public-site [data-tilt] {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(0);
  transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.public-site .hover-lift:hover,
.public-site [data-tilt]:hover {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-8px);
}
.public-site .btn,
.public-site .cart-pill,
.public-site .product-link,
.public-site button {
  will-change: transform;
}
.public-site .btn:active,
.public-site .cart-pill:active,
.public-site .product-link:active,
.public-site button:active {
  transform: translateY(-1px) scale(.985);
}
.public-site .input:focus,
.public-site input:focus,
.public-site select:focus,
.public-site textarea:focus {
  border-color: rgba(255,122,0,.55);
  box-shadow: 0 0 0 4px rgba(255,122,0,.12), 0 14px 34px rgba(0,0,0,.16);
}
.public-site label:focus-within {
  color: var(--orange-soft);
}
.public-site .product-image img {
  transition: transform .35s var(--ease), filter .35s var(--ease);
}
.public-site .product-card:hover .product-image img {
  transform: scale(1.05) translateY(-4px);
  filter: drop-shadow(0 18px 30px rgba(255,122,0,.16));
}
.public-site .check-list li {
  transition: color .22s var(--ease), transform .22s var(--ease);
}
.public-site .check-list li:hover {
  color: rgba(234,242,255,.92);
  transform: translateX(4px);
}
.public-site .form-card,
.public-site .cart-table,
.public-site .product-toolbar {
  animation: omPanelEnter .6s var(--ease) both;
}
.public-site .nav-links a::before {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: .35rem;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--orange-soft), transparent);
  transition: left .25s var(--ease), right .25s var(--ease), opacity .25s var(--ease);
  opacity: 0;
}
.public-site .nav-links a:hover::before,
.public-site .nav-links a.active::before {
  left: 1rem;
  right: 1rem;
  opacity: 1;
}
.public-site.page-home .hero::after {
  content: "";
  position: absolute;
  width: 54rem;
  aspect-ratio: 1;
  right: -18rem;
  top: -16rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,122,0,.16), transparent 68%);
  filter: blur(4px);
  z-index: 0;
  pointer-events: none;
  animation: omHeroFloat 9s ease-in-out infinite alternate;
}
.public-site.page-home .motion-console,
.public-site .page-hero::after {
  transform-origin: center;
}
@keyframes omPageGridDrift {
  to { background-position: 168px 84px, 84px 168px; }
}
@keyframes omHeroRadarSpin {
  to { rotate: 360deg; }
}
@keyframes omHeroFloat {
  from { transform: translate3d(0,0,0) scale(1); }
  to { transform: translate3d(-18px,-12px,0) scale(1.04); }
}
@keyframes omPanelEnter {
  from { opacity: 0; transform: translateY(18px) scale(.985); filter: blur(8px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@media (max-width: 1080px) {
  .public-site .page-hero .container { padding-right: 0; }
  .public-site .page-hero::after,
  .public-site .page-hero .container::after {
    position: relative;
    right: auto;
    top: auto;
    translate: none;
    display: block;
    width: min(100%, 420px);
    margin-top: 2rem;
  }
  .public-site .page-hero::after {
    position: absolute;
    right: -8rem;
    top: 10rem;
    width: 22rem;
    opacity: .32;
  }
  .public-site .page-hero .container::after {
    min-height: 150px;
    display: grid;
    place-items: end center;
  }
}
@media (max-width: 760px) {
  .public-site .page-hero { min-height: auto; padding: 8.2rem 0 3.2rem; }
  .public-site .page-hero h1 { font-size: clamp(2.35rem, 13vw, 3.8rem); }
  .public-site .page-hero::after { width: 18rem; right: -9rem; top: 9rem; }
  .public-site .page-hero .container::after { min-height: 120px; border-radius: 24px; }
  .public-site .nav-links a::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .public-site .page-hero::before,
  .public-site .page-hero::after,
  .public-site.page-home .hero::after { animation: none !important; }
}

/* v1.08 order tracking + payment proof module */
.stack-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.2rem;
}
.alert-success {
  border-color: rgba(34,197,94,.35) !important;
  background: rgba(34,197,94,.12) !important;
  color: rgba(236,253,245,.96) !important;
}
.alert-error {
  border-color: rgba(239,68,68,.35) !important;
  background: rgba(239,68,68,.12) !important;
  color: rgba(254,242,242,.96) !important;
}
.order-status-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1.2rem, 3vw, 2rem);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 32px;
  background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  box-shadow: 0 24px 80px rgba(0,0,0,.22);
  backdrop-filter: blur(18px);
  margin-bottom: 1.2rem;
}
.order-status-card h2 {
  margin: .2rem 0 .4rem;
  font-size: clamp(2rem, 6vw, 4rem);
}
.status-cluster {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .6rem;
}
.public-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: .65rem .95rem;
  font-weight: 900;
  color: #fff;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
}
.public-status-new,
.public-status-unpaid,
.public-status-pending { background: rgba(255,122,0,.72); }
.public-status-confirmed,
.public-status-processing,
.public-status-manual_pending { background: rgba(59,130,246,.72); }
.public-status-completed,
.public-status-paid,
.public-status-approved { background: rgba(34,197,94,.72); }
.public-status-cancelled,
.public-status-refunded,
.public-status-rejected { background: rgba(239,68,68,.72); }
.order-timeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: .8rem;
  margin: 1.2rem 0 2rem;
}
.timeline-step {
  position: relative;
  padding: 1rem;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.06);
  color: rgba(234,242,255,.58);
}
.timeline-step span {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-bottom: .55rem;
  background: rgba(255,255,255,.24);
  box-shadow: 0 0 0 6px rgba(255,255,255,.06);
}
.timeline-step.is-active {
  color: #fff;
  background: linear-gradient(135deg, rgba(255,122,0,.22), rgba(255,255,255,.08));
}
.timeline-step.is-active span {
  background: var(--orange-soft);
  box-shadow: 0 0 0 7px rgba(255,122,0,.15), 0 0 30px rgba(255,122,0,.38);
}
.order-detail-grid {
  align-items: start;
}
.order-items-list,
.proof-mini-card {
  display: grid;
  gap: .7rem;
}
.order-item-row,
.proof-mini-card {
  padding: .9rem 1rem;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
}
.order-item-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.order-item-row small,
.proof-mini-card small,
.proof-mini-card span {
  display: block;
  color: rgba(234,242,255,.68);
}
.order-total-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: 1.1rem;
}
@media (max-width: 800px) {
  .order-status-card { align-items: flex-start; flex-direction: column; }
  .status-cluster { justify-content: flex-start; }
  .order-timeline { grid-template-columns: 1fr 1fr; }
}

/* v1.10 Customer Account Center */
.customer-stats .stat-card strong { display:block; font-size: clamp(2rem, 5vw, 4rem); color: var(--orange); line-height: 1; }
.dashboard-lists { display: grid; gap: 1.4rem; }
.glass-panel { background: rgba(255,255,255,0.86); border: 1px solid rgba(255,255,255,0.65); box-shadow: 0 28px 75px rgba(6, 24, 52, 0.12); border-radius: 28px; padding: clamp(1.1rem, 3vw, 2rem); backdrop-filter: blur(18px); }
.glass-panel h2 { margin-top: 0; color: var(--navy); }
.responsive-table { overflow-x: auto; border-radius: 18px; }
.public-table { width: 100%; border-collapse: collapse; min-width: 720px; background: rgba(255,255,255,0.78); }
.public-table th { background: var(--navy); color: #fff; text-align: left; padding: 1rem; font-size: .88rem; }
.public-table td { padding: .95rem 1rem; border-bottom: 1px solid rgba(12,34,66,.10); color: #1d2d44; vertical-align: top; }
.public-table tr:hover td { background: rgba(255, 102, 0, .06); }
.mini-link { display: inline-flex; align-items: center; justify-content: center; padding: .45rem .7rem; border-radius: 999px; background: rgba(255, 102, 0, .12); color: var(--orange); font-weight: 800; text-decoration: none; border: 0; cursor: pointer; font-family: inherit; }
.mini-link:hover { transform: translateY(-1px); background: rgba(255, 102, 0, .22); }
.danger-link { color: #b42318; background: rgba(180,35,24,.10); }


/* v1.11 Insights */
.insights-grid .insight-card,
.insight-card {
    position: relative;
    overflow: hidden;
}
.insight-card::after {
    content: "";
    position: absolute;
    inset: auto -20% -35% 20%;
    height: 150px;
    background: radial-gradient(circle, rgba(255,122,26,.20), transparent 62%);
    pointer-events: none;
}
.insight-meta {
    display: grid;
    gap: 6px;
    color: var(--muted);
    margin: 14px 0;
}
.article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 28px;
    align-items: start;
}
.article-body {
    padding: clamp(22px, 4vw, 42px);
}
.article-body p {
    font-size: 1.02rem;
    line-height: 1.85;
    color: rgba(255,255,255,.84);
    margin: 0 0 1.2rem;
}
.article-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 20px;
    color: var(--muted);
}
.article-tags {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.78);
}
.article-cta,
.center-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}
.center-actions { justify-content: center; }
.article-sidebar {
    display: grid;
    gap: 18px;
    position: sticky;
    top: 96px;
}
.sidebar-card {
    padding: 22px;
}
.sidebar-card h3 { margin-top: 0; }
.sidebar-card a {
    display: block;
    color: rgba(255,255,255,.86);
    text-decoration: none;
    border-top: 1px solid rgba(255,255,255,.10);
    padding: 12px 0;
}
.sidebar-card a:hover { color: var(--orange); }
.checkbox-line {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 16px 0;
    color: rgba(255,255,255,.84);
}
.btn-danger {
    background: rgba(220, 38, 38, .13);
    color: #fecaca;
    border-color: rgba(248, 113, 113, .45);
}
@media (max-width: 900px) {
    .article-layout { grid-template-columns: 1fr; }
    .article-sidebar { position: static; }
}

/* v1.12 Portfolio / Case Studies / Testimonials */
.public-site.page-portfolio .page-hero .container::after { content: "PORTFOLIO • CASE STUDIES • TRUST"; }
.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin: 0 0 2rem;
}
.filter-pills a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .74rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.82);
  text-decoration: none;
  font-weight: 850;
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.filter-pills a:hover,
.filter-pills a.active {
  transform: translateY(-2px);
  background: rgba(255,122,0,.18);
  color: #fff;
  border-color: rgba(255,122,0,.5);
}
.case-grid .case-card {
  min-height: 455px;
}
.case-art {
  position: relative;
  height: 155px;
  border-radius: 28px;
  margin: 0 0 1rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 25%, rgba(255,255,255,.22), transparent 9rem),
    linear-gradient(135deg, rgba(255,122,0,.24), rgba(37,99,235,.15));
  border: 1px solid rgba(255,255,255,.12);
}
.case-art::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 24px;
  background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(to bottom, #000, transparent 84%);
}
.case-art::after {
  content: "";
  position: absolute;
  width: 68px;
  aspect-ratio: 1;
  border-radius: 50%;
  right: 28px;
  top: 42px;
  background: radial-gradient(circle, rgba(255,122,0,.78), rgba(255,122,0,.12) 58%, transparent 70%);
  box-shadow: 0 0 54px rgba(255,122,0,.45);
  animation: corePulse 2.8s ease-in-out infinite;
}
.case-art span {
  position: absolute;
  left: 24px;
  bottom: 22px;
  z-index: 2;
  color: rgba(255,255,255,.92);
  font-weight: 950;
  letter-spacing: .18em;
  font-size: .82rem;
}
.case-art-security { background: linear-gradient(135deg, rgba(255,122,0,.28), rgba(255,60,60,.15)); }
.case-art-gps { background: linear-gradient(135deg, rgba(255,122,0,.22), rgba(34,197,94,.18)); }
.case-art-digital { background: linear-gradient(135deg, rgba(255,122,0,.20), rgba(59,130,246,.20)); }
.case-art-support { background: linear-gradient(135deg, rgba(255,122,0,.20), rgba(168,85,247,.17)); }
.case-meta {
  display: grid;
  gap: .3rem;
  color: rgba(234,242,255,.64);
  font-size: .9rem;
  margin: .8rem 0 1rem;
}
.case-study-body h2 {
  color: #fff;
  margin: 1.5rem 0 .6rem;
}
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.testimonial-card {
  padding: clamp(1.2rem, 3vw, 1.7rem);
  border-radius: 28px;
}
.testimonial-card p,
.testimonial-mini p {
  color: rgba(255,255,255,.84);
  line-height: 1.7;
}
.testimonial-card strong,
.testimonial-mini strong {
  display: block;
  color: #fff;
}
.testimonial-card small,
.testimonial-mini small {
  display: block;
  color: rgba(234,242,255,.62);
  margin-top: .35rem;
}
.stars {
  color: var(--orange-soft);
  letter-spacing: .12em;
  font-size: 1rem;
  margin-bottom: .75rem;
}
.testimonial-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.testimonial-mini {
  padding: 1.1rem;
  border-radius: 24px;
}
.testimonial-mini strong {
  color: var(--orange-soft);
  letter-spacing: .1em;
}
.all-testimonials { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 980px) {
  .testimonial-grid,
  .testimonial-strip,
  .all-testimonials { grid-template-columns: 1fr; }
}

/* v1.13 public invoice centre */
.invoice-public-card { padding: clamp(1.2rem, 3vw, 2rem); }
.invoice-public-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1.3rem;
}
.invoice-public-head h2 { margin-bottom: .35rem; }
.invoice-public-total {
    min-width: 220px;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(255,90,0,.96), rgba(255,139,44,.92));
    color: #fff;
    padding: 1rem 1.2rem;
    box-shadow: 0 24px 55px rgba(255,90,0,.22);
}
.invoice-public-total span, .invoice-public-total small { display:block; color: rgba(255,255,255,.78); font-weight: 800; }
.invoice-public-total strong { display:block; font-size: clamp(1.7rem, 4vw, 2.5rem); line-height:1; margin:.35rem 0; }
.invoice-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 1rem;
    margin: 1.4rem 0;
}
.invoice-summary-grid div {
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 18px;
    padding: 1rem;
}
.invoice-summary-grid strong { display:block; color: var(--orange); margin-bottom:.35rem; }
.invoice-summary-grid span { color: var(--ink); font-weight: 750; }
.payment-methods-public { margin-top: 1.4rem; }
.payment-methods-public .feature-card p { font-size: .95rem; }
@media(max-width: 850px){
    .invoice-public-head { flex-direction: column; }
    .invoice-public-total { width: 100%; }
    .invoice-summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width: 560px){ .invoice-summary-grid { grid-template-columns: 1fr; } }

/* v1.15B Dedicated homepage testimonies section */
.home-testimonies {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 20%, rgba(255,122,0,.18), transparent 34rem),
    radial-gradient(circle at 88% 30%, rgba(15,44,86,.38), transparent 34rem),
    linear-gradient(135deg, rgba(7,25,54,.98), rgba(10,31,66,.96));
}
.home-testimonies::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at center, black 0, transparent 72%);
  pointer-events: none;
}
.testimony-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.25rem;
}
.testimony-head h2 {
  color: #fff;
  max-width: 840px;
  margin: .2rem 0 0;
}
.testimony-head .eyebrow {
  color: var(--orange-soft, #ffb46b);
}
.home-testimony-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.home-testimony-card {
  min-height: 280px;
  padding: clamp(1.15rem, 2.8vw, 1.65rem);
  border-radius: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 28px 75px rgba(0,0,0,.24);
}
.home-testimony-card.featured-testimony {
  transform: translateY(-12px);
  border-color: rgba(255,122,0,.45);
  box-shadow: 0 35px 90px rgba(255,90,0,.16), 0 30px 80px rgba(0,0,0,.26);
}
.home-testimony-card p {
  color: rgba(255,255,255,.9);
  font-size: 1rem;
  line-height: 1.75;
  margin: 1rem 0;
}
.testimony-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
}
.testimony-topline strong {
  color: var(--orange-soft, #ffb46b);
  letter-spacing: .09em;
  white-space: nowrap;
}
.testimony-person {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.12);
}
.testimony-person > span {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--orange, #ff5a00), #ffb46b);
  color: #fff;
  font-weight: 950;
  box-shadow: 0 14px 35px rgba(255,90,0,.24);
}
.testimony-person strong,
.testimony-person small {
  display: block;
}
.testimony-person strong {
  color: #fff;
}
.testimony-person small {
  color: rgba(234,242,255,.7);
  font-size: .9rem;
}
@media (max-width: 980px) {
  .testimony-head { align-items: flex-start; flex-direction: column; }
  .home-testimony-grid { grid-template-columns: 1fr; }
  .home-testimony-card.featured-testimony { transform: none; }
}


/* v1.16 Legal + SEO launch readiness */
.footer-links a { color: rgba(255,255,255,.82); text-decoration: none; }
.footer-links a:hover { color: #ff8a2a; }
.legal-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
.legal-body { padding: 32px; }
.legal-body h2 { margin-top: 0; }
.legal-body p { color: rgba(255,255,255,.84); line-height: 1.8; }
.legal-meta { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 24px; }
.legal-meta span { border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 8px 12px; color: rgba(255,255,255,.74); background: rgba(255,255,255,.06); }
.legal-list a { display: block; margin: 10px 0; padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,.07); color: rgba(255,255,255,.86); text-decoration: none; border: 1px solid rgba(255,255,255,.1); }
.legal-list a:hover, .legal-list a.active { background: rgba(255,122,24,.18); border-color: rgba(255,122,24,.45); color: #fff; transform: translateY(-1px); }
.cookie-consent { position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 1200; max-width: 920px; margin: 0 auto; display: flex; gap: 18px; justify-content: space-between; align-items: center; padding: 18px; border-radius: 24px; border: 1px solid rgba(255,255,255,.16); background: rgba(8, 15, 30, .92); backdrop-filter: blur(18px); box-shadow: 0 24px 60px rgba(0,0,0,.35); transform: translateY(30px); opacity: 0; transition: .25s ease; }
.cookie-consent.is-visible { transform: translateY(0); opacity: 1; }
.cookie-consent strong { color: #fff; display: block; margin-bottom: 4px; }
.cookie-consent p { margin: 0; color: rgba(255,255,255,.78); font-size: .92rem; }
.cookie-actions { display: flex; gap: 10px; flex-shrink: 0; }
.seo-tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 860px) {
    .legal-layout { grid-template-columns: 1fr; }
    .cookie-consent { flex-direction: column; align-items: flex-start; }
    .seo-tool-grid { grid-template-columns: 1fr; }
}

/* v1.17 product inventory public polish */
.stock-line {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin: 10px 0 14px;
    padding: 9px 11px;
    border-radius: 14px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.13);
    color: rgba(255,255,255,.86);
    font-weight: 800;
}
.stock-line small { color: rgba(255,255,255,.66); font-weight: 700; }
.product-meta-grid {
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0;
}
.product-meta-grid div {
    padding: 13px 14px;
    border-radius: 18px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
}
.product-meta-grid .wide { grid-column: 1 / -1; }
.product-meta-grid strong { display:block; color:#fff; margin-bottom:5px; }
.product-meta-grid span { color: rgba(255,255,255,.78); }
@media (max-width: 640px) { .product-meta-grid { grid-template-columns:1fr; } }

/* OrangeMoon v1.17B Product Image Slots */
.public-site .product-image-slot {
  position: relative;
  min-height: 210px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.04)),
    radial-gradient(circle at 30% 20%, rgba(255,122,0,.22), transparent 11rem),
    rgba(7, 25, 54, .44);
}
.public-site .product-image-slot img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  padding: 1rem;
}
.public-site .image-slot-label {
  position: absolute;
  left: .9rem;
  bottom: .8rem;
  padding: .35rem .65rem;
  border-radius: 999px;
  color: rgba(255,255,255,.92);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: rgba(7, 25, 54, .72);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
}
.product-media-panel {
  display: grid;
  gap: 1rem;
}
.product-main-image {
  min-height: 360px;
  margin-bottom: 0;
}
.product-gallery-slots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .8rem;
}
.product-gallery-slot {
  min-height: 110px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: rgba(234,242,255,.68);
  font-weight: 900;
  background: rgba(255,255,255,.07);
  border: 1px dashed rgba(255,255,255,.20);
}
.product-gallery-slot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: .55rem;
}
.product-gallery-slot.empty {
  background:
    linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.03)),
    repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 8px, transparent 8px 16px);
}
@media (max-width: 760px) {
  .product-gallery-slots { grid-template-columns: 1fr; }
  .product-main-image { min-height: 260px; }
}

/* v1.18 catalog filters */
.product-filter-toolbar {
    grid-template-columns: 1.3fr repeat(4, minmax(150px, .8fr)) minmax(110px,.5fr) minmax(110px,.5fr) auto auto;
    align-items: center;
}
.price-filter-input { min-width: 110px; }
.catalog-result-line {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin: 18px 0 24px;
    color: rgba(255,255,255,.82);
    font-weight: 700;
}
.catalog-result-line strong {
    color: var(--orange, #ff6a00);
    font-size: 1.15rem;
}
.catalog-result-line span {
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.72);
    font-size: .84rem;
}
@media (max-width: 1100px) {
    .product-filter-toolbar { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .product-filter-toolbar { grid-template-columns: 1fr; }
}


/* v1.19 Solution Packages */
.package-grid .package-card { position: relative; overflow: hidden; }
.package-meta-line { display:flex; justify-content:space-between; gap:12px; color:rgba(255,255,255,.72); font-size:.88rem; margin:10px 0 14px; }
.package-detail-layout .package-quick-notes { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px; }
.package-detail-layout .package-quick-notes div,
.package-note { border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06); border-radius:18px; padding:14px; margin-top:12px; }
.package-detail-layout .package-quick-notes strong,
.package-note strong { display:block; color:#fff; margin-bottom:4px; }
.package-detail-layout .package-quick-notes span,
.package-note { color:rgba(255,255,255,.82); }
.public-table { color:#0b1b37; background:#fff; border-radius:18px; overflow:hidden; }
.public-table a { color:#ff5a00; font-weight:800; }
.section-soft { background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.07)); }
.packages-preview .product-image { min-height: 160px; }
@media (max-width: 800px){ .package-detail-layout .package-quick-notes{grid-template-columns:1fr;} }
.public-table { width:100%; border-collapse:collapse; }
.public-table th, .public-table td { padding:14px 16px; border-bottom:1px solid rgba(10,27,55,.10); text-align:left; }
.public-table th { background:#0b1b37; color:#fff; }
.package-table-wrap { border-radius:20px; overflow:hidden; background:#fff; box-shadow:0 20px 60px rgba(0,0,0,.08); }


/* v1.20 Checkout fulfillment polish */
.checkout-flow-grid label { position: relative; }
.fulfillment-helper h3 { margin-top: 1rem; }
.order-total-row span { color: inherit; }
.motion-list { display: grid; gap: .75rem; padding-left: 1.2rem; }
.motion-list li { padding: .45rem .25rem; }

/* v1.21 Support Tickets + WhatsApp Commerce */
.support-steps{display:grid;gap:14px;margin:20px 0}.support-steps div{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1px solid rgba(255,255,255,.16);border-radius:18px;background:rgba(255,255,255,.06)}.support-steps strong{display:grid;place-items:center;min-width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#ff7a00,#ffb000);color:#111;font-weight:900}.ticket-detail-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(320px,.7fr);gap:24px;margin-top:26px}.ticket-thread{margin-top:26px}.ticket-reply{padding:16px 18px;margin:12px 0;border-radius:18px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07)}.ticket-reply strong{display:block;color:#fff;margin-bottom:6px}.ticket-reply small{opacity:.72;font-weight:500}.ticket-reply p{margin:0;color:rgba(255,255,255,.86)}.ticket-reply-admin{border-color:rgba(255,122,0,.38);background:rgba(255,122,0,.12)}.ticket-reply-customer{border-color:rgba(85,180,255,.28);background:rgba(85,180,255,.08)}.ticket-lookup-card{margin-bottom:24px}.whatsapp-commerce-grid .card{min-height:250px}.whatsapp-commerce-float{position:fixed;right:18px;bottom:18px;z-index:80;display:flex;flex-direction:column;align-items:flex-end;gap:10px}.whatsapp-commerce-float .whatsapp-float{position:static}.whatsapp-mini-panel{width:210px;padding:14px;border-radius:18px;background:rgba(8,18,35,.9);border:1px solid rgba(255,255,255,.16);box-shadow:0 18px 45px rgba(0,0,0,.28);backdrop-filter:blur(14px);display:none}.whatsapp-commerce-float:hover .whatsapp-mini-panel,.whatsapp-commerce-float:focus-within .whatsapp-mini-panel{display:grid;gap:8px}.whatsapp-mini-panel strong{color:#fff}.whatsapp-mini-panel a{color:#fff;text-decoration:none;font-size:.9rem;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.08)}.whatsapp-mini-panel a:hover{background:rgba(255,122,0,.25)}.card-actions{gap:8px;flex-wrap:wrap}.btn-light{background:rgba(255,255,255,.9)!important;color:#0b1628!important;border-color:rgba(255,255,255,.85)!important}.feature-list{display:grid;gap:10px;margin:16px 0;padding-left:20px}.feature-list li{color:rgba(255,255,255,.86)}
@media (max-width: 860px){.ticket-detail-grid{grid-template-columns:1fr}.whatsapp-mini-panel{display:none!important}.whatsapp-commerce-float{right:12px;bottom:12px}}

/* v1.22 public product branch availability */
.branch-availability-box{margin:18px 0;padding:16px;border:1px solid rgba(255,91,0,.22);border-radius:22px;background:rgba(255,255,255,.78)}.branch-availability-box h3{margin:0 0 12px;color:#0c2144}.branch-availability-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.branch-availability-grid div{border-radius:14px;padding:10px 12px;background:rgba(12,33,68,.06)}.branch-availability-grid strong,.branch-availability-grid span{display:block}.branch-availability-grid span{font-size:.9rem;color:#5d6675}@media(max-width:680px){.branch-availability-grid{grid-template-columns:1fr}}

/* v1.23 Homepage Storefront Showcase + Product Gallery Interaction */
.storefront-showcase {
  position: relative;
  overflow: hidden;
}
.storefront-showcase::before {
  content: "";
  position: absolute;
  inset: 4% auto auto -8%;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,104,0,.25), transparent 68%);
  filter: blur(8px);
  pointer-events: none;
}
.storefront-product-grid .storefront-card {
  min-height: 100%;
}
.storefront-image-wrap {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 210px;
  border-radius: 24px;
  overflow: hidden;
  margin: 0 0 1rem;
  text-decoration: none;
  background:
    linear-gradient(145deg, rgba(255,255,255,.95), rgba(238,244,255,.86)),
    radial-gradient(circle at 24% 18%, rgba(255,115,0,.18), transparent 48%);
  border: 1px solid rgba(255,255,255,.24);
  box-shadow: inset 0 0 0 1px rgba(10,27,55,.04);
}
.storefront-image-wrap img {
  width: 100%;
  height: 210px;
  object-fit: contain;
  padding: 1.05rem;
  transition: transform .35s ease, filter .35s ease;
}
.storefront-card:hover .storefront-image-wrap img {
  transform: scale(1.06) translateY(-3px);
  filter: drop-shadow(0 18px 24px rgba(8,20,38,.22));
}
.storefront-image-wrap span {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: .42rem .7rem;
  border-radius: 999px;
  font-weight: 900;
  font-size: .78rem;
  color: #fff;
  background: rgba(7,25,54,.82);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
}
.category-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .8rem;
  margin-top: 2rem;
}
.category-strip a {
  text-decoration: none;
  color: #fff;
  font-weight: 900;
  padding: .85rem 1.1rem;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  transition: transform .22s ease, background .22s ease;
}
.category-strip a:hover {
  transform: translateY(-2px);
  background: rgba(255,104,0,.22);
}
.product-gallery-slot.product-gallery-thumb {
  cursor: pointer;
  border-style: solid;
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
}
.product-gallery-slot.product-gallery-thumb:hover,
.product-gallery-slot.product-gallery-thumb.is-active {
  transform: translateY(-3px);
  border-color: rgba(255,104,0,.65);
  background: rgba(255,104,0,.10);
}
.product-lightbox-target img {
  transition: transform .25s ease, opacity .2s ease;
}
.product-lightbox-target.is-swapping img {
  opacity: .45;
  transform: scale(.98);
}
@media (max-width: 760px) {
  .storefront-image-wrap,
  .storefront-image-wrap img { min-height: 180px; height: 180px; }
}

/* v1.24 organized public navigation */
.public-site .grouped-nav {
  gap: .32rem;
}
.public-site .nav-group {
  position: relative;
}
.public-site .nav-group summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .85rem 1rem;
  border-radius: 999px;
  color: rgba(234,242,255,.84);
  font-weight: 800;
  font-size: .94rem;
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
  user-select: none;
}
.public-site .nav-group summary::-webkit-details-marker { display: none; }
.public-site .nav-group summary::after {
  content: "▾";
  font-size: .68rem;
  color: rgba(255,255,255,.62);
  transition: transform .25s var(--ease);
}
.public-site .nav-group[open] summary::after { transform: rotate(180deg); }
.public-site .nav-group:hover summary,
.public-site .nav-group[open] summary,
.public-site .nav-group.active summary {
  color: var(--white);
  background: rgba(255,255,255,.10);
  transform: translateY(-2px);
}
.public-site .nav-dropdown {
  position: absolute;
  top: calc(100% + .65rem);
  left: 0;
  z-index: 30;
  min-width: 245px;
  padding: .7rem;
  border-radius: 22px;
  background: rgba(5, 10, 18, .96);
  border: 1px solid rgba(255,255,255,.13);
  box-shadow: 0 28px 70px rgba(0,0,0,.34);
  backdrop-filter: blur(22px);
  display: grid;
  gap: .24rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px) scale(.98);
  transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.public-site .nav-dropdown-wide { min-width: 290px; }
.public-site .nav-group[open] .nav-dropdown,
.public-site .nav-group:hover .nav-dropdown,
.public-site .nav-group:focus-within .nav-dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.public-site .nav-dropdown a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  border-radius: 14px;
  padding: .76rem .85rem;
  white-space: nowrap;
  background: transparent;
}
.public-site .nav-dropdown a:hover,
.public-site .nav-dropdown a.active {
  background: rgba(255,122,0,.14);
  color: var(--white);
  transform: translateX(4px);
}
.public-site .nav-count {
  min-width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  padding: 0 .35rem;
  font-size: .78rem;
  font-weight: 900;
}
.public-site .nav-home {
  font-weight: 900;
}
@media (min-width: 821px) {
  .public-site .nav-group:hover .nav-dropdown { display: grid; }
}
@media (max-width: 820px) {
  .public-site .grouped-nav { align-items: stretch; }
  .public-site .nav-group { width: 100%; }
  .public-site .nav-group summary {
    width: 100%;
    justify-content: space-between;
    border-radius: 16px;
    padding: .86rem 1rem;
  }
  .public-site .nav-dropdown,
  .public-site .nav-dropdown-wide {
    position: static;
    min-width: 0;
    width: 100%;
    margin-top: .25rem;
    box-shadow: none;
    background: rgba(255,255,255,.05);
    border-radius: 18px;
    display: none;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
  .public-site .nav-group[open] .nav-dropdown { display: grid; }
  .public-site .nav-dropdown a { white-space: normal; }
  .public-site .nav-links .nav-cta { justify-content: center; }
}


/* -------------------------------------------------------
   OrangeMoon v1.31B Heading and Readability Stabilizer
   Keeps premium look but stops oversized headings from
   breaking awkwardly on public pages and smaller screens.
------------------------------------------------------- */
.public-site h1,
.public-site h2,
.public-site h3,
.public-site .section-heading h2,
.public-site .page-hero h1,
.public-site .hero h1 {
    text-wrap: balance;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: manual;
}
.public-site h1,
.public-site .page-hero h1,
.public-site .hero h1 {
    font-size: clamp(2.35rem, 5.2vw, 4.65rem) !important;
    line-height: 1.03 !important;
    letter-spacing: -0.052em !important;
    max-width: 980px;
}
.public-site h2,
.public-site .section-heading h2,
.public-site .section-header h2,
.public-site .console-copy h2,
.public-site .experience-copy h2 {
    font-size: clamp(1.85rem, 3.2vw, 3.05rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.042em !important;
    max-width: 900px;
}
.public-site h3,
.public-site .card h3,
.public-site .product-card h3,
.public-site .service-card h3,
.public-site .branch-card h3,
.public-site .solution-card h3 {
    font-size: clamp(1.12rem, 1.45vw, 1.38rem) !important;
    line-height: 1.18 !important;
    letter-spacing: -0.018em;
}
.public-site .section-heading,
.public-site .section-header {
    max-width: 980px;
}
.public-site .assemble-text {
    color: inherit;
    min-height: auto;
    white-space: normal;
}
.public-site .assemble-text .word {
    display: inline-block;
    white-space: nowrap;
}
.public-site .assemble-text .char {
    display: inline-block;
}
.public-site .hero-lead,
.public-site .page-hero p,
.public-site .section-heading p {
    max-width: 780px;
}
@media (max-width: 980px) {
    .public-site h1,
    .public-site .page-hero h1,
    .public-site .hero h1 {
        font-size: clamp(2.1rem, 7vw, 3.35rem) !important;
        line-height: 1.07 !important;
        letter-spacing: -0.042em !important;
    }
    .public-site h2,
    .public-site .section-heading h2,
    .public-site .section-header h2,
    .public-site .console-copy h2,
    .public-site .experience-copy h2 {
        font-size: clamp(1.65rem, 5.5vw, 2.45rem) !important;
        line-height: 1.12 !important;
    }
}
@media (max-width: 650px) {
    .public-site h1,
    .public-site .page-hero h1,
    .public-site .hero h1 {
        font-size: clamp(1.82rem, 9vw, 2.55rem) !important;
        line-height: 1.12 !important;
        letter-spacing: -0.032em !important;
    }
    .public-site h2,
    .public-site .section-heading h2,
    .public-site .section-header h2,
    .public-site .console-copy h2,
    .public-site .experience-copy h2 {
        font-size: clamp(1.48rem, 7vw, 2rem) !important;
        line-height: 1.16 !important;
        letter-spacing: -0.028em !important;
    }
    .public-site .section { padding-left: 1rem; padding-right: 1rem; }
}

/* OrangeMoon v1.35: readable light surfaces + digital download storefront */
.public-site .cart-table {
  background: #ffffff;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.16);
}
.public-site .cart-table th {
  background: #f8fafc;
  color: #d96500;
  font-weight: 900;
  border-bottom: 1px solid #dde4ec;
}
.public-site .cart-table td {
  background: #ffffff;
  color: #17243a;
  border-bottom: 1px solid #e5eaf0;
}
.public-site .cart-table tbody tr:last-child td { border-bottom: 0; }
.public-site .cart-table td strong { color: #0b1b37; }
.public-site .cart-table td small { color: #607087; }
.public-site .cart-table .input,
.public-site .cart-table input,
.public-site .cart-table select {
  background: #f7f9fc;
  color: #0b1b37;
  border-color: #ccd5df;
}
.public-site .cart-table .input:focus,
.public-site .cart-table input:focus,
.public-site .cart-table select:focus {
  border-color: #ff7a00;
  box-shadow: 0 0 0 4px rgba(255,122,0,.12);
}
/* Keep all explicitly light public data surfaces dark-on-light. */
.public-site .public-table td,
.public-site .branch-availability-box,
.public-site .branch-availability-box p,
.public-site .branch-availability-box li { color: #1d2d44; }

.digital-product-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: .35rem 0 .2rem;
  padding: .38rem .68rem;
  border-radius: 999px;
  background: rgba(46,169,255,.12);
  border: 1px solid rgba(46,169,255,.28);
  color: #b9e3ff;
  font-size: .78rem;
  font-weight: 900;
}
.digital-download-note {
  margin: 1rem 0;
  padding: 1rem 1.05rem;
  border-radius: 18px;
  background: rgba(46,169,255,.10);
  border: 1px solid rgba(46,169,255,.25);
  color: rgba(234,242,255,.9);
}
.download-ready-card {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 18px;
  background: rgba(16,185,129,.10);
  border: 1px solid rgba(16,185,129,.28);
}
.download-ready-card strong { color: #d9fff0; }
.download-ready-card p,
.download-ready-card small { color: rgba(234,242,255,.78); }
.download-ready-card .btn { margin-top: .7rem; }
@media (max-width: 760px) {
  .public-site .cart-table { min-width: 720px; }
}
.public-site .invoice-summary-grid div { color:#1d2d44; }
.public-site .invoice-summary-grid span { color:#1d2d44; }

/* OrangeMoon v1.37: display currency selector + geographic address controls */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.public-site .currency-switcher {
  display: inline-flex;
  align-items: center;
  margin: 0 .1rem;
}
.public-site .currency-switcher select {
  min-width: 76px;
  height: 42px;
  padding: 0 1.75rem 0 .72rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color: #fff;
  font: inherit;
  font-size: .82rem;
  font-weight: 900;
  cursor: pointer;
  outline: none;
}
.public-site .currency-switcher select:focus {
  border-color: rgba(255,122,0,.72);
  box-shadow: 0 0 0 3px rgba(255,122,0,.15);
}
.public-site .currency-switcher option { color: #101827; background: #fff; }
.public-site .om-country-select,
.public-site .om-state-select,
.public-site .om-lga-select { width: 100%; }
@media (max-width: 820px) {
  .public-site .currency-switcher { width: 100%; margin: .25rem 0; }
  .public-site .currency-switcher select { width: 100%; border-radius: 16px; }
}
.public-site .currency-display-note {
  margin: .8rem 0 1rem;
  padding: .75rem .9rem;
  border: 1px solid rgba(255,122,0,.24);
  border-radius: 14px;
  background: rgba(255,122,0,.08);
  color: rgba(234,242,255,.82);
  font-size: .84rem;
  line-height: 1.55;
}
.public-site .currency-display-note.compact { margin: .45rem 0 .8rem; padding: .55rem .7rem; }