*,
*::before,
*::after {
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root {
    --black:#0C0E12;
    --navy-900:#06182F;
    --navy-800:#0A2A55;
    --navy-700:#0E3A76;
    --blue-600:#1A4FA0;
    --blue-500:#2A66C4;
    --yellow:#FFD400;
    --yellow-soft:#FFE34D;
    --white:#FFFFFF;
    --paper:#F4F6FA;
    --gray-200:#E2E7F0;
    --gray-400:#9AA6B8;
    --gray-600:#5A677B;
    --ink:#16202E;
}

html {
    scroll-behavior:smooth;
}

body {
    font-family:'Inter',system-ui,sans-serif;
    color:var(--ink);
    line-height:1.65;
    background:var(--white);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
}

h1,
h2,
h3,
h4 {
    font-family:'Archivo',sans-serif;
    color:var(--navy-900);
    line-height:1.05;
    letter-spacing:-0.01em;
}

img {
    display:block;
    max-width:100%;
}

a {
    text-decoration:none;
    color:inherit;
}

.wrap {
    max-width:1240px;
    margin:0 auto;
    padding:0 28px;
}

.eyebrow {
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-family:'Archivo',sans-serif;
    font-weight:700;
    font-size:0.78rem;
    text-transform:uppercase;
    letter-spacing:0.18em;
    color:var(--blue-600);
}

.eyebrow::before {
    content:"";
    width:28px;
    height:3px;
    background:var(--yellow);
    border-radius:2px;
}

.eyebrow.light {
    color:var(--yellow);
}

.eyebrow.light::before {
    background:var(--yellow);
}

.h-sec {
    font-size:clamp(1.9rem,4vw,3rem);
    font-weight:800;
    margin:14px 0 16px;
}

.sub {
    font-size:1.05rem;
    color:var(--gray-600);
    max-width:560px;
}

/* ===== TOP BAR ===== */

.topbar {
    background:var(--navy-900);
    color:#A9BAD2;
    font-size:0.82rem;
}

.topbar-in {
    display:flex;
    justify-content:space-between;
    align-items:center;
    height:42px;
    gap:20px;
}

.topbar .ti {
    display:inline-flex;
    align-items:center;
    gap:7px;
}

.topbar .ti svg {
    color:var(--yellow);
    flex-shrink:0;
}

.topbar a {
    color:#A9BAD2;
    transition:color .2s;
}

.topbar a:hover {
    color:var(--yellow);
}

.topbar-right {
    display:flex;
    gap:24px;
    align-items:center;
}

/* ===== NAV ===== */

.nav {
    position:sticky;
    top:0;
    z-index:90;
    background:var(--white);
    transition:box-shadow .3s;
    border-bottom:3px solid var(--yellow);
}

.nav.scrolled {
    box-shadow:0 12px 34px rgba(0,0,0,.5);
}

.nav-in {
    display:flex;
    align-items:center;
    height:92px;
    gap:30px;
}

.logo {
    flex-shrink:0;
}

.logo img {
    height:60px;
    width:auto;
    display:block;
    transition:transform .25s;
}

.logo:hover img {
    transform:scale(1.03);
}

.nav-links {
    display:flex;
    align-items:center;
    gap:32px;
    list-style:none;
    margin:0 auto;
}

.nav-links a {
    color: var(--navy-900);
    font-family:'Archivo',sans-serif;
    font-weight:600;
    font-size:0.92rem;
    text-transform:uppercase;
    letter-spacing:.04em;
    position:relative;
    padding:30px 0;
}

.nav-links a::after {
    content:"";
    position:absolute;
    left:0;
    bottom:24px;
    width:0;
    height:2px;
    background:var(--yellow);
    transition:width .25s;
}

.nav-links a:hover {
    color:var(--yellow);
}

.nav-links a:hover::after {
    width:100%;
}

.nav-right {
    display:flex;
    align-items:center;
    gap:22px;
    flex-shrink:0;
}

.callbox {
    display:flex;
    align-items:center;
    gap:12px;
    padding-right:22px;
    border-right:1px solid rgba(255,255,255,.12);
}

.callbox .ph {
    width:44px;
    height:44px;
    border-radius:50%;
    background:var(--yellow);
    color:var(--navy-900);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    transition:transform .25s;
}

.callbox:hover .ph {
    transform:rotate(-12deg);
}

.callbox .ct {
    line-height:1.2;
}

.callbox .ct small {
    display:block;
    font-size:0.7rem;
    color:var(--gray-400);
    text-transform:uppercase;
    letter-spacing:.12em;
}

.callbox .ct b {
    font-family:'Archivo',sans-serif;
    font-weight:800;
    font-size:1.12rem;
    color:var(--navy-900);
}

.callbox .ct b:hover {
    color:var(--yellow);
}

.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    font-family:'Archivo',sans-serif;
    font-weight:700;
    font-size:0.95rem;
    padding:13px 26px;
    border-radius:6px;
    border:none;
    cursor:pointer;
    transition:.22s;
    white-space:nowrap;
}

