body{background:#050a14}
.abyss-dots{position:fixed;inset:0;pointer-events:none;z-index:0;background-image:radial-gradient(1px 1px at 12% 18%,#00ffd566,transparent),radial-gradient(1px 1px at 78% 32%,#4dd9ff55,transparent),radial-gradient(1.5px 1.5px at 45% 72%,#7b68ee44,transparent),radial-gradient(1px 1px at 88% 85%,#00ffd544,transparent),radial-gradient(1px 1px at 25% 55%,#4dd9ff33,transparent),radial-gradient(1px 1px at 62% 12%,#00ffd544,transparent)}
.site-header,.section,.footer{position:relative;z-index:1}

.sonar-hero{background:#0a1520;padding:3rem 0 0;overflow:hidden}
.sonar-hero .container{padding-bottom:3rem}
.sonar-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center}
.sonar-grid h1{font-size:clamp(1.45rem,3.5vw,2rem);font-weight:900;color:#e8f4fc;line-height:1.35;margin-bottom:1rem}
.sonar-grid h1 em{font-style:normal;color:#00ffd5}
.sonar-desc{color:#6a8fa8;font-size:.95rem;margin-bottom:1.4rem;max-width:520px}
.sonar-btns{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1.6rem}
.btn-glow{display:inline-block;background:#0d3048;color:#00ffd5;border:1px solid #00ffd5;padding:.65rem 1.35rem;font-weight:900;font-size:.9rem;text-decoration:none!important}
.btn-glow:hover{background:#123d58}
.btn-ghost{display:inline-block;color:#4dd9ff;border:1px solid #1a3a52;padding:.65rem 1.35rem;font-weight:700;font-size:.9rem;text-decoration:none!important}
.btn-ghost:hover{border-color:#4dd9ff}
.depth-stats{display:flex;flex-wrap:wrap;gap:1rem}
.depth-stat{background:#0d1b2a;border:1px solid #1a3a52;padding:.85rem 1.1rem;min-width:100px;text-align:center}
.depth-stat strong{display:block;font-size:1.35rem;color:#00ffd5;font-weight:900}
.depth-stat span{font-size:.75rem;color:#6a8fa8}

.sonar-frame{position:relative;display:flex;justify-content:center;align-items:center;padding:1.5rem}
.sonar-ring{position:absolute;width:min(340px,85vw);height:min(340px,85vw);border:1px solid #1a3a5244;border-radius:50%}
.sonar-ring:nth-child(1){width:100%;height:100%}
.sonar-ring:nth-child(2){width:78%;height:78%;border-color:#00ffd533}
.sonar-ring:nth-child(3){width:56%;height:56%;border-color:#4dd9ff22}
.sonar-frame img{position:relative;z-index:2;border:1px solid #1a3a52;border-radius:4px;width:min(420px,100%)}

.ping-cards{background:#080f18;padding:3.5rem 0}
.ping-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.ping-card{background:#0a1520;border:1px solid #1a3a52;padding:0;overflow:hidden}
.ping-depth{background:#0d3048;color:#00ffd5;font-size:.72rem;font-weight:800;padding:.45rem .85rem;letter-spacing:.08em}
.ping-body{padding:1.15rem 1.2rem 1.3rem}
.ping-body h3{font-size:1rem;color:#e8f4fc;margin-bottom:.5rem;font-weight:800}
.ping-body p{font-size:.88rem;color:#6a8fa8;line-height:1.65}
.ping-dot{display:inline-block;width:8px;height:8px;background:#00ffd5;border-radius:50%;margin-right:.4rem;vertical-align:middle}

.dive-path{background:#050a14;padding:3.5rem 0}
.dive-ladder{display:flex;flex-direction:column;gap:0;max-width:720px;margin:0 auto;border-left:2px solid #00ffd5;padding-left:2rem}
.dive-step{position:relative;padding:1.25rem 0 1.25rem 1.5rem;border-bottom:1px dashed #1a3a52}
.dive-step:last-child{border-bottom:none}
.dive-step::before{content:"";position:absolute;left:-2.05rem;top:1.5rem;width:10px;height:10px;background:#00ffd5;border-radius:50%}
.dive-tag{font-size:.72rem;color:#4dd9ff;font-weight:800;letter-spacing:.06em;margin-bottom:.25rem}
.dive-step h3{font-size:1rem;color:#e8f4fc;margin-bottom:.35rem;font-weight:800}
.dive-step p{font-size:.88rem;color:#6a8fa8}

.readout-dual{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.readout-panel{background:#0a1520;border:1px solid #1a3a52}
.readout-head{background:#0d1b2a;padding:.55rem .9rem;font-size:.72rem;color:#4dd9ff;font-weight:800;letter-spacing:.06em;border-bottom:1px solid #1a3a52}
.readout-body{padding:1.1rem 1.2rem}
.readout-body h3{font-size:.95rem;color:#e8f4fc;margin-bottom:.65rem;font-weight:800}
.readout-body li{padding:.35rem 0 .35rem 1rem;font-size:.86rem;color:#6a8fa8;border-left:2px solid #00ffd544;position:relative}
.readout-body li+li{margin-top:.25rem}

.beacon-cta{background:#0d1b2a;border-top:1px solid #1a3a52;border-bottom:1px solid #1a3a52;padding:3rem 0;text-align:center}
.beacon-cta h2{font-size:clamp(1.2rem,3vw,1.55rem);color:#e8f4fc;margin-bottom:.5rem;font-weight:900}
.beacon-cta p{color:#6a8fa8;margin-bottom:1.25rem;font-size:.92rem}

@media(max-width:900px){
  .sonar-grid{grid-template-columns:1fr}
  .sonar-frame{order:-1}
  .ping-row{grid-template-columns:1fr}
  .readout-dual{grid-template-columns:1fr}
}