/* ============================================================
   YOUR CHOICE SECURITY — Main Stylesheet
   Premium security marketplace aesthetics
   ============================================================ */

/* Gradients — DEEP dark blue that never washes out */
.gradient-bg { background: linear-gradient(135deg, #0a2540 0%, #0d1b3e 40%, #11264a 70%, #0a2540 100%); }
.gradient-gold { background: linear-gradient(135deg, #d4af37 0%, #f0d060 100%); }
.gradient-text { background: linear-gradient(135deg, #0a2540, #d4af37); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* Hero pattern overlay — subtle accents on dark base */
.hero-pattern {
    background-image:
        radial-gradient(circle at 20% 20%, rgba(212,175,55,0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 30%, rgba(0,51,160,0.15) 0%, transparent 50%),
        radial-gradient(circle at 50% 90%, rgba(212,175,55,0.05) 0%, transparent 50%);
}

/* Card interactions */
.card-hover { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.card-hover:hover { transform: translateY(-6px); box-shadow: 0 24px 56px rgba(10, 37, 64, 0.14); }

/* Buttons */
.btn-glow:hover { box-shadow: 0 18px 44px rgba(10, 37, 64, 0.16), 0 0 0 6px rgba(212, 175, 55, 0.10); }
.btn-primary { background: #0a2540; color: #fff; font-weight: 600; padding: 0.625rem 1.5rem; border-radius: 0.5rem; transition: all 0.2s; display: inline-flex; align-items: center; justify-content: center; }
.btn-primary:hover { background: #0d3157; }
.btn-gold { background: #d4af37; color: #0a2540; font-weight: 600; padding: 0.625rem 1.5rem; border-radius: 0.5rem; transition: all 0.2s; display: inline-flex; align-items: center; justify-content: center; }
.btn-gold:hover { background: #c9a430; }
.btn-outline { border: 2px solid #0a2540; color: #0a2540; font-weight: 600; padding: 0.5rem 1.5rem; border-radius: 0.5rem; transition: all 0.2s; }
.btn-outline:hover { background: #0a2540; color: #fff; }

/* Service icons */
.service-icon {
    width: 64px; height: 64px;
    background: linear-gradient(135deg, #0a2540 0%, #d4af37 55%, #c8102e 100%);
    border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 28px;
    box-shadow: 0 14px 34px rgba(212,175,55,0.18);
}

/* Gradient border */
.gradient-border { position: relative; border: 1px solid rgba(10, 37, 64, 0.08); }
.gradient-border::before {
    content: ''; position: absolute; inset: -1px; border-radius: inherit;
    background: linear-gradient(90deg, rgba(212,175,55,0.45), rgba(200,16,46,0.35), rgba(0,51,160,0.35));
    z-index: -1;
}

/* Glow ring */
.glow-ring { box-shadow: 0 0 0 6px rgba(212,175,55,0.14); }

/* Map container */
.map-container { height: 400px; border-radius: 16px; overflow: hidden; }

/* Dallas divider */
.dallas-divider { position: relative; height: 4px; }
.dallas-divider::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, #0a2540, #d4af37, #c8102e, #0033a0);
}

/* Section glow */
.section-top-glow { position: relative; }
.section-top-glow::before {
    content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, rgba(212,175,55,0), rgba(212,175,55,0.65), rgba(212,175,55,0));
}

/* Animations */
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 20px rgba(212, 175, 55, 0.3); } 50% { box-shadow: 0 0 30px rgba(212, 175, 55, 0.6); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideIn { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }

.animate-float { animation: float 3s ease-in-out infinite; }
.pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }
.animate-fade-in { animation: fadeInUp 0.5s ease forwards; }
.animate-slide-in { animation: slideIn 0.4s ease forwards; }

/* Loading skeleton */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%; animation: loading 1.5s infinite;
}
@keyframes loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Guard card shimmer */
.service-card { position: relative; overflow: hidden; }
.service-card::before {
    content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.08), transparent);
    transition: left 0.5s;
}
.service-card:hover::before { left: 100%; }

/* Form inputs */
.ycs-input {
    width: 100%; padding: 0.75rem 1rem; border: 1.5px solid #e2e8f0; border-radius: 0.5rem;
    font-size: 0.875rem; transition: border-color 0.2s, box-shadow 0.2s; outline: none; background: white;
}
.ycs-input:focus { border-color: #0a2540; box-shadow: 0 0 0 3px rgba(10, 37, 64, 0.08); }
.ycs-input.error { border-color: #c8102e; }
.ycs-label { display: block; margin-bottom: 0.375rem; font-size: 0.875rem; font-weight: 500; color: #374151; }

/* Badge styles */
.badge { display: inline-flex; align-items: center; padding: 0.125rem 0.625rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; }
.badge-gold { background: rgba(212,175,55,0.15); color: #92730a; }
.badge-green { background: rgba(34,197,94,0.15); color: #166534; }
.badge-red { background: rgba(220,38,38,0.15); color: #dc2626; }
.badge-blue { background: rgba(0,51,160,0.15); color: #1e40af; }
.badge-gray { background: rgba(107,114,128,0.15); color: #374151; }
.badge-purple { background: rgba(124,58,237,0.15); color: #5b21b6; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #0a2540; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #d4af37; }

/* Selection */
::selection { background-color: rgba(212, 175, 55, 0.3); color: #0a2540; }

/* Responsive */
@media (max-width: 768px) {
    .service-icon { width: 48px; height: 48px; font-size: 20px; border-radius: 14px; }
}

@media (max-width: 640px) {
    /* Hero text scales down */
    .hero-pattern h1 { font-size: 2.25rem; line-height: 1.15; }
    .hero-pattern p { font-size: 1rem; }
    /* Stat cards tighter */
    .stat-card { padding: 1rem; }
    .stat-card .stat-value { font-size: 1.4rem; }
}

@media (min-width: 1536px) {
    .container { max-width: 1320px; }
}

/* Line clamp utility */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Ensure images never break layout */
img { max-width: 100%; height: auto; }

/* Fix for aspect-ratio on older browsers */
@supports not (aspect-ratio: 1) {
    .guard-card-img, .guard-card-placeholder {
        height: 0; padding-bottom: 100%; position: relative;
    }
}


/* ===== v8 modern marketing refresh ===== */
:root {
    --ycs-blue: #0a2540;
    --ycs-blue-2: #11264a;
    --ycs-gold: #d4af37;
    --ycs-ink: #0f172a;
    --ycs-mist: #f5f7fb;
}
html { scroll-behavior: smooth; }
body {
    background:
        radial-gradient(circle at top left, rgba(212,175,55,0.06), transparent 18%),
        linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
}
section { position: relative; }
.scroll-mt-28 { scroll-margin-top: 7rem; }

.glass-panel {
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(255,255,255,0.52);
    box-shadow: 0 24px 60px rgba(10,37,64,0.10);
    backdrop-filter: blur(14px);
}
.glass-dark {
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.14);
    backdrop-filter: blur(12px);
}
.section-badge {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .55rem .95rem; border-radius: 9999px;
    background: rgba(10,37,64,0.06); color: var(--ycs-blue);
    font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.section-badge::before {
    content: ''; width: .5rem; height: .5rem; border-radius: 9999px;
    background: linear-gradient(135deg, #d4af37, #f3d977);
    box-shadow: 0 0 0 6px rgba(212,175,55,0.14);
}
.hero-orb, .hero-orb-2 {
    position: absolute; border-radius: 9999px; filter: blur(10px); pointer-events: none;
}
.hero-orb {
    width: 18rem; height: 18rem; top: -4rem; right: -5rem;
    background: radial-gradient(circle, rgba(96,165,250,.18) 0%, rgba(96,165,250,.06) 42%, transparent 72%);
    animation: drift 11s ease-in-out infinite;
}
.hero-orb-2 {
    width: 24rem; height: 24rem; bottom: -8rem; left: -7rem;
    background: radial-gradient(circle, rgba(212,175,55,.12) 0%, rgba(212,175,55,.035) 44%, transparent 74%);
    animation: driftAlt 14s ease-in-out infinite;
}
.hero-grid {
    background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.72), transparent 86%);
}
.hero-stat {
    position: relative; overflow: hidden;
}
.hero-stat::after {
    content:''; position:absolute; inset:auto -35% -60% auto; width:8rem; height:8rem; border-radius:9999px;
    background: radial-gradient(circle, rgba(212,175,55,.18), transparent 65%);
}
.frost-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.84));
    border: 1px solid rgba(15,23,42,0.06);
    box-shadow: 0 24px 56px rgba(10,37,64,0.08);
}
.modern-card {
    border-radius: 1.5rem; border: 1px solid rgba(10,37,64,0.08);
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    box-shadow: 0 18px 45px rgba(10,37,64,0.07);
}
.modern-card:hover { box-shadow: 0 28px 65px rgba(10,37,64,0.13); }
.lift-hover { transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.lift-hover:hover { transform: translateY(-8px); }

.reveal { opacity: 0; transform: translateY(22px) scale(.985); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.reveal-left { opacity: 0; transform: translateX(-28px); transition: opacity .7s ease, transform .7s ease; }
.reveal-left.is-visible { opacity: 1; transform: translateX(0); }
.reveal-right { opacity: 0; transform: translateX(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal-right.is-visible { opacity: 1; transform: translateX(0); }
.stagger-1 { transition-delay: .08s; }
.stagger-2 { transition-delay: .16s; }
.stagger-3 { transition-delay: .24s; }
.stagger-4 { transition-delay: .32s; }

.hover-shine { position: relative; overflow: hidden; }
.hover-shine::before {
    content:''; position:absolute; inset:0; left:-130%;
    background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
    transition: left .7s ease;
}
.hover-shine:hover::before { left: 130%; }
.soft-ring { box-shadow: 0 0 0 1px rgba(10,37,64,.05), 0 10px 30px rgba(10,37,64,.08); }
.metric-chip {
    display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .85rem; border-radius:9999px;
    background: rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.18); color:#fff; font-size:.85rem;
}
.metric-dot { width:.45rem; height:.45rem; border-radius:9999px; background:#34d399; box-shadow:0 0 0 5px rgba(52,211,153,.15); }
.trust-pill {
    display:inline-flex; align-items:center; justify-content:center; padding:.85rem 1.1rem; border-radius:9999px;
    background:#fff; border:1px solid rgba(10,37,64,.08); box-shadow:0 14px 34px rgba(10,37,64,.06);
    font-size:.9rem; font-weight:600; color:var(--ycs-blue);
}
.feature-divider {
    height:1px; background: linear-gradient(90deg, transparent, rgba(10,37,64,.14), transparent);
}
.pricing-spotlight {
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96));
    border: 1px solid rgba(212,175,55,.35);
    box-shadow: 0 25px 70px rgba(10,37,64,.10), inset 0 1px 0 rgba(255,255,255,.9);
}
.cta-panel {
    background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
    border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(16px);
}

@keyframes drift {
    0%,100% { transform: translate3d(0,0,0) scale(1); }
    50% { transform: translate3d(-14px,14px,0) scale(1.05); }
}
@keyframes driftAlt {
    0%,100% { transform: translate3d(0,0,0) scale(1); }
    50% { transform: translate3d(16px,-10px,0) scale(.97); }
}
@keyframes floatY {
    0%,100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
}
.float-gentle { animation: floatY 6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    .reveal, .reveal-left, .reveal-right { opacity: 1 !important; transform: none !important; }
}


/* ===== hero contrast fix v10 ===== */
.hero-solid {
    isolation: isolate;
}
.hero-backdrop {
    position: absolute; inset: 0; pointer-events:none;
    background:
        radial-gradient(circle at 18% 28%, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 16%, transparent 34%),
        radial-gradient(circle at 78% 22%, rgba(212,175,55,0.10) 0%, rgba(212,175,55,0.03) 14%, transparent 28%),
        linear-gradient(135deg, rgba(5,12,24,0.14) 0%, rgba(5,12,24,0.02) 40%, rgba(5,12,24,0.22) 100%);
}
.hero-badge {
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.12);
    color: #f8fafc;
    backdrop-filter: blur(10px);
}
.hero-chip {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.92);
    backdrop-filter: blur(10px);
}
.hero-title {
    letter-spacing: -0.035em;
}
.hero-copy {
    color: rgba(226,232,240,0.92);
}
.hero-secondary-cta:hover {
    background: rgba(255,255,255,0.16) !important;
}
.hero-stat {
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.12) !important;
}
.hero-stat .text-gray-300 {
    color: rgba(226,232,240,0.86) !important;
}
.hero-grid {
    opacity: .18;
}
.hero-orb {
    width: 22rem; height: 22rem; top: -6rem; right: -7rem;
    background: radial-gradient(circle, rgba(59,130,246,.18) 0%, rgba(59,130,246,.07) 42%, transparent 72%);
}
.hero-orb-2 {
    width: 28rem; height: 28rem; bottom: -12rem; left: -9rem;
    background: radial-gradient(circle, rgba(212,175,55,.10) 0%, rgba(212,175,55,.04) 40%, transparent 72%);
}