/* ==================================================================
   SCUBA NANO — "The Descent"
   The page is a dive: surface light at the top, abyssal blue at the
   technical section, then back up to daylight for reviews & contact.
   Brand: deep blue #15538f · sky blue #5aa9e6 (Poseidon logo)
   Accent: coral — the color you lose first underwater.
   ================================================================== */
:root {
  --deep: #15538f;
  --deep-2: #0d3a66;
  --sky: #5aa9e6;
  --coral: #ff7a59;
  --coral-soft: #ffb59f;
  --foam: #eaf4fc;
  --ink: #0c1f33;
  --abyss: #041627;

  --sea1: #0f4a82;   /* 5 m */
  --sea2: #0c3b6b;   /* 18 m */
  --sea3: #082c52;   /* 40 m */
  --sea4: #04182e;   /* 55 m */
  --sea5: #0a3460;   /* ascending */

  --radius: 18px;
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Archivo", system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--foam);
  background: var(--deep-2);
  line-height: 1.65;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: var(--sky); }

.container { width: min(1120px, 92%); margin: 0 auto; }
.center { text-align: center; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.12; }
h2 { font-size: clamp(2rem, 4.6vw, 3.2rem); letter-spacing: -0.01em; margin-bottom: 1.1rem; }
h2 em, h1 em { font-style: italic; color: var(--sky); }

.kicker {
  text-transform: uppercase; letter-spacing: .28em; font-size: .74rem;
  color: var(--coral-soft); font-weight: 600; margin-bottom: .9rem;
}
.section-sub { color: rgba(234,244,252,.75); max-width: 640px; margin-bottom: 2.6rem; font-size: 1.05rem; }
.lede { font-size: 1.1rem; color: var(--sky); margin-bottom: 1rem; font-weight: 500; }

/* ============ Depth gauge ============ */
.gauge {
  position: fixed; right: 1.4rem; top: 50%; transform: translateY(-50%);
  z-index: 90; text-align: right;
  display: flex; flex-direction: column; align-items: flex-end; gap: .15rem;
  pointer-events: none;
  opacity: 0; transition: opacity .6s;
}
.js .gauge.on { opacity: 1; }
.gauge-needle {
  width: 34px; height: 2px; background: var(--coral);
  box-shadow: 0 0 12px rgba(255,122,89,.8);
  margin-bottom: .3rem;
}
.gauge-depth {
  font-family: var(--font-display); font-style: italic;
  font-size: 1.6rem; color: #fff; line-height: 1;
  transition: transform .3s;
}
.gauge-label {
  font-size: .62rem; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(234,244,252,.55);
}
.gauge.light .gauge-depth { color: var(--deep-2); }
.gauge.light .gauge-label { color: rgba(13,58,102,.55); }