.btn-yellow {
    background:var(--yellow);
    color:var(--navy-900);
}

.btn-yellow:hover {
    background:var(--yellow-soft);
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(255,212,0,.28);
}

.btn-ghost {
    background:transparent;
    color:var(--white);
    border:1.5px solid rgba(255,255,255,.35);
}

.btn-ghost:hover {
    border-color:var(--yellow);
    color:var(--yellow);
}

.btn-navy {
    background:var(--blue-600);
    color:var(--white);
}

.btn-navy:hover {
    background:var(--navy-700);
    transform:translateY(-2px);
}

.hamburger {
    display:none;
    flex-direction:column;
    gap:5px;
    background:none;
    border:none;
    cursor:pointer;
    padding:8px;
}

.hamburger span {
    width:26px;
    height:2.5px;
    background:var(--white);
    border-radius:2px;
    transition:.3s;
}

.mobile {
    display:none;
    position:fixed;
    inset:124px 0 0 0;
    background:var(--black);
    padding:30px 28px;
    z-index:89;
    flex-direction:column;
    gap:2px;
}

.mobile.open {
    display:flex;
}

.mobile a {
    color:var(--white);
    font-family:'Archivo',sans-serif;
    font-weight:700;
    font-size:1.25rem;
    padding:16px 0;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.mobile .btn {
    margin-top:22px;
}

/* ===== HERO ===== */

.hero {
    position:relative;
    color:var(--white);
    overflow:hidden;
}

.hero-bg {
    position:absolute;
    inset:0;
    background-image:linear-gradient(100deg,rgba(6,24,47,.96) 0%,rgba(10,42,85,.86) 45%,rgba(6,24,47,.55) 100%),url('https://images.unsplash.com/photo-1487754180451-c456f719a1fc?fm=jpg&q=70&w=2000&auto=format&fit=crop');
    background-size:cover;
    background-position:center;
}

.hero-bg::after {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to top,var(--white) 0%,rgba(255,255,255,0) 16%);
}

.hero-in {
    position:relative;
    z-index:2;
    padding:96px 0 120px;
}

.hero-tag {
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:rgba(255,212,0,.12);
    border:1px solid rgba(255,212,0,.3);
    color:var(--yellow);
    padding:8px 16px;
    border-radius:100px;
    font-size:0.82rem;
    font-weight:600;
    margin-bottom:26px;
    backdrop-filter:blur(6px);
}

.hero h1 {
    color:var(--white);
    font-size:clamp(2.5rem,6vw,4.6rem);
    font-weight:900;
    max-width:20ch;
    text-transform:uppercase;
    letter-spacing:-0.02em;
}

.hero h1 .y {
    color:var(--yellow);
}

.hero p {
    font-size:1.18rem;
    color:rgba(232,240,252,.9);
    max-width:700px;
    margin:22px 0 36px;
}

.hero-actions {
    display:flex;
    gap:14px;
    flex-wrap:wrap;
}

.hero-actions .btn {
    padding:16px 30px;
    font-size:1rem;
}

/* ===== STATS BAND ===== */

.stats {
    position:relative;
    z-index:3;
    margin-top:-58px;
}

.stats-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    background:var(--white);
    border-radius:14px;
    box-shadow:0 24px 60px rgba(6,24,47,.18);
    overflow:hidden;
}

.stat {
    padding:30px 26px;
    border-right:1px solid var(--gray-200);
    position:relative;
}

.stat:last-child {
    border-right:none;
}

.stat b {
    font-family:'Archivo',sans-serif;
    font-weight:900;
    font-size:2.4rem;
    color:var(--navy-900);
    display:block;
    line-height:1;
}

.stat b .acc {
    color:var(--blue-600);
}

.stat span {
    font-size:0.82rem;
    color:var(--gray-600);
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.06em;
    margin-top:8px;
    display:block;
}

