:root{
    --bg: #f6f8fb;
    --card: #ffffff;
    --muted: #6b7280;
    --primary: #0f3b66; /* deep blue */
    --accent: #2d9cdb;  /* bright accent */
    --glass: rgba(255,255,255,0.6);
    --shadow: 0 8px 30px rgba(15, 59, 102, 0.08);
}

*{box-sizing:border-box}
body{
    font-family: 'Roboto', Arial, sans-serif;
    background: linear-gradient(180deg,var(--bg),#ffffff);
    color: #0b1220;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

/* initial overall zoomed state while loader is visible */
#site-content{ transform-origin:top center; transform:scale(1.06); transition:transform .35s ease-out }


/* Hero */
.hero{
    background: linear-gradient(180deg, rgba(15,59,102,0.35), rgba(15,59,102,0.1)), url('camera-header.jpg') center/cover no-repeat;
    min-height:72vh;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
}
.hero-overlay{ /* kept for markup compatibility */
    position:absolute; inset:0; background: linear-gradient(90deg, rgba(15,59,102,0.55), rgba(45,156,219,0.2));
}
.hero-content{
    position:relative; z-index:2; color:#fff; text-align:center; max-width:900px; padding:3rem 1rem;
    backdrop-filter: blur(4px);
}
.hero .display-4{ font-weight:700; text-shadow:0 6px 20px rgba(10,20,30,0.35) }
.hero .lead{ opacity:0.95; color:rgba(255,255,255,0.9) }

@keyframes fadeInDown{ from{opacity:0; transform:translateY(-20px)} to{opacity:1; transform:none} }

.section-title{ color:var(--primary); font-weight:700; margin-bottom:1rem; letter-spacing:0.6px; font-size:1.5rem }

/* initial hidden state for reveal animations */
.reveal-ready{ opacity:0; transform:translateY(12px); will-change:transform,opacity }

/* Cards & services */
.card{ border:none; background:var(--card); border-radius:14px; box-shadow:var(--shadow); transition:transform .25s ease, box-shadow .25s ease; overflow:hidden }
.card:hover{ transform:translateY(-8px); box-shadow:0 18px 40px rgba(15,59,102,0.12) }
.card, .testimonial, .card-img-top { transform-origin:center center; will-change:transform,opacity }
.card:hover{ transform: translateY(-10px) scale(1.02) }
.card .card-body{ padding:1.6rem }

.card .card-body img{ width:56px; height:56px; object-fit:contain; display:inline-block; padding:10px; border-radius:50%; background:linear-gradient(135deg, rgba(45,156,219,0.12), rgba(15,59,102,0.06)); box-shadow:0 6px 18px rgba(10,20,30,0.06); margin-bottom:0.8rem }
.card .card-title{ margin-bottom:0.4rem; font-weight:700; color:#0b1220 }
.card .card-text{ color:var(--muted); font-size:0.95rem }

.row.g-4 > .col-sm-6 > .card, .row.g-4 > .col-md-3 > .card{ height:100% }

/* CTA buttons */
.cta-btn{ background:linear-gradient(90deg,var(--accent),var(--primary)); color:#fff; border-radius:999px; padding:0.6rem 1.6rem; font-weight:700; box-shadow:0 8px 24px rgba(45,156,219,0.14); border:0 }
.cta-btn:hover{ transform:translateY(-3px); box-shadow:0 16px 40px rgba(15,59,102,0.12) }

/* Testimonials */
.testimonial{ background:linear-gradient(180deg,#ffffff,#f7fbff); border-radius:12px; padding:1.6rem; box-shadow:0 8px 30px rgba(10,20,30,0.04); border-left:4px solid var(--accent) }
.testimonial:hover{ transform: translateY(-6px) scale(1.015); box-shadow:0 22px 48px rgba(15,59,102,0.12) }
.testimonial p{ color:#0b1220; margin-bottom:0.5rem }
.rating{ color:var(--accent); font-size:1.05rem; margin-bottom:0.4rem }

/* Contact area */
.contact-info{ background:linear-gradient(180deg,#ffffff,#fbfdff); border-radius:12px; padding:1.25rem; box-shadow:0 8px 30px rgba(10,20,30,0.04) }
.contact-info h5{ color:var(--primary); margin-top:0 }

.form-control:focus{ border-color:var(--primary); box-shadow:0 6px 20px rgba(15,59,102,0.06) }

footer{ background:var(--primary); color:#fff; padding:1.25rem 0; text-align:center }

/* Products image sizing */
.card-img-top{ height:220px; object-fit:cover; width:100%; border-radius:8px 8px 0 0 }

/* Responsive tweaks */
@media (max-width:767px){
    .hero{ min-height:56vh }
    .hero-content{ padding:2rem 1rem }
    .card .card-body img{ width:48px; height:48px; padding:8px }
}

@media (min-width:1200px){
    .container{ max-width:1200px }
}

/* Small utilities */
.muted { color:var(--muted) }

/* Reveal on scroll animation */
.reveal{ opacity:0; transform:translateY(16px) scale(0.995); transition:opacity .6s cubic-bezier(.2,.9,.2,1) var(--delay, 0ms), transform .6s cubic-bezier(.2,.9,.2,1) var(--delay, 0ms); will-change: opacity, transform }
.reveal.revealed{ opacity:1; transform:none }

/* Subtle pulsing accent for primary CTAs */
.cta-btn.pulse::after{ content:''; position:absolute; inset:0; border-radius:999px; box-shadow:0 10px 30px rgba(45,156,219,0.18); opacity:0; transform:scale(.95); transition:opacity .4s, transform .4s }
.cta-btn.pulse:hover::after{ opacity:1; transform:scale(1) }

/* Small entrance for images */
.img-fade{ transition:opacity .8s ease, transform .8s ease; opacity:0; transform:translateY(8px) }
.img-fade.revealed{ opacity:1; transform:none }

/* small hover lift for product images */
.card-img-top:hover{ transform:scale(1.02); }

/* fine-tune for many cards so stagger looks nice */
.row.g-4 .card{ transform-origin:center bottom }

/* Page loader */
#page-loader{ position:fixed; inset:0; background:linear-gradient(180deg, rgba(15,59,102,0.85), rgba(15,59,102,0.7)); display:flex; align-items:center; justify-content:center; z-index:9999; color:#fff; }
#page-loader[aria-hidden="true"]{ pointer-events:none; opacity:0; visibility:hidden; transition:opacity .45s ease, visibility .45s ease }
.loader-inner{ text-align:center }
.loader-mark{ width:88px; height:88px; display:block; margin:0 auto 12px; }
.loader-ring{ stroke-dasharray: 226; stroke-dashoffset: 226; transform-origin:center; transform:rotate(-90deg); animation: ring-spin 1.6s linear infinite }
.loader-text{ font-weight:700; letter-spacing:0.6px }
.loader-sub{ font-size:0.9rem; opacity:0.9; margin-top:6px }

@keyframes ring-spin{ 0%{ stroke-dashoffset:226 } 50%{ stroke-dashoffset:64 } 100%{ stroke-dashoffset:226 } }

/* fade out helper used by JS */
.loader-hidden{ opacity:0; visibility:hidden; pointer-events:none; transition:opacity .5s ease, visibility .5s ease }