/* ============ Navbar ============ */
.navbar {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: transparent;
  transition: background .35s, box-shadow .35s;
}
.navbar.scrolled {
  background: rgba(4, 22, 39, .82);
  backdrop-filter: blur(12px);
  box-shadow: 0 2px 24px rgba(0,0,0,.35);
}
.nav-inner {
  width: min(1120px, 92%); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: .7rem 0;
}
.nav-brand {
  display: flex; align-items: center; gap: .65rem;
  text-decoration: none; color: #fff;
  font-size: 1rem; letter-spacing: .12em;
}
.nav-brand img { width: 42px; height: 42px; border-radius: 50%; }
.nav-links { display: flex; align-items: center; gap: 1.5rem; }
.nav-links a {
  color: rgba(234,244,252,.85); text-decoration: none;
  font-weight: 500; font-size: .92rem; transition: color .2s;
}
.nav-links a:hover { color: #fff; }
.nav-cta {
  background: var(--coral); color: var(--abyss) !important;
  padding: .5rem 1.2rem; border-radius: 999px; font-weight: 700;
}
.nav-cta:hover { background: var(--coral-soft); }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: #fff; margin: 5px 0; border-radius: 2px; }

/* ============ Hero · the surface ============ */
.hero {
  position: relative; min-height: 100svh;
  display: grid; place-items: center; text-align: center;
  padding: 7rem 1rem 5rem;
  background:
    radial-gradient(1100px 500px at 50% -8%, rgba(255,255,255,.28), transparent 55%),
    linear-gradient(180deg, #7dbef0 0%, #3d8ed3 26%, var(--deep) 62%, var(--sea1) 100%);
  overflow: hidden;
}
/* sun rays through the water */
.hero-rays {
  position: absolute; inset: -20% -10%;
  background:
    conic-gradient(from 178deg at 50% -10%,
      transparent 0deg, rgba(255,255,255,.10) 4deg, transparent 9deg,
      transparent 14deg, rgba(255,255,255,.14) 19deg, transparent 25deg,
      transparent 31deg, rgba(255,255,255,.08) 36deg, transparent 42deg);
  animation: rays 13s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes rays {
  from { transform: rotate(-3deg) scale(1.05); opacity: .8; }
  to   { transform: rotate(3deg)  scale(1.12); opacity: 1; }
}
.hero-content { position: relative; z-index: 2; max-width: 800px; }
.hero-logo {
  width: 138px; height: 138px; margin: 0 auto 1.6rem; border-radius: 50%;
  box-shadow: 0 0 0 7px rgba(255,255,255,.18), 0 18px 50px rgba(4,22,39,.45);
}
.hero-kicker {
  letter-spacing: .3em; text-transform: uppercase;
  font-size: .76rem; color: rgba(255,255,255,.85); margin-bottom: 1.1rem;
}
.hero h1 {
  font-size: clamp(2.5rem, 6.4vw, 4.6rem);
  color: #fff; font-weight: 550;
  text-wrap: balance;
}
.hero-sub {
  margin: 1.3rem auto 2rem; max-width: 540px;
  color: rgba(255,255,255,.88); font-weight: 300; font-size: 1.14rem;
}
.hero-actions { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; }
.hero-badges {
  display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap;
  margin-top: 2.4rem;
}
.hero-badges span {
  font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.35); border-radius: 999px;
  padding: .35rem .9rem; color: rgba(255,255,255,.85);
  backdrop-filter: blur(4px);
}
.hero-scroll {
  position: absolute; bottom: 1.6rem; left: 0; right: 0;
  font-size: .78rem; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(255,255,255,.7); z-index: 2;
}
.hero-scroll span { display: inline-block; animation: sink 2s ease-in-out infinite; }
@keyframes sink { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* bubbles */
.hero-bubbles span {
  position: absolute; bottom: -60px;
  width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.55), rgba(255,255,255,.08) 60%);
  border: 1px solid rgba(255,255,255,.3);
  animation: rise 14s linear infinite;
}
.hero-bubbles span:nth-child(1) { left: 8%;  animation-duration: 13s; }
.hero-bubbles span:nth-child(2) { left: 20%; width: 9px;  height: 9px;  animation-duration: 17s; animation-delay: 2s; }
.hero-bubbles span:nth-child(3) { left: 33%; width: 24px; height: 24px; animation-duration: 11s; animation-delay: 4s; }
.hero-bubbles span:nth-child(4) { left: 48%; width: 11px; height: 11px; animation-duration: 19s; animation-delay: 1s; }
.hero-bubbles span:nth-child(5) { left: 60%; animation-duration: 15s; animation-delay: 6s; }
.hero-bubbles span:nth-child(6) { left: 72%; width: 8px;  height: 8px;  animation-duration: 12s; animation-delay: 3s; }
.hero-bubbles span:nth-child(7) { left: 84%; width: 20px; height: 20px; animation-duration: 18s; animation-delay: 5s; }
.hero-bubbles span:nth-child(8) { left: 93%; width: 13px; height: 13px; animation-duration: 14s; animation-delay: 7s; }
@keyframes rise {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translateY(-110vh) translateX(26px); opacity: 0; }
}

/* hero load-in choreography */
.js .load-1, .js .load-2, .js .load-3, .js .load-4, .js .load-5, .js .load-6 {
  opacity: 0; transform: translateY(18px);
  animation: load-in .9s cubic-bezier(.2,.7,.2,1) forwards;
}
.js .load-1 { animation-delay: .05s; }
.js .load-2 { animation-delay: .2s; }
.js .load-3 { animation-delay: .35s; }
.js .load-4 { animation-delay: .5s; }
.js .load-5 { animation-delay: .65s; }
.js .load-6 { animation-delay: .85s; }
@keyframes load-in { to { opacity: 1; transform: none; } }