.stat::before {
    content:"";
    position:absolute;
    left:0;
    top:24px;
    bottom:24px;
    width:3px;
    background:var(--yellow);
    opacity:0;
    transition:.3s;
}

.stat:hover::before {
    opacity:1;
}

/* ===== SERVICES ===== */

.services {
    padding:104px 0 100px;
}

.svc-head {
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:40px;
    margin-bottom:52px;
}

.svc-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}

.card {
    background:var(--white);
    border:1px solid var(--gray-200);
    border-radius:14px;
    padding:34px 30px;
    transition:.3s;
    position:relative;
    overflow:hidden;
}

.card::after {
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    height:4px;
    width:0;
    background:var(--yellow);
    transition:width .35s;
}

.card:hover {
    transform:translateY(-4px);
    box-shadow:0 20px 44px rgba(6,24,47,.12);
    border-color:transparent;
}

.card:hover::after {
    width:100%;
}

.ic {
    width:54px;
    height:54px;
    border-radius:11px;
    background:var(--navy-900);
    color:var(--yellow);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:20px;
    transition:.3s;
}

.card:hover .ic {
    background:var(--blue-600);
    color:var(--white);
}

.card h3 {
    font-size:1.28rem;
    font-weight:700;
    margin-bottom:9px;
}

.card p {
    font-size:0.96rem;
    color:var(--gray-600);
}

/* ===== ABOUT (image + content) ===== */

.about {
    padding:0 0 104px;
}

.about-grid {
    display:grid;
    grid-template-columns:1.05fr 1fr;
    gap:64px;
    align-items:center;
}

.about-media {
    position:relative;
}

.about-media img {
    border-radius:16px;
    width:100%;
    height:540px;
    object-fit:cover;
    box-shadow:0 30px 60px rgba(6,24,47,.22);
}

.badge-oval {
    position:absolute;
    left:-26px;
    bottom:38px;
    background:var(--navy-900);
    border:3px solid var(--yellow);
    border-radius:50%/55%;
    width:172px;
    height:150px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    color:var(--white);
    text-align:center;
    box-shadow:0 18px 40px rgba(6,24,47,.35);
}

.badge-oval b {
    font-family:'Archivo',sans-serif;
    font-weight:900;
    font-size:3rem;
    color:var(--yellow);
    line-height:.9;
}

.badge-oval span {
    font-size:0.74rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.08em;
    margin-top:4px;
    padding:0 18px;
}

.feat {
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:16px;
    margin-top:30px;
}

.feat li {
    display:flex;
    gap:14px;
    align-items:flex-start;
    font-size:1rem;
    font-weight:500;
    color:var(--ink);
}

.tick {
    flex-shrink:0;
    width:24px;
    height:24px;
    border-radius:50%;
    background:var(--blue-600);
    color:var(--white);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-top:2px;
}

.about .btn {
    margin-top:32px;
}

/* ===== FEATURE BANNER ===== */

.banner {
    position:relative;
    color:var(--white);
    overflow:hidden;
}

.banner-bg {
    position:absolute;
    inset:0;
    background-image:linear-gradient(90deg,rgba(6,24,47,.94) 0%,rgba(10,42,85,.7) 60%,rgba(6,24,47,.4) 100%),url('https://images.unsplash.com/photo-1527383418406-f85a3b146499?fm=jpg&q=70&w=2000&auto=format&fit=crop');
    background-size:cover;
    background-position:center;
}

.banner-in {
    position:relative;
    z-index:2;
    padding:92px 0;
    max-width:640px;
}

.banner h2 {
    color:var(--white);
    font-size:clamp(1.8rem,3.5vw,2.7rem);
    font-weight:800;
    margin:14px 0 16px;
}

.banner p {
    color:rgba(232,240,252,.9);
    font-size:1.08rem;
    margin-bottom:30px;
}

/* ===== BRANDS ===== */

.brands {
    padding:96px 0;
    text-align:center;
    background:var(--paper);
}

.brands .sub {
    margin:0 auto 44px;
}

.chips {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:11px;
    max-width:920px;
    margin:0 auto;
}

.chip {
    padding:9px 18px;
    border-radius:7px;
    background:var(--white);
    border:1px solid var(--gray-200);
    color:var(--navy-800);
    font-size:0.86rem;
    font-weight:600;
    transition:.2s;
}

