/*
Theme Name: Astra Child
Theme URI: http://example.com
Description: Child theme for Astra
Author: Your Name
Template: astra
Version: 1.0
*/

/* Start your custom CSS here */

:root {
   --color-primary: #ffdb1b;
   --color-primary-hover: #e6c800;

   --color-dark: #0b1e2d;
   --color-dark-deep: #07141f;

   --color-text: #111827;
   --color-text-light: #cbd5e1;

   --radius-sm: 6px;
   --radius-md: 10px;

   --space-section: 80px;
   --space-container-x: 40px;


   --color-primary: #ffdb1b;
   --color-primary-dark: #f4c400;

   --color-text: #eaf4ff;
   --color-bg-dark: #07121c;

   --radius-pill: 999px;
}

body {
   font-family: 'Urbanist', sans-serif !important;
}

/* =========================
   BEE LAYOUT SYSTEM
========================= */

/* CONTAINERS */


.bee-narrow {
   max-width: 1200px;
   margin: 0 auto;
}

.bee-text {
   max-width: 720px;
   margin: 0 auto;
}

/* FLEX */
.bee-flex {
   display: flex;
}

.bee-flex-center {
   display: flex;
   align-items: center;
   justify-content: center;
}

.bee-flex-between {
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.bee-flex-col {
   display: flex;
   flex-direction: column;
}

/* GRID */
.bee-grid-2 {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 60px;
}

.bee-grid-3 {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 40px;
}

/* GAP */
.bee-gap-sm {
   gap: 12px;
}

.bee-gap-md {
   gap: 24px;
}

.bee-gap-lg {
   gap: 40px;
}

.bee-gap-xl {
   gap: 64px;
}

/* SECTION SPACING */
.bee-section {
   padding: 100px 0;
}

.bee-section-sm {
   padding: 60px 0;
}

/* ALIGNMENT */
.bee-center {
   text-align: center;
}

.bee-mx-auto {
   margin-left: auto !important;
   margin-right: auto !important;
}


.bee-container {
   padding-left: 3rem !important;
   padding-right: 3rem !important;
}

/* Sections */
.section-dark {
   background: var(--color-dark);
   color: #fff;
}

.section-pad {
   padding: var(--space-section) var(--space-container-x);
}

.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 10px;

   padding: 14px 28px;
   border-radius: var(--radius-pill);

   font-family: 'Urbanist', sans-serif;
   font-size: 14px !important;
   font-weight: 500 !important;
   letter-spacing: 0.04em;

   border: none;
   cursor: pointer;
   text-decoration: none !important;

   position: relative;
   overflow: hidden;

   transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* =========================
   PRIMARY BUTTON
========================= */

.btn-primary {
   background: var(--color-primary);
   color: var(--color-bg-dark);

   box-shadow:
      0 10px 25px rgba(255, 219, 27, 0.25),
      inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn-primary:hover {
   transform: translateY(-2px);

   box-shadow:
      0 16px 40px rgba(255, 219, 27, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.btn-primary:active {
   transform: translateY(0);

   box-shadow:
      0 6px 16px rgba(255, 219, 27, 0.2);
}

/* =========================
   OUTLINE BUTTON
========================= */

.btn-outline {
   background: rgba(255, 255, 255, 0.02);
   color: var(--color-text);

   border: 1px solid rgba(255, 255, 255, 0.2);
   backdrop-filter: blur(6px);
}

.btn-outline:hover {
   background: rgba(255, 255, 255, 0.08);
   border-color: rgba(255, 255, 255, 0.4);
   color: #fff;
   transform: translateY(-2px);
}

.btn-outline:active {
   transform: translateY(0);
}

/* =========================
   ICON SUPPORT
========================= */

.btn-icon {
   display: inline-block;
   transition: transform 0.3s ease;
}

.btn:hover .btn-icon {
   transform: translateX(4px);
}

/* =========================
   SHINE EFFECT (PREMIUM)
========================= */



.btn:hover::after {
   opacity: 1;
   animation: shine 1.2s ease;
}

@keyframes shine {
   from {
      transform: translateX(-100%);
   }

   to {
      transform: translateX(100%);
   }
}

/* =========================
   FOCUS STATE (ACCESSIBLE)
========================= */

.btn:focus-visible {
   outline: 2px solid rgba(255, 219, 27, 0.6);
   outline-offset: 2px;
}

/* =========================
   SIZE VARIANTS (OPTIONAL)
========================= */

.btn-sm {
   padding: 10px 20px;
   font-size: 13px;
}

.btn-lg {
   padding: 18px 36px;
   font-size: 15px;
}

/* Text helpers */
.text-primary {
   color: var(--color-primary);
}

.text-muted {
   color: var(--color-text-light);
}


/* ============================================================
   HERO SECTION
   ============================================================ */

.hero {
   position: relative;
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
   /* Mouse-parallax CSS variables — set by JS, animated via CSS */
   --hero-mx: 0;
   --hero-my: 0;
}



/* ============================================================
   INNER CONTENT
   ============================================================ */

.hero-inner {
   position: relative;
   z-index: 2;
   width: 100%;
   max-width: 960px;
   padding: 40px 24px 60px;
   text-align: center;
   /* Wrapper-level parallax — won't fight per-element timelines */
   transform: translate3d(calc(var(--hero-mx) * -10px), calc(var(--hero-my) * -6px), 0);
   transition: transform 0.4s cubic-bezier(.2, .8, .2, 1);
   will-change: transform;
}

/* ============================================================
   EYEBROW
   ============================================================ */

.hero-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 14px;
   margin-bottom: 24px;
   /* Note: opacity:0 is set by GSAP via gsap.set() — not in CSS, so SSR/no-JS still shows content */
}

.hero-line-bar {
   width: 36px;
   height: 1.5px;
   background: linear-gradient(90deg, transparent, #FAC775);
   border-radius: 2px;
   display: inline-block;
}

.hero-line-bar.right {
   background: linear-gradient(90deg, #FAC775, transparent);
}

.hero-line-text {
   font-size: 11px;
   letter-spacing: 3px;
   text-transform: uppercase;
   color: #FAC775;
   font-weight: 600;
}

/* ============================================================
   TITLE
   ============================================================ */

.hero-title {
   font-size: clamp(42px, 7vw, 88px);
   line-height: 0.95;
   color: #fff;
   font-weight: 700;
   letter-spacing: -3px;
   margin: 0 0 22px;
}

.hero-title .line {
   display: block;
   overflow: hidden;
}

.hero-title .line-inner {
   display: inline-block;
   /* y-offset set by GSAP — leave initial value for non-JS */
}

.hero-title-part1 .text-primary {
   background: linear-gradient(135deg, #FAC775 0%, #EF9F27 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   font-style: italic;
   font-weight: 800;
}

.hero-title-part2 {
   line-height: 1.2;
}

.hero-title-underline-wrap {
   position: relative;
   display: inline-block;
}

.hero-title-underline {
   position: absolute;
   left: -10px;
   right: -10px;
   bottom: -10px;
   width: calc(100% + 20px);
   height: 14px;
   pointer-events: none;
}

.hero-title-underline path {
   stroke: #7fd4ff;
   stroke-width: 3;
   fill: none;
   stroke-linecap: round;
   stroke-dasharray: 250;
   stroke-dashoffset: 250;
   opacity: 0.85;
}

/* ============================================================
   SUBTITLE
   ============================================================ */

.hero-sub {
   font-size: clamp(15px, 1.3vw, 18px);
   line-height: 1.6;
   color: rgba(255, 255, 255, 0.85);
   margin: 0 auto 32px;
   max-width: 560px;
}

/* ============================================================
   ACTIONS
   ============================================================ */

.hero-actions {
   display: flex;
   gap: 14px;
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
   margin-bottom: 36px;
}

.btn-outline {
   background: rgba(255, 255, 255, 0.08);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, 0.25);
   color: #fff;
}

.btn-outline:hover {
   background: rgba(255, 255, 255, 0.15);
   border-color: rgba(255, 255, 255, 0.4);
   transform: translateY(-3px);
}

/* ============================================================
   PADI TRUST BADGE
   ============================================================ */

.hero-trust {
   display: inline-flex;
   align-items: center;
   gap: 12px;
   padding: 10px 18px 10px 12px;
   background: rgba(15, 30, 50, 0.45);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   border: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: 999px;
}

.hero-trust-logo {
   width: 98px;
   height: 44px;
   border-radius: 50%;
   /*background: #fff;*/
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.hero-trust-logo img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   border-radius: 50%;
}

.hero-trust-text {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   line-height: 1.2;
}

.hero-trust-title {
   font-size: 12px;
   font-weight: 700;
   color: #fff;
   letter-spacing: 0.4px;
   text-transform: uppercase;
}

.hero-trust-sub {
   font-size: 12px;
   color: rgba(255, 255, 255, 0.9);
   letter-spacing: 0.3px;
   margin-top: 2px;
}

/* ============================================================
   SCROLL INDICATOR
   ============================================================ */

.hero-scroll {
   position: absolute;
   bottom: 28px;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 10px;
   z-index: 5;
   pointer-events: none;
}

.hero-scroll-text {
   font-size: 9px;
   color: rgba(255, 255, 255, 0.55);
   letter-spacing: 2.5px;
   text-transform: uppercase;
   font-weight: 500;
}

.hero-scroll-line {
   position: relative;
   width: 1px;
   height: 40px;
   background: rgba(255, 255, 255, 0.18);
   overflow: hidden;
   border-radius: 1px;
}

/* The moving fill — animated by CSS only, runs forever, no JS dependency */
.hero-scroll-line-fill {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 50%;
   background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.95));
   animation: heroScrollSlide 2s cubic-bezier(.65, 0, .35, 1) infinite;
}

@keyframes heroScrollSlide {

   0% {
      transform: translateY(-100%);
   }

   100% {
      transform: translateY(200%);
   }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
   .hero-inner {
      padding: 50px 20px 40px;
   }

   .hero-title {
      letter-spacing: -1.5px;
   }

   .hero-actions {
      flex-direction: column;
      width: 100%;
      max-width: 320px;
      margin-left: auto;
      margin-right: auto;
   }

   .hero-actions .btn {
      width: 100%;
      justify-content: center;
   }

   .hero-scroll {
      bottom: 18px;
   }

   /* Reduce parallax on mobile — feels jittery on touch scrolls */
   .hero-inner {
      transform: none;
   }
}

/* ============================================================
   ACCESSIBILITY — respect prefers-reduced-motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

   .hero-inner,
   .hero-scroll-line-fill {
      animation: none !important;
      transform: none !important;
   }
}



/* =========================
   RESPONSIVE
========================= */


.page-template-default .main-navigation .menu-item>a {

   color: #fff;

}

.site-primary-header-wrap .main-navigation .menu-item>a {
   font-weight: 700;
   font-size: 18px;
}

.site-primary-header-wrap .main-navigation .menu-item>a:hover {

   color: var(--color-primary) !important;

}

.site-primary-header-wrap {
   max-width: 1460px !important;
   margin-left: auto;
   margin-right: auto;
}

.page-template-default .main-navigation .menu-item.current-menu-item>a {
   color: #ffdb1b;
}

.bee-container-lg {
   max-width: 1460px;
   padding-right: 1rem;
   padding-left: 1rem;
}

.text-center {
   text-align: center;
}

.text-white {
   color: #fff;
}

.bee-bg-dark {
   background-color: var(--color-dark-deep);
}

.section-space {
   padding-top: 12rem !important;
   padding-bottom: 12rem !important;
}


/* Keep content above */
.section-intro .bee-container {
   position: relative;
   z-index: 2;
}

/* ============================================================
   SECTION INTRO
   ============================================================ */
.section-intro {
   position: relative;
   overflow: hidden;
   background: linear-gradient(180deg, #02101f 0%, #051f3a 50%, #02101f 100%);
}

/* Atmospheric depth */
.section-intro::before {
   content: "";
   position: absolute;
   top: 20%;
   left: 50%;
   transform: translateX(-50%);
   width: 900px;
   height: 500px;
   background: radial-gradient(ellipse, rgba(56, 138, 221, 0.18) 0%, transparent 60%);
   pointer-events: none;
   filter: blur(60px);
}

/* Subtle grid pattern */
.section-intro::after {
   content: "";
   position: absolute;
   inset: 0;
   background-image:
      linear-gradient(rgba(127, 212, 255, 0.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(127, 212, 255, 0.025) 1px, transparent 1px);
   background-size: 80px 80px;
   pointer-events: none;
   mask-image: radial-gradient(ellipse at 50% 50%, black 0%, transparent 70%);
   -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 0%, transparent 70%);
}

/* ============================================================
   UNDERWATER PARTICLES
   ============================================================ */
.underwater-scene {
   position: absolute;
   inset: 0;
   pointer-events: none;
}

.underwater-particles {
   position: absolute;
   inset: 0;
   overflow: hidden;
   z-index: 1;
}

.particle {
   position: absolute;
   bottom: -20px;
   width: 4px;
   height: 4px;
   background: rgba(127, 212, 255, 0.5);
   border-radius: 50%;
   filter: blur(0.5px);
   box-shadow: 0 0 8px rgba(127, 212, 255, 0.4);
}

/* ============================================================
   FLOATING IMAGE CARDS
   ============================================================ */
.floating-img {
   position: absolute;
   pointer-events: none;
   z-index: 2;
   border-radius: 14px;
   overflow: hidden;
   border: 1px solid rgba(127, 212, 255, 0.2);
   box-shadow:
      0 25px 50px rgba(0, 0, 0, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
   width: 130px;
   height: auto;
   object-fit: cover;
   background: rgba(15, 30, 50, 0.5);
   backdrop-filter: blur(10px);
   transition: transform 0.6s ease;
}

.fish {
   top: 12%;
   left: 6%;
   width: 100px;
   height: 130px;
   transform: rotate(-6deg);
}

.wave {
   top: 18%;
   right: 7%;
   width: 130px;
   height: 100px;
   transform: rotate(4deg);
}

.diver {
   bottom: 15%;
   left: 9%;
   width: 110px;
   height: 140px;
   transform: rotate(5deg);
}

/* Floating image labels */
.floating-img::after {
   content: attr(data-label);
   position: absolute;
   bottom: 6px;
   left: 0;
   right: 0;
   text-align: center;
   font-size: 8px;
   color: rgba(255, 255, 255, 0.9);
   letter-spacing: 1px;
   text-transform: uppercase;
   background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.7));
   padding: 8px 4px 4px;
}

/* Glow accent dots */
.intro-glow-dot {
   position: absolute;
   border-radius: 50%;
   pointer-events: none;
   z-index: 1;
}

.intro-glow-dot.dot-1 {
   bottom: 25%;
   right: 13%;
   width: 12px;
   height: 12px;
   background: rgba(127, 212, 255, 0.5);
   box-shadow: 0 0 24px rgba(127, 212, 255, 0.7);
   animation: glowPulse 3s ease-in-out infinite;
}

.intro-glow-dot.dot-2 {
   top: 60%;
   left: 18%;
   width: 8px;
   height: 8px;
   background: rgba(93, 202, 165, 0.4);
   box-shadow: 0 0 16px rgba(93, 202, 165, 0.5);
   animation: glowPulse 4s ease-in-out infinite 1s;
}

.intro-glow-dot.dot-3 {
   top: 35%;
   left: 32%;
   width: 6px;
   height: 6px;
   background: rgba(127, 212, 255, 0.5);
   box-shadow: 0 0 14px rgba(127, 212, 255, 0.6);
   animation: glowPulse 5s ease-in-out infinite 2s;
}

@keyframes glowPulse {

   0%,
   100% {
      opacity: 0.4;
      transform: scale(1);
   }

   50% {
      opacity: 1;
      transform: scale(1.3);
   }
}

/* ============================================================
   MAIN CONTENT
   ============================================================ */
.bee-container>.intro-inner {
   position: relative;
   z-index: 5;
}

/* SECTION LABEL — modern pill */
.section-label {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: rgba(127, 212, 255, 0.08);
   border: 1px solid rgba(127, 212, 255, 0.2);
   padding: 8px 16px;
   border-radius: 999px;
   margin-bottom: 32px;
   backdrop-filter: blur(10px);
}

.section-label::before {
   content: "";
   width: 6px;
   height: 6px;
   background: #5DCAA5;
   border-radius: 50%;
   box-shadow: 0 0 10px #5DCAA5;
   animation: dotPulse 2s ease-in-out infinite;
}

.section-label-text {
   font-size: 10px;
   color: #7fd4ff;
   font-weight: 600;
   letter-spacing: 2.5px;
   text-transform: uppercase;
}

@keyframes dotPulse {

   0%,
   100% {
      opacity: 1;
      transform: scale(1);
   }

   50% {
      opacity: 0.6;
      transform: scale(1.3);
   }
}

/* INTRO MAIN */
.intro-main {
   text-align: center;
   margin-bottom: 60px;
}

.intro-paragraph {
   letter-spacing: -0.04em;
   font-size: clamp(22px, 2.4vw, 36px);
   line-height: 1.3;
   font-weight: 600;
   color: #ffffff;
   max-width: 760px;
   margin: 0 auto;
}

/* Highlighted gradient word with hand-drawn underline */
.highlight-word {
   position: relative;
   display: inline-block;
   white-space: nowrap;
   background: linear-gradient(135deg, #7fd4ff 0%, #5DCAA5 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   padding: 0 4px;
}

.highlight-underline {
   position: absolute;
   left: 4px;
   right: 4px;
   bottom: -8px;
   width: calc(100% - 8px);
   height: 8px;
   pointer-events: none;
}

.highlight-underline path {
   stroke: #7fd4ff;
   stroke-width: 2.5;
   fill: none;
   stroke-linecap: round;
   stroke-dasharray: 200;
   stroke-dashoffset: 200;
}

/* ============================================================
   PADI CERTIFICATION BADGE — premium glass card
   ============================================================ */
.intro-img {
   position: relative;
   text-align: center;
   z-index: 5;
}

.cert-card {
   display: inline-flex;
   flex-direction: column;
   align-items: center;
   gap: 18px;
   padding: 36px 44px;
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 28px;
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   position: relative;
   box-shadow:
      0 30px 80px rgba(0, 0, 0, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Glow halo behind card */
.cert-card::before {
   content: "";
   position: absolute;
   inset: -40px;
   background: radial-gradient(circle, rgba(56, 138, 221, 0.4), transparent 70%);
   filter: blur(50px);
   z-index: -1;
   opacity: 0.6;
   animation: haloPulse 6s ease-in-out infinite;
}

@keyframes haloPulse {

   0%,
   100% {
      opacity: 0.5;
      transform: scale(1);
   }

   50% {
      opacity: 0.8;
      transform: scale(1.08);
   }
}

/* Eyebrow */
.eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   font-size: 11px;
   letter-spacing: 2.5px;
   text-transform: uppercase;
   color: rgba(255, 255, 255, 0.6);
   font-weight: 500;
   margin: 0;
}

.highlight {
   color: #FAC775;
   font-weight: 700;
}

/* Badge wrapper with rotating dotted ring */
.badge-wrapper {
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 130px;
   height: 130px;
}

.badge-ring {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   animation: ringRotate 30s linear infinite;
}

.badge-ring circle {
   fill: none;
   stroke: rgba(127, 212, 255, 0.35);
   stroke-width: 1;
   stroke-dasharray: 2 5;
}

@keyframes ringRotate {
   from {
      transform: rotate(0deg);
   }

   to {
      transform: rotate(360deg);
   }
}

.badge-wrapper img {
   width: 110px;
   height: auto !important;
   display: block;
   position: relative;
   z-index: 2;
   filter: drop-shadow(0 10px 30px rgba(24, 95, 165, 0.5));
}

/* Stats row inside cert card */
.cert-stats {
   display: flex;
   align-items: center;
   gap: 24px;
   padding-top: 14px;
   border-top: 1px solid rgba(255, 255, 255, 0.1);
   width: 100%;
   justify-content: center;
}

.cert-stat {
   text-align: center;
}

.cert-stat-value {
   font-size: 20px;
   font-weight: 700;
   color: #ffffff;
   margin-bottom: 2px;
   line-height: 1;
}

.cert-stat-value.accent {
   color: #5DCAA5;
}

.cert-stat-label {
   font-size: 9px;
   color: #8fb3cc;
   letter-spacing: 1.5px;
   text-transform: uppercase;
   font-weight: 500;
}

.cert-stat-divider {
   width: 1px;
   height: 28px;
   background: rgba(255, 255, 255, 0.15);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
   .section-space {
      padding-top: 6rem;
      padding-bottom: 6rem;
   }

   .floating-img {
      width: 70px;
      height: 90px;
   }

   .fish {
      top: 8%;
      left: 4%;
   }

   .wave {
      top: 12%;
      right: 4%;
      width: 90px;
      height: 70px;
   }

   .diver {
      bottom: 10%;
      left: 5%;
      width: 75px;
      height: 95px;
   }

   .cert-card {
      padding: 28px 24px;
   }

   .badge-wrapper {
      width: 110px;
      height: 110px;
   }

   .badge-wrapper img {
      width: 90px !important;
   }

   .cert-stats {
      gap: 16px;
   }
}

@media (max-width: 480px) {
   .floating-img {
      display: none;
   }

   .intro-glow-dot {
      display: none;
   }
}



/* Ensure stacking */
.hero-section {
   position: relative;
   z-index: 3;
}

.section-intro {
   position: relative;
   z-index: 4;
}



/* new */


.btn-primary:hover {
   transform: translateY(-3px);
   box-shadow: 0 20px 40px rgba(24, 95, 165, 0.5);
}

.btn-primary:hover::before {
   left: 100%;
}

.btn-primary svg {
   transition: transform 0.3s ease;
}

.btn-primary:hover svg {
   transform: translateX(4px);
}

.btn-outline {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   border: 1px solid rgba(255, 255, 255, 0.25);
   background: rgba(255, 255, 255, 0.02);
   padding: 14px 24px;
   border-radius: 999px;
   color: #fff;
   font-size: 14px;
   font-weight: 500;
   text-decoration: none;
   transition: all 0.3s ease;
   backdrop-filter: blur(10px);
}

.btn-outline:hover {
   background: rgba(255, 255, 255, 0.08);
   border-color: rgba(255, 255, 255, 0.4);
   transform: translateY(-3px);
}

/* ============================================================
   CAREER / GO PRO SECTION — LIGHT MODE
   Cleaned: removed all dead CSS for unused elements
   (image-caption, stats card, cohort card, progress ring, etc.)
   ============================================================ */

/* ============================================================
   AMBIENT GLOWS — light-mode tuned (yellow + teal instead of blue)
   ============================================================ */
.career-section::before,
.career-section::after {
   content: "";
   position: absolute;
   width: 500px;
   height: 500px;
   border-radius: 50%;
   pointer-events: none;
   filter: blur(80px);
   z-index: 0;
}

.career-section::before {
   top: -150px;
   right: -150px;
   background: radial-gradient(circle, rgba(250, 199, 117, 0.18) 0%, transparent 70%);
}

.career-section::after {
   bottom: -150px;
   left: -150px;
   background: radial-gradient(circle, rgba(29, 158, 117, 0.1) 0%, transparent 70%);
}

/* Decorative grid pattern — softer on light bg */
.career-section .career-grid-pattern {
   position: absolute;
   inset: 0;
   background-image:
      linear-gradient(rgba(15, 23, 42, 0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(15, 23, 42, 0.04) 1px, transparent 1px);
   background-size: 60px 60px;
   pointer-events: none;
   opacity: 1;
   mask-image: radial-gradient(circle at 50% 50%, black 0%, transparent 70%);
   -webkit-mask-image: radial-gradient(circle at 50% 50%, black 0%, transparent 70%);
}

/* ============================================================
   LAYOUT
   ============================================================ */
.career-wrapper {
   position: relative;
   display: grid;
   grid-template-columns: 1.05fr 1fr;
   gap: 80px;
   align-items: center;
   z-index: 2;
}

/* ============================================================
   LEFT CONTENT
   ============================================================ */
.career-content {
   position: relative;
   z-index: 2;
}

/* Eyebrow tag — uses bee-eyebrow base, this just adds the star pulse */
.career-tag svg {
   flex-shrink: 0;
   animation: starPulse 3s ease-in-out infinite;
   color: #EF9F27;
}

@keyframes starPulse {

   0%,
   100% {
      transform: scale(1);
      opacity: 1;
   }

   50% {
      transform: scale(1.15);
      opacity: 0.8;
   }
}

/* Title override — left aligned (overrides bee-section-title centering) */
.career-title {
   text-align: left;
   margin: 0 0 22px;
}

.career-desc {
   color: #475569;
   font-size: 16px;
   line-height: 1.7;
   margin: 0 0 14px;
   max-width: 520px;
}

.career-desc-light {
   color: #64748b;
   font-size: 14px;
   line-height: 1.6;
   margin: 0 0 32px;
   max-width: 520px;
}

/* ============================================================
   INLINE STATS — light mode tuned
   ============================================================ */
.career-stats {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 12px;
   margin-bottom: 36px;
   max-width: 520px;
}

.career-stat {
   background: #fff;
   border: 1px solid rgba(15, 23, 42, 0.06);
   padding: 16px 14px;
   border-radius: 14px;
   transition: all 0.4s ease;
   position: relative;
   overflow: hidden;
   box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.career-stat:hover {
   transform: translateY(-4px);
   border-color: rgba(15, 23, 42, 0.12);
   box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
}

.career-stat::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 2px;
   background: var(--accent, #185FA5);
   transform: scaleX(0);
   transform-origin: left;
   transition: transform 0.5s ease;
}

.career-stat:hover::before {
   transform: scaleX(1);
}

.career-stat-value {
   font-size: 24px;
   font-weight: 700;
   margin-bottom: 4px;
   color: var(--accent, #185FA5);
   letter-spacing: -0.5px;
}

.career-stat:nth-child(1) {
   --accent: #185FA5;
}

.career-stat:nth-child(2) {
   --accent: #1D9E75;
}

.career-stat:nth-child(3) {
   --accent: #EF9F27;
}

.career-stat-label {
   font-size: 11px;
   color: #64748b;
   line-height: 1.3;
   letter-spacing: 0.3px;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.career-actions {
   display: flex;
   gap: 14px;
   align-items: center;
   flex-wrap: wrap;
}

/* Primary — gold gradient (yellow brand accent client wanted) */
.career-btn-primary {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   background: linear-gradient(135deg, #FAC775 0%, #EF9F27 100%);
   color: #02101f;
   padding: 14px 28px;
   border-radius: 999px;
   font-size: 14px;
   font-weight: 700;
   text-decoration: none;
   box-shadow: 0 12px 30px rgba(239, 159, 39, 0.3);
   transition: all 0.4s ease;
   position: relative;
   overflow: hidden;
}

.career-btn-primary::before {
   content: "";
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
   transition: left 0.7s ease;
}

.career-btn-primary:hover {
   transform: translateY(-3px);
   box-shadow: 0 20px 40px rgba(239, 159, 39, 0.45);
}

.career-btn-primary:hover::before {
   left: 100%;
}

.career-btn-primary svg {
   transition: transform 0.3s ease;
}

.career-btn-primary:hover svg {
   transform: translateX(4px);
}

/* Outline — works on light bg */
.career-btn-outline {
   display: inline-flex;
   align-items: center;
   padding: 14px 28px;
   border-radius: 999px;
   font-size: 14px;
   font-weight: 600;
   text-decoration: none;
   color: #185FA5;
   background: transparent;
   border: 1.5px solid rgba(24, 95, 165, 0.3);
   transition: all 0.3s ease;
}

.career-btn-outline:hover {
   background: rgba(24, 95, 165, 0.06);
   border-color: rgba(24, 95, 165, 0.5);
   transform: translateY(-2px);
}

/* ============================================================
   RIGHT VISUAL
   ============================================================ */
.career-visual {
   position: relative;
   perspective: 1200px;
}

/* Glow halo behind image — yellow on light bg */
.career-visual::before {
   content: "";
   position: absolute;
   inset: -20px;
   background: linear-gradient(135deg, rgba(250, 199, 117, 0.4), rgba(29, 158, 117, 0.2));
   border-radius: 32px;
   filter: blur(50px);
   opacity: 0.5;
   z-index: 0;
   animation: glowPulse 6s ease-in-out infinite;
}

@keyframes glowPulse {

   0%,
   100% {
      opacity: 0.5;
      transform: scale(1);
   }

   50% {
      opacity: 0.7;
      transform: scale(1.05);
   }
}

.career-image {
   position: relative;
   border-radius: 24px;
   overflow: hidden;
   box-shadow: 0 30px 70px rgba(15, 23, 42, 0.15);
   border: 1px solid rgba(15, 23, 42, 0.06);
   z-index: 1;
   aspect-ratio: 1 / 1;
}

.career-image img {
   width: 100%;
   height: 100% !important;
   object-fit: cover;
   transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.career-image:hover img {
   transform: scale(1.06);
}

/* ============================================================
   FLOATING PADI CARD (bottom-left)
   Single card only — others removed (were unused)
   ============================================================ */
.career-float-card {
   position: absolute;
   background: var(--color-bg-dark);
   border-radius: 16px;
   border: 1px solid rgba(15, 23, 42, 0.08);
   box-shadow: 0 20px 50px rgba(15, 23, 42, 0.15);
   z-index: 99;
}

.career-float-card.main {
   bottom: 30px;
   left: -50px;
   padding: 16px 18px;
   display: flex;
   align-items: center;
   gap: 14px;
   min-width: 240px;
   border-color: rgba(24, 95, 165, 0.15);
}

.career-float-padi-logo {
   width: 120px;
   height: 68px;
   border-radius: 12px;
   object-fit: contain;
   background: rgba(15, 23, 42, 0.04);
   padding: 6px;
   flex-shrink: 0;
}

.career-float-card.main .career-float-tag {
   font-size: 10px;
   color: var(--color-primary);
   letter-spacing: 1px;
   font-weight: 700;
   margin-bottom: 4px;
   text-transform: uppercase;
}

.career-float-card.main h5 {
   font-size: 14px;
   color: #fff;
   font-weight: 600;
   line-height: 1.3;
   margin: 0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
   .career-wrapper {
      gap: 50px;
   }

   .career-float-card.main {
      left: -20px;
   }
}

@media (max-width: 900px) {
   .career-wrapper {
      grid-template-columns: 1fr;
      gap: 60px;
   }

   .career-image {
      aspect-ratio: 16 / 12;
      max-height: 500px;
   }

   .career-float-card.main {
      left: 20px;
      bottom: 20px;
   }
}

@media (max-width: 600px) {
   .career-stats {
      grid-template-columns: 1fr 1fr 1fr;
      gap: 8px;
   }

   .career-stat {
      padding: 12px 8px;
   }

   .career-stat-value {
      font-size: 18px;
   }

   .career-actions {
      width: 100%;
   }

   .career-btn-primary,
   .career-btn-outline {
      flex: 1;
      justify-content: center;
   }

   .career-float-card.main {
      min-width: auto;
      left: 12px;
      right: 12px;
      bottom: 12px;
      padding: 12px 14px;
   }

   .career-float-padi-logo {
      width: 54px;
      height: 54px;
   }
}

.career-section-bg {
   background: linear-gradient(135deg, #02101f 0%, #051a30 50%, #02101f 100%) !important;
}

/* ============================================================
   TRUST SECTION — replaces testimonials
   Light mode, light card on light bg, brand color badges
   ============================================================ */

.trust-section {
   /* Inherits .bee-section + .bee-section-light from utilities */
   position: relative;
}

/* ============================================================
   ATMOSPHERIC GLOWS (depth without pattern busy-ness)
   ============================================================ */
.trust-glow-yellow {
   position: absolute;
   top: 8%;
   left: 5%;
   width: 600px;
   height: 400px;
   background: radial-gradient(ellipse, rgba(250, 199, 117, 0.18) 0%, transparent 60%);
   pointer-events: none;
   filter: blur(60px);
   z-index: 0;
}

.trust-glow-teal {
   position: absolute;
   bottom: 8%;
   right: 5%;
   width: 500px;
   height: 350px;
   background: radial-gradient(ellipse, rgba(29, 158, 117, 0.14) 0%, transparent 60%);
   pointer-events: none;
   filter: blur(50px);
   z-index: 0;
}

/* Italic for gradient line in headline */
.trust-italic {
   font-style: italic;
   /* Override default gradient from blue-teal → use brand blue + green for trust feel */
   background: linear-gradient(135deg, #185FA5 0%, #1D9E75 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}

.trust-header {
   margin-bottom: 40px;
}

/* ============================================================
   TRUST CARD — main white block
   ============================================================ */
.trust-card {
   position: relative;
   background: linear-gradient(135deg, #fff 0%, #fafcff 100%);
   border: 1px solid rgba(15, 23, 42, 0.08);
   border-radius: 24px;
   padding: 36px 32px 28px;
   box-shadow: 0 30px 60px rgba(15, 23, 42, 0.08);
   max-width: 1100px;
   margin: 0 auto;
   z-index: 2;
}

/* Multi-color gradient line at top */
.trust-card-stripe {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 3px;
   border-radius: 24px 24px 0 0;
   background: linear-gradient(90deg,
         #4285F4 0%,
         #00AA6C 33%,
         #003B71 66%,
         #1D9E75 100%);
}

/* ============================================================
   HEADLINE RATING (big 4.9)
   ============================================================ */
.trust-headline-rating {
   text-align: center;
   margin-bottom: 28px;
   padding-bottom: 28px;
   border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.trust-headline-rating-row {
   display: inline-flex;
   align-items: baseline;
   gap: 10px;
}

.trust-headline-rating-num {
   font-size: 48px;
   font-weight: 800;
   color: #0f172a;
   letter-spacing: -2px;
   line-height: 1;
}

.trust-headline-rating-stars {
   color: #FAC775;
   font-size: 22px;
   letter-spacing: 4px;
   line-height: 1;
}

.trust-headline-rating-label {
   font-size: 15px;
   color: #64748b;
   margin-top: 8px;
   letter-spacing: 0.4px;
}

/* ============================================================
   BADGES GRID
   ============================================================ */
.trust-badges {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 14px;
}

.trust-badge {
   position: relative;
   padding: 18px 14px;
   background: #fff;
   border: 1px solid rgba(15, 23, 42, 0.05);
   border-radius: 14px;
   text-align: center;
   transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
   cursor: pointer;
}

.trust-badge:hover {
   transform: translateY(-4px);
   border-color: rgba(15, 23, 42, 0.12);
   box-shadow: 0 16px 30px rgba(15, 23, 42, 0.08);
}

/* Featured PADI card */
.trust-badge.featured {
   background: linear-gradient(180deg, rgba(250, 199, 117, 0.06) 0%, #fff 60%);
   border-color: rgba(250, 199, 117, 0.35);
   box-shadow: 0 8px 24px rgba(250, 199, 117, 0.12);
}

.trust-badge.featured:hover {
   border-color: rgba(250, 199, 117, 0.55);
   box-shadow: 0 16px 32px rgba(250, 199, 117, 0.2);
}

.trust-badge-featured-pill {
   position: absolute;
   top: -8px;
   left: 50%;
   transform: translateX(-50%);
   background: linear-gradient(135deg, #FAC775, #EF9F27);
   padding: 3px 10px;
   border-radius: 999px;
   font-size: 9px;
   color: #02101f;
   font-weight: 800;
   letter-spacing: 0.8px;
   text-transform: uppercase;
   box-shadow: 0 4px 10px rgba(250, 199, 117, 0.3);
}

/* Live green dot on Google badge (real-time signal) */
.trust-badge-live {
   position: absolute;
   top: 12px;
   right: 12px;
   width: 6px;
   height: 6px;
   background: #1D9E75;
   border-radius: 50%;
   box-shadow: 0 0 8px #1D9E75;
   animation: beeDotPulse 2s ease-in-out infinite;
}

/* ============================================================
   BADGE ICONS
   ============================================================ */
.trust-badge-icon {
   width: 42px;
   height: 42px;
   border-radius: 11px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 12px;
   color: #fff;
   font-weight: 800;
   transition: transform 0.4s ease;
}

.trust-badge:hover .trust-badge-icon {
   transform: scale(1.08) rotate(-4deg);
}

.trust-badge-icon-google {
   background: #4285F4;
   font-size: 20px;
   box-shadow: 0 6px 14px rgba(66, 133, 244, 0.3);
}

.trust-badge-icon-trip {
   background: #00AA6C;
   border-radius: 50%;
   font-size: 18px;
   box-shadow: 0 6px 14px rgba(0, 170, 108, 0.3);
}

.trust-badge-icon-padi {
   background: #003B71;
   font-size: 12px;
   letter-spacing: 0.5px;
   box-shadow: 0 6px 14px rgba(0, 59, 113, 0.35);
}

.trust-badge-icon-da {
   background: linear-gradient(135deg, #5DCAA5, #1D9E75);
   box-shadow: 0 6px 14px rgba(29, 158, 117, 0.3);
}

/* ============================================================
   BADGE CONTENT
   ============================================================ */
.trust-badge-rating {
   font-size: 18px;
   font-weight: 700;
   color: #0f172a;
   line-height: 1;
   margin-bottom: 6px;
   display: inline-flex;
   align-items: center;
   gap: 4px;
}

.trust-rank-star {
   color: #FAC775;
   font-size: 13px;
   line-height: 1;
}

.trust-badge-stars {
   color: #FAC775;
   font-size: 10px;
   letter-spacing: 1.5px;
   margin-bottom: 6px;
}

.trust-badge-name {
   font-size: 13px;
   font-weight: 700;
   color: #0f172a;
   line-height: 1;
   margin-bottom: 6px;
}

.trust-badge-tag {
   font-size: 9px;
   font-weight: 700;
   letter-spacing: 1px;
   text-transform: uppercase;
   margin-bottom: 5px;
}

.trust-badge-tag.tag-trip {
   color: #00AA6C;
}

.trust-badge-tag.tag-padi {
   color: #003B71;
}

.trust-badge-tag.tag-da {
   color: #1D9E75;
}

.trust-badge-label {
   font-size: 14px;
   color: #64748b;
   letter-spacing: 0.4px;
}

/* ============================================================
   BOTTOM STAT STRIP
   ============================================================ */
.trust-stats-strip {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 18px;
   margin-top: 26px;
   padding-top: 26px;
   border-top: 1px solid rgba(15, 23, 42, 0.06);
   flex-wrap: wrap;
}

.trust-stat-pill {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 15px;
   color: #475569;
   font-weight: 500;
}

.trust-stats-divider {
   width: 3px;
   height: 3px;
   background: rgba(15, 23, 42, 0.2);
   border-radius: 50%;
}

.trust-stat-pill-dot {
   position: relative;
   width: 14px;
   height: 14px;
   flex-shrink: 0;
}

.trust-stat-pill-dot-ring {
   position: absolute;
   inset: 0;
   border: 1.5px solid rgba(29, 158, 117, 0.3);
   border-radius: 50%;
}

.trust-stat-pill-dot-core {
   position: absolute;
   inset: 4px;
   background: #1D9E75;
   border-radius: 50%;
   box-shadow: 0 0 6px #1D9E75;
   animation: beeDotPulse 2s ease-in-out infinite;
}

/* ============================================================
   FOUNDER QUOTE (separate dark card below)
   ============================================================ */
.trust-founder-wrap {
   text-align: center;
   margin-top: 20px;
   position: relative;
   z-index: 2;
}

.trust-founder-quote {
   display: inline-flex;
   align-items: center;
   gap: 14px;
   background: linear-gradient(135deg, #185FA5 0%, #0a3a5c 100%);
   padding: 18px 26px;
   border-radius: 18px;
   box-shadow: 0 16px 40px rgba(24, 95, 165, 0.25);
   max-width: 760px;
   text-align: left;
}

.trust-founder-mark {
   font-size: 38px;
   color: #FAC775;
   line-height: 0.5;
   font-style: italic;
   opacity: 0.7;
   flex-shrink: 0;
   align-self: flex-start;
   margin-top: 12px;
}

.trust-founder-quote p {
   font-size: 13px;
   color: rgba(255, 255, 255, 0.95);
   line-height: 1.5;
   font-style: italic;
   margin: 0 0 4px;
}

.trust-founder-name {
   font-size: 10px;
   color: rgba(255, 255, 255, 0.55);
   letter-spacing: 0.5px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
   .trust-card {
      padding: 32px 22px 22px;
   }

   .trust-headline-rating-num {
      font-size: 38px;
   }

   .trust-headline-rating-stars {
      font-size: 18px;
      letter-spacing: 3px;
   }

   .trust-badges {
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
   }

   .trust-stats-strip {
      gap: 10px;
   }

   .trust-stats-divider {
      display: none;
   }
}

@media (max-width: 480px) {
   .trust-card {
      padding: 28px 16px 18px;
   }

   .trust-badges {
      grid-template-columns: 1fr 1fr;
   }

   .trust-founder-quote {
      flex-direction: row;
      padding: 16px 18px;
      gap: 10px;
   }

   .trust-founder-mark {
      font-size: 28px;
      margin-top: 8px;
   }

   .trust-founder-quote p {
      font-size: 12px;
   }
}

/* ============================================================
   DIVEASSURE STRIP
   Same look as before. Cleaned up:
   - Removed duplicate dotPulse keyframe (already in bee-utilities)
   - Added missing .assure-cta base styles (was relying on .btn .btn-primary)
   ============================================================ */

.assure-strip-wrap {
   max-width: 1200px;
   margin: 40px auto;
   padding: 0 24px;
}

.assure-strip {
   position: relative;
   background: linear-gradient(90deg, rgba(15, 30, 50, 0.7) 0%, rgba(20, 50, 70, 0.6) 100%);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   border: 1px solid rgba(93, 202, 165, 0.25);
   border-radius: 20px;
   padding: 22px 28px;
   display: flex;
   align-items: center;
   gap: 24px;
   box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
   overflow: hidden;
   transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.assure-strip:hover {
   border-color: rgba(93, 202, 165, 0.4);
   box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5),
      0 0 40px rgba(93, 202, 165, 0.1);
}

/* Animated left accent bar */
.assure-strip::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   width: 4px;
   background: linear-gradient(180deg, #5DCAA5, #7fd4ff);
}

/* Glow blob top right */
.assure-strip::after {
   content: "";
   position: absolute;
   top: -50px;
   right: -50px;
   width: 200px;
   height: 200px;
   background: radial-gradient(circle, rgba(93, 202, 165, 0.15) 0%, transparent 70%);
   pointer-events: none;
   filter: blur(30px);
   z-index: 0;
}

/* Shimmer sweep on hover */
.assure-strip-shimmer {
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background: linear-gradient(90deg,
         transparent,
         rgba(93, 202, 165, 0.08),
         transparent);
   pointer-events: none;
   transition: left 1s ease;
   z-index: 1;
}

.assure-strip:hover .assure-strip-shimmer {
   left: 100%;
}

/* All children above effects */
.assure-strip>*:not(.assure-strip-shimmer) {
   position: relative;
   z-index: 2;
}

/* ============================================================
   LOGO ICON
   ============================================================ */
.assure-icon {
   width: 98px;
   height: 74px;
   background: linear-gradient(135deg, #5DCAA5 0%, #1D9E75 100%);
   border-radius: 16px;
   padding: 5px 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   box-shadow: 0 12px 24px rgba(93, 202, 165, 0.35);
   position: relative;
   transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.assure-icon img {
   width: 100%;
   height: auto;
   display: block;
}

/* Pulse ring on the icon */
.assure-icon::before {
   content: "";
   position: absolute;
   inset: -2px;
   border-radius: 16px;
   border: 2px solid rgba(93, 202, 165, 0.4);
   opacity: 0;
   animation: shieldPulse 2.5s ease-out infinite;
}

@keyframes shieldPulse {
   0% {
      transform: scale(1);
      opacity: 0.6;
   }

   100% {
      transform: scale(1.3);
      opacity: 0;
   }
}

.assure-strip:hover .assure-icon {
   transform: rotate(-6deg) scale(1.06);
}

/* ============================================================
   CONTENT
   ============================================================ */
.assure-content {
   flex: 1;
   min-width: 0;
}

.assure-title-row {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-bottom: 4px;
   flex-wrap: wrap;
}

.assure-recommend-pill {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   background: rgba(93, 202, 165, 0.15);
   border: 1px solid rgba(93, 202, 165, 0.3);
   padding: 3px 9px;
   border-radius: 999px;
   font-size: 9px;
   color: #5DCAA5;
   font-weight: 700;
   letter-spacing: 1.2px;
   text-transform: uppercase;
}

.assure-recommend-pill-dot {
   width: 5px;
   height: 5px;
   background: #5DCAA5;
   border-radius: 50%;
   box-shadow: 0 0 8px #5DCAA5;
   animation: beeDotPulse 2s ease-in-out infinite;
}

/* Note: beeDotPulse keyframe lives in bee-utilities.css (shared) */

.assure-title {
   font-size: 30px;
   color: #fff;
   font-weight: 600;
   margin: 0;
   letter-spacing: -0.3px;
}

.assure-title strong {
   color: #5DCAA5;
   font-weight: 700;
}

.assure-desc {
   font-size: 14px;
   color: rgba(255, 255, 255, 0.7);
   line-height: 1.5;
   margin: 0;
}

/* ============================================================
   STATS
   ============================================================ */
.assure-stats {
   display: flex;
   align-items: center;
   gap: 18px;
   padding-left: 20px;
   border-left: 1px solid rgba(255, 255, 255, 0.1);
   flex-shrink: 0;
}

.assure-stat {
   text-align: center;
}

.assure-stat-value {
   font-size: 18px;
   font-weight: 700;
   color: #fff;
   line-height: 1;
}

.assure-stat-label {
   font-size: 9px;
   color: #8fb3cc;
   letter-spacing: 0.8px;
   text-transform: uppercase;
   margin-top: 3px;
}

.assure-stat-divider {
   width: 1px;
   height: 32px;
   background: rgba(255, 255, 255, 0.1);
}

/* ============================================================
   CTA BUTTON (now self-contained, no .btn dependency)
   ============================================================ */
.assure-cta {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 13px 24px;
   background: linear-gradient(135deg, #5DCAA5 0%, #1D9E75 100%);
   color: #fff;
   border-radius: 999px;
   font-size: 13px;
   font-weight: 700;
   text-decoration: none;
   white-space: nowrap;
   flex-shrink: 0;
   box-shadow: 0 10px 24px rgba(93, 202, 165, 0.3);
   transition: all 0.4s ease;
   position: relative;
   overflow: hidden;
}

/* Shine sweep inside button */
.assure-cta::before {
   content: "";
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
   transition: left 0.6s ease;
}

.assure-cta:hover::before {
   left: 100%;
}

.assure-cta:hover {
   transform: translateY(-3px);
   box-shadow: 0 15px 30px rgba(93, 202, 165, 0.45);
}

.assure-cta svg {
   transition: transform 0.3s ease;
}

.assure-cta:hover svg {
   transform: rotate(45deg);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
   .assure-stats {
      display: none;
   }
}

@media (max-width: 768px) {
   .assure-strip {
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;
      padding: 20px;
   }

   .assure-icon {
      width: 64px;
      height: 48px;
      padding: 5px;
   }

   .assure-cta {
      width: 100%;
      justify-content: center;
   }
}


/* ============================================================
   MARQUEE STRIP CSS — FLICKER-FREE
   Use this with the xPercent JS version
   ============================================================ */

.marque-text-xl {
   position: relative;
   width: 100%;
   height: 260px;
   overflow: hidden;
   background: linear-gradient(135deg, #003d5c 0%, #185FA5 50%, #0e3a5c 100%);
}

/* Background video/image */
/* .marque-text-xl .marque-bg {
   position: absolute;
   inset: 0;
   z-index: 1;
   overflow: hidden;
} */


.marque-text-xl .marque-bg img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

/* Dark overlay */
.marque-text-xl .marque-overlay {
   position: absolute;
   inset: 0;
   z-index: 2;
   pointer-events: none;
   background:
      linear-gradient(135deg, rgba(24, 95, 165, 0.15) 0%, transparent 50%, rgba(11, 30, 45, 0.3) 50%),
      linear-gradient(135deg, #0b1e2d 0%, #111827 50%, #07141f 50%);
}

.marque-text-xl .marque-overlay::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 100px;
   background: linear-gradient(180deg, rgba(127, 212, 255, 0.25) 0%, transparent 100%);
}

/* RAIL — flicker prevention stack */
.marque-text-xl .rail {
   position: absolute;
   top: 50%;
   left: 0;
   display: flex;
   /* Lets the two .marque-content sit side by side */
   flex-wrap: nowrap;
   align-items: center;
   white-space: nowrap;
   z-index: 3;
   width: max-content;
   /* IMPORTANT: rail must be as wide as its content */

   /* Anti-flicker stack */
   transform: translate3d(0, -50%, 0);
   will-change: transform;
   backface-visibility: hidden;
   -webkit-backface-visibility: hidden;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

/* MARQUE CONTENT */
.marque-text-xl .marque-content {
   display: inline-flex;
   align-items: center;
   gap: 60px;
   padding-right: 60px;
   /* Spacing between original and clone */
   flex-shrink: 0;
}

/* HUGE TEXT */
.marque-text-xl .marque-text {
   font-size: clamp(60px, 11vw, 150px);
   font-weight: 900;
   letter-spacing: -4px;
   text-transform: uppercase;
   line-height: 1;
   color: #ffffff;
   flex-shrink: 0;
   margin: 0;
   padding: 0;

   /* Each text node on its own GPU layer */
   transform: translateZ(0);
   -webkit-font-smoothing: antialiased;
}

.marque-text-xl .marque-text.outline {
   color: transparent;
   -webkit-text-stroke: 2px rgba(255, 255, 255, 0.7);
   text-stroke: 2px rgba(255, 255, 255, 0.7);
}

/* GOLD BULLET */
.marque-text-xl .marque-bullet {
   font-size: clamp(30px, 5vw, 60px);
   color: #FAC775;
   line-height: 1;
   flex-shrink: 0;
   text-shadow: 0 0 20px rgba(250, 199, 117, 0.6);
   transform: translateZ(0);
}

/* EDGE FADES */
.marque-text-xl .marque-fade {
   position: absolute;
   top: 0;
   bottom: 0;
   width: 150px;
   pointer-events: none;
   z-index: 5;
}

.marque-text-xl .marque-fade.left {
   left: 0;
   background: linear-gradient(90deg, rgba(2, 16, 31, 0.9), transparent);
}

.marque-text-xl .marque-fade.right {
   right: 0;
   background: linear-gradient(270deg, rgba(2, 16, 31, 0.9), transparent);
}

/* RESPONSIVE */
@media (max-width: 768px) {
   .marque-text-xl {
      height: 140px;
   }

   .marque-text-xl .marque-content {
      gap: 40px;
      padding-right: 40px;
   }

   .marque-text-xl .marque-fade {
      width: 80px;
   }

   .marque-text-xl .marque-text {
      letter-spacing: -2px;
   }
}

@media (max-width: 480px) {
   .marque-text-xl {
      height: 100px;
   }
}


/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
   background: #02101f;
   position: relative;
   overflow: hidden;
}

.footer-container {
   max-width: 1280px;
   margin: 0 auto;
   padding: 0 32px;
}

/* ============================================================
   NEWSLETTER STRIP (top)
   ============================================================ */
.footer-newsletter {
   position: relative;
   padding: 64px 0 40px;
   background: linear-gradient(180deg, #02101f 0%, #051a30 100%);
   border-bottom: 1px solid rgba(255, 255, 255, 0.06);
   overflow: hidden;
}

.footer-newsletter::before,
.footer-newsletter::after {
   content: "";
   position: absolute;
   width: 400px;
   height: 400px;
   border-radius: 50%;
   pointer-events: none;
   filter: blur(80px);
}

.footer-newsletter::before {
   top: -150px;
   right: -100px;
   background: radial-gradient(circle, rgba(127, 212, 255, 0.1) 0%, transparent 70%);
}

.footer-newsletter::after {
   bottom: -150px;
   left: -100px;
   background: radial-gradient(circle, rgba(29, 158, 117, 0.08) 0%, transparent 70%);
}

.footer-newsletter-grid {
   position: relative;
   display: grid;
   grid-template-columns: 1.3fr 1fr;
   gap: 60px;
   align-items: center;
}

.footer-newsletter-tag {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: rgba(127, 212, 255, 0.08);
   border: 1px solid rgba(127, 212, 255, 0.2);
   padding: 6px 12px;
   border-radius: 999px;
   margin-bottom: 18px;
}

.footer-newsletter-tag-dot {
   width: 6px;
   height: 6px;
   background: #5DCAA5;
   border-radius: 50%;
   box-shadow: 0 0 8px #5DCAA5;
   animation: dotPulse 2s ease-in-out infinite;
}

@keyframes dotPulse {

   0%,
   100% {
      opacity: 1;
      transform: scale(1);
   }

   50% {
      opacity: 0.5;
      transform: scale(1.3);
   }
}

.footer-newsletter-tag span {
   font-size: 10px;
   color: #7fd4ff;
   font-weight: 600;
   letter-spacing: 1.5px;
   text-transform: uppercase;
}

.footer-newsletter-title {
   font-size: clamp(28px, 3.2vw, 50px);
   line-height: 1.05;
   color: #fff;
   margin: 0 0 12px;
   font-weight: 600;
   letter-spacing: -1px;
}

.footer-newsletter-desc {
   font-size: 15px;
   color: rgba(255, 255, 255, 0.65);
   margin: 0;
   max-width: 440px;
   line-height: 1.6;
}

/* Form */
.footer-newsletter-form {
   display: flex;
   background: rgba(255, 255, 255, 0.04);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 999px;
   padding: 6px;
   margin-bottom: 14px;
   backdrop-filter: blur(10px);
   transition: border-color 0.3s ease;
}

.footer-newsletter-form:focus-within {
   border-color: rgba(127, 212, 255, 0.4);
}

.footer-newsletter-form input {
   flex: 1;
   background: transparent;
   border: none;
   outline: none;
   color: #fff;
   padding: 12px 18px;
   font-size: 14px;
   font-family: inherit;
}

.footer-newsletter-form input::placeholder {
   color: rgba(255, 255, 255, 0.4);
}

.footer-newsletter-form button {
   background: linear-gradient(135deg, #FAC775, #EF9F27);
   color: #02101f;
   border: none;
   padding: 11px 22px;
   border-radius: 999px;
   font-size: 13px;
   font-weight: 700;
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   font-family: inherit;
   transition: all 0.3s ease;
}

.footer-newsletter-form button:hover {
   transform: translateX(2px);
   box-shadow: 0 8px 20px rgba(250, 199, 117, 0.3);
}

.footer-newsletter-form button svg {
   transition: transform 0.3s ease;
}

.footer-newsletter-form button:hover svg {
   transform: translateX(2px);
}

.footer-newsletter-meta {
   display: flex;
   align-items: center;
   gap: 10px;
   padding-left: 16px;
}

.footer-avatar-stack {
   display: flex;
}

.footer-avatar {
   width: 22px;
   height: 22px;
   border-radius: 50%;
   border: 2px solid #051a30;
   margin-left: -8px;
}

.footer-avatar:nth-child(1) {
   background: linear-gradient(135deg, #5DCAA5, #1D9E75);
   margin-left: 0;
}

.footer-avatar:nth-child(2) {
   background: linear-gradient(135deg, #FAC775, #EF9F27);
}

.footer-avatar:nth-child(3) {
   background: linear-gradient(135deg, #D4537E, #993556);
}

.footer-newsletter-meta span {
   font-size: 14px;
   color: rgba(255, 255, 255, 0.5);
}

/* ============================================================
   MAIN FOOTER GRID
   ============================================================ */
.footer-main {
   position: relative;
   padding: 64px 0 40px;
}

a {
   text-decoration: none !important;
}

.footer-grid {
   display: grid;
   grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
   gap: 48px;
}

/* Brand column */
.footer-brand-block {
   max-width: 320px;
}

.footer-logo {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-bottom: 20px;
}

.footer-logo-mark {
   width: 38px;
   height: 38px;
   background: linear-gradient(135deg, #FAC775, #EF9F27);
   border-radius: 11px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 800;
   color: #02101f;
   font-size: 16px;
   box-shadow: 0 8px 20px rgba(250, 199, 117, 0.3);
}

.footer-logo-name {
   color: #fff;
   font-weight: 600;
   font-size: 18px;
   letter-spacing: -0.3px;
}

.footer-brand-text {
   font-size: 15px;
   color: rgba(255, 255, 255, 0.65);
   line-height: 1.6;
   margin: 0 0 22px;
}

.footer-contact {
   display: flex;
   flex-direction: column;
   gap: 10px;
   margin-bottom: 22px;
}

.footer-contact-item {
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: 15px;
   color: rgba(255, 255, 255, 0.7);
   transition: color 0.3s ease;
}

.footer-contact-item:hover {
   color: #fff;
}

.footer-contact-item svg {
   flex-shrink: 0;
   color: #7fd4ff;
}

/* Status pill */
.footer-status {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 12px 14px;
   background: rgba(93, 202, 165, 0.08);
   border: 1px solid rgba(93, 202, 165, 0.2);
   border-radius: 12px;
   max-width: 280px;
}

.footer-status-radar {
   position: relative;
   width: 28px;
   height: 28px;
   flex-shrink: 0;
}

.footer-status-radar::before {
   content: "";
   position: absolute;
   inset: 0;
   border: 2px solid rgba(93, 202, 165, 0.3);
   border-radius: 50%;
}

.footer-status-radar::after {
   content: "";
   position: absolute;
   inset: 9px;
   background: #5DCAA5;
   border-radius: 50%;
   box-shadow: 0 0 10px #5DCAA5;
   animation: dotPulse 2s ease-in-out infinite;
}

.footer-status-tag {
   font-size: 10px;
   color: #5DCAA5;
   font-weight: 700;
   letter-spacing: 0.5px;
   margin-bottom: 2px;
}

.footer-status-detail {
   font-size: 11px;
   color: rgba(255, 255, 255, 0.7);
}

/* Link columns */
.footer-col h4 {
   font-size: 11px;
   color: #FAC775;
   font-weight: 700;
   letter-spacing: 2px;
   text-transform: uppercase;
   margin: 0 0 18px;
}

.footer-links {
   display: flex;
   flex-direction: column;
   gap: 11px;
}

.footer-links a {
   font-size: 15px;
   color: rgba(255, 255, 255, 0.7);
   position: relative;
   width: fit-content;
   transition: color 0.3s ease, transform 0.3s ease;
}

.footer-links a::before {
   content: "→";
   position: absolute;
   left: -16px;
   opacity: 0;
   color: #FAC775;
   transition: all 0.3s ease;
}

.footer-links a:hover {
   color: #fff;
   transform: translateX(8px);
}

.footer-links a:hover::before {
   opacity: 1;
   left: -18px;
}

/* ============================================================
   TRUST BADGES ROW
   ============================================================ */
.footer-trust {
   margin-top: 56px;
   padding-top: 32px;
   border-top: 1px solid rgba(255, 255, 255, 0.06);
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 28px;
   flex-wrap: wrap;
}

.footer-trust-item {
   display: flex;
   align-items: center;
   gap: 10px;
}

.footer-trust-logo {
   width: 32px;
   height: 32px;
   border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 800;
   color: #fff;
   font-size: 9px;
   flex-shrink: 0;
}

.footer-trust-logo.padi {
   background: linear-gradient(135deg, #185FA5, #0a4d6e);
}

.footer-trust-logo.dive {
   background: #5DCAA5;
   border-radius: 50%;
   font-size: 13px;
}

.footer-trust-logo.trip {
   background: #00AA6C;
   border-radius: 50%;
   font-size: 13px;
}

.footer-trust-logo.reef {
   background: linear-gradient(135deg, #1D9E75, #185FA5);
}

.footer-trust-text {
   font-size: 14px;
   color: rgba(255, 255, 255, 0.55);
}

.footer-trust-divider {
   width: 1px;
   height: 22px;
   background: rgba(255, 255, 255, 0.1);
}

/* ============================================================
   BIG WATERMARK SIGNATURE
   ============================================================ */
.footer-signature {
   position: relative;
   height: 110px;
   overflow: hidden;
   background: linear-gradient(180deg, transparent 0%, rgba(2, 16, 31, 0.5) 100%);
   display: flex;
   align-items: center;
   justify-content: center;
   pointer-events: none;
}

.footer-signature-text {
   font-size: clamp(60px, 11vw, 140px);
   font-weight: 900;
   letter-spacing: -6px;
   color: transparent;
   -webkit-text-stroke: 1.5px rgba(127, 212, 255, 0.15);
   text-stroke: 1.5px rgba(127, 212, 255, 0.15);
   line-height: 0.8;
   white-space: nowrap;
   user-select: none;
   text-transform: uppercase;
}

/* ============================================================
   BOTTOM BAR
   ============================================================ */
.footer-bottom {
   border-top: 1px solid rgba(255, 255, 255, 0.06);
   padding: 20px 0;
   background: #010a14;
}

.footer-bottom-grid {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 20px;
   flex-wrap: wrap;
}

.footer-copyright {
   font-size: 14px;
   color: rgba(255, 255, 255, 0.4);
}

.footer-copyright strong {
   color: rgba(255, 255, 255, 0.6);
   font-weight: 500;
}

.footer-legal {
   display: flex;
   gap: 22px;
   align-items: center;
}

.footer-legal a {
   font-size: 14px;
   color: rgba(255, 255, 255, 0.5);
   transition: color 0.3s ease;
}

.footer-legal a:hover {
   color: #fff;
}

.footer-social {
   display: flex;
   gap: 8px;
   align-items: center;
}

.footer-social-link {
   width: 34px;
   height: 34px;
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.3s ease;
}

.footer-social-link svg {
   width: 14px;
   height: 14px;
   color: rgba(255, 255, 255, 0.7);
   transition: all 0.3s ease;
}

.footer-social-link:hover {
   background: linear-gradient(135deg, #FAC775, #EF9F27);
   border-color: transparent;
   transform: translateY(-3px);
}

.footer-social-link:hover svg {
   color: #02101f;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
   .footer-grid {
      grid-template-columns: 1fr 1fr 1fr;
      gap: 32px;
   }

   .footer-brand-block {
      grid-column: 1 / -1;
      max-width: 100%;
   }

   .footer-newsletter-grid {
      grid-template-columns: 1fr;
      gap: 32px;
   }
}

@media (max-width: 640px) {
   .footer-container {
      padding: 0 20px;
   }

   .footer-newsletter {
      padding: 48px 0 32px;
   }

   .footer-main {
      padding: 48px 0 32px;
   }

   .footer-grid {
      grid-template-columns: 1fr 1fr;
      gap: 28px;
   }

   .footer-bottom-grid {
      flex-direction: column;
      text-align: center;
   }

   .footer-trust {
      gap: 16px;
      padding-top: 24px;
   }

   .footer-trust-divider {
      display: none;
   }

   .footer-newsletter-form {
      flex-direction: column;
      border-radius: 16px;
      padding: 8px;
   }

   .footer-newsletter-form button {
      width: 100%;
      justify-content: center;
   }
}




/* ============================================================
   PACKAGES GRID
   ============================================================ */
.packages-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 18px;
   align-items: stretch;
   max-width: 1200px;
   margin: 0 auto;
}

/* ============================================================
   PACKAGE CARD
   ============================================================ */
.package-card {
   position: relative;
   background: rgba(15, 30, 50, 0.5);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 24px;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
      border-color 0.5s ease,
      box-shadow 0.5s ease;
}

.package-card:hover {
   transform: translateY(-8px);
   border-color: rgba(255, 255, 255, 0.15);
   box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}

/* Per-card accent colors */
.package-card[data-tier="beginner"] {
   --tier-color: #7fd4ff;
   --tier-color-dark: #185FA5;
}

.package-card[data-tier="featured"] {
   --tier-color: #FAC775;
   --tier-color-dark: #EF9F27;
}

.package-card[data-tier="advanced"] {
   --tier-color: #5DCAA5;
   --tier-color-dark: #1D9E75;
}

/* FEATURED CARD — elevated with gold glow */
.package-card.featured {
   background: linear-gradient(180deg, rgba(250, 199, 117, 0.08) 0%, rgba(15, 30, 50, 0.6) 100%);
   border: 2px solid rgba(250, 199, 117, 0.4);
   transform: translateY(-12px);
   box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5),
      0 0 60px rgba(250, 199, 117, 0.15);
}

.package-card.featured:hover {
   transform: translateY(-20px);
   box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5),
      0 0 80px rgba(250, 199, 117, 0.2);
}

/* "Most Popular" badge on featured */
.package-popular-badge {
   position: absolute;
   top: -12px;
   left: 50%;
   transform: translateX(-50%);
   display: inline-flex;
   align-items: center;
   gap: 6px;
   background: linear-gradient(135deg, #FAC775, #EF9F27);
   padding: 6px 16px;
   border-radius: 999px;
   box-shadow: 0 8px 20px rgba(250, 199, 117, 0.4);
   z-index: 5;
   white-space: nowrap;
}

.package-popular-badge svg {
   flex-shrink: 0;
}

.package-popular-badge span {
   font-size: 10px;
   color: #02101f;
   font-weight: 800;
   letter-spacing: 1px;
   text-transform: uppercase;
}

/* ============================================================
   CARD HEADER (image area)
   ============================================================ */
.package-card-image {
   position: relative;
   height: 200px;
   overflow: hidden;
}

.package-card-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.package-card:hover .package-card-image img {
   transform: scale(1.06);
}

/* Gradient overlay for text readability */
.package-card-image::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, transparent 50%, rgba(2, 16, 31, 0.85) 100%);
   pointer-events: none;
   z-index: 2;
}

/* Tier pill */
.package-tier-pill {
   position: absolute;
   top: 16px;
   left: 16px;
   z-index: 3;
   display: inline-flex;
   align-items: center;
   gap: 5px;
   background: rgba(15, 30, 50, 0.7);
   backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, 0.12);
   padding: 5px 11px;
   border-radius: 999px;
   font-size: 10px;
   font-weight: 700;
   letter-spacing: 1px;
   text-transform: uppercase;
   color: var(--tier-color);
}

.package-card.featured .package-tier-pill {
   border-color: rgba(250, 199, 117, 0.4);
}

/* Title block over image */
.package-title-block {
   position: absolute;
   bottom: 18px;
   left: 22px;
   right: 22px;
   z-index: 3;
}

.package-title-eyebrow {
   font-size: 11px;
   color: rgba(255, 255, 255, 0.7);
   letter-spacing: 1.5px;
   text-transform: uppercase;
   margin-bottom: 2px;
}

.package-title {
   font-size: 26px;
   color: #fff;
   font-weight: 700;
   margin: 0;
   letter-spacing: -0.5px;
}

/* ============================================================
   CARD BODY
   ============================================================ */
.package-card-body {
   padding: 24px;
   flex: 1;
   display: flex;
   flex-direction: column;
}

/* Price */
.package-price {
   display: flex;
   align-items: baseline;
   gap: 8px;
   margin-bottom: 16px;
   flex-wrap: wrap;
}

.package-price-old {
   font-size: 14px;
   color: rgba(255, 255, 255, 0.4);
   text-decoration: line-through;
   line-height: 1;
}

.package-price-current {
   font-size: 38px;
   font-weight: 800;
   color: #fff;
   letter-spacing: -1.5px;
   line-height: 1;
}

.package-price-period {
   font-size: 12px;
   color: #8fb3cc;
}

/* Tagline */
.package-tagline {
   font-size: 15px;
   color: rgba(255, 255, 255, 0.7);
   line-height: 1.5;
   margin: 0 0 18px;
}

.package-card.featured .package-tagline {
   color: rgba(255, 255, 255, 0.8);
}

/* Features list */
.package-features {
   display: flex;
   flex-direction: column;
   gap: 10px;
   margin-bottom: 24px;
   flex: 1;
}

.package-feature {
   display: flex;
   align-items: center;
   gap: 10px;
}

.package-feature-icon {
   width: 18px;
   height: 18px;
   background: var(--tier-bg, rgba(127, 212, 255, 0.15));
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
}

.package-card[data-tier="beginner"] .package-feature-icon {
   background: rgba(127, 212, 255, 0.15);
}

.package-card[data-tier="featured"] .package-feature-icon {
   background: rgba(250, 199, 117, 0.2);
}

.package-card[data-tier="advanced"] .package-feature-icon {
   background: rgba(93, 202, 165, 0.15);
}

.package-feature-icon svg {
   stroke: var(--tier-color);
}

.package-feature-text {
   font-size: 15px;
   color: rgba(255, 255, 255, 0.85);
}

.package-card.featured .package-feature-text {
   color: #fff;
   font-weight: 500;
}

/* Action buttons */
.package-actions {
   display: flex;
   gap: 8px;
}

.package-btn-secondary,
.package-btn-primary {
   flex: 1;
   text-align: center;
   padding: 13px 16px;
   border-radius: 999px;
   font-size: 15px;
   font-weight: 600;
   text-decoration: none;
   letter-spacing: 0.3px;
   transition: all 0.3s ease;
}

.package-btn-secondary {
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.15);
   color: #fff;
}

.package-btn-secondary:hover {
   background: rgba(255, 255, 255, 0.1);
   border-color: rgba(255, 255, 255, 0.25);
}

.package-btn-primary {
   flex: 1.5;
}

.package-card[data-tier="beginner"] .package-btn-primary {
   background: rgba(127, 212, 255, 0.15);
   border: 1px solid rgba(127, 212, 255, 0.3);
   color: #7fd4ff;
}

.package-card[data-tier="beginner"] .package-btn-primary:hover {
   background: rgba(127, 212, 255, 0.25);
   border-color: rgba(127, 212, 255, 0.5);
}

.package-card[data-tier="advanced"] .package-btn-primary {
   background: rgba(93, 202, 165, 0.15);
   border: 1px solid rgba(93, 202, 165, 0.3);
   color: #5DCAA5;
}

.package-card[data-tier="advanced"] .package-btn-primary:hover {
   background: rgba(93, 202, 165, 0.25);
   border-color: rgba(93, 202, 165, 0.5);
}

.package-card.featured .package-btn-primary {
   background: linear-gradient(135deg, #FAC775, #EF9F27);
   color: #02101f;
   font-weight: 800;
   box-shadow: 0 8px 20px rgba(250, 199, 117, 0.3);
   position: relative;
   overflow: hidden;
}

.package-card.featured .package-btn-primary::before {
   content: "";
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
   transition: left 0.6s ease;
}

.package-card.featured .package-btn-primary:hover {
   transform: translateY(-2px);
   box-shadow: 0 12px 28px rgba(250, 199, 117, 0.5);
}

.package-card.featured .package-btn-primary:hover::before {
   left: 100%;
}

/* ============================================================
   TRUST FOOTER
   ============================================================ */
.packages-trust {
   text-align: center;
   margin-top: 40px;
}

.packages-trust p {
   font-size: 14px;
   color: rgba(255, 255, 255, 0.5);
   margin: 0;
   display: inline-flex;
   align-items: center;
   gap: 18px;
   flex-wrap: wrap;
   justify-content: center;
}

.packages-trust span {
   display: inline-flex;
   align-items: center;
   gap: 6px;
}

.packages-trust .check {
   color: #5DCAA5;
}

.packages-section {
   background: linear-gradient(135deg, #02101f 0%, #051a30 50%, #02101f 100%) !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
   .packages-section {
      padding: 80px 0;
   }

   .packages-grid {
      grid-template-columns: 1fr;
      gap: 24px;
      max-width: 480px;
   }

   .package-card.featured {
      transform: none;
   }

   .package-card.featured:hover {
      transform: translateY(-8px);
   }

   .package-popular-badge {
      top: -12px;
   }
}

@media (max-width: 480px) {
   .package-actions {
      flex-direction: column;
   }

   .packages-trust p {
      flex-direction: column;
      gap: 8px;
   }
}

.faq-section {
   padding: 140px 0;
   /* background: #02101f; */
   /* background: radial-gradient(circle at 20% 20%, #0a1f33, #020b14) !important; */
   position: relative;
   overflow: hidden;
}

.faq-section::before {
   content: "";
   position: absolute;
   top: 8%;
   left: 50%;
   transform: translateX(-50%);
   width: 700px;
   height: 400px;
   background: radial-gradient(ellipse, rgba(56, 138, 221, 0.08) 0%, transparent 60%);
   pointer-events: none;
   filter: blur(60px);
}

/* ============================================================
   LAYOUT
   ============================================================ */
.faq-grid {
   display: grid;
   grid-template-columns: 0.85fr 1.4fr;
   gap: 70px;
   align-items: start;
   position: relative;
   max-width: 1200px;
   margin: 0 auto;
}

/* ============================================================
   LEFT COLUMN — INTRO + CTA
   ============================================================ */
.faq-intro {
   position: sticky;
   top: 100px;
}

.faq-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: rgba(127, 212, 255, 0.08);
   border: 1px solid rgba(127, 212, 255, 0.2);
   padding: 7px 14px;
   border-radius: 999px;
   margin-bottom: 22px;
   backdrop-filter: blur(10px);
}

.faq-eyebrow-dot {
   width: 6px;
   height: 6px;
   background: #5DCAA5;
   border-radius: 50%;
   box-shadow: 0 0 10px #5DCAA5;
   animation: dotPulse 2s ease-in-out infinite;
}

@keyframes dotPulse {

   0%,
   100% {
      opacity: 1;
      transform: scale(1);
   }

   50% {
      opacity: 0.5;
      transform: scale(1.3);
   }
}

.faq-eyebrow-text {
   font-size: 10px;
   color: #7fd4ff;
   font-weight: 600;
   letter-spacing: 1.5px;
   text-transform: uppercase;
}

.faq-title {
   font-size: clamp(32px, 3.6vw, 46px);
   line-height: 1.05;
   color: #fff;
   margin: 0 0 18px;
   font-weight: 600;
   letter-spacing: -1.5px;
}

.faq-title .gradient-text {
   background: linear-gradient(135deg, #7fd4ff 0%, #5DCAA5 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

.faq-desc {
   font-size: 14px;
   line-height: 1.65;
   color: rgba(255, 255, 255, 0.7);
   margin: 0 0 28px;
   max-width: 320px;
}

/* WhatsApp CTA */
.faq-cta {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 14px 22px;
   background: linear-gradient(135deg, #FAC775 0%, #EF9F27 100%);
   color: #02101f;
   border-radius: 999px;
   font-size: 13px;
   font-weight: 700;
   text-decoration: none;
   box-shadow: 0 12px 30px rgba(250, 199, 117, 0.3);
   transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-cta:hover {
   transform: translateY(-3px);
   box-shadow: 0 18px 40px rgba(250, 199, 117, 0.45);
}

/* "Replying now" widget */
.faq-status {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-top: 24px;
   padding: 12px 14px;
   background: rgba(93, 202, 165, 0.08);
   border: 1px solid rgba(93, 202, 165, 0.2);
   border-radius: 12px;
   max-width: 280px;
}

.faq-status-radar {
   position: relative;
   width: 24px;
   height: 24px;
   flex-shrink: 0;
}

.faq-status-radar::before {
   content: "";
   position: absolute;
   inset: 0;
   border: 2px solid rgba(93, 202, 165, 0.3);
   border-radius: 50%;
}

.faq-status-radar::after {
   content: "";
   position: absolute;
   inset: 8px;
   background: #5DCAA5;
   border-radius: 50%;
   box-shadow: 0 0 10px #5DCAA5;
   animation: dotPulse 2s ease-in-out infinite;
}

.faq-status-tag {
   font-size: 10px;
   color: #5DCAA5;
   font-weight: 700;
   letter-spacing: 0.5px;
}

.faq-status-detail {
   font-size: 11px;
   color: rgba(255, 255, 255, 0.7);
}

/* ============================================================
   RIGHT COLUMN — QUESTIONS LIST
   ============================================================ */
.faq-list {
   display: flex;
   flex-direction: column;
   gap: 12px;
}

/* ============================================================
   FAQ ITEM
   ============================================================ */
.faq-item {
   background: rgba(15, 30, 50, 0.4);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 16px;
   overflow: hidden;
   transition: border-color 0.4s ease, background 0.4s ease;
}

.faq-item:hover {
   border-color: rgba(255, 255, 255, 0.15);
   background: rgba(15, 30, 50, 0.55);
}

/* ACTIVE STATE */
.faq-item.is-open {
   background: rgba(15, 30, 50, 0.5);
   border-color: rgba(127, 212, 255, 0.3);
}

/* QUESTION ROW (clickable trigger) */
.faq-question {
   width: 100%;
   background: transparent;
   border: none;
   padding: 20px 22px;
   display: flex;
   align-items: center;
   gap: 16px;
   cursor: pointer;
   text-align: left;
   font-family: inherit;
   color: inherit;
}

.faq-question:hover,
.faq-question:focus {
   background-color: var(--color-primary) !important;
   color: var(--color-dark) !important;
}

.faq-question:hover .faq-question-text,
.faq-question:focus .faq-question-text {
   color: var(--color-dark) !important;
}

/* Number tag */
.faq-number {
   font-family: 'JetBrains Mono', 'Courier New', monospace;
   font-size: 11px;
   color: rgba(255, 255, 255, 0.4);
   font-weight: 700;
   letter-spacing: 1px;
   flex-shrink: 0;
   background: rgba(255, 255, 255, 0.04);
   padding: 4px 8px;
   border-radius: 6px;
   transition: all 0.4s ease;
}

.faq-item.is-open .faq-number {
   color: #7fd4ff;
   background: rgba(127, 212, 255, 0.1);
}

/* Question text */
.faq-question-text {
   font-size: 15px;
   color: rgba(255, 255, 255, 0.85);
   font-weight: 600;
   margin: 0;
   flex: 1;
   line-height: 1.4;
   transition: color 0.3s ease;
}

.faq-item.is-open .faq-question-text {
   color: #fff;
}

/* Toggle icon */
.faq-toggle {
   width: 32px;
   height: 32px;
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-toggle svg {
   transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-toggle svg path {
   stroke: rgba(255, 255, 255, 0.7);
   transition: stroke 0.3s ease;
}

.faq-item.is-open .faq-toggle {
   background: linear-gradient(135deg, #7fd4ff, #185FA5);
   border-color: transparent;
}

.faq-item.is-open .faq-toggle svg {
   transform: rotate(45deg);
}

.faq-item.is-open .faq-toggle svg path {
   stroke: #fff;
}

/* ANSWER (collapsible) */
.faq-answer {
   display: grid;
   grid-template-rows: 0fr;
   transition: grid-template-rows 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-answer-inner {
   overflow: hidden;
}

.faq-answer-content {
   padding: 0 22px 20px 56px;
}

.faq-answer-content p {
   font-size: 13px;
   color: rgba(255, 255, 255, 0.75);
   line-height: 1.65;
   margin: 0;
}

.faq-answer-content p+p {
   margin-top: 10px;
}

.faq-item.is-open .faq-answer {
   grid-template-rows: 1fr;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
   .faq-grid {
      grid-template-columns: 1fr;
      gap: 40px;
   }

   .faq-intro {
      position: static;
      text-align: center;
   }

   .faq-desc {
      margin-left: auto;
      margin-right: auto;
   }

   .faq-status {
      margin-left: auto;
      margin-right: auto;
   }
}

@media (max-width: 600px) {
   .faq-section {
      padding: 80px 0;
   }

   .faq-question {
      padding: 16px 18px;
      gap: 12px;
   }

   .faq-answer-content {
      padding: 0 18px 18px 50px;
   }

   .faq-question-text {
      font-size: 14px;
   }
}


/* ============================================================
   AQUATIC NOMAD — SMALL INLINE STRIP
   Replaces the full-section nomad design.
   Tight footprint, hover-elegant, pure CSS interaction.
   ============================================================ */

.nomad-strip-section {
   padding: 40px 0;
   position: relative;
}

/* ============================================================
   STRIP — single horizontal link row
   ============================================================ */
.nomad-strip {
   display: flex;
   align-items: center;
   gap: 18px;
   max-width: 1100px;
   margin: 0 auto;
   padding: 16px 22px;
   background: rgba(15, 30, 50, 0.5);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   border: 1px solid rgba(127, 212, 255, 0.15);
   border-radius: 14px;
   text-decoration: none;
   color: inherit;
   transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.nomad-strip:hover {
   border-color: rgba(127, 212, 255, 0.35);
   background: rgba(15, 30, 50, 0.7);
   transform: translateY(-2px);
   box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3),
      0 0 30px rgba(127, 212, 255, 0.08);
}

/* ============================================================
   ICON
   ============================================================ */
.nomad-strip-icon {
   width: 38px;
   height: 38px;
   background: linear-gradient(135deg, rgba(127, 212, 255, 0.15), rgba(24, 95, 165, 0.05));
   border: 1px solid rgba(127, 212, 255, 0.3);
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   transition: transform 0.4s ease;
}

.nomad-strip:hover .nomad-strip-icon {
   transform: rotate(-5deg) scale(1.05);
}

/* ============================================================
   TEXT CONTENT
   ============================================================ */
.nomad-strip-content {
   flex: 1;
   min-width: 0;
}

/* Top meta row — eyebrow + scope */
.nomad-strip-meta {
   display: flex;
   align-items: center;
   gap: 8px;
   margin-bottom: 3px;
   flex-wrap: wrap;
}

.nomad-strip-eyebrow {
   font-size: 14px;
   color: #7fd4ff;
   font-weight: 700;
   letter-spacing: 1px;
   text-transform: uppercase;
}

.nomad-strip-meta-dot {
   width: 3px;
   height: 3px;
   background: rgba(255, 255, 255, 0.3);
   border-radius: 50%;
   flex-shrink: 0;
}

.nomad-strip-scope {
   font-size: 14px;
   color: rgba(255, 255, 255, 0.5);
   letter-spacing: 0.3px;
}

/* Main title line */
.nomad-strip-title {
   font-size: 20px;
   color: #fff;
   font-weight: 700;
   line-height: 1.4;
}

.nomad-strip-title em {
   color: #FAC775;
   font-style: italic;
   font-weight: 600;
}

/* ============================================================
   CTA PILL (right side)
   ============================================================ */
.nomad-strip-cta {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 8px 14px;
   background: rgba(127, 212, 255, 0.1);
   border: 1px solid rgba(127, 212, 255, 0.25);
   border-radius: 999px;
   color: #7fd4ff;
   flex-shrink: 0;
   transition: all 0.4s ease;
}

.nomad-strip-cta span {
   font-size: 15px;
   font-weight: 600;
   letter-spacing: 0.3px;
}

.nomad-strip-cta svg {
   transition: transform 0.4s ease;
}

.nomad-strip:hover .nomad-strip-cta {
   background: rgba(127, 212, 255, 0.2);
   border-color: rgba(127, 212, 255, 0.45);
}

.nomad-strip:hover .nomad-strip-cta svg {
   transform: translate(2px, -2px);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 720px) {
   .nomad-strip {
      padding: 14px 18px;
      gap: 14px;
   }

   .nomad-strip-icon {
      width: 34px;
      height: 34px;
   }

   .nomad-strip-title {
      font-size: 18px;
   }
}

@media (max-width: 540px) {
   .nomad-strip-section {
      padding: 24px 0;
   }

   .nomad-strip {
      flex-wrap: wrap;
      gap: 12px;
      padding: 14px 16px;
   }

   .nomad-strip-content {
      flex: 1 1 calc(100% - 50px);
   }

   .nomad-strip-cta {
      flex: 1 1 100%;
      justify-content: center;
      padding: 10px;
   }
}



/* ============================================================
   BEE — REUSABLE UTILITY CLASSES
   Use these across all sections (why-us, packages, experiences,
   testimonials, etc.) to keep the design system consistent.
   ============================================================ */


/* ============================================================
   1. SECTION CONTAINERS
   ============================================================ */

/* Standard section padding (large screens get more space) */
.bee-section {
   padding: 140px 0;
   position: relative;
   overflow: hidden;
}

.bee-section-light {
   background: #f3f6fa;
}

.bee-section-light .bee-section-title {
   color: #0f172a;
}

.bee-section-light .bee-section-desc {
   color: #475569;
}

.bee-section-light .bee-eyebrow {
   background: rgba(24, 95, 165, 0.08);
   border-color: rgba(24, 95, 165, 0.2);
}

.bee-section-light .bee-eyebrow-text {
   color: #185FA5;
}

@media (max-width: 900px) {
   .bee-section {
      padding: 80px 0;
   }
}

/* Atmospheric blue glow for any section background */
.bee-bg-glow {
   position: absolute;
   top: 8%;
   left: 50%;
   transform: translateX(-50%);
   width: 800px;
   height: 500px;
   background: radial-gradient(ellipse, rgba(56, 138, 221, 0.1) 0%, transparent 60%);
   pointer-events: none;
   filter: blur(60px);
   z-index: 0;
}


/* ============================================================
   2. SECTION HEADER (eyebrow + title + desc)
   Used in every section — reuse this everywhere.
   ============================================================ */

.bee-section-header {
   text-align: center;
   max-width: 760px;
   margin: 0 auto 64px;
   position: relative;
   z-index: 2;
}

/* Eyebrow pill */
.bee-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: rgba(127, 212, 255, 0.08);
   border: 1px solid rgba(127, 212, 255, 0.2);
   padding: 7px 14px;
   border-radius: 999px;
   margin-bottom: 22px;
   backdrop-filter: blur(10px);
}

.bee-eyebrow-dot {
   width: 6px;
   height: 6px;
   background: #5DCAA5;
   border-radius: 50%;
   box-shadow: 0 0 10px #5DCAA5;
   animation: beeDotPulse 2s ease-in-out infinite;
}

@keyframes beeDotPulse {

   0%,
   100% {
      opacity: 1;
      transform: scale(1);
   }

   50% {
      opacity: 0.5;
      transform: scale(1.3);
   }
}

.bee-eyebrow-text {
   font-size: 10px;
   color: #7fd4ff;
   font-weight: 600;
   letter-spacing: 1.5px;
   text-transform: uppercase;
}

/* Main section title */
.bee-section-title {
   font-size: clamp(32px, 4vw, 52px);
   line-height: 1.05;
   color: #fff;
   margin: 0 0 16px;
   font-weight: 600;
   letter-spacing: -1.5px;
}

/* Gradient text inside titles */
.bee-gradient-text {
   background: linear-gradient(135deg, #ffdb1b 0%, #d4a017 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}

/* Yellow gradient (brand variant) */
.bee-gradient-gold {
   background: linear-gradient(135deg, #FAC775 0%, #EF9F27 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}

/* Section description */
.bee-section-desc {
   font-size: 16px;
   line-height: 1.65;
   color: rgba(255, 255, 255, 0.8);
   margin: 0 auto;
   max-width: 580px;
}


/* ============================================================
   3. STAT/PROOF GRID
   Used in: why-us, hero trust strip, anywhere with 3-4 stats
   ============================================================ */

.bee-stat-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 16px;
   position: relative;
   z-index: 2;
}

@media (max-width: 900px) {
   .bee-stat-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
   }
}

.bee-stat-item {
   text-align: center;
   padding: 26px 18px;
   background: rgba(255, 255, 255, 0.03);
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 18px;
   backdrop-filter: blur(10px);
   transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
   position: relative;
   overflow: hidden;
}

/* Top accent line that draws on hover */
.bee-stat-item::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 2px;
   background: var(--accent, #7fd4ff);
   transform: scaleX(0);
   transform-origin: left;
   transition: transform 0.5s ease;
}

.bee-stat-item:hover {
   transform: translateY(-4px);
   border-color: rgba(255, 255, 255, 0.15);
   background: rgba(255, 255, 255, 0.04);
}

.bee-stat-item:hover::before {
   transform: scaleX(1);
}

/* Tone modifiers — apply via class for predictable colors */
.bee-stat-item.tone-gold {
   --accent: #FAC775;
}

.bee-stat-item.tone-teal {
   --accent: #5DCAA5;
}

.bee-stat-item.tone-blue {
   --accent: #7fd4ff;
}

.bee-stat-item.tone-pink {
   --accent: #D4537E;
}

.bee-stat-icon {
   width: 56px;
   height: 56px;
   border-radius: 14px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 16px;
   transition: transform 0.4s ease;
}

.bee-stat-item.tone-gold .bee-stat-icon {
   background: linear-gradient(135deg, rgba(250, 199, 117, 0.15), rgba(239, 159, 39, 0.05));
   border: 1px solid rgba(250, 199, 117, 0.3);
}

.bee-stat-item.tone-teal .bee-stat-icon {
   background: linear-gradient(135deg, rgba(93, 202, 165, 0.15), rgba(29, 158, 117, 0.05));
   border: 1px solid rgba(93, 202, 165, 0.3);
}

.bee-stat-item.tone-blue .bee-stat-icon {
   background: linear-gradient(135deg, rgba(127, 212, 255, 0.15), rgba(24, 95, 165, 0.05));
   border: 1px solid rgba(127, 212, 255, 0.3);
}

.bee-stat-item.tone-pink .bee-stat-icon {
   background: linear-gradient(135deg, rgba(212, 83, 126, 0.15), rgba(153, 53, 86, 0.05));
   border: 1px solid rgba(212, 83, 126, 0.3);
}

/* PADI logo variant — white background, contained */
.bee-stat-icon.has-logo {
   /* background: #fff !important; */
   padding: 8px;
   border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.bee-stat-icon.has-logo img {
   width: 100%;
   height: 100%;
   object-fit: contain;
}

.bee-stat-item:hover .bee-stat-icon {
   transform: scale(1.08) rotate(-5deg);
}

.bee-stat-value {
   font-size: 22px;
   font-weight: 700;
   color: #fff;
   margin-bottom: 6px;
   letter-spacing: -0.5px;
   line-height: 1.1;
}

.bee-stat-label {
   font-size: 14px;
   color: #8fb3cc;
   line-height: 1.4;
}

/* ============================================================
   WHY-SECTION HERO — OPTION A
   Asymmetric layout: image left (sticky-feeling), content right.
   Uses bee- utility classes for header/stats.
   ============================================================ */

.why-section-hero {
   /* Inherits .bee-section padding */
}

.why-hero-grid {
   display: grid;
   grid-template-columns: 1fr 1.05fr;
   gap: 56px;
   align-items: center;
}

/* ============================================================
   LEFT — HERO IMAGE
   ============================================================ */
.why-hero-image {
   position: relative;
   border-radius: 24px;
   overflow: hidden;
   box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
   border: 1px solid rgba(255, 255, 255, 0.06);
   aspect-ratio: 4 / 5;
}

.why-hero-image img {
   width: 100%;
   height: 100% !important;
   object-fit: cover;
   transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.why-hero-image:hover img {
   transform: scale(1.05);
}

/* Subtle dark gradient at bottom for caption readability */
.why-hero-image::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.75) 100%);
   pointer-events: none;
   z-index: 1;
}

/* LIVE tag (top-left) */
.why-hero-live-tag {
   position: absolute;
   top: 18px;
   left: 18px;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   background: rgba(0, 0, 0, 0.55);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   padding: 6px 12px;
   border-radius: 999px;
   border: 1px solid rgba(255, 255, 255, 0.15);
   z-index: 2;
}

.why-hero-live-tag span:not(.why-hero-live-dot) {
   font-size: 9px;
   color: #fff;
   font-weight: 600;
   letter-spacing: 1px;
}

.why-hero-live-dot {
   width: 6px;
   height: 6px;
   background: #ff5050;
   border-radius: 50%;
   box-shadow: 0 0 8px #ff5050;
   animation: liveRedPulse 2s ease-in-out infinite;
}

@keyframes liveRedPulse {

   0%,
   100% {
      opacity: 1;
      transform: scale(1);
   }

   50% {
      opacity: 0.5;
      transform: scale(1.4);
   }
}

/* Caption (bottom) */
.why-hero-caption {
   position: absolute;
   bottom: 20px;
   left: 20px;
   right: 20px;
   padding: 12px 16px;
   background: rgba(0, 0, 0, 0.5);
   backdrop-filter: blur(14px);
   -webkit-backdrop-filter: blur(14px);
   border-radius: 12px;
   border: 1px solid rgba(255, 255, 255, 0.1);
   z-index: 2;
}

.why-hero-caption-tag {
   font-size: 10px;
   color: #FAC775;
   font-weight: 700;
   letter-spacing: 1px;
   text-transform: uppercase;
   margin-bottom: 3px;
}

.why-hero-caption-title {
   font-size: 14px;
   color: #fff;
   font-weight: 600;
}

/* ============================================================
   RIGHT — CONTENT
   ============================================================ */
.why-hero-content {
   /* Container — relies on bee- utility classes for inner styles */
}

/* Override bee-section-header text-align to LEFT for asymmetric layout */
.why-hero-content .bee-eyebrow {
   margin-bottom: 22px;
}

.why-hero-title {
   text-align: left;
   margin: 0 0 18px;
   font-size: clamp(32px, 3.6vw, 48px);
   line-height: 1.05;
}

.why-hero-desc {
   text-align: left;
   margin: 0 0 32px;
   max-width: 480px;
}

/* ============================================================
   COMPACT 2x2 STATS GRID (different from full-width 4-col)
   ============================================================ */
.why-hero-stats {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 12px;
}

/* Compact stat cards — slightly smaller padding for the 2x2 layout */
.why-hero-stats .bee-stat-item {
   padding: 20px 14px;
}

.why-hero-stats .bee-stat-icon {
   width: 84px;
   height: 50px;
   margin-bottom: 12px;
}

.why-hero-stats .bee-stat-value {
   font-size: 18px;
}

.why-hero-stats .bee-stat-label {
   font-size: 14px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(min-width:1400px) {
   .why-hero-grid {
      max-width: 80%;
      margin-left: auto;
      margin-right: auto;
   }
}

@media (max-width: 1024px) {
   .why-hero-grid {
      gap: 40px;
   }
}

@media (max-width: 900px) {
   .why-hero-grid {
      grid-template-columns: 1fr;
      gap: 40px;
   }

   .why-hero-image {
      aspect-ratio: 16 / 11;
      max-height: 480px;
   }

   .why-hero-title {
      font-size: clamp(28px, 7vw, 40px);
   }
}

@media (max-width: 600px) {
   .why-hero-grid {
      gap: 32px;
   }

   .why-hero-image {
      aspect-ratio: 4 / 3;
   }

   .why-hero-stats {
      gap: 10px;
   }

   .why-hero-stats .bee-stat-item {
      padding: 16px 10px;
   }

   .why-hero-caption {
      bottom: 14px;
      left: 14px;
      right: 14px;
      padding: 10px 12px;
   }
}


/* ============================================================
   BEE — UTILITY CLASSES (with .bee-section-light support)
   Add the LIGHT MODE block to your existing bee-utilities.css
   ============================================================ */


/* ============================================================
   LIGHT SECTION MODE
   Add `.bee-section-light` to any section to flip text colors,
   eyebrow tones, and background to brighten the page.

   Usage:
   <section class="bee-section bee-section-light">...</section>
   ============================================================ */

.bee-section-light {
   background: #f3f6fa;
   color: #0f172a;
}

/* Optional: smooth top transition from dark section above */
.bee-section-light.has-fade-top {
   background:
      linear-gradient(180deg, #02101f 0%, transparent 8%, #f3f6fa 100%);
}

/* Light bg glow uses warm yellow instead of blue */
.bee-section-light .bee-bg-glow {
   background: radial-gradient(ellipse, rgba(250, 199, 117, 0.18) 0%, transparent 60%);
}

/* Section header — flip to dark text */
.bee-section-light .bee-section-title {
   color: #0f172a;
}

.bee-section-light .bee-section-desc {
   color: #475569;
}

/* Eyebrow — switch to deeper blue */
.bee-section-light .bee-eyebrow {
   background: rgba(24, 95, 165, 0.06);
   border-color: rgba(24, 95, 165, 0.18);
}

.bee-section-light .bee-eyebrow-text {
   color: #185FA5;
}

.bee-section-light .bee-eyebrow-dot {
   background: #1D9E75;
   box-shadow: 0 0 10px rgba(29, 158, 117, 0.5);
}

/* Gradient text variants stay the same on light bg — they still
   pop because they're using mid-saturation colors */

/* Stat cards on light bg */
.bee-section-light .bee-stat-item {
   background: #fff;
   border-color: rgba(15, 23, 42, 0.06);
   box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.bee-section-light .bee-stat-item:hover {
   border-color: rgba(15, 23, 42, 0.12);
   background: #fff;
   box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
}

.bee-section-light .bee-stat-value {
   color: #0f172a;
}

.bee-section-light .bee-stat-label {
   color: #64748b;
}


/* ============================================================
   COURSES (EXPERIENCE) SECTION — LIGHT MODE
   Replace your old experience-section CSS with this.
   Pairs with bee-utilities.css and bee-section-light mode.
   ============================================================ */

/* ============================================================
   HEADER LAYOUT (split: title left, sub right)
   ============================================================ */
.exp-header {
   display: flex !important;
   text-align: left !important;
   align-items: flex-end;
   justify-content: space-between;
   gap: 60px;
   margin-bottom: 60px;
   max-width: 100% !important;
   flex-wrap: wrap;
}

.exp-header-text {
   flex: 1;
   min-width: 320px;
}

.exp-header .bee-section-title {
   text-align: left;
   margin: 0;
}

.exp-header .exp-sub {
   color: #475569;
   max-width: 380px;
   font-size: 15px;
   line-height: 1.6;
   margin: 0;
   text-align: left;
}

/* ============================================================
   GRID
   ============================================================ */
.exp-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 16px;
   position: relative;
   z-index: 2;
}

/* ============================================================
   CARD — base
   ============================================================ */
.exp-card {
   --card-accent: #185FA5;
   --card-accent-2: #0a4d6e;

   position: relative;
   display: block;
   height: 480px;
   border-radius: 24px;
   overflow: hidden;
   cursor: pointer;
   text-decoration: none;
   color: inherit;
   isolation: isolate;
   border: 1px solid rgba(15, 23, 42, 0.06);
   background: #fff;
   transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
      box-shadow 0.7s cubic-bezier(0.16, 1, 0.3, 1),
      border-color 0.5s ease;
   will-change: transform;
   box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

/* Per-card accent colors (light-mode tuned) */
.exp-card[data-accent="blue"] {
   --card-accent: #185FA5;
   --card-accent-2: #0a4d6e;
}

.exp-card[data-accent="teal"] {
   --card-accent: #1D9E75;
   --card-accent-2: #0e6c4f;
}

.exp-card[data-accent="gold"] {
   --card-accent: #EF9F27;
   --card-accent-2: #b8761c;
}

.exp-card[data-accent="cyan"] {
   --card-accent: #0e7c9e;
   --card-accent-2: #075a73;
}

/* Featured card — gold glow */
.exp-card.featured {
   border-color: rgba(239, 159, 39, 0.35);
   box-shadow: 0 12px 30px rgba(239, 159, 39, 0.12),
      0 0 40px rgba(239, 159, 39, 0.08);
}

/* IMAGE LAYER */
.exp-card-image {
   position: absolute;
   inset: 0;
   z-index: 1;
   overflow: hidden;
}

.exp-card-image img {
   width: 100%;
   height: 100% !important;
   object-fit: cover;
   transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1),
      filter 0.7s ease;
   filter: brightness(0.9) saturate(1.05);
}

/* OVERLAY GRADIENT (kept dark for readability over photos) */
.exp-overlay {
   position: absolute;
   inset: 0;
   z-index: 2;
   background: linear-gradient(to top,
         rgba(3, 15, 25, 0.95) 0%,
         rgba(3, 15, 25, 0.6) 40%,
         rgba(3, 15, 25, 0.2) 70%,
         rgba(3, 15, 25, 0.4) 100%);
   transition: opacity 0.6s ease;
}

/* GRADIENT BORDER (on hover) */
.exp-card::before {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: 24px;
   padding: 1.5px;
   background: linear-gradient(135deg,
         var(--card-accent) 0%,
         transparent 40%,
         transparent 60%,
         var(--card-accent-2) 100%);
   -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
   -webkit-mask-composite: xor;
   mask-composite: exclude;
   z-index: 4;
   opacity: 0;
   transition: opacity 0.5s ease;
   pointer-events: none;
}

.exp-card:hover::before {
   opacity: 1;
}

/* TOP META ROW */
.exp-card-meta {
   position: absolute;
   top: 18px;
   left: 18px;
   right: 18px;
   z-index: 5;
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: 8px;
}

.exp-badge {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   background: rgba(15, 30, 50, 0.65);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border: 1px solid rgba(255, 255, 255, 0.12);
   padding: 5px 11px;
   border-radius: 999px;
}

.exp-badge-num {
   font-size: 11px;
   font-weight: 700;
   color: #fff;
}

.exp-badge-label {
   font-size: 10px;
   color: var(--color-primary);
   font-weight: 500;
   letter-spacing: 0.8px;
   text-transform: uppercase;
}

/* Featured card uses solid gold badge */
.exp-card.featured .exp-badge {
   background: linear-gradient(135deg, #FAC775, #EF9F27);
   border-color: transparent;
}

.exp-card.featured .exp-badge-num,
.exp-card.featured .exp-badge-label {
   color: #02101f;
   font-weight: 700;
}

.exp-icon {
   width: 38px;
   height: 38px;
   background: rgba(15, 30, 50, 0.65);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   color: var(--card-accent);
   transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.exp-icon svg {
   transition: transform 0.5s ease;
   color: inherit;
}

.exp-card:hover .exp-icon {
   background: var(--card-accent);
   border-color: var(--card-accent);
   color: #fff;
   transform: rotate(-8deg) scale(1.1);
}

/* CONTENT */
.exp-content {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   z-index: 5;
   padding: 22px;
   color: #fff;
}

.exp-title-main {
   font-size: 22px;
   font-weight: 600;
   margin: 0 0 6px;
   color: #fff;
   letter-spacing: -0.3px;
   line-height: 1.2;
}

.exp-desc {
   font-size: 15px;
   color: #cdd9e8;
   margin: 0 0 18px;
   line-height: 1.55;
   opacity: 0;
   max-height: 0;
   overflow: hidden;
   transform: translateY(8px);
   transition: opacity 0.5s ease 0.05s,
      max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.5s ease,
      margin 0.5s ease;
}

.exp-card:hover .exp-desc {
   opacity: 1;
   max-height: 80px;
   transform: translateY(0);
}

/* META FOOTER */
.exp-card-footer {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding-top: 16px;
   border-top: 1px solid rgba(255, 255, 255, 0.15);
   transition: border-color 0.5s ease;
}

.exp-card:hover .exp-card-footer {
   border-color: rgba(255, 255, 255, 0.25);
}

.exp-meta-info {
   display: flex;
   align-items: center;
   gap: 10px;
}

.exp-meta-info span {
   font-size: 14px;
   color: #b8d4ea;
}

.exp-meta-info .meta-dot {
   width: 3px;
   height: 3px;
   background: rgba(255, 255, 255, 0.4);
   border-radius: 50%;
}

.exp-meta-info .meta-tag {
   color: var(--card-accent);
   font-weight: 600;
}

.exp-cta-link {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   color: var(--color-primary);
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 0.5px;
   text-transform: uppercase;
   transition: gap 0.4s ease;
}

.exp-cta-link svg {
   transition: transform 0.4s ease;
}

.exp-card:hover .exp-cta-link {
   gap: 10px;
}

.exp-card:hover .exp-cta-link svg {
   transform: translateX(2px);
}

/* HOVER — image zoom + brightness + lift */
.exp-card:hover .exp-card-image img {
   transform: scale(1.1);
   filter: brightness(1) saturate(1.2);
}

.exp-card:hover {
   transform: translateY(-10px);
   box-shadow: 0 30px 60px rgba(15, 23, 42, 0.15),
      0 0 40px rgba(24, 95, 165, 0.08);
}

/* SHIMMER LINE on hover */
.exp-card::after {
   content: "";
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 1px;
   background: linear-gradient(90deg, transparent, var(--card-accent), transparent);
   z-index: 6;
   transition: left 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}

.exp-card:hover::after {
   left: 100%;
}

/* ============================================================
   CTA BUTTON (light mode tuned)
   ============================================================ */
.exp-cta {
   text-align: center;
   margin-top: 60px;
   position: relative;
}

.btn-primary-explore {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   background: linear-gradient(135deg, #FAC775 0%, #EF9F27 100%);
   color: #02101f;
   padding: 14px 32px;
   border-radius: 999px;
   font-size: 14px;
   font-weight: 700;
   text-decoration: none;
   box-shadow: 0 12px 30px rgba(239, 159, 39, 0.3);
   position: relative;
   overflow: hidden;
   transition: all 0.4s ease;
}

.btn-primary-explore::before {
   content: "";
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
   transition: left 0.7s ease;
}

.btn-primary-explore:hover {
   transform: translateY(-3px);
   box-shadow: 0 20px 40px rgba(239, 159, 39, 0.45);
}

.btn-primary-explore:hover::before {
   left: 100%;
}

.btn-primary-explore svg {
   transition: transform 0.3s ease;
}

.btn-primary-explore:hover svg {
   transform: translateX(4px);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
   .exp-grid {
      grid-template-columns: repeat(2, 1fr);
   }
}

@media (max-width: 768px) {
   .exp-header {
      gap: 24px;
      margin-bottom: 40px;
      flex-direction: column;
      align-items: flex-start;
   }

   .exp-header .exp-sub {
      max-width: 100%;
   }
}

@media (max-width: 600px) {
   .exp-grid {
      grid-template-columns: 1fr;
      gap: 16px;
   }

   .exp-card {
      height: 420px;
   }

   /* Show description by default on mobile (no hover available) */
   .exp-desc {
      opacity: 1;
      max-height: 80px;
      transform: translateY(0);
   }
}