/* Rework of https://antigravity.google/ using modern CSS */
/* See https://brm.us/antigravity for details */

* {
  box-sizing: border-box;
}
body {
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  background: linear-gradient(180deg, #446CB3 4.75%, #2E83A7 41.91%, #14866D 78.78%);

  /* background: linear-gradient(180deg, #446CB3 4.75%, #2E83A7 41.91%, #14866D 78.78%); */
  /* height: 300vh; */
}
a{
  text-decoration: none
}
:root {
  --ink-deep:    #0b1f33;  /* summit / top band (near-navy)        */
  --ocean-900:   #0e2a44;
  --ocean-700:   #144b66;
  --teal-600:    #176d80;
  --lagoon-500:  #1e8a8c;
  --sea-400:     #2aa183;  /* greenish mid bands                   */
  --moss-500:    #2e8b6e;
  --hero-teal:   #157f8d;  /* base-camp band                       */
  --accent:      #f99b1d;  /* orange CTA                            */
  --accent-deep: #e8821a;
  --cream:       #fdf6ea;
  --white:       #ffffff;
  --glass:       rgba(255, 255, 255, .10);
  --glass-brd:   rgba(255, 255, 255, .22);
  --card-radius: 18px;

  --font-display: "Poppins", "Hind", system-ui, sans-serif;
  --font-body:    "Poppins", "Hind", system-ui, sans-serif;
  --font-hi:      "Hind", "Poppins", system-ui, sans-serif;
}

/* ─── base ─────────────────────────────────────────────────────────── */
* { -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }

@layer reset, tokens, base, components, layout, moderncss, util;

@layer moderncss {
  @layer misc {
    /* To make the bouncy scroll effect work when the page is shown in an iframe and when the user is already at the edges and nudging the scroller */
    :root {
      overscroll-behavior-y: contain;
    }
  }

  @layer layout {
    /* Draw a particles ring in the background of the welcome screen */
    /* I am using Houdini PaintWorklets for this */
    @layer ring-particles {
      @supports (background: paint(something)) {
        @layer particles {
          #welcome {
            --ring-radius: 100;
            --ring-thickness: 600;
            --particle-count: 80;
            --particle-rows: 25;
            --particle-size: 2;
            --particle-color: #f5f5f5;

            --particle-min-alpha: 0.1;
            --particle-max-alpha: 1;

            --seed: 200;

            background-image: paint(ring-particles), url("BlobShape.svg");
          }
        }

        @layer animation {
          @property --animation-tick {
            syntax: "<number>";
            inherits: false;
            initial-value: 0;
          }
          @property --ring-radius {
            syntax: "<number> | auto";
            inherits: false;
            initial-value: auto;
          }
          @keyframes ripple {
            0% {
              --animation-tick: 0;
            }
            100% {
              --animation-tick: 1;
            }
          }
          @keyframes ring {
            0% {
              --ring-radius: 150;
            }
            100% {
              --ring-radius: 250;
            }
          }
          #welcome {
            animation:
              ripple 6s linear infinite,
              ring 6s ease-in-out infinite alternate;
          }
        }

        @layer follow-mouse {
          @property --ring-x {
            syntax: "<number>";
            inherits: false;
            initial-value: 50;
          }
          @property --ring-y {
            syntax: "<number>";
            inherits: false;
            initial-value: 50;
          }
          @property --ring-interactive {
            syntax: "<number>";
            inherits: false;
            initial-value: 0;
          }

          #welcome {
            /* @NOTE: Requires JS until the CSSWG resolves on https://github.com/w3c/csswg-drafts/issues/6733 */
            transition:
              --ring-x 3s ease,
              --ring-y 3s ease;

            /* @NOTE: This still feels uncanny, so I’m disabling it for now. It could be solved by having something like an animation-speed available. */
            /* transition-duration: if(
							style(--ring-interactive: 1): 0.25s;
							else: 3s;
						); */
          }
        }
      }
    }

    /* Draw some dynamic noise behind some of the screens */
    /* I am using Houdini PaintWorklets for this */
    @layer speckled-backgrounds {
      @supports (background: paint(something)) {
        #beforeyougo .card,
        #who > div {
          --extra-confettiNumber: 250;
          --extra-confettiLengthVariance: 1;
          --extra-confettiWeightVariance: 1;
          background-image: paint(extra-confetti);
        }
      }
    }

    @layer product {
      /* @TODO: Move `container-type: inline-size` for centered sticky using cqi to here, as that is modern CSS */
    }
  }

 

  @layer animations {
    @layer revealing-welcome-items {
      #welcome {
        svg,
        .cta {
          transition:
            translate 0.5s ease,
            opacity 0.5s ease;
          @starting-style {
            translate: 0 50% 0;
            opacity: 0;
          }
        }
      }
    }

    @layer scroll-triggered-typewriter-effect {
      @supports (timeline-trigger-name: --t) {
        /* @ref https://codepen.io/bramus/pen/JjwxLNM */
        @keyframes blink {
          from {
            opacity: 0;
          }
        }
        @keyframes text {
          from {
            background-size: 0;
          }
        }

        /* Typewriter effect */
        .typewriter {
          background: 
						/* highlight text */ linear-gradient(
              90deg,
              var(--typewriter-text-color, var(--theme-surface-on-surface)) 0 0
            )
            0 / calc(var(--n, 100) * 1ch) no-repeat /* faded text */ transparent;
          -webkit-background-clip: text;
          color: transparent;
          animation: text 2s ease-in both;

          &::after {
            content: "|";
            --hdr-gradient: linear-gradient(
              in oklch,
              oklch(80% 0.3 34),
              oklch(90% 0.3 200)
            );
            --sdr-gradient: linear-gradient(#ff4700, #0ff);

            background: var(--hdr-gradient);
            background-clip: text;
            color: transparent;

            /* The delay is manually calculated to make the animation only start after the typewriter itself has finished */
            animation: blink 0.2s 1.4s ease infinite alternate both;
          }
        }

        /* Typewriter Trigger in product section */
        #product *:has(> .typewriter) {
          timeline-trigger: --t view() cover 30% cover 1000%;
          trigger-scope: --t;

          .typewriter {
            animation-trigger: --t play-once;
            &::after {
              animation-trigger: --t play-once;
              animation-delay: 1.6s;
            }
          }
        }

        /* Typewriter Trigger in Carousel */
        .carousel > * {
          timeline-trigger: --t view(inline) entry 90% exit 50%;
          trigger-scope: --t;

          .typewriter {
            --typewriter-text-color: white;
            animation-trigger: --t play-forwards reset;
            animation-duration: 1.5s;

            &::after {
              animation-trigger: --t play-forwards reset;
              animation-delay: 0.9s;
            }
          }
        }

        /* Typewriter Trigger in Before You Go */
        #beforeyougo > .card {
          timeline-trigger: --t view() cover 30% cover 1000%;
          trigger-scope: --t;

          .typewriter {
            --typewriter-text-color: white;
            animation-trigger: --t play-once;
            animation-duration: 2s;

            &::after {
              animation-trigger: --t play-once;
              animation-delay: 1s;
            }
          }
        }
      }
    }

    @layer moving-icons {
      @layer slide-in {
        @keyframes slide-in {
          from {
            translate: 100% 0 0;
          }
        }
        #product .icons {
          timeline-trigger: --t view() cover 30% cover 1000%;
          trigger-scope: --t;
          animation: slide-in 1s ease both;
          animation-trigger: --t play-once;
        }
      }
      @layer wobble {
        @keyframes wobble {
          from {
            translate: 0 75%;
          }
          to {
            translate: 0 -75%;
          }
        }

        #product .icon {
          /* @NOTE: If we had support for random(), we could even randomize the animation distance per element */
          animation: wobble 4s ease infinite alternate;
          animation-delay: calc(mod(sibling-index(), 5) * -1s);
        }
      }
    }

    @layer product-features {
      /* Scroll-triggered fading of the text + images */
      @supports (timeline-trigger-name: --t) {
        @keyframes fade-a-bit {
          from {
            opacity: 0.3;
          }
          to {
            opacity: 1;
          }
        }

        @keyframes fake-clip-it {
          to {
            scale: 100% 0%;
          }
        }

        @keyframes fade-in {
          from {
            opacity: 0;
          }
        }

        @media (width >= 930px) {
          #features .feature {
            timeline-trigger: --t view() entry 100% cover 50%;
            trigger-scope: --t;

            h3 {
              animation: fade-a-bit 500ms ease both;
              animation-trigger: --t play-forwards play-backwards;
            }

            p {
              position: relative;

              &::after {
                content: "";
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                height: 100%;
                transform-origin: 0 100%;
                background: white;
                animation: fake-clip-it 500ms ease both;
                animation-trigger: --t play-forwards play-backwards;
              }
            }

            /* Exclude the first one, because that one is always visible */
            img:not(.feature:first-child img) {
              animation: fade-in 500ms ease both;
              animation-trigger: --t play-forwards play-backwards; /* TODO: Don’t fade out the underlying ones */
            }
          }
        }
      }

      /* @TODO: Scroll-Driven unclipping of the image-wrapper (on the first image) */
    }

    @layer scroll-driven-animations {
      /* @note: We also check for range support. See https://brm.us/sda-feature-detection for details */
      @supports (
        (animation-timeline: scroll()) and (animation-range: 0% 100%)
      ) {
        @keyframes scale-up {
          from {
            scale: 0.85;
          }
        }
        #beforeyougo .card {
          animation: scale-up linear both;
          animation-timeline: view();
          animation-range: entry 50% entry 100%;
        }
      }
    }
  }
}
@layer product {
		#product {
			
			display: grid;
			grid-template-columns: subgrid;

			> *:not(.icons) {
				grid-column: main;
			}
			
			.icons {
				grid-column: fullbleed;
			}
			
			.icons {
				height: max(24em, 40vb);
				
				display: flex;
				flex-direction: row;
				gap: 0.5rem;
				align-items: center;
				
				overflow-x: clip;
				
				.icon {
					flex: 0 0 clamp(4rem, 10vw, 6rem);
					aspect-ratio: 1;
					border-radius: 50%;
					
					background: #f5f5f5;
			    border: 1px solid var(--theme-outline-variant);
			    backdrop-filter: blur(5px);
					
					display: grid;
					place-content: center;
					
					span {
						font-size: 2em !important;
					}
				}
			}
		}
		
		#features {

			.feature {
				padding-bottom: 2rem; /* @note: if only we had `gap: x y;` */
				
				h3 {
					font-weight: 350;
					font-size: 1.25em;
					line-height: 1.1;
					margin-block-end: 1rem;
				}
				
				img {
					border-radius: 2em;
				}
				
				p {
					font-weight: 300;
					line-height: 1.2;
					color: var(--theme-surface-on-surface-variant);
				}
			}
			
			
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-auto-rows: auto;
			gap: 2rem;
			
		
			@media (width >= 930px) {
				position: relative;
				
				.img-wrapper {
					position: absolute;
					right: 0;
					top: 0;
					bottom: 0;
					width: 50%;
					container-type: inline-size;
				}
				
				img {
					position: sticky;
					width: 100cqi;
					height: auto;
					top: calc((100svb - 100cqi) / 2);
				}
				
				.feature {
					padding-block: 15vb;
					grid-column: 1;
					
					display: grid;
					place-content: center;
					
					p {
						width: 60%;
						max-width: 60ch;
						text-wrap: pretty;
					}
				}
			}
		}
	}
