.pnd-ocean-guide,

    .pnd-ocean-guide * {

      box-sizing: border-box;

    }



.pnd-ocean-guide {

  width: 100%;

  margin: 70px auto 40px;

  padding: 0;

  font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;

  color: #123247;

  background: transparent;

}



.pnd-ocean-wrap {

  position: relative;

  overflow: hidden;

  border-radius: 38px;

  padding: 46px;

  background:

    radial-gradient(circle at 8% 10%, rgba(0, 224, 255, .36), transparent 26%),

    radial-gradient(circle at 92% 12%, rgba(255, 190, 88, .34), transparent 27%),

    radial-gradient(circle at 78% 85%, rgba(22, 199, 154, .32), transparent 30%),

    radial-gradient(circle at 12% 90%, rgba(72, 140, 255, .18), transparent 28%),

    linear-gradient(135deg, #ecfbff 0%, #f7fffb 42%, #fff8e7 100%);

  box-shadow: 0 30px 80px rgba(3, 83, 111, .18);

  border: 1px solid rgba(255,255,255,.88);

  isolation: isolate;

}



.pnd-ocean-wrap:before {

  content: "";

  position: absolute;

  inset: 0;

  z-index: 0;

  background:

    linear-gradient(120deg, rgba(255,255,255,.5), transparent 34%),

    repeating-linear-gradient(

      135deg,

      rgba(255,255,255,.18) 0px,

      rgba(255,255,255,.18) 1px,

      transparent 1px,

      transparent 18px

    );

  pointer-events: none;

}



.pnd-ocean-wrap:after {

  content: "";

  position: absolute;

  left: -12%;

  right: -12%;

  bottom: -82px;

  height: 180px;

  z-index: 0;

  background:

    radial-gradient(ellipse at 20% 40%, rgba(0, 184, 217, .38), transparent 42%),

    radial-gradient(ellipse at 55% 30%, rgba(22, 199, 154, .34), transparent 44%),

    radial-gradient(ellipse at 85% 45%, rgba(0, 140, 200, .32), transparent 40%);

  border-radius: 50% 50% 0 0;

  opacity: .85;

}



.pnd-ocean-content {

  position: relative;

  z-index: 2;

}



.pnd-ocean-hero {

  display: grid;

  grid-template-columns: 1.08fr .92fr;

  gap: 24px;

  align-items: stretch;

  margin-bottom: 24px;

}



.pnd-ocean-main {

  position: relative;

  overflow: hidden;

  border-radius: 34px;

  padding: 34px;

  background:

    radial-gradient(circle at 0% 0%, rgba(255,255,255,.5), transparent 30%),

    linear-gradient(135deg, rgba(255,255,255,.88), rgba(232, 250, 255, .9));

  border: 1px solid rgba(255,255,255,.9);

  box-shadow: 0 20px 50px rgba(7, 100, 130, .1);

}



.pnd-ocean-main:after {

  content: "";

  position: absolute;

  width: 260px;

  height: 260px;

  right: -110px;

  top: -110px;

  border-radius: 50%;

  background: conic-gradient(from 180deg, rgba(0,184,217,.22), rgba(255,202,58,.24), rgba(22,199,154,.22), rgba(0,184,217,.22));

  filter: blur(.2px);

}



.pnd-kicker {

  position: relative;

  z-index: 2;

  display: inline-flex;

  align-items: center;

  gap: 10px;

  padding: 10px 16px;

  border-radius: 999px;

  background: linear-gradient(135deg, #00a7d8, #16c79a 55%, #ffb703);

  color: #fff;

  font-size: 13px;

  font-weight: 900;

  letter-spacing: .04em;

  text-transform: uppercase;

  box-shadow: 0 12px 26px rgba(0, 167, 216, .25);

  margin-bottom: 18px;

}



.pnd-kicker svg,

.pnd-btn svg {

  width: 18px;

  height: 18px;

  stroke: currentColor;

  fill: none;

  stroke-width: 2.35;

  stroke-linecap: round;

  stroke-linejoin: round;

  flex: 0 0 auto;

}



.pnd-ocean-title {

  position: relative;

  z-index: 2;

  margin: 0 0 18px;

  font-size: clamp(34px, 4vw, 60px);

  line-height: .96;

  letter-spacing: -.06em;

  color: #0b3046;

  font-weight: 950;

}



.pnd-ocean-title span {

  background: linear-gradient(135deg, #0099d8, #10b981, #ffb703);

  -webkit-background-clip: text;

  background-clip: text;

  color: transparent;

}



.pnd-ocean-lead {

  position: relative;

  z-index: 2;

  margin: 0;

  font-size: 18px;

  line-height: 1.82;

  color: #365c70;

  font-weight: 520;

}



.pnd-ocean-lead strong {

  color: #078ca3;

  font-weight: 950;

}



.pnd-ocean-side {

  display: grid;

  grid-template-rows: 1fr auto;

  gap: 16px;

}



.pnd-photo-card {

  position: relative;

  overflow: hidden;

  min-height: 315px;

  border-radius: 34px;

  padding: 28px;

  color: #fff;

  background:

    linear-gradient(145deg, rgba(5, 44, 63, .72), rgba(0, 150, 170, .42)),

    url("https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=1400&q=80");

  background-size: cover;

  background-position: center;

  box-shadow: 0 24px 54px rgba(7, 89, 116, .24);

}



.pnd-photo-card:before {

  content: "";

  position: absolute;

  inset: 0;

  background:

    radial-gradient(circle at 20% 15%, rgba(255, 202, 58, .28), transparent 28%),

    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0, 44, 64, .55));

}



.pnd-photo-inner {

  position: relative;

  z-index: 2;

  height: 100%;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  gap: 22px;

}



.pnd-photo-card h3 {

  margin: 0;

  font-size: 29px;

  line-height: 1.04;

  letter-spacing: -.04em;

  font-weight: 950;

  color: #fff;

}



.pnd-photo-card p {

  margin: 10px 0 0;

  color: rgba(255,255,255,.9);

  line-height: 1.62;

  font-size: 15px;

}



.pnd-chip-row {

  display: flex;

  flex-wrap: wrap;

  gap: 9px;

}



.pnd-chip-row span {

  padding: 9px 12px;

  border-radius: 999px;

  background: rgba(255,255,255,.17);

  border: 1px solid rgba(255,255,255,.25);

  backdrop-filter: blur(10px);

  color: #fff;

  font-size: 12px;

  font-weight: 850;

}



.pnd-side-stats {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 12px;

}



.pnd-stat {

  border-radius: 22px;

  padding: 16px 14px;

  background: rgba(255,255,255,.78);

  border: 1px solid rgba(255,255,255,.9);

  box-shadow: 0 16px 34px rgba(7, 100, 130, .08);

  text-align: center;

}



.pnd-stat strong {

  display: block;

  font-size: 22px;

  line-height: 1;

  color: #078ca3;

  font-weight: 950;

  margin-bottom: 6px;

}



.pnd-stat span {

  display: block;

  color: #527184;

  font-size: 12px;

  line-height: 1.35;

  font-weight: 800;

}



.pnd-wave-divider {

  display: block;

  width: 100%;

  height: 44px;

  margin: 8px 0 18px;

  opacity: .78;

}



.pnd-card-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 16px;

  margin: 24px 0;

}



