* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
overflow-x: clip;
}

body {
background-color: #000;
background-size: cover !important;
background-position: top !important;
background-repeat: no-repeat !important;
min-height: 100%;
overflow-x: clip;
}

@font-face {
font-family: "Galano Regular";
font-weight: 100;
font-display: auto;
src: url("/-global-assets/fonts/GalanoGrotesqueRegular.otf")
format("OpenType");
}
@font-face {
font-family: "Galano Medium";
font-weight: 100;
font-display: auto;
font-fallback: Roboto;
src: url("/-global-assets/fonts/GalanoGrotesque-Medium.ttf")
format("truetype");
}
@font-face {
font-family: "Galano Bold";
font-weight: 100;
font-display: auto;
font-fallback: roboto;
src: url("/-global-assets/fonts/GalanoGrotesqueDEMO-Bold.ttf")
format("truetype");
}

:root {
--fs-26: 26px;
--fs-70: 70px;
--fs-55: 55px;
--platinum-gray: #efefef;

--paragraph-fs: var(--fs-26);
--galano-regular: "Galano Regular", Sans-serif;
--galano-medium: "Galano Medium", Sans-serif;
--galano-bold: "Galano Bold", Sans-serif;

--brand-navy: #02253d;
--brand-gradient: linear-gradient(
90deg,
#02bcdd 0%,
#06d1e5 22.09%,
#64eda8 51.94%,
#d0f88d 100%
);
--brand-gradient-angle: linear-gradient(
45deg,
#02bcdd 0%,
#06d1e5 22.09%,
#64eda8 51.94%,
#d0f88d 100%
);

--big-card-border: rgba(0, 156, 176, 0.76);
--big-card-border-muted: rgba(0, 126, 145, 0.42);
--big-card-border-gradient: linear-gradient(
89.79deg,
#04c7e1 -10.66%,
#000000 50.25%,
#06d1e5 110.31%
);
--button-border-gradient: linear-gradient(
89.79deg,
#04c7e1 -10.66%,
#000000 50.25%,
#06d1e5 110.31%
);
--big-card-surface:
linear-gradient(90deg, #010203 0%, #011321 16%, #022035 50%, #011321 84%, #010203 100%);
--slider-pill-surface:
linear-gradient(#011727, #011727);

--smoke-stack-gradient:
var(--big-card-surface),
var(--big-card-border-gradient);
--smoke-stack-gradient-left-to-right:
var(--big-card-surface),
var(--big-card-border-gradient);
--smoke-stack-gradient-right-to-left:
var(--big-card-surface),
var(--big-card-border-gradient);
}

.heading {
font-size: var(--fs-70);
font-family: var(--galano-bold);
text-transform: uppercase;
}

.sub-heading {
font-family: "Galano";
text-transform: uppercase;
font-size: var(--fs-55);
line-height: 1.1;
}

a {
text-decoration: none;
}

a:focus {
border: none;
outline: none;
}

p {
font-size: var(--paragraph-fs);
font-family: var(--galano-regular);
color: var(--platinum-gray);
}

.gradient-text {
background: var(--brand-gradient);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
line-height: 1.1;
}

.section-gap {
margin-top: 80px;
}

.text-platinum-gray {
color: var(--platinum-gray);
}

.top-most-bar {
position: fixed;
top: 0;
height: 12px;
width: 100%;
background: var(--brand-gradient);
z-index: 99;
}

.early-stage-hero-banner {
position: relative;
display: flex;
flex-direction: column;
min-height: clamp(800px, 90vh, 1050px);
background: linear-gradient(
90deg,
#000 0%,
#02253d 30%,
#02253d 75%,
#000 100%
);
text-align: center;
padding: 20px 20px 0;
overflow: hidden;
}

.hero-content-container{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
width:100%;
flex:1;
margin:0 auto;
}

@media (min-width: 768px) and (orientation: landscape) {
.hero-content-container {
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
margin: 0 auto;
}
}

.hero-content{
display:flex;
align-items:center;
justify-content:center;
gap:40px;
flex:0;
padding-top:0;
}

.hero-content img {
width: clamp(640px, 43vw, 860px);
max-width: 88vw;
margin-top: 0;
}

.hero-subtext{
color:#fff;
font-size:26px;
font-weight:600;
margin-top:35px;
margin-bottom:65px;
}

.hero-bottom-curve {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}

/* ----------- Neon light through wires starts ----------- */

.you-are-not-alone {
position: relative;
height: 90vh;
text-align: center;
overflow: hidden;
}

@media (min-width: 768px) and (orientation: landscape) {
.you-are-not-alone {
height: 60vh !important;
}
}

.you-are-not-alone h2 {
color: var(--platinum-gray);
}

.you-are-not-alone > p {
margin-top: 40px;
font-family: var(--galano-medium);
}

.wires {
position: absolute;
margin-top: 30px;
left: 0;
width: 100%;
pointer-events: none;
transform: scaleX(1);
}

.wire {
fill: none;
stroke: #05c3dc;
stroke-width: 1;
filter: url(#glow);
opacity: 0.7;
}

.pulse {
fill: #05c3dc;
filter: url(#glow);
}

/* ----------- Neon light through wires ends ----------- */

.smoke-stack-gradient-section {
width: min(80vw, 1536px);
max-width: min(80vw, 1536px);
height: 500px;
margin-left: auto;
margin-right: auto;
border: 2px solid transparent;
border-radius: 50px;
background-image: var(--smoke-stack-gradient-left-to-right);
background-origin: border-box;
background-clip: padding-box, border-box;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
text-align: center;
box-shadow:
inset 0 0 42px rgba(2, 37, 61, 0.3),
0 22px 70px rgba(0, 0, 0, 0.28);
}

.smoke-stack-gradient-section .sub-heading {
text-transform: none;
display: inline-block;
padding: 0 0 10px 0;
}

/* ----------------------------- Shiny CTA starts ----------------------------- */

@property --cta-border-angle {
syntax: "<angle>";
initial-value: 0deg;
inherits: false;
}

.gradient-cta {
--cta-bg: #02253d;
isolation: isolate;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
min-height: 64px;
padding: 16px 64px 18px;
border: 1px solid transparent;
border-radius: 999px;
background:
linear-gradient(var(--cta-bg), var(--cta-bg)) padding-box,
conic-gradient(
from var(--cta-border-angle),
transparent 0deg,
#02bcdd 42deg,
#06d1e5 72deg,
#64eda8 112deg,
#d0f88d 145deg,
transparent 190deg,
transparent 360deg
)
border-box;
color: #fff;
font-family: var(--galano-bold);
font-size: 28px;
font-weight: 700;
line-height: 1.15;
text-align: center;
cursor: pointer;
animation: ctaBorderFlow 3s linear infinite;
transition:
color 0.32s ease,
transform 0.28s ease,
box-shadow 0.28s ease;
}

.gradient-cta span {
position: relative;
z-index: 2;
}

.gradient-cta::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
border-radius: inherit;
background: var(--brand-gradient);
transform: translateY(105%);
transition: transform 0.55s cubic-bezier(0.25, 1, 0.5, 1);
pointer-events: none;
}

.gradient-cta::after {
display: none;
}

.gradient-cta:hover,
.gradient-cta:focus-visible {
background:
linear-gradient(var(--cta-bg), var(--cta-bg)) padding-box,
linear-gradient(transparent, transparent) border-box;
color: var(--brand-navy);
transform: translateY(-2px);
box-shadow:
inset 0 0 0 1px rgba(6, 209, 229, 0.18),
0 0 36px rgba(2, 188, 221, 0.3),
0 0 70px rgba(208, 248, 141, 0.12);
}

.gradient-cta:hover::before,
.gradient-cta:focus-visible::before {
transform: translateY(0);
opacity: 1;
}

.gradient-cta:active {
transform: translateY(1px);
}

@keyframes ctaBorderFlow {
to {
--cta-border-angle: 360deg;
}
}

/* ----------------------------- Shiny CTA ends ----------------------------- */

/* ----------------------------- Storytelling starts ----------------------------- */

.slide-section {
position: relative;
width: 100%;
height: 720vh;
}

.story-pin {
position: sticky;
top: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: clip;
}

.story-intro {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
opacity: 1;
transform: translateY(0);
transition:
opacity 0.45s ease,
transform 0.45s ease;
z-index: 2;
}

.story-intro.is-hidden {
opacity: 0;
transform: translateY(-40px);
pointer-events: none;
}

.story-intro h2 {
font-family: var(--galano-bold);
font-size: clamp(48px, 4.8vw, 88px);
line-height: 1.2;
color: #fff;
}

.story-intro p {
margin-top: 40px;
font-family: var(--galano-medium);
font-size: clamp(20px, 1.8vw, 32px);
color: #fff;
}

.scroll-container {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
z-index: 3;
}

.sections-wrapper {
position: relative;
width: min(80vw, 1536px);
max-width: min(80vw, 1536px);
height: min(70vh, 680px);
margin: 0 auto;
display: block;
}

.section {
position: absolute;
inset: 0;
padding-top: 0;
opacity: 0;
transform: translateY(70px) scale(0.96);
filter: brightness(0.75);
transition:
opacity 0.75s ease,
transform 0.75s ease,
filter 0.75s ease;
pointer-events: none;
}

.section.is-active {
opacity: 1;
transform: translateY(0) scale(1);
filter: brightness(1);
pointer-events: auto;
}

.section.is-before {
opacity: 0;
transform: translateY(-70px) scale(0.96);
}

.section.is-after {
opacity: 0;
transform: translateY(70px) scale(0.96);
filter: brightness(0.75);
}

.section__inner {
will-change: transform, filter;
transform-origin: center top;
display: flex;
justify-content: space-between;
gap: 0;
width: 100%;
height: 100%;
border: 2px solid transparent;
border-radius: 50px;
overflow: hidden;
background-image: var(--smoke-stack-gradient-left-to-right);
background-origin: border-box;
background-clip: padding-box, border-box;
padding: 0;
box-shadow:
inset 0 0 42px rgba(2, 37, 61, 0.3),
0 20px 60px rgba(0, 0, 0, 0.5);
}

.slide-left {
display: flex;
align-items: center;
justify-content: center;
padding: 3rem;
position: relative;
width: 50%;
}

.slide-right {
display: flex;
flex-direction: column;
justify-content: center;
padding: 3rem 3rem;
width: 50%;
}

.slide-image {
width: 450px;
height: 450px;
display: flex;
align-items: center;
justify-content: center;
}

.slide-image img {
height: 100%;
width: 100%;
object-fit: contain;
}

.slide-content h3 {
font-family: var(--galano-bold);
font-size: clamp(34px, 2.55vw, 50px);
line-height: 1.22;
margin-bottom: 1.5rem;
font-weight: 700;
}

.slide-content p {
font-size: clamp(24px, 1.8vw, 36px);
line-height: 1.8;
}

.slide-cta {
width: fit-content;
font-family: var(--galano-medium);
color: #fff;
font-size: 24px;
border: 2px solid transparent;
border-radius: 50px;
background-image:
var(--slider-pill-surface),
var(--button-border-gradient);
background-origin: border-box;
background-clip: padding-box, border-box;
padding: 0;
height: 65px;
margin-top: 60px;
display: flex;
align-items: center;
justify-content: center;
box-shadow:
inset 0 0 22px rgba(2, 37, 61, 0.22),
0 12px 36px rgba(0, 0, 0, 0.25);
}

.slide-cta a {
background-color: transparent;
font-family: "Galano Medium", sans-serif;
font-size: 20px;
font-weight: 500;
border-style: none;
border-radius: 50px;
padding: 12px 32px 18px 32px;
}

.section[data-index="4"] .slide-cta {
min-width: 190px;
}

.section[data-index="4"] .slide-cta a {
width: 100%;
text-align: center;
}

.progress-container {
position: absolute;
left: 0;
bottom: 0;
z-index: 999;
width: 100vw;
height: 28px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity 0.25s ease,
visibility 0.25s ease;
}

.slide-section.is-story-active .progress-container {
position: fixed;
left: 0;
bottom: 0;
opacity: 1;
visibility: visible;
}

.slide-section.is-story-complete .progress-container {
position: absolute;
left: 0;
bottom: 0;
opacity: 1;
visibility: visible;
}

.progress-bar {
width: 100%;
height: 100%;
background: rgba(2, 37, 61, 0.95);
overflow: visible;
position: relative;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
}

.progress-fill {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 0%;
background: var(--brand-gradient);
transition: width 0.18s linear;
box-shadow: 0 0 20px rgba(2, 188, 221, 0.6);
}

.progress-percentage {
position: absolute;
top: 50%;
right: -34px;
transform: translateY(-50%);
font-size: 14px;
font-weight: 700;
color: #fff;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
z-index: 10;
pointer-events: none;
background: black;
padding: 4px 12px;
border-radius: 999px;
border: 2px solid #d0f88d;
min-width: 58px;
text-align: center;
}

/* ----------------------------- Storytelling ends ----------------------------- */

/* ----------------------------- Founders Challenges ----------------------------- */

.smoke-stack-gradient-section.founders-challenges {
background: transparent;
border: none;
}

.smoke-stack-gradient-section.founders-challenges h1 {
text-transform: none;
/*margin-bottom: -8px;*/
}

.smoke-stack-gradient-section.founders-challenges {
height: 440px;
}

.founders-challenges-container .wires {
margin-top: 0;
z-index: -9;
}

.founders-challenges-container .section-gap {
margin-top: 290px;
}

.founders-challenges-container .founders-challenges-box,
.founders-challenges-container .founders-challenges-box-two {
display: flex;
flex-direction: row;
width: min(80vw, 1536px);
max-width: min(80vw, 1536px);
margin-left: auto;
margin-right: auto;
border: 2px solid transparent;
border-radius: 50px;
height: 500px;
background-image: var(--smoke-stack-gradient-left-to-right);
background-origin: border-box;
background-clip: padding-box, border-box;
padding: 0;
justify-content: space-evenly;
box-shadow:
inset 0 0 42px rgba(2, 37, 61, 0.3),
0 22px 70px rgba(0, 0, 0, 0.28);
}

.founders-challenges-container .founders-challenges-box img,
.founders-challenges-container .founders-challenges-box-two img {
width: 430px;
object-fit: contain;
margin-right: 50px;
}

.founders-challenges-container .founders-challenges-box img {
margin-left: 50px;
}

.founders-challenges-box-content {
text-align: right;
line-height: 45px;
margin-right: 3rem;
margin-left: 3rem;
}

.founders-challenges-box-content p {
font-size: 36px;
}

.founders-challenges-box-content p.gradient-text {
font-family: var(--galano-bold);
}

.founders-challenges-box-two .founders-challenges-box-content {
text-align: left;
line-height: 44px;
}

.founders-challenges-container .founders-challenges-box-two {
margin-top: 100px;
}

/* ----------------------------- Possibilities Grid starts ----------------------------- */

.feature-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 250px;
gap: 20px;
max-width: 80vw;
margin-left: auto;
margin-right: auto;
margin-top: 35vh;
}

.card {
position: relative;
padding: 20px;
border: 1px solid rgba(2, 188, 221, 0.2);
box-shadow: 0 0 25px rgba(2, 188, 221, 0.08);
display: flex;
flex-direction: column;
justify-content: space-between;
transition:
transform 0.5s ease,
box-shadow 0.5s ease;
border: double 1px transparent;
border-radius: 20px;
background-image:
linear-gradient(45deg, #000000 -50%, #02253d 50%, #000000 150%),
linear-gradient(
45deg,
rgba(2, 188, 221, 0.45),
#000,
rgba(100, 237, 168, 0.45)
);
background-origin: border-box;
background-clip: content-box, border-box;
padding: 1px;
overflow: hidden;
}

.card img {
width: 60%;
opacity: 0.7;
margin-left: auto;
margin-right: auto;
}

.card.tall img {
width: 80%;
margin-bottom: 60px;
}

.card h3 {
color: #ffffff33;
font-size: 30px;
font-weight: 400;
line-height: 20px;
font-family: var(--galano-medium);
margin-left: 20px;
margin-top: 20px;
transition: color 0.3s ease;
}

.card:hover h3 {
color: #fff;
}

.card .card img:hover {
opacity: 1;
}

.card div {
margin-left: 10px;
margin-top: 10px;
}

.card:hover {
transform: translateY(-6px);
box-shadow: 0 0 35px rgba(2, 188, 221, 0.25);
}

.large {
grid-column: span 2;
}

.wide {
grid-column: span 2;
}

.tall {
grid-row: span 2;
}

@property --benefit-border-angle {
syntax: "<angle>";
inherits: false;
initial-value: 0deg;
}

.benefit-card {
isolation: isolate;
}

.benefit-card::before {
content: "";
position: absolute;
inset: 0;
z-index: 4;
padding: 2px;
border-radius: inherit;
background: conic-gradient(
from var(--benefit-border-angle),
#02bcdd 0deg,
#06d1e5 75deg,
#64eda8 160deg,
#d0f88d 245deg,
#02bcdd 360deg
);
opacity: 0;
pointer-events: none;
transition: opacity 0.28s ease;
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
mask-composite: exclude;
}

.benefit-card::after {
content: "";
position: absolute;
inset: -1px;
z-index: 1;
border-radius: inherit;
background: radial-gradient(
circle at var(--benefit-glow-x, 50%) var(--benefit-glow-y, 50%),
rgba(6, 209, 229, 0.22),
transparent 34%
);
opacity: 0;
pointer-events: none;
transition: opacity 0.28s ease;
}

.benefit-card:hover::before,
.benefit-card.is-benefit-hovered::before,
.benefit-card:focus-within::before {
opacity: 1;
animation: benefitBorderSpin 2.4s linear infinite;
}

.benefit-card:hover::after,
.benefit-card.is-benefit-hovered::after,
.benefit-card:focus-within::after {
opacity: 1;
}

@keyframes benefitBorderSpin {
to {
--benefit-border-angle: 360deg;
}
}

/* ----------------------------- Possibilities Grid ends ----------------------------- */

/* ----------------------------- Ready to turn ----------------------------- */

.ready-to-turn.you-are-not-alone {
max-height: 70vh;
}

.ready-to-turn.you-are-not-alone h2 {
text-transform: none;
line-height: 1.1;
}

/* =========================================================
RESPONSIVE — 1200px
========================================================= */
@media (min-width: 1201px) and (max-width: 1440px) {
.sections-wrapper {
width: min(84vw, 1536px);
max-width: min(84vw, 1536px);
}

.smoke-stack-gradient-section {
width: min(84vw, 1536px);
max-width: min(84vw, 1536px);
}

.smoke-stack-gradient-section .sub-heading {
font-size: clamp(44px, 4vw, 55px);
}

.smoke-stack-gradient-section p {
font-size: clamp(22px, 1.8vw, 26px);
}

.founders-challenges-box-content p {
font-size: clamp(28px, 2.5vw, 36px);
line-height: 1.25;
}

.founders-challenges-container .founders-challenges-box,
.founders-challenges-container .founders-challenges-box-two {
width: min(84vw, 1536px);
max-width: min(84vw, 1536px);
}
}

@media (min-width: 1025px) and (max-width: 1200px) {
.sections-wrapper {
width: min(86vw, 1536px);
max-width: min(86vw, 1536px);
}

.smoke-stack-gradient-section {
width: min(86vw, 1536px);
max-width: min(86vw, 1536px);
height: 480px;
border-radius: 46px;
}

.smoke-stack-gradient-section .sub-heading {
font-size: clamp(40px, 4.4vw, 50px);
line-height: 1.18;
}

.smoke-stack-gradient-section p {
font-size: clamp(20px, 2vw, 24px);
}

.founders-challenges-container .founders-challenges-box,
.founders-challenges-container .founders-challenges-box-two {
width: min(86vw, 1536px);
max-width: min(86vw, 1536px);
height: 480px;
border-radius: 46px;
}

.founders-challenges-box-content p {
font-size: clamp(26px, 2.7vw, 32px);
line-height: 1.28;
}
}

@media (max-width: 1200px) {
.sections-wrapper {
width: min(86vw, 1536px);
max-width: min(86vw, 1536px);
}

.slide-content h3 {
font-size: 36px;
}

.slide-content p {
font-size: 22px;
}

.slide-left,
.slide-right {
padding: 2rem;
}

.slide-image {
width: 360px;
height: 360px;
}
}

/* =========================================================
RESPONSIVE — 1024px
========================================================= */
@media (max-width: 1024px) {
.hero-content-container {
display: flex;
flex-direction: column;
justify-content: center;
}

.early-stage-hero-banner {
position: relative;
min-height: 96vh;
}

.smoke-stack-gradient-section {
width: 90vw;
max-width: 90vw;
border-radius: 42px;
}

.sections-wrapper {
width: 90vw;
max-width: 90vw;
}

.feature-grid {
display: grid;
width: 90vw;
max-width: 90vw;
margin-left: auto;
margin-right: auto;
margin-top: 60px;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
grid-template-areas:
"ux       ux"
"scale    costs"
"eff      decision";
gap: 16px;
}

/* reset span classes */
.large,
.wide,
.tall {
grid-column: unset;
grid-row: unset;
}

.benefit-card--ux {
grid-area: ux;
}
.benefit-card--scalability {
grid-area: scale;
}
.benefit-card--costs {
grid-area: costs;
}
.benefit-card--efficiency {
grid-area: eff;
}
.benefit-card--decision {
grid-area: decision;
}

.feature-grid .card {
min-width: 0;
min-height: 0;
height: 220px;
border-radius: 20px;
background-image:
linear-gradient(45deg, #000000 -50%, #02253d 50%, #000000 150%),
linear-gradient(
45deg,
rgba(2, 188, 221, 0.45),
#000,
rgba(100, 237, 168, 0.45)
);
background-origin: border-box;
background-clip: content-box, border-box;
}

.benefit-card--ux {
height: 260px;
}

.feature-grid .card div {
min-width: 0;
margin: 24px;
}

.feature-grid .card h3 {
color: rgba(255, 255, 255, 0.85);
font-size: clamp(22px, 3.5vw, 36px);
line-height: 1.25;
margin: 0;
}

.feature-grid .card img {
position: absolute;
right: 0;
bottom: 0;
width: 55%;
max-height: 80%;
margin: 0;
opacity: 0.8;
object-fit: contain;
filter: saturate(0.75);
}

.smoke-stack-gradient-section .sub-heading {
font-size: clamp(36px, 5vw, 50px);
line-height: 1.18;
}

.smoke-stack-gradient-section p {
font-size: clamp(20px, 2.8vw, 26px);
line-height: 1.35;
}

.sub-heading {
font-family: var(--galano-bold);
text-transform: uppercase;
font-size: 50px;
}

.founders-challenges-container .founders-challenges-box {
flex-direction: column;
}

.founders-challenges-container .founders-challenges-box-two {
display: flex;
flex-direction: column-reverse;
}

.founders-challenges-container .founders-challenges-box-two {
height: 50vh;
}

.founders-challenges-container .founders-challenges-box,
.founders-challenges-container .founders-challenges-box-two {
width: 90vw;
max-width: 90vw;
height: 55vh;
border-radius: 42px;
}
}

/* ========================================================
RESPONSIVE — 768px (Mobile & Tablet)
========================================================= */
@media (max-width: 767px) {
:root {
--big-card-border-gradient: linear-gradient(
179.79deg,
#04c7e1 -10.66%,
#000000 50.25%,
#06d1e5 110.31%
);
}

.hero-subtext {
color: #d6e4f0;
font-size: 22px;
margin-bottom: clamp(8px, 2.2vh, 20px);
}

.section-gap {
margin-top: 100px;
}

.founders-challenges-container .founders-challenges-box,
.founders-challenges-container .founders-challenges-box-two {
display: flex;
flex-direction: column-reverse;
}

.founders-challenges-box-two .founders-challenges-box-content {
text-align: center;
}

/* --- Hero --- */
.early-stage-hero-banner {
min-height: 90vh;
height: auto;
}

.early-stage-hero-banner {
background:
radial-gradient(
circle at top left,
rgba(0, 0, 0, 0.45) 0%,
transparent 35%
),
radial-gradient(
circle at top right,
rgba(0, 0, 0, 0.45) 0%,
transparent 35%
),
linear-gradient(180deg, #02253d 0%, #012338 50%, #001521 100%);

text-align: center;
padding: 20px 20px 30px;
position: relative;
}

.hero-content-container {
display: flex;
flex-direction: column;
justify-content: center;
padding: 16px;
}

.hero-content img {
width: min(380px, 90vw);
/*margin-top: clamp(60px, 12vw, 110px);*/
}

/* --- Typography --- */
.heading {
font-size: clamp(28px, 7vw, 45px);
}

.sub-heading {
font-size: clamp(24px, 6vw, 40px);
}

/* --- You are not alone --- */
.you-are-not-alone {
padding: 8px;
height: auto;
min-height: 50vh;
}

.you-are-not-alone > p {
margin-top: clamp(20px, 5vw, 40px);
padding: clamp(16px, 5vw, 50px);
font-family: var(--galano-medium);
}

.ready-to-turn.you-are-not-alone {
max-height: none;
height: auto;
}

/* --- Gradient section --- */
.smoke-stack-gradient-section {
width: 90vw;
max-width: 90vw;
height: auto;
min-height: clamp(360px, 78vw, 450px);
margin: 0 auto;
border-radius: 28px;
background-image: var(--smoke-stack-gradient-left-to-right);
background-origin: border-box;
background-clip: padding-box, border-box;
}

.smoke-stack-gradient-section .sub-heading {
text-transform: none;
display: inline-block;
line-height: 1.22;
font-size: clamp(26px, 7.5vw, 36px);
}

.smoke-stack-gradient-section > p,
.smoke-stack-gradient-section p {
font-size: clamp(17px, 4.8vw, 22px);
line-height: 1.38;
padding: 16px;
}

.early-stage-main > .smoke-stack-gradient-section:nth-of-type(3) {
width: 82vw;
max-width: 82vw;
min-height: clamp(560px, 142vw, 660px);
padding: 44px 20px 54px;
justify-content: space-between;
}

.early-stage-main > .smoke-stack-gradient-section:nth-of-type(3) > div {
margin-top: clamp(42px, 12vw, 78px);
}

.early-stage-main > .smoke-stack-gradient-section:nth-of-type(3) .sub-heading {
font-size: clamp(23px, 6.4vw, 30px);
line-height: 1.56;
padding-bottom: 0;
}

.early-stage-main > .smoke-stack-gradient-section:nth-of-type(3) p {
margin-top: 0;
padding: 0 10px;
font-size: clamp(18px, 5.1vw, 22px);
line-height: 1.35;
}

/* --- CTA --- */
.gradient-cta {
width: 65vw;
min-height: 56px;
padding: 15px 28px 17px;
font-size: clamp(16px, 4.5vw, 20px);
}

/* --- Founders challenges --- */
.founders-challenges-container .founders-challenges-box {
flex-direction: column;
gap: 20px;
text-align: center;
}

.founders-challenges-container .founders-challenges-box,
.founders-challenges-container .founders-challenges-box-two {
width: 90vw;
max-width: 90vw;
height: auto;
min-height: clamp(420px, 112vw, 560px);
border-radius: 28px;
background-image: var(--smoke-stack-gradient-left-to-right);
background-origin: border-box;
background-clip: padding-box, border-box;
}

.founders-challenges-container img:not(.feature-grid-mobile-img img) {
max-width: min(250px, 65vw);
margin: 0 auto;
display: block;
}

.founders-challenges-box-content {
text-align: center;
margin: 0;
line-height: 1;
}

.founders-challenges-box-two {
flex-direction: column-reverse;
}

.founders-challenges-box-two .founders-challenges-box-content {
line-height: 1;
}

.founders-challenges-box-content p {
font-size: clamp(18px, 5vw, 24px);
line-height: 1.32;
}

.founders-challenges-container .section-gap {
margin-top: clamp(60px, 15vw, 120px);
}

.card:hover {
transform: none;
}

/* --- Feature Grid — 2 column grid (same as 1024px) --- */
.feature-grid {
display: grid;
width: 90vw;
max-width: 90vw;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
grid-template-columns: repeat(2, 1fr);
grid-template-areas:
"ux       ux"
"scale    costs"
"eff      decision";
gap: 14px;
}

.large,
.wide,
.tall {
grid-column: unset;
grid-row: unset;
}

.benefit-card--ux {
grid-area: ux;
}
.benefit-card--scalability {
grid-area: scale;
}
.benefit-card--costs {
grid-area: costs;
}
.benefit-card--efficiency {
grid-area: eff;
}
.benefit-card--decision {
grid-area: decision;
}

.card {
height: 180px;
border-radius: 20px;
background-image:
linear-gradient(45deg, #000000 -50%, #02253d 50%, #000000 150%),
linear-gradient(
45deg,
rgba(2, 188, 221, 0.45),
#000,
rgba(100, 237, 168, 0.45)
);
background-origin: border-box;
background-clip: content-box, border-box;
}

.benefit-card--ux {
height: 220px;
}

.card img {
position: absolute;
right: 0;
bottom: 0;
width: 55%;
max-height: 80%;
opacity: 0.25;
margin: 0;
object-fit: contain;
filter: saturate(0.75);
}

.card div {
margin: 20px;
}

.card h3 {
font-size: clamp(20px, 4vw, 30px);
line-height: 1.25;
margin: 0;
color: rgba(255, 255, 255, 0.85);
}

.card.tall img {
width: 55%;
margin-bottom: 0;
}

/* Section height auto ho jaaye, sticky scroll band */
.slide-section {
height: auto;
margin-top: 150px;
}

/* story-pin sticky band, normal flow mein aaye */
.story-pin {
position: static;
height: auto;
display: block;
overflow: visible;
}

/* Intro heading normal flow mein */
.story-intro {
position: static;
opacity: 1;
transform: none;
pointer-events: auto;
text-align: center;
padding: 40px 20px 30px;
}

/* scroll-container normal flow */
.scroll-container {
position: static;
pointer-events: auto;
height: auto;
display: block;
margin-top: 150px;
}

/* wrapper: flex column mein stack karo */
.sections-wrapper {
position: static;
width: 84vw;
max-width: 84vw;
height: auto;
display: flex;
flex-direction: column;
gap: 24px;
margin: 0 auto;
padding-bottom: 40px;
}

/* Har card visible aur stacked — JS classes ka koi asar nahi */
.section,
.section.is-active,
.section.is-before,
.section.is-after {
position: static;
opacity: 1;
transform: none;
filter: none;
pointer-events: auto;
transition: none;
}

/* Card inner: image upar, text neeche */
.section__inner {
flex-direction: column;
height: auto;
min-height: clamp(540px, 142vw, 620px);
justify-content: flex-start;
gap: 22px;
border-radius: 28px;
background-image: var(--smoke-stack-gradient-left-to-right);
background-origin: border-box;
background-clip: padding-box, border-box;
}

.slide-left,
.slide-right {
width: 100%;
padding: 20px;
}

.slide-left {
min-height: 0;
padding: 38px 18px 0;
}

.slide-right {
padding: 0 22px 26px;
}

/* Image center mein */
.slide-image {
width: 200px;
height: 200px;
margin: 0 auto;
}

/* Text center align */
.slide-content h3 {
font-size: clamp(30px, 8vw, 36px);
text-align: center;
line-height: 1.18;
margin-bottom: 14px;
}

.slide-content p {
font-size: clamp(16px, 4vw, 20px);
text-align: center;
}

/* CTA center */
.slide-cta {
height: 50px;
margin: 38px auto 0;
}

.slide-cta a {
font-size: 16px;
padding: 9px 24px 12px;
}

/* Progress bar completely hide */
.progress-container {
display: none;
}

/* is-story-active/complete classes ka koi asar na ho progress bar pe */
.slide-section.is-story-active .progress-container,
.slide-section.is-story-complete .progress-container {
display: none;
}
}

/* =========================================================
RESPONSIVE — 767px (Pure Mobile: vertical stack)
========================================================= */
@media (max-width: 767px) {
.feature-grid {
display: flex;
flex-direction: column;
gap: 14px;
width: 90vw;
max-width: 90vw;
margin-left: auto;
margin-right: auto;
}

.benefit-card--ux,
.benefit-card--scalability,
.benefit-card--costs,
.benefit-card--efficiency,
.benefit-card--decision {
grid-area: unset;
}

.card {
width: 100%;
height: 180px;
}

.benefit-card--ux {
height: 180px;
}
}

/* =========================================================
RESPONSIVE — 480px
========================================================= */
@media (max-width: 480px) {
.smoke-stack-gradient-section {
width: 92vw;
max-width: 92vw;
min-height: clamp(340px, 90vw, 430px);
border-radius: 24px;
}

.founders-challenges-container .founders-challenges-box,
.founders-challenges-container .founders-challenges-box-two {
width: 92vw;
max-width: 92vw;
}

.sections-wrapper {
width: 84vw;
max-width: 84vw;
}

.smoke-stack-gradient-section .sub-heading {
font-size: clamp(24px, 7.8vw, 32px);
}

.smoke-stack-gradient-section > p,
.smoke-stack-gradient-section p {
font-size: clamp(16px, 4.8vw, 20px);
}

.feature-grid {
width: 95vw;
grid-auto-rows: 166px;
gap: 10px;
}

.feature-grid .card {
border-radius: 16px;
}

.feature-grid .card div {
margin: 22px;
}

.feature-grid .card h3 {
font-size: 34px;
line-height: 1.22;
}

.benefit-card--costs h3,
.benefit-card--efficiency h3 {
font-size: 31px;
}

.benefit-card--decision h3,
.feature-grid .tall h3 {
font-size: 31px;
}
}

/* =========================================================
RESPONSIVE — 390px
========================================================= */
@media (max-width: 390px) {
.heading {
font-size: 42px;
}

.sub-heading {
font-size: 22px;
}

.smoke-stack-gradient-section .sub-heading {
font-size: clamp(22px, 7.4vw, 28px);
line-height: 1.25;
}

.smoke-stack-gradient-section > p,
.smoke-stack-gradient-section p {
font-size: clamp(15px, 4.5vw, 18px);
padding: 12px;
line-height: 1.35;
}

.smoke-stack-gradient-section {
width: 92vw;
max-width: 92vw;
min-height: 330px;
border-radius: 22px;
}

.founders-challenges-container .founders-challenges-box,
.founders-challenges-container .founders-challenges-box-two {
width: 92vw;
max-width: 92vw;
}

.sections-wrapper {
width: 84vw;
max-width: 84vw;
}

.you-are-not-alone {
min-height: auto;
}

.feature-grid {
grid-auto-rows: 150px;
gap: 9px;
}

.feature-grid .card div {
margin: 18px;
}

.feature-grid .card h3 {
font-size: 30px;
}

.benefit-card--costs h3,
.benefit-card--efficiency h3,
.benefit-card--decision h3,
.feature-grid .tall h3 {
font-size: 27px;
}
}

@media (max-width: 767px) {
.feature-grid {
display: flex;
flex-direction: column;
width: 84vw;
max-width: 84vw;
margin: 100px auto 0;
gap: 14px;
}

.benefit-card--ux,
.benefit-card--scalability,
.benefit-card--costs,
.benefit-card--efficiency,
.benefit-card--decision {
grid-area: unset;
}

.feature-grid .card,
.feature-grid .benefit-card--ux {
width: 100%;
height: clamp(190px, 56vw, 230px);
min-height: 0;
border: 1px solid transparent;
border-radius: 24px;
background-image: var(--smoke-stack-gradient-left-to-right);
background-origin: border-box;
background-clip: padding-box, border-box;
padding: 0;
box-shadow: none;
}

.feature-grid .card div {
position: relative;
z-index: 3;
margin: clamp(22px, 6vw, 28px);
}

.feature-grid .card h3,
.benefit-card--costs h3,
.benefit-card--efficiency h3,
.benefit-card--decision h3,
.feature-grid .tall h3 {
color: rgba(255, 255, 255, 0.88);
font-size: clamp(25px, 7.2vw, 31px);
line-height: 1.2;
font-weight: 400;
margin: 0;
}

.feature-grid .card:active h3,
.feature-grid .card:focus-within h3,
.feature-grid .card.is-benefit-hovered h3 {
color: #ffffff;
}

.feature-grid .card img,
.feature-grid .card.tall img {
position: absolute;
right: 0;
bottom: 0;
width: 56%;
max-height: 78%;
margin: 0;
opacity: 0.34;
object-fit: contain;
filter: saturate(0.85) brightness(1.05);
}

.benefit-card--ux img {
width: 58%;
max-height: 80%;
}

.benefit-card--scalability img {
width: 58%;
}

.benefit-card--costs img,
.benefit-card--efficiency img {
width: 58%;
max-height: 76%;
opacity: 0.32;
}

.benefit-card--decision img {
width: 60%;
}
}

@media (width: 1024px) and (height: 600px) {
.early-stage-hero-banner {
position: relative;
min-height: 860px;
}

.hero-content img {
width: 700px;
margin-top: 0;
}

.hero-subtext {
margin-bottom: 48px;
}

.founders-challenges-container .founders-challenges-box,
.founders-challenges-container .founders-challenges-box-two {
height: 100vh;
}
}

@media (min-width: 769px) {
.section[data-index="1"] .slide-right .slide-content h3,
.section[data-index="1"] .slide-right .slide-content p,
.section[data-index="3"] .slide-right .slide-content h3,
.section[data-index="3"] .slide-right .slide-content p {
text-align: right !important;
}

.section[data-index="1"] .slide-right .slide-cta,
.section[data-index="3"] .slide-right .slide-cta {
width: auto !important;
margin-left: auto !important;
}
}

@media (max-width: 767px) {
.section__inner {
display: flex;
flex-direction: column;
}

.slide-left {
order: 1;
}

.slide-right {
order: 2;
}

.slide-image img {
width: 100%;
height: auto;
display: block;
}

.sections-wrapper {
display: flex;
flex-direction: column;
gap: 80px;
width: 84vw;
max-width: 84vw;
}

.slide-cta a {
background-color: transparent;
font-family: "Galano Medium", sans-serif;
font-size: 16px;
font-weight: 500;
}

.section[data-index="4"] .slide-cta {
min-width: 168px;
}

#slideSection {
height: auto !important;
min-height: auto !important;
}
}

@media (max-width: 767px) {
.smoke-stack-gradient-section.founders-challenges h1 {
text-transform: none;
margin-bottom: 8px;
}

.heading {
font-size: 42px;
}
.smoke-stack-gradient-section > p,
.smoke-stack-gradient-section p {
font-size: clamp(17px, 4.8vw, 22px);
padding: 16px;
margin-top: -35px;
line-height: 1.38;
}

.sub-heading {
font-size: 32px;
}

.wires {
position: absolute;
/*margin-top: 100px;*/
left: 0;
width: 100%;
pointer-events: none;
transform: scaleX(1);
}

.you-are-not-alone h2 {
color: var(--platinum-gray);
font-size: 42px;
padding-top: 10px;
}

.story-intro h2 {
font-family: var(--galano-bold);
font-size: 30px;
line-height: 1.2;
color: #fff;
}

.founders-challenges-container .founders-challenges-box,
.founders-challenges-container .founders-challenges-box-two {
width: 84vw;
max-width: 84vw;
background-image: var(--smoke-stack-gradient-left-to-right);
background-origin: border-box;
background-clip: padding-box, border-box;
}

.section__inner {
background-image: var(--smoke-stack-gradient-left-to-right);
background-origin: border-box;
background-clip: padding-box, border-box;
}
}

.founder-mobile-animation {
display: none;
}

@media (max-width: 767px) {
.founder-mobile-animation {
display: block;
position: relative;
top: 12px;
}
.you-are-not-alone {
position: relative;
padding-bottom: 130px !important;
}
.story-intro h2 span {
display: block;
}

.early-stage-main > .smoke-stack-gradient-section:last-of-type {
width: 84vw;
max-width: 84vw;
min-height: clamp(430px, 112vw, 540px);
padding: 46px 20px 50px;
justify-content: space-evenly;
}

.early-stage-main > .smoke-stack-gradient-section:last-of-type .sub-heading {
font-size: clamp(26px, 7vw, 34px);
line-height: 1.18;
}

.early-stage-main > .smoke-stack-gradient-section:last-of-type p {
margin-top: 0;
}
}

.you-are-not-alone .gradient-text {
display: table;
margin: 0 auto;
background: linear-gradient(
90deg,
#02bcdd 0%,
#06d1e5 22.09%,
#64eda8 51.94%,
#d0f88d 100%
);

-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
@media (min-width: 1025px) and (max-height: 650px) {
.early-stage-hero-banner {
min-height: 860px;
}

.hero-subtext {
margin-bottom: 48px;
transform: none;
}

.slide-content h3 {
font-size: 2vw;
}
}

@media (min-width: 768px) and (max-width: 1024px) {
.early-stage-hero-banner {
min-height: 98vh;
}

.hero-content img {
width: clamp(560px, 74vw, 760px);
margin-top: 0;
}

.hero-subtext {
font-size: 30px;
margin-bottom: clamp(22px, 3.8vh, 42px);
}

.founders-challenges-box-content p {
font-size: 33px;
}
.you-are-not-alone {
height: 40vh;
}

.website-footer-sticky-copy {
display: none !important;
}
.empower-journey-wire-wrapper {
top: 18%;
position: relative;
}
.unlock-possibilities-wire-wrapper {
min-height: 18vh;
position: relative;
}

.founders-challenges-container .founders-challenges-box img,
.founders-challenges-container .founders-challenges-box-two img {
width: 350px;
}
.feature-grid .card h3 {
font-size: 4vw;
}

.slide-cta {
min-width: 260px;
}

.slide-cta a {
width: 100%;
text-align: center;
white-space: nowrap;
padding-left: 28px;
padding-right: 28px;
}

.founders-challenges-container .wires {
margin-top: 55px;
}
}
@media (width: 768px) and (height: 1024px) {
.early-stage-hero-banner {
min-height: 94vh;
}

.hero-subtext {
font-size: 30px;
margin-bottom: 24px;
}

.founders-challenges-container .founders-challenges-box img,
.founders-challenges-container .founders-challenges-box-two img {
width: 250px;
}
.founders-challenges-box-content p {
font-size: 30px;
}
.smoke-stack-gradient-section .sub-heading {
font-size: 45px;
}
.slide-cta {
width: auto;
min-width: 260px;
max-width: 100%;
}
.empower-journey-wire-wrapper {
top: 10%;
position: relative;
}
}