* Random border colors */
#product .icon:nth-child(1) {
  /* border: 4px solid #79C3D2; */
  /* box-shadow: 6px 6px 0 #4B50F7; */
}

#product .icon:nth-child(2) {
  border: 4px solid #B8D6DA;
  /* box-shadow: 6px 6px 0 #4B50F7; */
}

#product .icon:nth-child(3) {
  border: 4px solid #D88AE8;

}

#product .icon:nth-child(4) {
  border: 4px solid #8FA6D8;

}

#product .icon:nth-child(5) {
  border: 4px solid #B5A4F0;

}

#product .icon:nth-child(6) {
  border: 4px solid #7BC7A6;

}

#product .icon:nth-child(7) {
  border: 4px solid #F2C14E;

}

#product .icon:nth-child(8) {
  border: 4px solid #A0D8E8;
}

#product .icon:nth-child(9) {
  border: 4px solid #C4A7F2;
}

#product .icon:nth-child(10) {
  border: 4px solid #A0D8E8;
}

#product .icon:nth-child(11) {
  border: 4px solid #C4A7F2;
}

@layer tokens {
  @layer colors {
    :root {
      --palette-grey-900: #2f3034;
      --palette-grey-800: #45474d;
      --palette-grey-50: #e6eaf0;
      --palette-grey-0: #ffffff;
      --palette-grey-1000: #212226;
      --palette-grey-20: #eff2f7;
      --palette-grey-1200: #f5f5f5;
      --palette-grey-1100: #18191d;
      --palette-grey-10: #f8f9fc;
      --palette-grey-100: #e1e6ec;
      --palette-grey-200: #cdd4dc;
      --palette-grey-300: #b2bbc5;
      --palette-grey-400: #b7bfd9;
      --palette-grey-600: #aab1cc4d;
      --palette-grey-1000-12: #dedfe2;
      --palette-grey-50-20: #414347;
      --palette-grey-15: #f0f1f5;
      --palette-grey-0-rgb: 255, 255, 255;
      --palette-grey-50-rgb: 230, 234, 240;
      --palette-grey-400-rgb: 183, 191, 217;
      --palette-grey-600-rgb: 170, 177, 204;
      --palette-grey-1000-rgb: 33, 34, 38;
      --palette-grey-1200-rgb: 18, 19, 23;
      --theme-surface-surface: var(--palette-grey-0);
      --theme-surface-on-surface: var(--palette-grey-1200);
      --theme-surface-on-surface-variant: var(--palette-grey-800);
      --theme-surface-surface-container: var(--palette-grey-10);
      --theme-surface-surface-container-high: var(--palette-grey-20);
      --theme-surface-surface-container-higher: var(--palette-grey-50);
      --theme-surface-surface-container-highest: var(--palette-grey-100);
      --theme-surface-inverse-surface: var(--palette-grey-1200);
      --theme-surface-inverse-on-surface: var(--palette-grey-10);
      --theme-surface-inverse-on-surface-variant: var(--palette-grey-300);
      --theme-surface-overlay: rgba(var(--palette-grey-0-rgb), 0.95);
      --theme-surface-overlay-low: rgba(var(--palette-grey-0-rgb), 0.12);
      --theme-surface-overlay-high: rgba(var(--palette-grey-0-rgb), 0.24);
      --theme-surface-overlay-higher: rgba(var(--palette-grey-0-rgb), 0.72);
      --theme-surface-overlay-highest: rgba(var(--palette-grey-0-rgb), 0.95);
      --theme-surface-transparent: rgba(var(--palette-grey-0-rgb), 0);
      --theme-inverse-surface-overlay: rgba(var(--palette-grey-1200-rgb), 0.01);
      --theme-inverse-surface-overlay-high: rgba(
        var(--palette-grey-1200-rgb),
        0.24
      );
      --theme-inverse-surface-overlay-higher: rgba(
        var(--palette-grey-1200-rgb),
        0.72
      );
      --theme-inverse-surface-overlay-highest: rgba(
        var(--palette-grey-1200-rgb),
        0.95
      );
      --theme-inverse-surface: var(--palette-grey-1200);
      --theme-outline: rgba(var(--palette-grey-1000-rgb), 0.12);
      --theme-outline-variant: rgba(var(--palette-grey-1000-rgb), 0.06);
      --theme-inverse-outline: rgba(var(--palette-grey-50-rgb), 0.12);
      --theme-inverse-outline-variant: rgba(var(--palette-grey-50-rgb), 0.06);
      --theme-outline-inverse-outline-variant: rgba(230, 234, 240, 0.06);
      --theme-outline-outline-variant: rgba(33, 34, 38, 0.06);
      --theme-primary-primary: var(--theme-surface-on-surface);
      --theme-primary-on-primary: var(--theme-surface-surface);
      --theme-tonal-tonal: var(--theme-surface-surface-container);
      --theme-tonal-on-tonal: var(--theme-surface-on-surface);
      --theme-outlined-outlined: var(--theme-surface-surface-transparent);
      --theme-outlined-on-outlined: var(--theme-surface-on-surface);
      --theme-protected-protected: var(--theme-surface-surface-container);
      --theme-protected-on-protected: var(--theme-surface-on-surface);
      --theme-text-text: var(--theme-surface-surface-transparent);
      --theme-text-on-text: var(--theme-surface-on-surface);
      --theme-text-link-states-enabled: var(--theme-surface-on-surface-variant);
      --theme-text-link-states-hovered: var(--palette-grey-1000);
      --theme-text-link-states-focused: var(--palette-grey-1100);
      --theme-text-link-states-pressed: var(--palette-grey-1000);
      --theme-text-link-states-disabled: #6a6a71;
      --theme-button-states-primary-enabled: var(--theme-primary-primary);
      --theme-button-states-primary-disabled: var(--palette-grey-10);
      --theme-button-states-primary-hovered: var(--palette-grey-900);
      --theme-button-states-primary-pressed: rgba(
        var(--palette-grey-50-rgb),
        0.12
      );
      --theme-button-states-primary-focused: rgba(
        var(--palette-grey-50-rgb),
        0.2
      );
      --theme-button-states-primary-on-disabled: rgba(
        var(--palette-grey-1000-rgb),
        0.2
      );
      --theme-secondary-button: rgba(var(--palette-grey-400-rgb), 0.1);
      --theme-button-secondary-hover: var(--palette-grey-15);
      --theme-button-secondary-inverse-hover: rgba(
        var(--palette-grey-600-rgb),
        0.3
      );
      --theme-button-states-tonal-enabled: var(--theme-tonal-tonal);
      --theme-button-states-tonal-disabled: var(--palette-grey-10);
      --theme-button-states-protected-enabled: var(--theme-protected-protected);
      --theme-button-states-protected-hovered: var(--palette-grey-20);
      --theme-button-states-protected-disabled: var(--palette-grey-100);
      --theme-button-states-outlined-enabled: var(--theme-outlined-outlined);
      --theme-button-states-disabled: var(--palette-grey-100);
      --theme-button-states-on-disabled: #6a6a71;
      --theme-button-states-hovered: rgba(var(--palette-grey-1000-rgb), 0.04);
      --theme-button-states-pressed: rgba(var(--palette-grey-1000-rgb), 0.06);
      --theme-button-states-focused: rgba(var(--palette-grey-1000-rgb), 0.12);
      --theme-button-states-disabled-transparent: rgba(
        var(--palette-grey-50-rgb),
        0
      );
      --theme-nav-button: rgba(var(--palette-grey-400-rgb), 0.09);
      --theme-nav-button-hover: rgba(var(--palette-grey-400-rgb), 0.2);
      --divider: var(--theme-outline-outline-variant);
    }
  }

  @layer animations {
    :root {
      --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
      --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
      --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
      --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
      --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
      --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
      --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
      --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
      --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
      --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
      --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
      --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
      --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
      --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
      --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
      --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
      --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
      --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
      --ease-out-back: cubic-bezier(0.34, 1.85, 0.64, 1);
    }
  }
}

