@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=Orbitron:wght@600;700;800&family=Roboto:wght@400;500;700&display=swap');

:root {
    --blue: #00a8ff;
    --cyan: #00eaff;
    --black: #02070d;
    --navy: #071b2b;
    --text: #eaf6ff;
    --muted: #8299ad;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    min-height: 100vh;
    color: var(--text);
    font-family: Roboto, sans-serif;
    background: #06111a;
    overflow-x: hidden;
}

.anti-drone-page {
    background:
        radial-gradient(circle at top, rgba(36, 128, 179, 0.18), transparent 32%),
        linear-gradient(180deg, #06111a 0%, #071821 100%);
}
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .18;
    background-image: linear-gradient(rgba(123,180,210,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(123,180,210,.055) 1px, transparent 1px);
    background-size: 64px 64px;
}
a { color: inherit; text-decoration: none; }
.detail-header {
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(786px, calc(100% - 40px));
    margin: auto;
    border-bottom: 1px solid rgba(0,168,255,.18);
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { width: 42px; height: 42px; object-fit: contain; filter: drop-shadow(0 0 12px rgba(0,168,255,.55)); }
.brand strong { display: block; font: 700 16px 'Chakra Petch', sans-serif; letter-spacing: 1.5px; }
.brand small { display: block; margin-top: 3px; color: var(--blue); font: 600 9px 'Chakra Petch', sans-serif; letter-spacing: 2px; }
.back-link { color: var(--muted); font: 600 11px 'Chakra Petch', sans-serif; letter-spacing: 1px; text-transform: uppercase; }
.back-link:hover { color: var(--cyan); }
.detail-hero {
    position: relative;
    min-height: 265px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    padding: 0 max(20px, calc((100% - 1180px) / 2)) 48px;
    background: linear-gradient(180deg, #0b4268, #08233a);
    border-bottom: 1px solid rgba(0,234,255,.3);
}
.detail-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: .12;
    background-image: linear-gradient(rgba(0,234,255,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(0,234,255,.16) 1px, transparent 1px);
    background-size: 44px 44px;
    transform: perspective(500px) rotateX(58deg) translateY(100px) scale(1.4);
}
.detail-hero::after {
    content: '';
    position: absolute;
    width: 260px;
    height: 260px;
    right: 12%;
    bottom: -105px;
    border-radius: 50%;
    border: 18px solid rgba(0,168,255,.22);
    box-shadow: 0 0 45px rgba(0,168,255,.25);
}
.hero-product-icon, .hero-product-title, .hero-brand-mark { position: relative; z-index: 1; }
.hero-product-icon { display: block; margin-bottom: 13px; color: var(--cyan); font-size: 48px; filter: drop-shadow(0 0 7px rgba(0,234,255,.35)); }
.hero-product-title { color: white; font: 700 clamp(30px, 5vw, 58px)/1 'Chakra Petch', sans-serif; letter-spacing: 0; text-transform: uppercase; }
.hero-product-title span { color: var(--cyan); }
.hero-brand-mark { position: absolute; right: max(30px, calc((100% - 1120px) / 2)); bottom: 30px; width: 150px; filter: drop-shadow(0 0 22px rgba(0,168,255,.7)); opacity: .9; }
.detail-main { width: min(786px, calc(100% - 40px)); margin: auto; padding: 0 0 90px; }

.anti-drone-main {
    width: min(1240px, calc(100% - 40px));
    padding-bottom: 120px;
}
.detail-main > .detail-kicker { width: 100vw; margin-left: calc((min(786px, 100vw - 40px) - 100vw) / 2); margin-bottom: 0; padding: 76px max(20px, calc((100vw - 786px) / 2)) 0; color: var(--blue); font: 700 10px 'Chakra Petch', sans-serif; letter-spacing: 3px; text-transform: uppercase; background: linear-gradient(180deg, rgba(5,74,122,.95), rgba(0,22,47,.98)); }

.anti-drone-hero {
    min-height: 220px;
    padding: 34px 34px 28px;
    border: 1px solid rgba(0,168,255,.18);
    border-bottom: none;
    background: linear-gradient(180deg, rgba(12, 32, 43, 0.92), rgba(9, 24, 34, 0.96));
    box-shadow: inset 0 0 22px rgba(114, 204, 255, 0.08);
}

.anti-drone-hero .hero-copy {
    position: relative;
    z-index: 1;
}

.anti-drone-hero .hero-product-icon {
    position: absolute;
    left: 32px;
    top: 24px;
    margin: 0;
}

.anti-drone-hero .detail-title {
    margin-left: 90px;
    margin-top: 24px;
    max-width: none;
    font-size: clamp(34px, 4vw, 60px);
}

.anti-drone-hero .detail-kicker {
    margin-left: 90px;
    margin-bottom: 10px;
}

.anti-drone-hero .hero-brand-mark {
    width: 110px;
    bottom: 18px;
    right: 34px;
    opacity: 0.8;
}
.detail-main > .detail-title { position: relative; width: 100vw; margin-left: calc((min(786px, 100vw - 40px) - 100vw) / 2); padding: 14px max(20px, calc((100vw - 786px) / 2)) 36px; color: white; font: 700 clamp(30px, 5vw, 58px)/1 'Chakra Petch', sans-serif; letter-spacing: 0; text-transform: uppercase; background: linear-gradient(180deg, rgba(0,22,47,.98), rgba(0,22,47,.98)); border-bottom: 1px solid rgba(0,234,255,.3); }
.detail-main > .detail-title::before { content: ''; position: absolute; right: max(178px, calc((100vw - 560px) / 2)); bottom: 28px; width: 155px; height: 1px; background: rgba(105,190,225,.4); }
.detail-main > .detail-title::after { content: ''; position: absolute; right: max(30px, calc((100vw - 726px) / 2)); bottom: 8px; width: 112px; height: 112px; background: url('assets/logo.png') center / contain no-repeat; opacity: .52; }
.detail-kicker { margin-bottom: 12px; color: var(--blue); font: 700 11px 'Chakra Petch', sans-serif; letter-spacing: 3px; text-transform: uppercase; }
.detail-title { max-width: 760px; color: white; font: 800 clamp(30px, 4vw, 48px)/1.08 Orbitron, sans-serif; letter-spacing: -.5px; }
.detail-title span { color: var(--blue); }
.detail-layout { display: grid; grid-template-columns: 138px 220px 1fr; gap: 20px; align-items: stretch; margin-top: 22px; padding: 12px; border: 1px solid rgba(69,145,180,.42); background: #091a27; box-shadow: 0 12px 32px rgba(0,0,0,.18); }
.detail-icon { min-height: 284px; display: flex; align-items: center; justify-content: center; border-right: 1px solid rgba(0,168,255,.2); background: rgba(0,12,22,.25); }
.detail-icon i { color: var(--blue); font-size: 54px; filter: drop-shadow(0 0 8px rgba(0,168,255,.38)); }
.detail-image-wrap { display: flex; align-items: center; justify-content: center; min-height: 284px; background: rgba(4,19,31,.55); }
.detail-image { width: 145px; height: 242px; object-fit: cover; border: 1px solid rgba(0,168,255,.55); box-shadow: 0 8px 22px rgba(0,0,0,.3); }
.detail-copy { display: flex; flex-direction: column; justify-content: center; padding: 18px 22px; }
.detail-code { color: var(--blue); font: 700 10px 'Chakra Petch', sans-serif; letter-spacing: 2px; }
.detail-name { margin: 13px 0 13px; color: white; font: 700 clamp(22px, 3vw, 32px)/1.2 'Chakra Petch', sans-serif; }
.detail-description { max-width: 650px; color: var(--muted); font: 400 12px/1.7 Roboto, sans-serif; }
.specs { display: grid; gap: 8px; margin-top: 18px; }
.spec { padding: 8px 10px; border-left: 2px solid var(--blue); color: #b5c9d7; background: #0d2534; font: 400 10px/1.45 Roboto, sans-serif; }
.spec::before { content: '>'; margin-right: 8px; color: var(--cyan); }
.detail-showcase {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.95fr);
    gap: 26px;
    margin-top: 0;
    padding: 26px 26px 0;
    border: 1px solid rgba(0,168,255,.2);
    border-top: none;
    background: rgba(7, 22, 31, 0.96);
    box-shadow: 0 20px 40px rgba(0,0,0,0.18);
}

.showcase-gallery {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.showcase-main {
    position: relative;
    overflow: hidden;
    min-height: 360px;
    border: 1px solid rgba(0,168,255,.26);
    background: linear-gradient(180deg, rgba(11, 29, 38, 1), rgba(8, 22, 31, 1));
    display: flex;
    align-items: center;
    justify-content: center;
}

.showcase-main img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
}

.showcase-subgrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.showcase-card {
    overflow: hidden;
    min-height: 180px;
    border: 1px solid rgba(0,168,255,.26);
    background: linear-gradient(180deg, rgba(11, 29, 38, 1), rgba(8, 22, 31, 1));
    display: flex;
    align-items: center;
    justify-content: center;
}

.showcase-card img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
}

.showcase-info {
    padding: 26px 24px 24px;
    border: 1px solid rgba(0,168,255,.26);
    background: linear-gradient(180deg, rgba(13, 33, 45, 0.96), rgba(9, 24, 34, 0.98));
}

.info-badge {
    display: inline-block;
    margin-bottom: 18px;
    padding: 8px 12px;
    border: 1px solid rgba(0,168,255,.35);
    background: rgba(0,168,255,.08);
    color: var(--cyan);
    font: 700 10px 'Chakra Petch', sans-serif;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.showcase-info h2 {
    margin-bottom: 16px;
    color: #f1fbff;
    font: 800 clamp(26px, 2.5vw, 38px) 'Chakra Petch', sans-serif;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.showcase-info p {
    color: #bfd1df;
    font: 400 14px/1.7 Roboto, sans-serif;
}

.feature-list {
    display: grid;
    gap: 10px;
    margin-top: 22px;
}

.feature-list div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 12px;
    border: 1px solid rgba(0,168,255,.18);
    background: rgba(8, 24, 34, 0.9);
    color: #d9edf8;
    font: 500 12px Roboto, sans-serif;
}

.feature-list span {
    color: #b3cbe0;
}

.feature-list strong {
    color: var(--cyan);
    font-weight: 700;
}

.spec-rail {
    display: grid;
    gap: 10px;
    margin-top: 22px;
}

.spec {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-left: 2px solid rgba(0,168,255,.8);
    background: rgba(12, 30, 41, 0.9);
    color: #dfeef8;
    font: 400 12px/1.4 Roboto, sans-serif;
}

.spec span {
    color: #a7c5d9;
}

.spec strong {
    color: #f2fbff;
}

.detail-action { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; margin-top: 22px; padding: 13px 19px; border: 1px solid var(--blue); color: white; font: 700 10px 'Chakra Petch', sans-serif; letter-spacing: 1.2px; text-transform: uppercase; transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease; }
.detail-action:hover { color: #00111d; background: var(--cyan); border-color: var(--cyan); box-shadow: 0 6px 18px rgba(0,168,255,.25); transform: translateY(-2px); }

.anti-drone-page {
    position: relative;
    background:
        radial-gradient(circle at center, rgba(27, 81, 129, 0.38), transparent 30%),
        linear-gradient(180deg, #061018 0%, #0a1f2e 100%);
}

.anti-drone-page::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(88, 164, 224, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(88, 164, 224, 0.12) 1px, transparent 1px);
    background-size: 70px 70px;
    mask-image: radial-gradient(circle at center, black 50%, transparent 100%);
    opacity: 0.75;
}

.anti-drone-layout {
    width: min(1240px, calc(100% - 50px));
    margin: 32px auto 90px;
    position: relative;
    z-index: 1;
}

.anti-drone-item {
    display: grid;
    grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
    align-items: center;
    gap: 28px;
    margin-bottom: 18px;
    padding: 0;
    border-radius: 18px;
    background: transparent;
    box-shadow: none;
}

.anti-drone-media {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 270px;
    padding: 18px;
    border-radius: 16px;
    background: rgba(238, 243, 247, 0.96);
    border: 2px solid rgba(72, 201, 255, 0.92);
    box-shadow:
        inset 0 0 0 2px rgba(15, 143, 255, 0.45),
        0 0 0 1px rgba(75, 197, 255, 0.28),
        0 0 28px rgba(58, 170, 255, 0.24);
}

.anti-drone-frame {
    position: relative;
    width: 100%;
    min-height: 240px;
    padding: 18px;
    background: rgba(236, 242, 247, 0.95);
    border-radius: 12px;
    border: 1px solid rgba(0, 168, 255, 0.35);
    box-shadow: inset 0 0 0 1px rgba(0, 168, 255, 0.18);
}

.anti-drone-frame::before {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(0, 168, 255, 0.28);
    border-radius: 10px;
}

.anti-drone-frame img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 200px;
    object-fit: contain;
    object-position: center;
    background: linear-gradient(180deg, rgba(196, 219, 236, 0.25), rgba(193, 216, 231, 0));
}

.anti-drone-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 250px;
    padding-left: 8px;
}

.anti-drone-kicker {
    display: inline-block;
    align-self: flex-start;
    margin-bottom: 14px;
    padding: 8px 12px;
    border: 1px solid rgba(0,168,255,.32);
    background: rgba(0,168,255,.08);
    color: var(--cyan);
    font: 700 10px 'Chakra Petch', sans-serif;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.anti-drone-copy h2 {
    color: #f1fbff;
    font: 800 clamp(34px, 2.5vw, 58px) 'Chakra Petch', sans-serif;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
    line-height: 0.95;
}

.anti-drone-copy p {
    max-width: 620px;
    color: #bfd1df;
    font: 400 15px/1.7 Roboto, sans-serif;
}

@media (max-width: 800px) { .detail-header { width: min(100% - 32px, 680px); } .detail-hero { min-height: 220px; padding: 0 24px 34px; } .detail-hero::after { width: 180px; height: 180px; right: 4%; bottom: -80px; border-width: 12px; } .hero-brand-mark { right: 28px; width: 110px; opacity: .62; } .detail-layout { grid-template-columns: 130px 1fr; } .detail-copy { grid-column: 1 / -1; } .detail-icon, .detail-image-wrap { min-height: 250px; } .detail-image { width: 160px; height: 235px; } .anti-drone-item { grid-template-columns: 1fr; gap: 18px; } .anti-drone-copy { min-height: auto; padding-left: 0; } }
@media (max-width: 520px) { .detail-header, .detail-main { width: calc(100% - 28px); } .detail-header { height: 70px; } .brand strong { font-size: 13px; } .back-link { font-size: 9px; } .detail-main { padding-top: 0; } .detail-main > .detail-kicker { width: 100vw; margin-left: calc((100% - 100vw) / 2); padding: 78px 20px 0; } .detail-main > .detail-title { width: 100vw; margin-left: calc((100% - 100vw) / 2); padding: 12px 20px 34px; overflow-wrap: anywhere; } .detail-main > .detail-title::after { right: 20px; bottom: 18px; width: 72px; height: 72px; border-width: 8px; } .detail-layout { grid-template-columns: 1fr; gap: 0; padding: 12px; } .detail-icon { min-height: 130px; border-right: 0; border-bottom: 1px solid rgba(0,168,255,.2); } .detail-image-wrap { min-height: 265px; } .detail-copy { padding: 25px 8px 12px; overflow-wrap: anywhere; } .detail-description, .spec { overflow-wrap: anywhere; } }