.chip:hover {
    background:var(--navy-900);
    color:var(--yellow);
    border-color:var(--navy-900);
    transform:translateY(-2px);
}

/* ===== PRICING / AC ===== */

.pricing {
    padding:100px 0;
}

.price-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}

.price-card {
    border:1px solid var(--gray-200);
    border-radius:16px;
    padding:38px 32px;
    background:var(--white);
    transition:.3s;
}

.price-card.hot {
    background:var(--navy-900);
    border-color:var(--navy-900);
    color:var(--white);
    position:relative;
}

.price-card.hot h3,
.price-card.hot .amt {
    color:var(--white);
}

.price-tag {
    font-size:0.74rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.1em;
    color:var(--navy-900);
    background:var(--yellow);
    display:inline-block;
    padding:5px 12px;
    border-radius:5px;
    margin-bottom:18px;
}

.price-card h3 {
    font-size:1.35rem;
    margin-bottom:6px;
}

.price-card .desc {
    font-size:0.92rem;
    color:var(--gray-600);
    margin-bottom:22px;
}

.price-card.hot .desc {
    color:rgba(232,240,252,.75);
}

.amt {
    font-family:'Archivo',sans-serif;
    font-weight:900;
    font-size:3rem;
    color:var(--navy-900);
    line-height:1;
}

.amt small {
    font-size:1rem;
    font-weight:600;
    color:var(--gray-600);
}

.price-card.hot .amt small {
    color:rgba(232,240,252,.7);
}

.price-card .note {
    font-size:0.82rem;
    color:var(--gray-400);
    margin-top:10px;
}

/* ===== NEWS ===== */
.news{padding:100px 0;background:var(--paper);}
.news-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:50px;}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.post{background:var(--white);border:1px solid var(--gray-200);border-radius:14px;overflow:hidden;transition:.3s;display:flex;flex-direction:column;}
.post:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(6,24,47,.12);border-color:transparent;}
.post .thumb{position:relative;height:198px;overflow:hidden;}
.post .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s;}
.post:hover .thumb img{transform:scale(1.06);}
.post .cat{position:absolute;top:14px;left:14px;background:var(--yellow);color:var(--navy-900);font-family:'Archivo',sans-serif;font-weight:700;font-size:0.7rem;text-transform:uppercase;letter-spacing:.08em;padding:5px 11px;border-radius:5px;}
.post .body{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1;}
.post .date{display:inline-flex;align-items:center;gap:7px;font-size:0.8rem;color:var(--gray-400);font-weight:600;margin-bottom:10px;}
.post .date svg{color:var(--blue-600);flex-shrink:0;}
.post h3{font-size:1.15rem;font-weight:700;line-height:1.28;margin-bottom:10px;}
.post p{font-size:0.93rem;color:var(--gray-600);margin-bottom:18px;flex:1;}
.readmore{display:inline-flex;align-items:center;gap:7px;font-family:'Archivo',sans-serif;font-weight:700;font-size:0.84rem;color:var(--blue-600);text-transform:uppercase;letter-spacing:.04em;transition:gap .2s;}
.readmore svg{transition:transform .2s;}
.readmore:hover{color:var(--navy-900);}
.readmore:hover svg{transform:translateX(4px);}

.text-block {
    padding: 40px 0;
}

/* ===== REVIEWS ===== */

.reviews {
    padding:100px 0;
    background:var(--navy-900);
    color:var(--white);
    position:relative;
    overflow:hidden;
}

.reviews::before {
    content:"";
    position:absolute;
    top:-120px;
    right:-120px;
    width:420px;
    height:360px;
    border:40px solid rgba(255,212,0,.05);
    border-radius:50%;
}

.reviews .eyebrow {
    color:var(--yellow);
}

.reviews .h-sec {
    color:var(--white);
}

.rev-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
    margin-top:50px;
    position:relative;
    z-index:2;
}

.rev {
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.1);
    border-radius:14px;
    padding:32px;
}

.stars {
    display:flex;
    gap:3px;
    color:var(--yellow);
    margin-bottom:16px;
    font-size:1.05rem;
    letter-spacing:2px;
}

.rev p {
    font-size:0.98rem;
    color:rgba(232,240,252,.92);
    font-style:italic;
    margin-bottom:20px;
}

.rev .who {
    font-family:'Archivo',sans-serif;
    font-weight:700;
    color:var(--white);
}

.rev .src {
    font-size:0.8rem;
    color:var(--gray-400);
}

