/* ===== The Products Boxes – State-of-the-Art Design Layer =====
   Loaded on every page on top of Tailwind. Lifts the whole site:
   modern type, layered shadows, glass nav, gradient meshes,
   scroll-reveal, card micro-interactions. */

:root {
    --navy: #0a2540;
    --navy-2: #102f52;
    --brand: #f15a24;
    --brand-2: #ff7a45;
    --brand-700: #d8410f;
    --ink: #1f2937;
    --muted: #5b6776;
    --ring: rgba(241, 90, 36, 0.35);
    --shadow-sm: 0 1px 2px rgba(10, 37, 64, .06), 0 2px 8px rgba(10, 37, 64, .05);
    --shadow-md: 0 6px 18px rgba(10, 37, 64, .08), 0 2px 6px rgba(10, 37, 64, .05);
    --shadow-lg: 0 18px 48px -12px rgba(10, 37, 64, .25);
    --shadow-brand: 0 12px 28px -8px rgba(241, 90, 36, .45);
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    color: var(--ink);
    letter-spacing: -0.011em;
}

h1, h2, h3, h4 { letter-spacing: -0.02em; }

/* ---- Selection & focus ---- */
::selection { background: var(--brand); color: #fff; }
input:focus, select:focus, textarea:focus { outline: none; }
a:focus-visible, button:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: 6px;
}

/* ---- Layered, richer shadows on Tailwind's flat ones ---- */
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }

/* ---- Glass sticky header that tightens on scroll ---- */
header.sticky {
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    backdrop-filter: saturate(160%) blur(10px);
    background: rgba(255, 255, 255, .82);
    border-bottom: 1px solid rgba(10, 37, 64, .06);
    transition: box-shadow .3s ease, background .3s ease;
}
header.scrolled {
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 8px 30px -12px rgba(10, 37, 64, .25);
}

/* Animated nav underline — top-level links only, NOT dropdown rows */
nav > a, nav > .group > a { position: relative; }
nav > a::after, nav > .group > a::after {
    content: "";
    position: absolute;
    left: 0; bottom: -2px;
    height: 2px; width: 0;
    background: linear-gradient(90deg, var(--brand), var(--brand-2));
    border-radius: 2px;
    transition: width .28s ease;
}
nav > a:hover::after, nav > .group > a:hover::after { width: 100%; }
/* Active link keeps a steady gradient underline instead of the flat border */
nav > a.border-orange-600 { border-bottom-color: transparent !important; }
nav > a.border-orange-600::after { width: 100%; }

/* ---- Gradient mesh + grain on dark sections (hero, why-choose, footer) ---- */
.bg-\[\#0a2540\], .from-\[\#0a2540\] {
    position: relative;
}
section.relative.bg-gradient-to-r.from-\[\#0a2540\]::before,
section.bg-\[\#0a2540\]::before {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(60% 80% at 85% 10%, rgba(241, 90, 36, .28), transparent 60%),
        radial-gradient(50% 70% at 0% 100%, rgba(56, 132, 255, .22), transparent 60%);
    pointer-events: none;
    z-index: 0;
}
/* ponytail: :not(.absolute) so this content-lift doesn't clobber position:absolute decorations */
section.relative.bg-gradient-to-r.from-\[\#0a2540\] > *:not(.absolute),
section.bg-\[\#0a2540\] > *:not(.absolute) { position: relative; z-index: 1; }

/* ---- Buttons: shine + lift ---- */
a.bg-orange-600, button.bg-orange-600, a.bg-brand, button.bg-brand {
    background-image: linear-gradient(135deg, var(--brand), var(--brand-700)) !important;
    box-shadow: var(--shadow-brand);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
    position: relative;
    overflow: hidden;
}
a.bg-orange-600:hover, button.bg-orange-600:hover,
a.bg-brand:hover, button.bg-brand:hover {
    transform: translateY(-2px);
    filter: brightness(1.04);
    box-shadow: 0 18px 36px -8px rgba(241, 90, 36, .55);
}
a.bg-orange-600::after, button.bg-orange-600::after {
    content: "";
    position: absolute; top: 0; left: -120%;
    width: 60%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
    transform: skewX(-18deg);
    transition: left .6s ease;
}
a.bg-orange-600:hover::after, button.bg-orange-600:hover::after { left: 140%; }

/* ---- Card micro-interactions (rounded white panels & bordered tiles) ---- */
.rounded-xl.shadow-sm, .rounded-xl.bg-white, .border.rounded-xl,
.rounded-2xl.bg-white {
    transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease, border-color .28s ease;
    will-change: transform;
}
.rounded-xl.shadow-sm:hover, .border.rounded-xl:hover, .rounded-2xl.bg-white:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(241, 90, 36, .35);
}

/* Section heading accent bars get a gradient */
.bg-orange-600.mx-auto, .w-20.h-1.bg-orange-600 {
    background-image: linear-gradient(90deg, var(--brand), var(--brand-2)) !important;
    border-radius: 999px;
}

/* ---- Form fields ---- */
input, select, textarea {
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 4px var(--ring);
}

/* ---- Scroll-reveal (toggled by IntersectionObserver in script.js) ---- */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
}
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
}

/* ---- Hero floating box art ---- */
@keyframes float-y { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.float-art { animation: float-y 6s ease-in-out infinite; }
@keyframes mesh-drift {
    0%   { transform: translate3d(0,0,0) scale(1); }
    100% { transform: translate3d(-3%, 2%, 0) scale(1.05); }
}
.mesh { animation: mesh-drift 14s ease-in-out infinite alternate; }

/* Marquee for trust strip */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-track { display: flex; width: max-content; animation: marquee 28s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }

/* ---- Footer link hover ---- */
footer a { transition: color .2s ease; }

/* ---- Mobile menu / dropdown ---- */
#mobileMenu, #mobileDropdown { transition: all .3s ease; }

/* ---- Custom scrollbar ---- */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #eef2f6; }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--brand), var(--brand-700)); border-radius: 999px; border: 2px solid #eef2f6; }

/* Grid fallback for ancient browsers */
@supports not (display: grid) {
    .grid { display: flex; flex-wrap: wrap; }
    .grid > * { width: calc(33.333% - 2rem); margin: 1rem; }
}

.submitting { opacity: .7; pointer-events: none; }