.section {
  min-height: 100vh;
}
.background {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100vw;
  height: 100vh;
  /* background:#f5f5f5; */
  /* background-image: url(BlobShape.svg); */
  background-repeat: no-repeat;
  background-size: cover;
}

.section2 {
  /* background-image: url(2NDSection.svg); */
  background-repeat: no-repeat;
  background-size: cover;
}

/* Common */
.section {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}


/* Section 2 */
#welcome2 {
  z-index: 1;
  /* background: url("2NDSection.svg") center center / cover no-repeat; */
  /* background-attachment: fixed; */
}

#welcome {
  z-index: 2;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: paint(ring-particles);
}

.hero-section {
  height: 100vh; /* important */
  width: 100%;
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, #218b87, #154d78);
}

.speckled-overlay {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center; /* vertical center */
  align-items: center; /* horizontal center */
  position: relative;
  text-align: center;
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}




.scroll-text {
  position: absolute;
  bottom: 60px;
  color: white;
  cursor: pointer;
  font-size: 22px;
  letter-spacing: 1px;
}

.overflow {
  margin: 0 -400px;
  min-height: 0;
  background: url(3RDSection.svg) center center / cover no-repeat;
  position: relative;
}

.hero-section {
  height: 100vh;
  width: 100%;
  position: relative;
  overflow: hidden;

  background: linear-gradient(120deg, #218b87, #154d78);
}

.speckled-overlay {
  height: 100%;
  width: 100%;
  position: relative;
}


.top-nav {
  position: fixed;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}


.logo img {
  width: 170px;
}

.nav-card {
  position: relative;
  width: 330px;
  padding: 18px 15px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(12px);
}

.avatars {
  position: absolute;
  right: -5px;
  top: -20px;
  display: flex;
}

.avatars span {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #2671c9;
  color: white;
  font-size: 13px;
  border: 2px solid #154d78;
}

.avatars span:last-child {
  background: #4d9f69;
  margin-left: -8px;
}

.nav-items {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

/* language */

.language {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 5px;
}

.language button {
  background: none;
  border: none;
  color: #d9e8ef;
  padding: 6px 10px;
}

.language .active {
  background: #ffffff20;
  border-radius: 8px;
}

.nav-icons {
  display: flex;
  gap: 12px;
  color: white;
  font-size: 18px;
}

.login-btn {
  background: #ff9200;
  border: none;
  color: white;
  padding: 12px 28px;
  border-radius: 30px;
  font-size: 15px;
  box-shadow: 0 5px 15px #ff920050;
}

.hero-icon {
  border-radius: 50%;
  box-shadow: 0px 8px 12px 0px #0000000f;
  background: #FFFFFF1A;

}
.hero-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  /* width: min(100%, 976px); */
  /* min-height: clamp(90px, 18vw, 250px); */
  padding:13px 27px;
  border-radius: 999px;
  border: 1px solid rgba(255, 190, 80, 0.8);
  background: linear-gradient(90deg, #ff7900 0%, #ff9500 100%);
  color: #fff;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -2px;
  cursor: pointer;
  box-shadow:
    0 20px 40px rgba(255, 121, 0, 0.25),
    inset 0 1px 2px rgba(255, 255, 255, 0.35);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.hero-content h1 {
  color: white;
  font-weight: 500;
  line-height: 96px;
  margin: 0;
  font-size: clamp(35px, 5vw, 65px);
}

.hero-btn span{
  line-height: 33.04px;
letter-spacing: -0.47px;
}

/* .hero-btn:hover {
  transform: translateY(-5px) scale(1.02);

  box-shadow:
    0 25px 55px rgba(255, 121, 0, 0.45),
    inset 0 1px 3px rgba(255, 255, 255, 0.5);
} */

.login-icon {
  flex-shrink: 0;
  width: clamp(70px, 12vw, 170px);
  height: clamp(70px, 12vw, 170px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(10px);
  transition:
    transform 0.3s ease,
    background 0.3s ease;
}

.hero-icon i {
  font-size: 22px;
  color: white;
  line-height: 1;
}

.hero-btn:hover .hero-icon {
  transform: translateX(8px);
  background: rgba(255, 255, 255, 0.25);
}
.scroll-text {
  position: absolute;
  bottom: 60px;
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: start;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  font-size: 20px;
}
.scroll-text p{
font-weight: 500;
/* font-family: Roboto; */
font-weight: 500;
font-style: Medium;
font-size: 32px;
line-height: 55.77px;
letter-spacing: 0%;
text-align: center;
color:#F5F5F5;
text-transform: uppercase;
}

.scroll-text i {
  font-size: 2rem;
    animation: up 1s ease-in-out infinite;
}

@keyframes up {
  100% {
    transform: translateY(-20px);
  }
}

.section1 {
  position: relative; /* Establish positioning context */
  z-index: 1;
}
/* .section1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 150%;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: -1;
  pointer-events: none; 
} */
.section2 {
  position: relative;
  z-index: 0; 
}
.parent {
  overflow: auto;
}

.video-heading{
/* font-family: Poppins; */
font-weight: 500;
font-style: Medium;
color: #f5f5f5;
font-size: 52px;
line-height: line height/52_8;
letter-spacing: letter spacing/-1_92;
vertical-align: middle
}


.video-section {
    min-height: 100vh;
    display:flex;
    align-items:flex-start;   
    justify-content:center;
    padding: clamp(40px, 4vw, 120px) 20px;
    overflow:hidden;
}

.video-section > .video-player {
    width:100%;
    max-width:1200px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap: 52px;
}

.video-heading {
    color:#f5f5f5;
    font-weight:500;
    font-size:52px;
    line-height:1.15;
    letter-spacing:-1.9px;
    text-align:center;
    max-width:900px;
}

.video-wrapper {
  border: 0.98px solid #FFFFFF;
    width:min(90vw,900px);
    width: min(90vw, 1200px);
    aspect-ratio: 1252 / 592;
    margin: auto;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .25);
    background: #000;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
.video-wrapper{
  /* max-width: 600px;
  margin: auto; */
}

/* actual video */
.video-content {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
/* bottom text */
.video-section .scroll-text {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    color:white;
    font-size:clamp(14px,1.5vw,20px);
}

.video-section .scroll-text p {
    margin:0;
}
.feature-section {

    padding: 20px 52px
}

.feature-grid{
  width: 100%;
}

.feature-container {

    width:100%;
    /* max-width:1280px; */
    margin-inline:auto;
    display:flex;
    flex-direction:column;
    align-items:stretch;

    gap:clamp(32px,4vw,60px);
}

.feature-heading {

    display:flex;
    align-items:center;
    justify-content:center;
    gap:clamp(12px,2vw,24px);
    flex-wrap:wrap;
    text-align:center;
    color:#fff;
    font-weight:500;
    font-size:clamp(32px,5vw,72px);
    line-height:1.1;
}

.feature-heading video {
    width:clamp(40px,5vw,80px);
    height:auto;
}
.feature-card {
    position:relative;
    overflow:hidden;
    border-radius:24px;
    border:2px solid rgba(255,255,255,.5);
    /* aspect-ratio:502.5 / 291.7; */
    cursor:pointer;
}

.feature-card-large {
    /* aspect-ratio:644 / 274; */
}

.feature-card video {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .5s ease;
}

.feature-card:hover video {

    transform:scale(1.05);
}
.feature-overlay {

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    padding:24px;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.75),
            rgba(0,0,0,.1)
        );
}

.feature-overlay h3 {

    margin:0 0 6px;

    color:#fff;

    font-size:clamp(20px,2vw,36px);

    font-weight:500;
}

.feature-overlay p {

    margin:0;

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

    font-size:clamp(12px,1vw,18px);
}
@media (max-width: 992px) {

    .feature-grid {

        grid-template-columns:1fr;
    }

    .feature-card,
    .feature-card-large {

        aspect-ratio:16/9;
    }
}

.row.feature-row {
    align-items: stretch;
}

.feature-card {
    height: 100%;
    aspect-ratio: unset;
    min-height: 300px;
}


/* ─── shared section chrome ────────────────────────────────────────── */
.section { position: relative; padding: clamp(56px, 8vw, 110px) 0; }

.section-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 3.4vw, 3.8rem);
  text-align: center;
  color: var(--white);
  margin-bottom: clamp(28px, 4vw, 52px);
  letter-spacing: .2px;
  /* text-shadow: 0 2px 14px rgba(0,0,0,.25); */
}
.title-emoji { font-size: .95em; margin: 0 .15em; }

.title-emoji .computer-gif{
  width: 60px;
  height: 60px;
  font-size: 92px;
}
.title-emoji .glitter-img{
  width: 60px;
  height: 60px;
}
.title-emoji .title-emoji-media{
  width: 60px;
  height: 60px;
}

.title-emoji img,
.title-emoji video {
  vertical-align: middle;
  display: inline-block;
}
/* "↑ MOTTO ↑" labels that punctuate every band */
.climb-label {
  margin: clamp(36px, 5vw, 64px) auto 0;
  text-align: center;
  font-weight: 700;
  font-size: clamp(.8rem, 1.4vw, .95rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
  /* font-family: Roboto; */
font-weight: 500;
font-style: Medium;
font-size: 32px;
line-height: 55.77px;
letter-spacing: 0%;
text-align: center;
text-transform: uppercase;

}
.climb-label span { margin: 0 .45em; font-size: 1.1em; }
.climb-label span > i {
  /* font-size: 2rem; */
    animation: up 1s ease-in-out infinite;
}
/* ─── ascent meter (fixed) ─────────────────────────────────────────── */
.ascent-meter {
  position: fixed;
  right: 14px;
  top: 50%;
  translate: 0 -50%;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.ascent-meter__track {
  width: 4px;
  height: 130px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  overflow: hidden;
  display: flex;
  align-items: flex-end; /* fill rises from the bottom — climbing metaphor */
}
.ascent-meter__fill {
  width: 100%;
  height: 0%;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent), #ffd083);
  transition: height .15s linear;
}
.ascent-meter__label {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: rgba(255,255,255,.75);
}
@media (max-width: 767.98px) { .ascent-meter { display: none; } }

/* ─── 01 · summit bar ──────────────────────────────────────────────── */
.summit-bar {
  background: rgba(8, 22, 38, .65);
  backdrop-filter: blur(6px);
  padding: 18px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.summit-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand__img { height: 46px; width: auto; display: block; }
.brand--sm .brand__img { height: 40px; }
.summit-bar__title { font-size: .8rem; font-weight: 600; color: rgba(255,255,255,.85); }
.summit-bar__copy  { font-size: .68rem; color: rgba(255,255,255,.55); }
.summit-bar__social { display: flex; gap: 8px; }
.social-chip {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 8px;
  color: var(--white);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  transition: background .2s ease, transform .2s ease;
}
.social-chip:hover { background: var(--accent); color: var(--ink-deep); transform: translateY(-2px); }

/* ─── 02 · testimonials ────────────────────────────────────────────── */
.t-card {
  position: relative;
  border-radius: var(--card-radius);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  /* The export shows a faint warm gradient ring around each video card */
  padding: 3px;
  background: linear-gradient(160deg, rgba(249,155,29,.55), rgba(255,255,255,.12) 45%, rgba(30,138,140,.5));
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
.t-card__img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: calc(var(--card-radius) - 3px);
  display: block;
}
.play-btn {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.85);
  background: rgba(10, 30, 45, .35);
  backdrop-filter: blur(3px);
  color: var(--white);
  display: grid; place-items: center;
  transition: transform .2s ease, background .2s ease;
}
.play-btn:hover { transform: scale(1.08); background: rgba(249,155,29,.85); }
.play-btn svg { margin-left: 4px; }
.t-card__tag {
  position: absolute;
  left: 50%; bottom: 14px;
  translate: -50% 0;
  background: var(--accent);
  color: #2b1a02;
  font-size: .72rem;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
}

.journey-pill {
  margin: clamp(36px, 5vw, 56px) auto 0;
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 18px;
  font-weight: 700;
}
.journey-pill__text {
  background: var(--accent);
  color: #2b1a02;
  padding: 10px 26px;
  border-radius: 999px;
  font-size: clamp(.85rem, 1.6vw, 1rem);
  box-shadow: 0 10px 26px rgba(249,155,29,.35);
}
.journey-pill__arrow { color: var(--white); font-size: 1.2rem; }

/* ─── 03 · quizzes ─────────────────────────────────────────────────── */
.quiz-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  max-width: 980px;
  margin-inline: auto;
}
.quiz-card {
  position: relative;
  display: block;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border: 2.5px solid rgba(124, 203, 247, .55); /* icy blue frame from export */
  box-shadow: 0 14px 30px rgba(0,0,0,.3);
  text-decoration: none;
  transition: transform .25s ease, border-color .25s ease;
}
.quiz-card:hover,
.quiz-card:focus-visible { transform: translateY(-6px); border-color: var(--accent); }
.quiz-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.quiz-card__label {
  position: absolute;
  left: 10px; bottom: 10px;
  color: var(--white);
  font-size: .78rem;
  font-weight: 600;
  text-shadow: 0 2px 8px rgba(0,0,0,.8);
  background: linear-gradient(90deg, rgba(0,0,0,.45), transparent);
  padding: 3px 10px 3px 6px;
  border-radius: 6px;
}

.quiz-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  max-width: 1000px;
  margin-inline: auto;
}