/* ============ Depth zones (each darker than the last) ============ */
.section { padding: 6rem 0; position: relative; }
.sea-1 { background: linear-gradient(180deg, var(--sea1), var(--sea2)); }
.sea-2 { background: linear-gradient(180deg, var(--sea2), var(--sea3)); }
.sea-3 { background: linear-gradient(180deg, var(--sea3), var(--sea4)); }
.sea-4 {
  background:
    radial-gradient(800px 360px at 80% 0%, rgba(90,169,230,.07), transparent 60%),
    linear-gradient(180deg, var(--sea4), var(--abyss));
}
.sea-5 { background: linear-gradient(180deg, var(--abyss), var(--sea5)); }

/* surfacing: light sections near the end */
.surface-1 {
  background: linear-gradient(180deg, var(--sea5), #cfe6f7 18%, var(--foam));
  color: var(--ink);
}
.surface-2 { background: var(--foam); color: var(--ink); }
.surface-1 h2 em, .surface-2 h2 em { color: var(--deep); }
.surface-1 .section-sub { color: #4a5d70; }
.surface-1 .kicker, .surface-2 .kicker { color: #d4603f; }
.surface-1 a, .surface-2 a { color: var(--deep); }

/* ============ Stats band ============ */
.band { background: var(--sea1); padding: 3.2rem 0; border-top: 1px solid rgba(255,255,255,.08); }
.band-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;
  text-align: center;
}
.stat strong {
  display: block; font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.9rem, 3.6vw, 2.7rem); color: #fff; line-height: 1.1;
}
.stat span {
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(234,244,252,.6);
}

/* ============ Split layout ============ */
.split {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: 3.2rem; align-items: start;
}

/* ============ Instructor ============ */
.cred-list { list-style: none; margin: 1.3rem 0; }
.cred-list li {
  padding: .75rem 0 .75rem 1.6rem; position: relative;
  border-bottom: 1px solid rgba(255,255,255,.09);
  color: rgba(234,244,252,.88);
}
.cred-list li::before {
  content: ""; position: absolute; left: 0; top: 1.32rem;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--coral); box-shadow: 0 0 10px rgba(255,122,89,.7);
}
.cred-list strong { color: #fff; }
.cred-langs { color: rgba(234,244,252,.6); font-size: .92rem; font-style: italic; }

.instructor-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius); padding: 2.2rem;
  backdrop-filter: blur(6px);
  position: sticky; top: 6rem;
}
.instructor-emblem img {
  width: 130px; height: 130px; border-radius: 50%; margin: 0 auto 1.6rem;
  box-shadow: 0 0 0 5px rgba(90,169,230,.25), 0 14px 34px rgba(0,0,0,.4);
}
.instructor-card h3 { font-size: 1.15rem; margin-bottom: 1rem; color: var(--sky); }
.award-list { list-style: none; margin-bottom: 1.4rem; }
.award-list li {
  display: flex; gap: .9rem; align-items: baseline;
  padding: .55rem 0; border-bottom: 1px solid rgba(255,255,255,.08);
  color: rgba(234,244,252,.92);
}
.award-year {
  font-family: var(--font-display); font-style: italic;
  color: var(--coral-soft); min-width: 4.4rem; font-size: .95rem;
}
.instructor-note { font-size: .92rem; color: rgba(234,244,252,.65); }

