/* ============================================================
   custom.css — "Sombre Market · Deep Current" water theme layer
   Loads after pro.css, before component-level <style> blocks.
   ============================================================ */

::selection{ background: rgba(34,211,238,.35); color:#fff; }

html{ scroll-behavior:smooth; }

/* Custom scrollbar — looks like light through a water column */
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:#020c14; }
::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, #67e8f9, #0ea5e9 55%, #075985);
  border-radius: 999px;
  border: 2px solid #020c14;
}
::-webkit-scrollbar-thumb:hover{ background: linear-gradient(180deg, #a5f3fc, #22d3ee 55%, #0369a1); }
* { scrollbar-color: #22d3ee #020c14; scrollbar-width: thin; }

:focus-visible{
  outline: 2px solid rgba(34,211,238,.65) !important;
  outline-offset: 2px;
}

/* Gentle "rise to the surface" reveal as components scroll into view */
.component{
  animation: surfaceRise .7s cubic-bezier(.22,1,.36,1) both;
  animation-timeline: view();
  animation-range: entry 0% cover 30%;
}
@supports not (animation-timeline: view()) {
  .component{ animation: none; }
}
@keyframes surfaceRise{
  from{ opacity:0; transform: translateY(18px); filter: blur(2px); }
  to{ opacity:1; transform: translateY(0); filter: blur(0); }
}

/* Glassy lift for generic cards / panels shipped by pro.css, re-tinted cyan */
.card, .product-card, .feature-card, .faq-item, .stat-card{
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover, .product-card:hover, .feature-card:hover{
  box-shadow: 0 18px 40px rgba(2,12,20,.55), 0 0 0 1px rgba(34,211,238,.15), 0 0 24px rgba(34,211,238,.10);
}

/* Reusable wave divider — class="wave-divider" (or wave-divider--flip) between any two sections */
.wave-divider{ position:relative; height:64px; margin-top:-1px; pointer-events:none; z-index:1; }
.wave-divider svg{ width:100%; height:100%; display:block; }
.wave-divider--flip{ transform:scaleY(-1); }

/* Small reusable "droplet" bullet used anywhere a themed dot is wanted */
.aqua-dot{
  display:inline-block; width:8px; height:8px; border-radius:50%;
  background: radial-gradient(circle, #a5f3fc 25%, #22d3ee 65%, #0ea5e9 100%);
  box-shadow: 0 0 10px rgba(34,211,238,.6);
}

@media (max-width: 640px){
  .ocean-horizon{ opacity:.6; }
}