.quiz-card {
  display: flex;
  flex-direction: column;

  border-radius: 20px;
  overflow: hidden;

  border: 1.5px solid rgba(255,255,255,.75);

  text-decoration: none;

  transition: transform .3s ease;
}

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

.quiz-card__image {
  padding: 10px 10px 0;
}

.quiz-card__image img {
  width: 100%;
  aspect-ratio: 1 / 1;

  display: block;
  object-fit: cover;

  border-radius: 16px;
}

.quiz-card__caption {
  padding: 14px 16px;

  color: #fff;

  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.2;
}

.quiz-card:nth-child(1) {
  background: linear-gradient(135deg,#0D9A67,#0A8F74);
}

.quiz-card:nth-child(2) {
  background: linear-gradient(135deg,#5D8EEB,#3F76D9);
}

.quiz-card:nth-child(3) {
  background: linear-gradient(135deg,#3E9BE8,#2A87D8);
}

.quiz-card:nth-child(4) {
  background: linear-gradient(135deg,#8A65D9,#6B4CC5);
}

.quiz-card:nth-child(5) {
  background: linear-gradient(135deg,#4E89D6,#2E6FC7);
}

.quiz-card:nth-child(6) {
  background: linear-gradient(135deg,#A6A06B,#8F8A56);
}

.quiz-card:nth-child(7) {
  background: linear-gradient(135deg,#8CB15E,#6E9644);
}

.quiz-card:nth-child(8) {
  background: linear-gradient(135deg,#B57D42,#9A6530);
}




/* ─── 04 · vision ──────────────────────────────────────────────────── */
.vision-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--white);
}
.vision-panel__title { 
margin: 0; 
font-weight: 400;
font-style: Regular;
font-size: 28px;
line-height: 30px;
letter-spacing: 0px;
}
.vision-panel__sub   { 
  font-size: .78rem; 
  color: rgba(255,255,255,.7); 
  margin-bottom: 6px; 
font-weight: 400;
font-style: Regular;
font-size: 14px;
line-height: 22.35px;
letter-spacing: 0px;

}

.vision-tab {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  width: 100%;
  padding: 13px 16px;
  border-radius: 12px;
  border: 1px solid var(--glass-brd);
  /* background: var(--glass); */
  background: #FFFFFFF2;
  color:#1D1D1D;
  backdrop-filter: blur(4px);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;

}
/* .vision-tab:hover { transform: translateX(4px); } */
.vision-tab.is-active {
  border: 1.6px solid #F5F5F5;
  color: var(--white);
  box-shadow: 0px 19.96px 39.92px -9.58px #00000040;
background: linear-gradient(90deg, #1F3A6F 2.04%, #2FAF90 100%);
}

.vision-tab__icon {
  width: 34px; height: 34px;
  flex: 0 0 34px;
  display: grid; 
  place-items: center;
  border-radius: 12px;
  color: #000;
  background: #f5f5f5;
}


.vision-tab__text { 
  display: flex; 
  flex-direction: column; 
  line-height: 1.25; 
  flex: 1; 
}

.vision-tab__text strong { 
font-weight: 500;
font-style: Medium;
font-size: 15px;
line-height: 22px;
letter-spacing: 0px;
}

.vision-tab__text small  { 
font-weight: 400;
font-style: Regular;
font-size: 12px;
line-height: 19px;
letter-spacing: 0px;

}

.vision-tab__chev { 
  opacity: .7; 
  font-size: 1.1rem; 
}

/* .vision-showcase {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--glass-brd);
  min-height: 360px;
  height: 100%;
} */
.vision-showcase {
  position: relative;
  min-height: 520px;
  border-radius: 24px;
  overflow: hidden;

  background: rgba(255,255,255,.08);
  backdrop-filter: blur(10px);

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

  display: flex;
  justify-content: center;
  align-items: center;

  padding: 32px;
}

/* .vision-showcase__img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  inset: 0;
} */
.vision-showcase__img {
  width: auto;
  max-width: 420px;
  max-height: 260px;

  object-fit: contain;

  position: absolute;
  top: 30px;
  left: 50%;

  transform: translateX(-50%);
}
/* .vision-card {
  position: absolute;
  left: clamp(14px, 4%, 36px);
  bottom: clamp(14px, 5%, 34px);
  max-width: 380px;
  background: rgba(10, 42, 40, .88);
  border: 1px solid rgba(146, 235, 192, .35);
  border-radius: 14px;
  padding: 16px 18px;
  backdrop-filter: blur(6px);
  box-shadow: 0 20px 50px rgba(0,0,0,.45);
} */

.vision-card {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  width: min(88%, 620px);
  /* background: linear-gradient(
    90deg,
    rgba(13, 27, 56, 0.95),
    rgba(14, 30, 63, 0.92)
  ); */
  background: linear-gradient(135deg, rgba(15, 23, 43, 0.9) 0%, rgba(29, 41, 61, 0.9) 100%);

  border-radius: 16px;
  padding: 22px 24px;
  box-shadow:
    0 20px 40px rgba(0,0,0,.25),
    0 0 40px rgba(0,255,255,.08);
  border: none;

  backdrop-filter: blur(10px);
}


.vision-card__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.vision-card__title { 
color: #00D5BE; 
 margin: 0; 
font-weight: 400;
font-size: 22px;
line-height: 25px;
letter-spacing: 0.48px;
}
.vision-card__dots  { letter-spacing: 2px; color: rgba(255,255,255,.6); }
.vision-card__body  {
  font-size: .8rem; 
  line-height: 1.55; 
  color: rgba(255,255,255,.88); 
  margin: 0;
font-weight: 400;
font-size: 19px;
line-height: 23px;
letter-spacing: 0px;

 }

/* ─── 05 · interactive experience ──────────────────────────────────── */
.x-card {
  position: relative;
  border-radius: var(--card-radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: 0 18px 44px rgba(0,0,0,.35);
}
.x-card__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.x-card:hover .x-card__img { transform: scale(1.05); }
.x-card__overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 38px 18px 16px;
  background: linear-gradient(180deg, transparent, rgba(6, 26, 32, .92));
  color: var(--white);
}
.x-card__title { 
font-size: 1rem; 
font-weight: 700; 
margin: 0 0 4px; 
font-weight: 500;
font-style: Medium;
font-size: 16px;
line-height: line height/24;
letter-spacing: letter spacing/-0_32;
vertical-align: middle;

}
.x-card__desc  { 
margin: 0; 
line-height: 1.45;
font-weight: 400;
font-style: Regular;
font-size: 12px;
line-height: 18px;
letter-spacing: 0%;
vertical-align: middle;
text-transform: capitalize;
 }

.bubble-field {
  position: relative;
  /* height: 120px; */
  margin-top: 30px;
  pointer-events: none;
}
.bubble {
  position: absolute;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  font-size: 1rem;
  color: var(--white);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.3);
  backdrop-filter: blur(3px);
  animation: bubbleFloat 6s ease-in-out infinite;
}
.bubble.b-1  { left: 4%;  top: 30%; animation-delay: -1s; }
.bubble.b-2  { left: 11%; top: 0;   width: 52px; height: 52px; animation-delay: -2.5s; border-color: rgba(249,155,29,.6); }
.bubble.b-3  { left: 22%; top: 45%; animation-delay: -.5s; }
.bubble.b-4  { left: 38%; top: 8%;  animation-delay: -3s; }
.bubble.b-5  { left: 47%; top: 50%; animation-delay: -1.8s; }
.bubble.b-6  { left: 33%; top: 60%; width: 56px; height: 56px; animation-delay: -4s; }
.bubble.b-7  { left: 56%; top: 25%; animation-delay: -2s; border-color: rgba(255,128,191,.55); }
.bubble.b-8  { left: 70%; top: 55%; animation-delay: -3.4s; }
.bubble.b-9  { left: 78%; top: 10%; animation-delay: -1.2s; }
.bubble.b-10 { left: 86%; top: 40%; width: 52px; height: 52px; animation-delay: -2.8s; border-color: rgba(249,155,29,.6); }
.bubble.b-11 { left: 94%; top: 5%;  animation-delay: -.8s; }
.bubble.b-12 { left: 1%;  top: 70%; animation-delay: -3.8s; }
.bubble.b-13 { left: 15%; top: 75%; animation-delay: -1.6s; }

@keyframes bubbleFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* ─── 06 · support bento ───────────────────────────────────────────── */
.s-card {
  position: relative;
  border-radius: var(--card-radius);
  overflow: hidden;
  height: 100%;
  min-height: 280px;
  border: 2px solid #f5f5f5;
  /* border: 1px solid rgba(255,255,255,.18); */
  box-shadow: 0 18px 44px rgba(0,0,0,.35);
}
.s-card__img { width: 100%; height: 100%; object-fit: cover; display: block; position: absolute; inset: 0; }
.s-card__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 44px 18px 16px;
  /* background: linear-gradient(180deg, transparent, rgba(6, 22, 30, .94));
  box-shadow: 0px 5.89px 8.84px 0px #0000000F;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255, 255, 255, 0.2); */
}
.s-card__container{
  
  /* background: linear-gradient(180deg, transparent, rgba(6, 22, 30, .94)); */
  box-shadow: 0px 5.89px 8.84px 0px #0000000F;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
      /* background: linear-gradient(180deg, transparent, rgba(6, 22, 30, .94)); */
    box-shadow: 0px 5.89px 8.84px 0px #0000000F;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(2px);
    padding:0.5rem 1rem;
    border-radius: 12px;
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid rgba(255, 255, 255, 0.2)
}
.s-card__caption h3 { 
color:var(--white);
margin: 0 0 6px;;
font-weight: 500;
font-style: Medium;
font-size: 24px;
line-height: 25.93px;
letter-spacing: -0.94px;
vertical-align: middle;

 }
.s-card__caption p  { 
 color: var(--white); 
margin: 0; 
font-weight: 400;
font-style: Regular;
font-size: 12px;
line-height: 17.24px;
letter-spacing: -0.37px;
vertical-align: middle;

}

/* ─── 07 · feature player ──────────────────────────────────────────── */
.feature-player {
  position: relative;
  max-width: 1200px;
  margin-inline: auto;
  border-radius: 20px;
  overflow: hidden;
  background: #061a26;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 30px 70px rgba(0,0,0,.5);
}
.feature-player__video { width: 100%; aspect-ratio: 16 / 9; display: block; object-fit: cover; }
.feature-player__big-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 72px; height: 72px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: #20303a;
  display: grid; place-items: center;
  box-shadow: 0 0 0 10px rgba(249,155,29,.25), 0 16px 36px rgba(0,0,0,.45);
  transition: transform .2s ease;
}
.feature-player__big-play:hover { transform: scale(1.07); }
.feature-player__big-play svg { margin-left: 3px; }
.feature-player.is-playing .feature-player__big-play { display: none; }

.feature-player__bar {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(180deg, transparent, rgba(3, 14, 20, .85));
}
.fp-btn {
  border: none;
  background: transparent;
  color: var(--white);
  display: grid; place-items: center;
  padding: 4px;
  border-radius: 6px;
}
.fp-btn:hover { color: var(--accent); }
.fp-rate { font-size: .75rem; font-weight: 700; }
.fp-seek {
  flex: 1;
  appearance: none;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.25);
  accent-color: var(--accent);
}

/* ─── 08 · base camp / hero ────────────────────────────────────────── */
.section--hero { padding-top: clamp(40px, 5vw, 64px); }
.hero-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: clamp(56px, 9vw, 120px);
}
.hero-nav__tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.lang-switch {
  display: flex;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.08);
}
.lang-switch__btn {
  border: none;
  background: transparent;
  color: rgba(255,255,255,.8);
  font-size: .74rem;
  font-weight: 600;
  padding: 6px 14px;
}
.lang-switch__btn.is-active { background: var(--white); color: var(--ink-deep); border-radius: 999px; }

.icon-ghost {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.08);
  color: var(--white);
  transition: background .2s ease;
}
.icon-ghost:hover { background: rgba(255,255,255,.2); }

