/* ================================================================
   Leano Security Services — Base Styles (styles.css)
   ================================================================ */

:root {
    --primary:        #0a1f3c;
    --primary-mid:    #0f2d52;
    --secondary:      #d62839;
    --accent:         #1a9e8f;
    --accent-light:   rgba(26,158,143,0.11);
    --dark:           #060f1e;
    --light:          #f5f7fa;
    --white:          #ffffff;
    --gray-100:       #f0f2f5;
    --gray-200:       #e2e5ea;
    --gray-400:       #9aa0aa;
    --gray-600:       #5a6270;
    --gray-800:       #2c3140;

    --font-display:   'Barlow Condensed', sans-serif;
    --font-heading:   'Montserrat', sans-serif;
    --font-body:      'Open Sans', sans-serif;

    --radius-sm:      6px;
    --radius-md:      12px;
    --radius-lg:      20px;

    --shadow-xs:      0 1px 3px rgba(0,0,0,.07);
    --shadow-sm:      0 2px 8px rgba(0,0,0,.09);
    --shadow-md:      0 6px 22px rgba(0,0,0,.12);
    --shadow-lg:      0 14px 44px rgba(0,0,0,.16);
    --shadow-xl:      0 28px 72px rgba(0,0,0,.20);
    --shadow-red:     0 8px 28px rgba(214,40,57,.30);

    --header-h:       88px;
    --section-py:     6rem;
    --tr:             all 0.27s cubic-bezier(0.4,0,0.2,1);
}

[data-theme="dark"] {
    --primary:        #1a3a6b;
    --primary-mid:    #122c52;
    --dark:           #050c19;
    --light:          #0e1520;
    --white:          #141e2e;
    --gray-100:       #162030;
    --gray-200:       #1e2d40;
    --gray-400:       #718090;
    --gray-600:       #96a8b8;
    --gray-800:       #cdd9e5;
    --shadow-xs:      0 1px 3px rgba(0,0,0,.25);
    --shadow-sm:      0 2px 8px rgba(0,0,0,.30);
    --shadow-md:      0 6px 22px rgba(0,0,0,.38);
    --shadow-lg:      0 14px 44px rgba(0,0,0,.45);
    --shadow-xl:      0 28px 72px rgba(0,0,0,.55);
}

/* ── Global: flip all phone icons to face right ──────────── */
.fa-phone,
.fa-phone-alt,
.fa-phone-volume { transform: scaleX(-1); }

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html  { scroll-behavior: smooth; }
body  {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    color: var(--gray-800);
    background: var(--light);
    overflow-x: hidden;
    transition: background .3s ease, color .3s ease;
}
img   { max-width:100%; height:auto; display:block; }
a     { text-decoration:none; color:inherit; transition: var(--tr); }
ul    { list-style:none; }
p     { margin-bottom:1rem; color: var(--gray-600); }
[data-theme="dark"] p { color: var(--gray-400); }
strong { font-weight:600; color: var(--gray-800); }
[data-theme="dark"] strong { color: var(--gray-600); }

/* ── Skip link ───────────────────────────────────────────── */
.skip-to-main {
    position:absolute; top:-100%; left:1rem; z-index:9999;
    background:var(--secondary); color:#fff;
    padding:.55rem 1.3rem;
    border-radius:0 0 var(--radius-sm) var(--radius-sm);
    font-weight:700; font-size:.88rem; letter-spacing:.4px;
    transition: top .2s ease;
}
.skip-to-main:focus { top:0; }