/* ===== CONTACT ===== */

.contact {
    padding:100px 0;
}

.contact-grid {
    display:grid;
    grid-template-columns:1fr 1.1fr;
    gap:54px;
}

.cinfo {
    display:flex;
    gap:16px;
    align-items:flex-start;
    margin-bottom:26px;
}

.cic {
    width:48px;
    height:48px;
    border-radius:11px;
    background:var(--paper);
    color:var(--blue-600);
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    border:1px solid var(--gray-200);
}

.cinfo h4 {
    font-size:1rem;
    font-weight:700;
    margin-bottom:2px;
}

.cinfo p,
.cinfo a {
    font-size:0.96rem;
    color:var(--gray-600);
}

.cinfo a:hover {
    color:var(--blue-600);
}

.map {
    border-radius:16px;
    overflow:hidden;
    border:1px solid var(--gray-200);
    min-height:420px;
    box-shadow:0 20px 50px rgba(6,24,47,.12);
}

.map iframe {
    width:100%;
    height:100%;
    min-height:420px;
    border:0;
    display:block;
}

/* ===== FOOTER ===== */

.footer {
    background:var(--white);
    color:#9FB0C6;
    padding:64px 0 30px;
    border-top: 1px solid var(--gray-200);
}

.foot-grid {
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr;
    gap:48px;
}

.footer .logo img {
    height:60px;
    margin-bottom:18px;
}

.footer p {
    font-size:0.92rem;
    max-width:320px;
}

.foot-col h5 {
    font-family:'Archivo',sans-serif;
    color:var(--navy-900);
    font-weight:700;
    font-size:0.95rem;
    text-transform:uppercase;
    letter-spacing:.08em;
    margin-bottom:18px;
}

.foot-col ul {
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:11px;
}

.foot-col a,
.foot-col li {
    font-size:0.92rem;
    color:#9FB0C6;
    transition:color .2s;
}

.foot-col a:hover {
    color:var(--yellow);
}

.foot-bottom {
    border-top:1px solid rgba(255,255,255,.08);
    margin-top:48px;
    padding-top:26px;
    text-align:center;
    font-size:0.82rem;
    color:#6E7E93;
}

/* reveal */

.reveal {
    opacity:0;
    transform:translateY(24px);
    transition:opacity .6s ease,transform .6s ease;
}

.reveal.in {
    opacity:1;
    transform:none;
}

/* ===== RESPONSIVE ===== */

@media(max-width:980px) {
    .svc-grid,
    .price-grid,
    .rev-grid {
        grid-template-columns:repeat(2,1fr);
    }

    .about-grid {
        grid-template-columns:1fr;
        gap:40px;
    }

    .about-media img {
        height:420px;
    }

    .contact-grid {
        grid-template-columns:1fr;
        gap:40px;
    }

    .foot-grid {
        grid-template-columns:1fr 1fr;
        gap:36px;
    }

    .stats-grid {
        grid-template-columns:repeat(2,1fr);
    }

    .stat:nth-child(2) {
        border-right:none;
    }

    .stat:nth-child(1),
    .stat:nth-child(2) {
        border-bottom:1px solid var(--gray-200);
    }

}

@media(max-width:760px) {
    .nav-links,
    .nav-right {
        display:none;
    }

    .hamburger {
        display:flex;
        margin-left:auto;
    }

    .hide-sm {
        display:none!important;
    }

    .nav-in {
        height:78px;
    }

    .logo img {
        height:48px;
    }

    .mobile {
        inset:120px 0 0 0;
    }

    .svc-head {
        flex-direction:column;
        align-items:flex-start;
        gap:18px;
    }

    .svc-grid,
    .price-grid,
    .rev-grid {
        grid-template-columns:1fr;
    }

    .hero-in {
        padding:64px 0 100px;
    }

    .badge-oval {
        left:auto;
        right:18px;
        bottom:18px;
        width:140px;
        height:124px;
    }

    .badge-oval b {
        font-size:2.3rem;
    }

}

@media(max-width:520px) {
    .wrap {
        padding:0 18px;
    }

    .stats-grid {
        grid-template-columns:1fr;
    }

    .stat {
        border-right:none!important;
        border-bottom:1px solid var(--gray-200);
    }

    .stat:last-child {
        border-bottom:none;
    }

    .hero-actions .btn {
        width:100%;
    }

    .foot-grid {
        grid-template-columns:1fr;
    }

}