.btn-login {
  background: var(--accent);
  color: #2b1a02;
  font-size: .78rem;
  font-weight: 700;
  padding: 7px 22px;
  border-radius: 999px;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}
.btn-login:hover { background: var(--accent-deep); color: #2b1a02; transform: translateY(-1px); }

.hero-copy { text-align: center; padding-bottom: clamp(40px, 6vw, 70px); }
.hero-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 5.4vw, 4rem);
  line-height: 1.25;
  color: var(--white) !important;
  margin-bottom: clamp(24px, 4vw, 40px);
  /* text-shadow: 0 4px 24px rgba(0,0,0,.35); */
}
.btn-explore {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--accent);
  color: #2b1a02;
  font-weight: 700;
  font-size: clamp(.9rem, 1.6vw, 1rem);
  padding: 13px 34px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 14px 36px rgba(249,155,29,.4);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn-explore:hover {
  color: #2b1a02;
  transform: translateY(-3px);
  box-shadow: 0 20px 44px rgba(249,155,29,.5);
}
.btn-explore__arrow { transition: transform .2s ease; }
.btn-explore:hover .btn-explore__arrow { transform: translateX(4px); }

.climb-label--hero { margin-top: clamp(48px, 7vw, 80px); padding-bottom: 24px; }
.climb-bounce { display: inline-block; animation: climbBounce 1.6s ease-in-out infinite; }
@keyframes climbBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* ─── video lightbox ───────────────────────────────────────────────── */
.video-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(3, 12, 20, .92);
  display: grid;
  place-items: center;
  padding: 24px;
}
.video-lightbox video {
  max-width: min(900px, 100%);
  max-height: 80vh;
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
.video-lightbox__close {
  position: absolute;
  top: 20px; right: 24px;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.4);
  background: rgba(255,255,255,.1);
  color: var(--white);
  font-size: 1rem;
}

/* ─── scroll reveal ────────────────────────────────────────────────── */
/* Cards rise from below as the user climbs up — direction-aware via JS adds
   .is-visible. --d staggers siblings. */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .6s ease var(--d, 0s), transform .6s ease var(--d, 0s);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Without JS (or before it runs on old browsers) content must stay visible */
html.no-js .reveal { opacity: 1; transform: none; }

/* ─── focus & motion accessibility ─────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .bubble, .climb-bounce { animation: none; }
  * { transition-duration: .01ms !important; }
}

/* ─── responsive tuning ────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .vision-showcase { min-height: 320px; }
}

@media (max-width: 767.98px) {
  .quiz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .summit-bar__inner { flex-wrap: wrap; justify-content: center; }
  .bubble-field { height: 90px; }
  .bubble { width: 36px; height: 36px; font-size: .85rem; }
  .vision-card { left: 12px; right: 12px; max-width: none; }
  .hero-nav { flex-direction: column; align-items: center; }
}

@media (max-width: 575.98px) {
  .t-card { aspect-ratio: 3 / 3.6; }
  .journey-pill { gap: 10px; }
  .journey-pill__text { padding: 9px 18px; }
  .feature-player__bar { gap: 8px; padding: 10px 12px; }
}