/* ── Layout ──────────────────────────────────────────────── */
.container { max-width:1200px; margin:0 auto; padding:0 1.5rem; }
section    { padding: var(--section-py) 0; }
.section-padding { padding: var(--section-py) 0; }
.bg-light  { background: var(--gray-100); }
.bg-dark   { background: var(--dark); color:#fff; }
[data-theme="dark"] .bg-light { background: var(--gray-100); }
[data-theme="dark"] .bg-dark  { background: #03080f; }

/* ── Typography ──────────────────────────────────────────── */
h1,h2,h3,h4,h5,h6 {
    font-family: var(--font-heading);
    font-weight:700; line-height:1.2;
    color: var(--primary);
    margin-bottom:1rem;
}
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4 { color:#e0eaf5; }
h1 { font-size: clamp(2.2rem,5vw,3.6rem); }
h2 { font-size: clamp(1.75rem,4vw,2.6rem); }
h3 { font-size: clamp(1.3rem,3vw,1.9rem); }
h4 { font-size: 1.2rem; }

/* ── Header ──────────────────────────────────────────────── */
header {
    position:fixed; inset:0 0 auto 0;
    height: var(--header-h);
    z-index:1000;
    display:flex; align-items:center;
    background:rgba(255,255,255,.97);
    backdrop-filter:blur(20px);
    border-bottom:1px solid var(--gray-200);
    transition: var(--tr);
}
[data-theme="dark"] header {
    background:rgba(5,12,22,.97);
    border-bottom:1px solid rgba(255,255,255,.06);
}
header.scrolled { height:70px; box-shadow:var(--shadow-md); }

nav { display:flex; justify-content:space-between; align-items:center; width:100%; }

/* ── Logo ────────────────────────────────────────────────── */
.logo {
    display:flex; align-items:center; gap:.8rem;
    font-family: var(--font-heading);
    font-weight:800; font-size:1.55rem;
    letter-spacing:1px; text-transform:uppercase;
    color: var(--primary);
}
[data-theme="dark"] .logo { color:#e0eaf5; }
.logo-img { width:50px; height:50px; object-fit:contain; transition:transform .3s ease; flex-shrink:0; }
.logo:hover .logo-img { transform:scale(1.06); }
.logo-text { display:flex; flex-direction:column; line-height:1.05; }
.logo-sub {
    font-size:.65rem; font-weight:700;
    color:var(--secondary); letter-spacing:3px;
    text-transform:uppercase; margin-top:3px;
}

/* ── Nav links ───────────────────────────────────────────── */
.nav-links { display:flex; align-items:center; gap:1.75rem; }
.nav-links a {
    font-family:var(--font-heading);
    font-weight:600; font-size:.8rem;
    letter-spacing:.7px; text-transform:uppercase;
    color:var(--primary); padding:.45rem 0;
    position:relative;
}
[data-theme="dark"] .nav-links a { color:#b8c8d8; }
.nav-links a::after {
    content:''; position:absolute; bottom:0; left:0;
    width:0; height:2px;
    background:var(--secondary); border-radius:2px;
    transition: width .3s ease;
}
.nav-links a:hover::after,
.nav-links a.active::after { width:100%; }
.nav-links a:hover,
.nav-links a.active { color:var(--secondary); }

.nav-cta {
    background:var(--secondary) !important;
    color:#fff !important;
    padding:.55rem 1.3rem !important;
    border-radius:50px !important;
    font-weight:700 !important;
    box-shadow:var(--shadow-red);
    transition:var(--tr) !important;
}
.nav-cta::after { display:none !important; }
.nav-cta:hover  {
    background:var(--primary) !important;
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(214,40,57,.22) !important;
}

/* Nav actions */
.nav-actions { display:flex; align-items:center; gap:.875rem; }

.emergency-badge {
    display:flex; align-items:center; gap:.55rem;
    background:var(--secondary); color:#fff;
    padding:.5rem 1.2rem; border-radius:50px;
    font-weight:700; font-size:.85rem; letter-spacing:.3px;
    box-shadow:var(--shadow-red); transition:var(--tr);
}
.emergency-badge:hover { transform:translateY(-2px); box-shadow:0 12px 30px rgba(214,40,57,.42); }
.emergency-badge i { animation:iconPulse 2s infinite; }
@keyframes iconPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.2)} }

.theme-toggle {
    background:none;
    border:1.5px solid var(--gray-200); color:var(--gray-600);
    width:40px; height:40px; border-radius:50%;
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    font-size:1rem; transition:var(--tr);
}
[data-theme="dark"] .theme-toggle { border-color:rgba(255,255,255,.12); color:#8aa0b8; }
.theme-toggle:hover { background:var(--primary); border-color:var(--primary); color:#fff; transform:rotate(20deg); }

/* ── Hamburger ───────────────────────────────────────────── */
.mobile-menu {
    display:none; flex-direction:column;
    justify-content:space-between;
    width:28px; height:20px;
    background:none; border:none; cursor:pointer; padding:0; z-index:1001;
}
.mobile-menu span { display:block; width:100%; height:2px; background:var(--primary); border-radius:2px; transition:var(--tr); }
[data-theme="dark"] .mobile-menu span { background:#e5e7e9; }
.mobile-menu.active span:nth-child(1) { transform:translateY(9px) rotate(45deg); }
.mobile-menu.active span:nth-child(2) { opacity:0; transform:translateX(-8px); }
.mobile-menu.active span:nth-child(3) { transform:translateY(-9px) rotate(-45deg); }

/* ── Mobile nav ──────────────────────────────────────────── */
@media (max-width:1024px) {
    .nav-links {
        position:fixed;
        top:var(--header-h); left:0;
        width:100%; height:calc(100dvh - var(--header-h));
        background-color:#ffffff !important;
        flex-direction:column;
        padding:2.5rem 1.75rem; gap:.2rem;
        transform:translateX(-100%);
        opacity:1;
        visibility:hidden;
        transition: transform 0.27s cubic-bezier(0.4,0,0.2,1),
                    visibility 0.27s cubic-bezier(0.4,0,0.2,1);
        box-shadow:var(--shadow-xl); z-index:1001; overflow-y:auto;
    }
    [data-theme="dark"] .nav-links { background-color:#0e1520 !important; }
    .nav-links.active { transform:translateX(0); visibility:visible; }
    .nav-links li { width:100%; }
    .nav-links a {
        display:block; padding:.9rem 1.1rem;
        font-size:.9rem; border-radius:var(--radius-sm);
        color:var(--primary);
    }
    [data-theme="dark"] .nav-links a { color:#b8c8d8; }
    .nav-links a:hover { background:var(--accent-light); color:var(--primary); }
    [data-theme="dark"] .nav-links a:hover { background:rgba(26,158,143,.12); color:#d0dce8; }
    .nav-links a.active { color:var(--secondary); }
    .nav-links a::after { display:none; }
    .mobile-menu { display:flex; }
    .emergency-badge span { display:none; }
    .nav-actions { gap:.7rem; }
}

/* ── Shared button ───────────────────────────────────────── */
.cta-button {
    display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
    padding:.85rem 1.9rem;
    font-family:var(--font-heading); font-weight:700;
    font-size:.84rem; letter-spacing:.7px; text-transform:uppercase;
    border-radius:var(--radius-sm); border:2px solid transparent;
    cursor:pointer; transition:var(--tr); white-space:nowrap;
}
.primary-btn { background:var(--secondary); color:#fff; border-color:var(--secondary); }
.primary-btn:hover { background:transparent; color:var(--secondary); transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.secondary-btn { background:transparent; color:#fff; border-color:rgba(255,255,255,.35); }
.secondary-btn:hover { background:#fff; color:var(--primary); border-color:#fff; transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.outline-btn { background:transparent; color:var(--primary); border-color:var(--primary); }
[data-theme="dark"] .outline-btn { color:#e0eaf5; border-color:rgba(255,255,255,.25); }
.outline-btn:hover { background:var(--primary); color:#fff; transform:translateY(-3px); }
.large-btn { padding:1.05rem 2.4rem; font-size:.9rem; }

/* ── Loading screen ──────────────────────────────────────── */
.loading-screen {
    position:fixed; inset:0;
    background:var(--primary); z-index:9999;
    display:flex; align-items:center; justify-content:center;
    transition:opacity .5s ease, visibility .5s ease;
}
.loading-screen.loaded { opacity:0; visibility:hidden; }
.loading-content { text-align:center; color:#fff; }
.shield-loader {
    position:relative; width:88px; height:88px;
    margin:0 auto 1.5rem;
    display:flex; align-items:center; justify-content:center;
}
.shield-loader i { font-size:3.2rem; color:var(--secondary); position:relative; z-index:2; }
.pulse-ring {
    position:absolute; inset:0;
    border:2.5px solid var(--secondary); border-radius:50%;
    animation:pulseRing 1.5s ease-out infinite;
}
@keyframes pulseRing { 0%{transform:scale(.8);opacity:1} 100%{transform:scale(1.7);opacity:0} }
.loading-content p { color:rgba(255,255,255,.7); font-size:1rem; letter-spacing:2px; }

/* ── Footer ──────────────────────────────────────────────── */
footer {
    background:var(--dark); color:rgba(255,255,255,.85);
    padding:5.5rem 0 2.5rem;
}
[data-theme="dark"] footer { background:#020810; }

.footer-content {
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr 1.2fr;
    gap:4rem; margin-bottom:3.5rem;
    padding-bottom:3.5rem;
    border-bottom:1px solid rgba(255,255,255,.07);
}

.footer-brand .logo { color:#fff; margin-bottom:1rem; }
.footer-brand .logo-img { width:48px; height:48px; }
.footer-brand .logo-sub { color:var(--secondary); }
.footer-tagline {
    color:rgba(255,255,255,.45);
    font-size:.88rem; line-height:1.75; margin:1rem 0 1.75rem;
}
.social-links { display:flex; gap:.65rem; }
.social-links a {
    display:flex; align-items:center; justify-content:center;
    width:38px; height:38px; border-radius:50%;
    background:rgba(255,255,255,.06); color:rgba(255,255,255,.6);
    font-size:.95rem; border:1px solid rgba(255,255,255,.07);
    transition:var(--tr);
}
.social-links a:hover { background:var(--secondary); border-color:var(--secondary); color:#fff; transform:translateY(-3px); }

.footer-links h4,
.footer-services h4,
.footer-contact h4 {
    color:#fff; font-size:.72rem;
    font-weight:700; text-transform:uppercase;
    letter-spacing:1.5px; margin-bottom:1.4rem;
    padding-bottom:.7rem;
    border-bottom:1.5px solid var(--secondary);
    display:inline-block;
}

.footer-links ul,
.footer-services ul { display:flex; flex-direction:column; gap:.55rem; }
.footer-links a,
.footer-services a {
    color:rgba(255,255,255,.45); font-size:.88rem;
    display:inline-block; transition:var(--tr);
}
.footer-links a:hover,
.footer-services a:hover { color:var(--secondary); padding-left:.4rem; }

.contact-info { display:flex; flex-direction:column; gap:.9rem; font-style:normal; }
.contact-info p {
    display:flex; align-items:flex-start; gap:.7rem;
    color:rgba(255,255,255,.45); font-size:.88rem;
    margin-bottom:0; line-height:1.6;
}
.contact-info a { color:rgba(255,255,255,.65); }
.contact-info a:hover { color:var(--secondary); }
.contact-info i { color:var(--accent); width:16px; font-size:.95rem; margin-top:2px; flex-shrink:0; }

.footer-bottom {
    text-align:center; color:rgba(255,255,255,.25);
    font-size:.78rem; line-height:2;
}
.footer-bottom p { color:rgba(255,255,255,.25); font-size:.78rem; margin-bottom:.2rem; }

/* ── Emergency float ─────────────────────────────────────── */
.emergency-float { position:fixed; bottom:2rem; right:2rem; z-index:500; }
.emergency-btn {
    display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:3px;
    width: 80px; height: 80px;
    background:var(--secondary); color:#fff;
    border-radius:50%;
    box-shadow:var(--shadow-red);
    transition:var(--tr);
    animation:floatPulse 2.5s ease-in-out infinite;
}
@keyframes floatPulse {
    0%,100% { box-shadow:0 8px 24px rgba(214,40,57,.35); }
    50%      { box-shadow:0 14px 40px rgba(214,40,57,.55); }
}
.emergency-btn:hover { background:#b71c2b; transform:scale(1.12); animation:none; box-shadow:0 16px 44px rgba(214,40,57,.65); }
.emergency-btn i { font-size:1rem; }
.emergency-btn span { font-size:.58rem; font-weight:800; letter-spacing:.5px; text-transform:uppercase; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width:992px) {
    .footer-content { grid-template-columns:repeat(2,1fr); gap:2.5rem; }
    .footer-brand { grid-column:span 2; }
}
@media (max-width:768px) {
    :root { --header-h:74px; }
    .logo { font-size:1.35rem; }
    .logo-img { width:44px; height:44px; }
    .footer-content { grid-template-columns:1fr; gap:2rem; }
    .footer-brand { grid-column:span 1; }
    .emergency-float { bottom:1.5rem; right:1.5rem; }
    .emergency-btn { width:70px; height:70px; }
    .emergency-btn i { font-size:1.2rem; }
}
@media (max-width:576px) {
    :root { --section-py:4.5rem; --header-h:68px; }
    .logo { font-size:1.2rem; gap:.55rem; }
    .logo-img { width:38px; height:38px; }
}