/* ============ Dive sites ============ */
.sites-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
}
.site-card {
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius); overflow: hidden;
  transition: transform .3s, border-color .3s, box-shadow .3s;
}
.site-card:hover {
  transform: translateY(-7px);
  border-color: rgba(90,169,230,.45);
  box-shadow: 0 22px 44px rgba(0,0,0,.35);
}
.site-art {
  height: 118px; display: grid; place-items: center;
  font-size: 2.4rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.art-wreck { background: linear-gradient(135deg, #0a2f57, #155a9b); }
.art-wall  { background: linear-gradient(135deg, #0c3a64, #1d6cb3); }
.art-cave  { background: linear-gradient(135deg, #071f3a, #11497f); }
.art-cave2 { background: linear-gradient(135deg, #05172c, #0e3c6c); }
.art-shore { background: linear-gradient(135deg, #14517f, #3d8ed3); }
.art-tech  { background: linear-gradient(135deg, #03101f, #0b3257); }
.site-art span { filter: drop-shadow(0 6px 14px rgba(0,0,0,.4)); }
.site-body { padding: 1.4rem 1.5rem 1.6rem; }
.site-body h3 { font-size: 1.12rem; margin-bottom: .5rem; }
.site-body p { font-size: .92rem; color: rgba(234,244,252,.7); }
.site-price {
  margin-top: .9rem !important;
  font-family: var(--font-display); font-style: italic;
  font-size: 1.5rem !important; color: var(--coral-soft) !important;
}
.site-price span { font-family: var(--font-body); font-style: normal; font-size: .8rem; color: rgba(234,244,252,.55); }
.sites-note {
  margin-top: 2.4rem; text-align: center;
  color: rgba(234,244,252,.65); font-size: .95rem;
}
.sites-note strong { color: var(--coral-soft); }

/* ============ Courses ============ */
.course-feature {
  display: grid; grid-template-columns: 1.5fr .8fr; gap: 2rem; align-items: center;
  background: linear-gradient(120deg, rgba(255,122,89,.14), rgba(90,169,230,.10));
  border: 1px solid rgba(255,122,89,.35);
  border-radius: var(--radius);
  padding: 2.4rem 2.6rem; margin-bottom: 2.6rem;
}
.course-tag {
  text-transform: uppercase; letter-spacing: .2em; font-size: .72rem;
  color: var(--coral-soft); margin-bottom: .6rem; font-weight: 600;
}
.course-feature h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: .7rem; }
.course-feature p { color: rgba(234,244,252,.8); }
.course-feature-price { text-align: center; }
.price {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(3rem, 6vw, 4.2rem); color: #fff; line-height: 1;
  margin-bottom: 1.1rem;
}
.course-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.3rem; }
.course-card {
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius); padding: 1.6rem;
  display: flex; flex-direction: column;
  transition: transform .3s, border-color .3s;
}
.course-card:hover { transform: translateY(-6px); border-color: rgba(90,169,230,.45); }
.course-depth {
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--sky); margin-bottom: .8rem; font-weight: 600;
}
.course-card h3 { font-size: 1.05rem; margin-bottom: .5rem; }
.course-card p { font-size: .87rem; color: rgba(234,244,252,.65); flex: 1; }
.price-sm {
  font-family: var(--font-display); font-style: italic;
  font-size: 1.6rem; color: var(--coral-soft); margin-top: .9rem;
}

/* ============ Technical rows ============ */
.tech-rows { border-top: 1px solid rgba(255,255,255,.12); }
.tech-row {
  display: flex; justify-content: space-between; align-items: center; gap: 2rem;
  padding: 1.5rem .4rem;
  border-bottom: 1px solid rgba(255,255,255,.12);
  transition: background .25s, padding-left .25s;
}
.tech-row:hover { background: rgba(90,169,230,.06); padding-left: 1rem; }
.tech-row h3 { font-size: 1.25rem; }
.tech-row p { color: rgba(234,244,252,.55); font-size: .9rem; }
.tech-row .price-sm { margin: 0; white-space: nowrap; }

/* ============ Price tables ============ */
.price-tables { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.price-table {
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius); padding: 1.8rem 2rem;
}
.price-table h3 { color: var(--sky); font-size: 1.1rem; margin-bottom: .9rem; }
.price-table ul { list-style: none; }
.price-table li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .5rem 0; border-bottom: 1px dashed rgba(255,255,255,.12);
  color: rgba(234,244,252,.85); font-size: .95rem;
}
.price-table li:last-child { border-bottom: 0; }
.price-table span {
  font-family: var(--font-display); font-style: italic;
  color: var(--coral-soft); font-size: 1.1rem;
}

/* ============ Reviews (light) ============ */
.stars { color: #f5a623; letter-spacing: .12em; }
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.review {
  background: #fff; border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(13,58,102,.10);
  padding: 1.9rem; display: flex; flex-direction: column; gap: .7rem;
}
.review p { color: #2c3e50; }
.review footer { color: #7b8a99; font-size: .85rem; }
#reviews .center .btn { margin-top: 2.2rem; }

/* ============ Contact (light) ============ */
.contact-list { list-style: none; margin: 1.4rem 0 1.8rem; }
.contact-list li { display: flex; align-items: center; gap: .75rem; padding: .4rem 0; }
.map-wrap {
  border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 16px 40px rgba(13,58,102,.18);
  aspect-ratio: 4 / 3;
}
.map-wrap iframe { width: 100%; height: 100%; border: 0; }

/* ============ FAQ (light) ============ */
.faq-section { padding-bottom: 3rem; }
.faq-container { max-width: 780px; }
.faq-list { margin-top: 1.4rem; }
.faq {
  background: #fff; border-radius: 14px;
  box-shadow: 0 8px 24px rgba(13,58,102,.08);
  margin-bottom: .9rem; overflow: hidden;
  border: 1px solid rgba(21,83,143,.08);
}
.faq summary {
  cursor: pointer; list-style: none;
  padding: 1.15rem 3rem 1.15rem 1.5rem;
  font-weight: 600; color: var(--deep-2); font-size: 1.02rem;
  position: relative; user-select: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 1.4rem; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 400;
  color: var(--coral); transition: transform .25s;
}
.faq[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq[open] summary { color: var(--deep); }
.faq p {
  padding: 0 1.5rem 1.3rem; color: #44586c; font-size: .97rem;
}

/* ============ Buttons ============ */
.btn {
  display: inline-block; text-decoration: none; font-weight: 700;
  padding: .8rem 1.7rem; border-radius: 999px; font-size: .95rem;
  transition: transform .18s, box-shadow .18s, background .2s, color .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn-coral {
  background: var(--coral); color: var(--abyss);
  box-shadow: 0 10px 26px rgba(255,122,89,.35);
}
.btn-coral:hover { background: var(--coral-soft); }
.btn-ghost { color: #fff; border: 2px solid rgba(255,255,255,.55); }
.btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.1); }
.btn-outline { color: var(--deep); border: 2px solid var(--deep); }
.btn-outline:hover { background: var(--deep); color: #fff; }
.sea-1 .btn-outline, .sea-2 .btn-outline, .sea-3 .btn-outline, .sea-4 .btn-outline {
  color: var(--sky); border-color: var(--sky);
}

/* ============ Footer ============ */
.footer {
  background: var(--abyss); color: #9db8d2;
  padding: 2.8rem 0; text-align: center; font-size: .92rem;
}
.footer-brand {
  display: flex; align-items: center; justify-content: center; gap: .7rem;
  margin-bottom: .7rem; color: #fff; font-weight: 600; letter-spacing: .06em;
}
.footer-brand img { width: 40px; height: 40px; border-radius: 50%; }
.footer-copy { margin-top: .5rem; font-size: .78rem; color: #5f7f9e; }

/* ============ Scroll reveal (only when JS runs) ============ */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s ease; }
.js .reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js [class^="load-"] { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .hero-rays, .hero-bubbles span, .hero-scroll span { animation: none !important; }
}

/* ============ Responsive ============ */
@media (max-width: 1020px) {
  .sites-grid { grid-template-columns: repeat(2, 1fr); }
  .course-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .gauge { display: none; }
  .split { grid-template-columns: 1fr; gap: 2.4rem; }
  .instructor-card { position: static; }
  .band-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; }
  .course-feature { grid-template-columns: 1fr; text-align: left; }
  .course-feature-price { text-align: left; }
  .reviews-grid, .price-tables { grid-template-columns: 1fr; }
  .tech-row { flex-direction: row; }
  .nav-toggle { display: block; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: rgba(4, 22, 39, .97);
    max-height: 0; overflow: hidden; transition: max-height .3s ease;
  }
  .nav-links.open { max-height: 420px; }
  .nav-links a { padding: .95rem 1.5rem; width: 100%; text-align: center; }
  .nav-cta { border-radius: 0; margin-top: .3rem; }
}
@media (max-width: 560px) {
  .sites-grid, .course-grid { grid-template-columns: 1fr; }
  .tech-row { flex-direction: column; align-items: flex-start; gap: .4rem; }
}