/* ==========================================
   SPARRO GLOBAL — Global Stylesheet
   Bootstrap 5 + Custom Design System
   ========================================== */

:root {
    --radius: 0.875rem;
    --background: oklch(0.985 0.005 165);
    --foreground: oklch(0.22 0.08 268);
    --card: oklch(1 0 0);
    --card-foreground: oklch(0.22 0.08 268);
    --primary: oklch(0.28 0.12 268);
    --primary-foreground: oklch(0.99 0 0);
    --primary-glow: oklch(0.42 0.15 268);
    --secondary: oklch(0.48 0.13 162);
    --secondary-foreground: oklch(0.99 0 0);
    --secondary-glow: oklch(0.62 0.16 162);
    --muted: oklch(0.96 0.01 165);
    --muted-foreground: oklch(0.5 0.04 250);
    --accent: oklch(0.48 0.13 162);
    --border: oklch(0.92 0.01 250);
    --input: oklch(0.92 0.01 250);
    --ring: oklch(0.48 0.13 162);

    --gradient-hero: linear-gradient(135deg, oklch(0.22 0.1 268) 0%, oklch(0.32 0.13 240) 60%, oklch(0.42 0.13 180) 100%);
    --gradient-brand: linear-gradient(135deg, oklch(0.28 0.12 268), oklch(0.48 0.13 162));
    --gradient-soft: linear-gradient(180deg, oklch(0.985 0.005 165) 0%, oklch(0.96 0.02 162) 100%);

    --shadow-elegant: 0 20px 50px -20px oklch(0.28 0.12 268 / 0.25);
    --shadow-glow: 0 10px 40px -10px oklch(0.48 0.13 162 / 0.35);
    --shadow-card: 0 8px 30px -12px oklch(0.22 0.08 268 / 0.15);
    --transition-smooth: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base */
body {
    background-color: var(--background);
    color: var(--foreground);
    font-family: 'Inter', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', 'Inter', sans-serif;
    letter-spacing: -0.02em;
    font-weight: 700;
}

/* Utility Color Classes */
.bg-background { background-color: var(--background); }
.text-foreground { color: var(--foreground); }
.bg-card { background-color: var(--card); }
.text-primary { color: var(--primary) !important; }
.bg-primary { background-color: var(--primary) !important; }
.text-secondary { color: var(--secondary) !important; }
.bg-secondary { background-color: var(--secondary) !important; }
.text-muted-foreground { color: var(--muted-foreground); }
.bg-muted { background-color: var(--muted); }
.border-border { border-color: var(--border); }

.gradient-hero { background: var(--gradient-hero); }
.gradient-brand { background: var(--gradient-brand); }
.gradient-soft { background: var(--gradient-soft); }

.text-gradient-brand {
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
}

.shadow-elegant { box-shadow: var(--shadow-elegant); }
.shadow-glow { box-shadow: var(--shadow-glow); }
.shadow-card { box-shadow: var(--shadow-card); }

/* Glassmorphism */
.glass-card {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.glass-dark {
    background: rgba(30, 27, 57, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Lucide icon resizing */
svg.lucide {
    width: 1.25rem;
    height: 1.25rem;
    display: inline-block;
    vertical-align: middle;
    stroke-width: 2px;
}
.w-3-5, svg.lucide.w-3-5 { width: 0.875rem !important; height: 0.875rem !important; }
.w-4, svg.lucide.w-4, .h-4 { width: 1rem !important; height: 1rem !important; }
.w-5, svg.lucide.w-5 { width: 1.25rem !important; height: 1.25rem !important; }
.w-6, svg.lucide.w-6 { width: 1.5rem !important; height: 1.5rem !important; }
.w-7, svg.lucide.w-7 { width: 1.75rem !important; height: 1.75rem !important; }
.w-8, svg.lucide.w-8 { width: 2rem !important; height: 2rem !important; }
.w-12, svg.lucide.w-12 { width: 3rem !important; height: 3rem !important; }
.w-14, svg.lucide.w-14 { width: 3.5rem !important; height: 3.5rem !important; }

/* Navbar */
header.fixed-top-nav {
    position: sticky;
    top: 0; left: 0; right: 0;
    z-index: 1030;
    background: #ffffff;
    box-shadow: 0 4px 20px -10px rgba(0,0,0,0.1);
    transition: var(--transition-smooth);
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}
header.fixed-top-nav.scrolled {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0,0,0, 0.05);
}

.nav-link-custom {
    color: var(--foreground) !important;
    font-weight: 500;
    font-size: 0.9rem;
    padding: 0.5rem 0.75rem !important;
    transition: color 0.2s ease;
}
.nav-link-custom:hover, .nav-link-custom.active {
    color: var(--secondary) !important;
    font-weight: 600;
}

/* Buttons */
.btn-custom {
    border-radius: 50rem;
    font-weight: 600;
    padding: 0.65rem 1.5rem;
    font-size: 0.9rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-brand-glow {
    background: var(--gradient-brand);
    color: var(--primary-foreground) !important;
    border: none;
    box-shadow: var(--shadow-glow);
}
.btn-brand-glow:hover {
    box-shadow: 0 10px 40px -5px oklch(0.48 0.13 162 / 0.55);
    transform: scale(1.03);
}
.btn-outline-primary-custom {
    border: 2px solid var(--primary);
    color: var(--primary);
    background: transparent;
}
.btn-outline-primary-custom:hover {
    background-color: var(--primary);
    color: var(--primary-foreground);
}

/* Cards */
.card-glassmorphic {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 1.5rem;
    box-shadow: var(--shadow-card);
    transition: var(--transition-smooth);
}
.card-glassmorphic:hover {
    transform: translateY(-5px);
    border-color: oklch(0.48 0.13 162 / 0.25);
    box-shadow: var(--shadow-elegant);
}

/* Form Controls */
.form-control-glass {
    background-color: var(--card) !important;
    border: 1px solid var(--border) !important;
    color: var(--foreground) !important;
    border-radius: 0.75rem !important;
    padding: 0.75rem 1.25rem !important;
}
.form-control-glass::placeholder { color: var(--muted-foreground); }
.form-control-glass:focus {
    border-color: var(--secondary) !important;
    box-shadow: 0 0 0 0.18rem oklch(0.48 0.13 162 / 0.25) !important;
}

/* WhatsApp Float */
.whatsapp-float {
    position: fixed;
    bottom: 1.5rem; right: 1.5rem;
    z-index: 1040;
    padding: 1rem;
    border-radius: 50rem;
    background-color: #25D366;
    color: white;
    box-shadow: var(--shadow-glow);
    transition: var(--transition-smooth);
    animation: wasPulse 3s ease-in-out infinite;
    display: flex;
    align-items: center;
    justify-content: center;
}
.whatsapp-float:hover { transform: scale(1.1); color: white; }
@keyframes wasPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4); }
    50% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
}

/* Brand Utilities */
.bg-secondary-10 {
    background-color: oklch(0.48 0.13 162 / 0.1) !important;
    color: var(--secondary) !important;
}
.hover-bg-secondary-10:hover {
    background-color: oklch(0.48 0.13 162 / 0.1) !important;
    color: var(--secondary) !important;
}
.text-secondary-glow { color: var(--secondary-glow) !important; }
.text-primary-glow { color: var(--primary-glow) !important; }

/* Group hover zoom on product cards */
.group:hover img {
    transform: scale(1.1);
}
img { transition: transform 0.7s ease; }
.group-hover-scale { transition: var(--transition-smooth); }

/* Link arrow hover */
.hover-gap-transition { transition: all 0.3s ease; }
.hover-gap-transition:hover i,
.hover-gap-transition:hover svg { transform: translateX(4px); }

/* Desktop stagger */
@media (min-width: 768px) {
    .feature-staggered { transform: translateY(1.5rem); }
}

/* Why Choose Us Cards */
.card-why-choose-us {
    background-color: oklch(0.96 0.01 165 / 0.2) !important;
    border: 1px solid oklch(0.92 0.01 250 / 0.5) !important;
    border-radius: 1.5rem !important;
    padding: 2rem !important;
    transition: var(--transition-smooth) !important;
}
.card-why-choose-us:hover {
    box-shadow: var(--shadow-elegant) !important;
    border-color: oklch(0.48 0.13 162 / 0.25) !important;
    transform: translateY(-6px) !important;
}

/* Page Hero */
.page-hero {
    position: relative;
    padding: 4rem 0 6rem 0 !important;
    overflow: hidden;
    text-align: left;
    background-image: url('../assets/hero-port.jpg');
    background-size: cover;
    background-position: center;
    isolation: isolate;
}
@media (min-width: 768px) {
    .page-hero { padding: 6rem 0 8rem 0 !important; }
}
.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.8) 40%, rgba(16, 185, 129, 0.5) 100%);
    z-index: -1;
}
.page-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(800px 400px at 80% 20%, oklch(0.62 0.16 162 / 0.55), transparent 60%);
    opacity: 0.4;
    z-index: -2;
}
.page-hero .container { position: relative; z-index: 1 !important; }
.page-hero-glow-1 {
    position: absolute;
    right: -5rem; bottom: -5rem;
    width: 24rem; height: 24rem;
    border-radius: 50%;
    background-color: oklch(0.48 0.13 162 / 0.2);
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}
.page-hero-glow-2 {
    position: absolute;
    left: -5rem; top: -5rem;
    width: 24rem; height: 24rem;
    border-radius: 50%;
    background-color: oklch(0.42 0.15 268 / 0.2);
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}