.pnd-info-card {

  position: relative;

  overflow: hidden;

  min-height: 220px;

  border-radius: 28px;

  padding: 24px;

  background: rgba(255,255,255,.83);

  border: 1px solid rgba(255,255,255,.95);

  box-shadow: 0 18px 42px rgba(6, 91, 122, .09);

}



.pnd-info-card:nth-child(1) {

  background:

    radial-gradient(circle at 90% 0%, rgba(0, 184, 217, .2), transparent 38%),

    rgba(255,255,255,.86);

}



.pnd-info-card:nth-child(2) {

  background:

    radial-gradient(circle at 100% 0%, rgba(255, 183, 3, .22), transparent 40%),

    rgba(255,255,255,.86);

}



.pnd-info-card:nth-child(3) {

  background:

    radial-gradient(circle at 100% 0%, rgba(22, 199, 154, .22), transparent 40%),

    rgba(255,255,255,.86);

}



.pnd-info-card:nth-child(4) {

  background:

    radial-gradient(circle at 100% 0%, rgba(70, 132, 255, .2), transparent 40%),

    rgba(255,255,255,.86);

}



.pnd-modern-icon {

  width: 50px;

  height: 50px;

  display: inline-grid;

  place-items: center;

  border-radius: 18px;

  background: linear-gradient(135deg, #00a7d8, #16c79a);

  box-shadow: 0 14px 25px rgba(0, 167, 216, .22);

  margin-bottom: 15px;

}



.pnd-info-card:nth-child(2) .pnd-modern-icon {

  background: linear-gradient(135deg, #ffb703, #fb8500);

  box-shadow: 0 14px 25px rgba(251, 133, 0, .2);

}



.pnd-info-card:nth-child(3) .pnd-modern-icon {

  background: linear-gradient(135deg, #12b886, #00b4d8);

  box-shadow: 0 14px 25px rgba(18, 184, 134, .2);

}



.pnd-info-card:nth-child(4) .pnd-modern-icon {

  background: linear-gradient(135deg, #4361ee, #00b4d8);

  box-shadow: 0 14px 25px rgba(67, 97, 238, .18);

}



.pnd-modern-icon svg {

  width: 25px;

  height: 25px;

  stroke: #fff;

  fill: none;

  stroke-width: 2.35;

  stroke-linecap: round;

  stroke-linejoin: round;

}



.pnd-info-card h3 {

  margin: 0 0 10px;

  color: #0f3148;

  font-size: 19px;

  line-height: 1.17;

  letter-spacing: -.025em;

  font-weight: 950;

}



.pnd-info-card p {

  margin: 0;

  color: #4b6b7e;

  font-size: 15px;

  line-height: 1.66;

}



.pnd-section {

  display: grid;

  grid-template-columns: .86fr 1.14fr;

  gap: 22px;

  margin: 24px 0;

}



.pnd-section.reverse {

  grid-template-columns: 1.14fr .86fr;

}



.pnd-deep-card {

  border-radius: 32px;

  padding: 32px;

  background: #fff;

  border: 1px solid rgba(255,255,255,.96);

  box-shadow: 0 22px 52px rgba(6, 91, 122, .09);

}



.pnd-deep-card.color {

  background:

    radial-gradient(circle at 100% 0%, rgba(255, 202, 58, .28), transparent 36%),

    radial-gradient(circle at 0% 100%, rgba(0, 184, 217, .24), transparent 34%),

    linear-gradient(135deg, #07324a, #078ca3 58%, #12b886);

  color: #fff;

}



.pnd-deep-card.blue {

  background:

    radial-gradient(circle at 0% 0%, rgba(255,255,255,.32), transparent 30%),

    linear-gradient(135deg, #006d9e, #00a7d8 45%, #16c79a);

  color: #fff;

}



.pnd-deep-card.sand {

  background:

    radial-gradient(circle at 100% 0%, rgba(255, 183, 3, .28), transparent 35%),

    linear-gradient(135deg, #fffdf6, #fff0c7);

}



.pnd-deep-card h2 {

  margin: 0 0 16px;

  color: #0f3148;

  font-size: clamp(24px, 2.7vw, 38px);

  line-height: 1.06;

  letter-spacing: -.045em;

  font-weight: 950;

}



.pnd-deep-card.color h2,

.pnd-deep-card.blue h2 {

  color: #fff;

}



.pnd-deep-card p {

  margin: 0 0 15px;

  color: #405f71;

  font-size: 16px;

  line-height: 1.84;

}



.pnd-deep-card.color p,

.pnd-deep-card.blue p {

  color: rgba(255,255,255,.9);

}



.pnd-deep-card p:last-child {

  margin-bottom: 0;

}



.pnd-ocean-list {

  display: grid;

  gap: 12px;

  margin-top: 18px;

}



.pnd-ocean-item {

  display: grid;

  grid-template-columns: 38px 1fr;

  gap: 13px;

  align-items: flex-start;

  padding: 14px;

  border-radius: 20px;

  background: rgba(255,255,255,.16);

  border: 1px solid rgba(255,255,255,.24);

  backdrop-filter: blur(10px);

}



.pnd-ocean-item .num {

  width: 38px;

  height: 38px;

  display: inline-grid;

  place-items: center;

  border-radius: 14px;

  background: rgba(255,255,255,.22);

  color: #fff;

  font-weight: 950;

  font-size: 14px;

}



.pnd-ocean-item strong {

  display: block;

  color: #fff;

  margin-bottom: 3px;

  font-size: 15px;

  line-height: 1.25;

}



.pnd-ocean-item span {

  display: block;

  color: rgba(255,255,255,.84);

  font-size: 14px;

  line-height: 1.52;

}



.pnd-facts-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 14px;

  margin-top: 20px;

}



.pnd-fact {

  padding: 16px;

  border-radius: 20px;

  background: rgba(255,255,255,.72);

  border: 1px solid rgba(255,255,255,.92);

  box-shadow: 0 12px 26px rgba(6, 91, 122, .06);

}



.pnd-fact strong {

  display: block;

  margin-bottom: 6px;

  color: #078ca3;

  font-size: 15px;

  font-weight: 950;

}



.pnd-fact span {

  display: block;

  color: #4b6b7e;

  font-size: 14px;

  line-height: 1.55;

}



.pnd-route {

  margin: 24px 0;

  border-radius: 34px;

  padding: 34px;

  background:

    radial-gradient(circle at 0% 0%, rgba(0, 184, 217, .2), transparent 32%),

    radial-gradient(circle at 100% 0%, rgba(255, 202, 58, .23), transparent 32%),

    rgba(255,255,255,.82);

  border: 1px solid rgba(255,255,255,.95);

  box-shadow: 0 22px 52px rgba(6, 91, 122, .09);

}



.pnd-route h2,

.pnd-variants h2 {

  margin: 0 0 18px;

  color: #0f3148;

  font-size: clamp(24px, 2.7vw, 38px);

  line-height: 1.06;

  letter-spacing: -.045em;

  font-weight: 950;

}



.pnd-route-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 14px;

}



.pnd-route-step {

  position: relative;

  overflow: hidden;

  padding: 20px;

  border-radius: 24px;

  background: #fff;

  border: 1px solid rgba(255,255,255,.95);

  box-shadow: 0 16px 34px rgba(6, 91, 122, .07);

  min-height: 185px;

}



.pnd-route-step:before {

  content: "";

  position: absolute;

  width: 88px;

  height: 88px;

  right: -35px;

  top: -35px;

  border-radius: 50%;

  background: linear-gradient(135deg, rgba(0,184,217,.18), rgba(22,199,154,.18));

}



.pnd-route-step .step {

  display: inline-flex;

  width: 36px;

  height: 36px;

  align-items: center;

  justify-content: center;

  border-radius: 14px;

  background: linear-gradient(135deg, #00a7d8, #16c79a);

  color: #fff;

  font-weight: 950;

  margin-bottom: 14px;

}



.pnd-route-step h3 {

  margin: 0 0 8px;

  color: #0f3148;

  font-size: 17px;

  line-height: 1.22;

  font-weight: 950;

  letter-spacing: -.025em;

}



.pnd-route-step p {

  margin: 0;

  color: #527184;

  font-size: 14px;

  line-height: 1.6;

}



.pnd-keywords {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  margin-top: 24px;

}



.pnd-keywords span {

  padding: 10px 13px;

  border-radius: 999px;

  background: linear-gradient(135deg, rgba(0,184,217,.12), rgba(22,199,154,.12));

  color: #087c91;

  font-size: 13px;

  font-weight: 850;

  border: 1px solid rgba(0,184,217,.13);

}



.pnd-variants {

  margin: 24px 0;

  border-radius: 34px;

  padding: 34px;

  background:

    radial-gradient(circle at 15% 0%, rgba(255, 183, 3, .24), transparent 32%),

    radial-gradient(circle at 100% 80%, rgba(0, 184, 217, .2), transparent 34%),

    linear-gradient(135deg, rgba(255,255,255,.86), rgba(239,253,255,.9));

  border: 1px solid rgba(255,255,255,.95);

  box-shadow: 0 22px 52px rgba(6,91,122,.09);

}



.pnd-variant-grid {

  display: grid;

  grid-template-columns: repeat(5, 1fr);

  gap: 14px;

}



.pnd-variant {

  position: relative;

  overflow: hidden;

  border-radius: 25px;

  padding: 20px;

  min-height: 200px;

  background: rgba(255,255,255,.88);

  border: 1px solid rgba(255,255,255,.96);

  box-shadow: 0 18px 38px rgba(6,91,122,.08);

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  gap: 16px;

}



.pnd-variant:before {

  content: "";

  position: absolute;

  right: -28px;

  top: -28px;

  width: 86px;

  height: 86px;

  border-radius: 50%;

  background: linear-gradient(135deg, rgba(0, 184, 217, .18), rgba(255, 183, 3, .16));

}



.pnd-variant h3 {

  position: relative;

  margin: 0 0 8px;

  color: #0f3148;

  font-size: 17px;

  line-height: 1.22;

  font-weight: 950;

  letter-spacing: -.025em;

}



.pnd-variant p {

  position: relative;

  margin: 0;

  color: #547386;

  font-size: 14px;

  line-height: 1.56;

}



.pnd-variant a {

  position: relative;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  text-decoration: none;

  padding: 12px 14px;

  border-radius: 999px;

  background: linear-gradient(135deg, #00a7d8, #16c79a);

  color: #fff;

  font-size: 13px;

  font-weight: 950;

  box-shadow: 0 12px 24px rgba(0, 167, 216, .2);

  transition: transform .22s ease, box-shadow .22s ease;

}



.pnd-variant a:hover {

  transform: translateY(-2px);

  color: #fff;

  box-shadow: 0 17px 30px rgba(0, 167, 216, .27);

}



.pnd-cta {

  position: relative;

  overflow: hidden;

  border-radius: 36px;

  padding: 36px;

  background:

    radial-gradient(circle at 10% 0%, rgba(255, 202, 58, .32), transparent 31%),

    radial-gradient(circle at 90% 100%, rgba(0, 224, 255, .23), transparent 34%),

    linear-gradient(135deg, #052b42, #0077a3 46%, #10b981);

  color: #fff;

  box-shadow: 0 26px 64px rgba(7, 118, 137, .25);

  margin-top: 24px;

}



.pnd-cta:before {

  content: "";

  position: absolute;

  inset: 0;

  background:

    linear-gradient(120deg, rgba(255,255,255,.18), transparent 38%),

    repeating-linear-gradient(

      135deg,

      rgba(255,255,255,.08) 0px,

      rgba(255,255,255,.08) 1px,

      transparent 1px,

      transparent 18px

    );

  pointer-events: none;

}



.pnd-cta-inner {

  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns: 1.1fr .9fr;

  gap: 24px;

  align-items: center;

}



.pnd-cta h2 {

  margin: 0 0 12px;

  color: #fff;

  font-size: clamp(26px, 3vw, 44px);

  line-height: 1.04;

  letter-spacing: -.05em;

  font-weight: 950;

}



.pnd-cta p {

  margin: 0;

  color: rgba(255,255,255,.9);

  line-height: 1.72;

  font-size: 16px;

}



.pnd-cta-buttons {

  display: flex;

  flex-wrap: wrap;

  justify-content: flex-end;

  gap: 12px;

}



.pnd-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 9px;

  min-height: 52px;

  padding: 14px 21px;

  border-radius: 999px;

  text-decoration: none;

  font-weight: 950;

  font-size: 14px;

  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;

  white-space: nowrap;

}



.pnd-btn.primary {

  background: #fff;

  color: #087c91;

  box-shadow: 0 16px 32px rgba(0,0,0,.17);

}



.pnd-btn.secondary {

  background: rgba(255,255,255,.15);

  color: #fff;

  border: 1px solid rgba(255,255,255,.25);

  backdrop-filter: blur(10px);

}



.pnd-btn:hover {

  transform: translateY(-2px);

}



.pnd-btn.primary:hover {

  color: #087c91;

  box-shadow: 0 21px 42px rgba(0,0,0,.22);

}



.pnd-btn.secondary:hover {

  color: #fff;

  background: rgba(255,255,255,.22);

}



@media (max-width: 1180px) {

  .pnd-ocean-hero,

  .pnd-section,

  .pnd-section.reverse,

  .pnd-cta-inner {

    grid-template-columns: 1fr;

  }



  .pnd-card-grid,

  .pnd-route-grid {

    grid-template-columns: repeat(2, 1fr);

  }



  .pnd-variant-grid {

    grid-template-columns: repeat(2, 1fr);

  }



  .pnd-cta-buttons {

    justify-content: flex-start;

  }

}



@media (max-width: 760px) {

  .pnd-ocean-wrap {

    padding: 20px;

    border-radius: 28px;

  }



  .pnd-ocean-main,

  .pnd-photo-card,

  .pnd-deep-card,

  .pnd-route,

  .pnd-variants,

  .pnd-cta {

    padding: 24px;

    border-radius: 26px;

  }



  .pnd-card-grid,

  .pnd-route-grid,

  .pnd-variant-grid,

  .pnd-facts-grid,

  .pnd-side-stats {

    grid-template-columns: 1fr;

  }



  .pnd-ocean-title {

    font-size: 36px;

  }



  .pnd-ocean-lead {

    font-size: 16px;

  }



  .pnd-photo-card {

    min-height: 300px;

  }



  .pnd-btn,

  .pnd-cta-buttons {

    width: 100%;

  }

}