:root {
    --ink: #081522;
    --navy: #071a2c;
    --blue: #0b72c8;
    --blue-2: #2aa8ff;
    --cyan: #7ed7ff;
    --white: #ffffff;
    --soft-white: rgba(255,255,255,.82);
    --glass: rgba(8, 28, 48, .58);
    --glass-light: rgba(255, 255, 255, .10);
    --line: rgba(255,255,255,.20);
    --shadow: 0 24px 80px rgba(0, 11, 25, .34);
}

html { font-size: 16px; min-height: 100%; scroll-behavior: smooth; }
* { box-sizing: border-box; }
body {
    min-height: 100vh;
    margin: 0;
    color: #f7fbff;
    background:
        linear-gradient(135deg, rgba(3, 20, 36, .94), rgba(4, 46, 78, .82)),
        url('/Hero.jpg') center/cover fixed no-repeat;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 15% 20%, rgba(42,168,255,.30), transparent 31%),
        radial-gradient(circle at 84% 60%, rgba(126,215,255,.18), transparent 28%);
    pointer-events: none;
}

a { color: inherit; }

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(5, 21, 36, .82);
    border-bottom: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.site-nav-container { padding: .55rem clamp(1rem, 4vw, 4.5rem); }
.brand-lockup { display: inline-flex; align-items: center; gap: .65rem; padding: 0; }
.brand-logo { width: 62px; height: 46px; object-fit: contain; }
.brand-name { color: #fff; font-size: 1.65rem; font-weight: 750; letter-spacing: .01em; }
.navbar-nav .nav-link {
    color: rgba(255,255,255,.82) !important;
    padding: .65rem .95rem !important;
    border-radius: 999px;
    font-weight: 600;
    transition: .2s ease;
}
.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active {
    color: #fff !important;
    background: rgba(255,255,255,.12);
}
.navbar-toggler { border-color: rgba(255,255,255,.35); }

.site-main { min-height: calc(100vh - 210px); }
.home-stage, .page-shell { width: min(1420px, calc(100% - 2rem)); margin: 0 auto; padding: clamp(1.2rem, 3vw, 3rem) 0 4rem; }
.glass-panel, .glass-card {
    background: linear-gradient(135deg, rgba(13,41,64,.72), rgba(8,29,48,.50));
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    backdrop-filter: blur(24px) saturate(125%);
    -webkit-backdrop-filter: blur(24px) saturate(125%);
}
.home-glass { border-radius: 34px; padding: clamp(1rem, 2.6vw, 2.7rem); overflow: hidden; }
.home-row + .home-row { margin-top: clamp(1.15rem, 2vw, 2rem); }
.home-intro { padding: clamp(1rem, 3vw, 2.3rem) clamp(.5rem, 4vw, 4rem); }
.eyebrow, .section-kicker {
    display: inline-block;
    color: var(--cyan);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .17em;
    text-transform: uppercase;
    margin-bottom: .8rem;
}
.home-intro h1, .page-hero h1 {
    max-width: 1050px;
    margin: 0 auto;
    color: #fff;
    font-size: clamp(2.25rem, 5.7vw, 5rem);
    line-height: .98;
    letter-spacing: -.045em;
    font-weight: 800;
}
.lead-copy, .page-hero p {
    max-width: 920px;
    margin: 1.3rem auto 0;
    color: rgba(255,255,255,.80);
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    line-height: 1.65;
}
.media-frame { position: relative; overflow: hidden; border-radius: 26px; border: 1px solid rgba(255,255,255,.20); background: rgba(0,0,0,.26); }
.home-video, .hero-ad-image { width: 100%; display: block; }
.home-video { aspect-ratio: 16/9; object-fit: cover; background: #06121e; }
.hero-ad-image { max-height: 720px; object-fit: cover; }
.image-caption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1.15rem clamp(1rem, 3vw, 2rem);
    background: linear-gradient(0deg, rgba(3,16,29,.9), rgba(3,16,29,.12));
    color: #fff; font-weight: 650;
}
.about-home { padding: clamp(1.3rem, 3.5vw, 3.3rem); background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.12); border-radius: 26px; }
.about-home h2 { max-width: 960px; margin: 0 0 1.25rem; font-size: clamp(1.8rem, 3.4vw, 3.2rem); letter-spacing: -.025em; }
.about-home p { max-width: 1080px; color: rgba(255,255,255,.78); line-height: 1.75; font-size: 1.05rem; }
.home-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }
.btn { border-radius: 999px; font-weight: 700; padding-left: 1.35rem; padding-right: 1.35rem; }
.btn-primary { background: linear-gradient(135deg, #0a80db, #21a8ff); border: 0; box-shadow: 0 10px 32px rgba(25,151,232,.30); }
.btn-outline-light { border-color: rgba(255,255,255,.44); }

.page-hero { border-radius: 30px; text-align: center; padding: clamp(2.3rem, 6vw, 5.5rem) clamp(1.2rem, 5vw, 5rem); margin-bottom: 1.4rem; }
.page-hero h1 { font-size: clamp(2.4rem, 5.4vw, 4.7rem); }
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.product-card { overflow: hidden; border-radius: 26px; }
.product-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: #fff; }
.product-card-wide { grid-column: 1 / -1; display: grid; grid-template-columns: 1.1fr 1fr; }
.product-card-wide img { height: 100%; aspect-ratio: auto; }
.card-body-copy { padding: 1.5rem; }
.card-body-copy h2 { font-size: 1.45rem; margin-bottom: .75rem; }
.card-body-copy p, .industry-card p, .about-story p, .service-step p, .legal-copy p { color: rgba(255,255,255,.74); line-height: 1.7; }
.text-link { color: var(--cyan); text-decoration: none; font-weight: 750; }
.text-link:hover { color: #fff; }

.service-timeline { border-radius: 28px; padding: clamp(1.2rem, 4vw, 3rem); }
.service-step { display: grid; grid-template-columns: 84px 1fr; gap: 1.4rem; padding: 1.5rem 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.service-step:last-child { border-bottom: 0; }
.step-number { font-size: 2.2rem; font-weight: 850; color: rgba(126,215,255,.55); }
.service-step h2 { font-size: clamp(1.35rem, 2.4vw, 2rem); margin: 0 0 .5rem; }
.cta-band { margin-top: 1.4rem; border-radius: 28px; padding: clamp(1.3rem, 4vw, 2.5rem); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cta-band h2 { margin: 0; }

.about-grid { display: grid; grid-template-columns: 1.5fr .8fr; gap: 1.4rem; }
.about-story, .fact-panel, .industry-card, .contact-panel, .contact-checklist, .legal-copy { border-radius: 26px; padding: clamp(1.4rem, 3.5vw, 2.6rem); }
.about-story h2 { font-size: clamp(1.8rem, 3.2vw, 3rem); margin-bottom: 1.3rem; }
.fact-panel { display: grid; gap: 1rem; }
.fact { padding: 1rem; border-radius: 18px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.10); }
.fact strong { display: block; font-size: 2rem; color: #fff; }
.fact span { color: rgba(255,255,255,.68); }
.industry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 1.4rem; }
.industry-card h3 { font-size: 1.45rem; }

.contact-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 1.4rem; }
.contact-panel h2, .contact-checklist h2 { font-size: clamp(1.7rem, 3vw, 2.6rem); }
.contact-list { display: grid; gap: .8rem; margin: 1.5rem 0; }
.contact-list a, .contact-list > div { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem; border-radius: 16px; text-decoration: none; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.10); }
.contact-list span { color: rgba(255,255,255,.60); }
.contact-list strong { text-align: right; }
.contact-note { color: rgba(255,255,255,.68); }
.contact-checklist ul { padding-left: 1.2rem; color: rgba(255,255,255,.78); line-height: 1.9; }
.legal-copy h2 { margin-top: 1.4rem; }
.legal-copy h2:first-child { margin-top: 0; }

.site-footer { background: rgba(4, 17, 29, .86); border-top: 1px solid rgba(255,255,255,.13); backdrop-filter: blur(18px); }
.site-footer-inner { display: flex; justify-content: space-between; gap: 2rem; padding: 2rem clamp(1rem, 4vw, 4.5rem) 1rem; color: rgba(255,255,255,.70); }
.footer-brand { color: #fff; font-size: 1.45rem; font-weight: 800; }
.footer-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .55rem 1rem; }
.footer-meta a { color: rgba(255,255,255,.78); text-decoration: none; }
.copyright { color: rgba(255,255,255,.43); padding: .25rem clamp(1rem, 4vw, 4.5rem) 1.5rem; font-size: .88rem; }

@media (max-width: 991.98px) {
    .navbar-collapse { padding-top: .8rem; }
    .product-grid, .industry-grid { grid-template-columns: 1fr 1fr; }
    .product-card-wide { grid-column: 1 / -1; }
    .about-grid, .contact-grid { grid-template-columns: 1fr; }
    .site-footer-inner { flex-direction: column; }
    .footer-meta { justify-content: flex-start; }
}

@media (max-width: 767.98px) {
    .brand-logo { width: 52px; height: 40px; }
    .brand-name { font-size: 1.35rem; }
    .home-stage, .page-shell { width: min(100% - 1rem, 1420px); padding-top: .75rem; }
    .home-glass { border-radius: 24px; padding: .65rem; }
    .media-frame, .about-home, .page-hero, .glass-card, .glass-panel { border-radius: 20px; }
    .image-caption { position: static; background: rgba(3,16,29,.78); flex-direction: column; align-items: flex-start; }
    .product-grid, .industry-grid { grid-template-columns: 1fr; }
    .product-card-wide { display: block; }
    .service-step { grid-template-columns: 52px 1fr; gap: .8rem; }
    .step-number { font-size: 1.5rem; }
    .cta-band { flex-direction: column; align-items: flex-start; }
    .contact-list a, .contact-list > div { flex-direction: column; }
    .contact-list strong { text-align: left; }
}