/* Variant Badge */
.variant-badge {
    background: var(--gradient-brand);
    color: white;
    border-radius: 50rem;
    padding: 0.2rem 0.75rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Product detail image zoom */
.product-detail-img {
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: var(--shadow-elegant);
}
.product-detail-img img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.product-detail-img:hover img { transform: scale(1.04); }

/* Spec table */
.spec-table td { padding: 0.65rem 0; border-color: var(--border) !important; }
.spec-table td:first-child { font-weight: 600; color: var(--primary); width: 45%; }

/* Certifications badge grid */
.cert-badge {
    background: var(--card);
    border: 2px solid var(--border);
    border-radius: 1rem;
    padding: 1.5rem;
    text-align: center;
    transition: var(--transition-smooth);
}
.cert-badge:hover {
    border-color: oklch(0.48 0.13 162 / 0.35);
    box-shadow: var(--shadow-glow);
    transform: translateY(-4px);
}

/* Step timeline */
.step-number {
    width: 3rem; height: 3rem;
    border-radius: 50%;
    background: var(--gradient-brand);
    color: white;
    font-weight: 800;
    font-size: 1rem;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

/* Section dividers */
.section-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 0;
}

/* Responsive utilities */
@media (max-width: 576px) {
    .display-2 { font-size: 2.5rem !important; }
    .display-4 { font-size: 2rem !important; }
    .display-5 { font-size: 1.75rem !important; }
}

/* Scroll reveal animations */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Gallery Page Styles */
.gallery-item {
    overflow: hidden;
    border-radius: 1.25rem;
    cursor: pointer;
    aspect-ratio: 1;
    position: relative;
    box-shadow: var(--shadow-card);
    transition: var(--transition-smooth);
}
.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.gallery-item:hover img {
    transform: scale(1.08);
}
.gallery-item .overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.85) 0%, transparent 60%);
    opacity: 0;
    transition: var(--transition-smooth);
    display: flex;
    align-items: flex-end;
    padding: 1.25rem;
    color: white;
}
.gallery-item:hover .overlay {
    opacity: 1;
}