/*****************************************

BODY

*****************************************/

html{
scroll-behavior:smooth;
}

body{

overflow-x:hidden;
overflow-y:auto;

background:
radial-gradient(circle at top left,#edf4ff 0%,#f9fbff 40%,#ffffff 100%);

font-family:Inter,sans-serif;

}


/*****************************************

TOP BAR

*****************************************/

.ep-topbar{

position:fixed;

top:22px;
left:50%;

transform:translateX(-50%);

width:min(1380px,94%);

height:72px;

padding:0 18px;

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

z-index:5000;

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

backdrop-filter:blur(22px);
-webkit-backdrop-filter:blur(22px);

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

border-radius:24px;

box-shadow:
0 12px 40px rgba(0,0,0,.08);

transition:.4s;

}

.ep-topbar.scrolled{

height:64px;

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

box-shadow:
0 14px 60px rgba(0,0,0,.12);

}


/*****************************************

LOGO

*****************************************/

.ep-brand{

display:flex;
align-items:center;
gap:16px;

font-size:24px;
font-weight:700;

font-family:Poppins,sans-serif;

color:#1d3b73;

}

.ep-brand-logo{

width:56px;
height:56px;

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

border-radius:18px;

background:

linear-gradient(135deg,
#4F7CFF,
#6D5CFF);

color:white;

font-size:28px;

box-shadow:

0 15px 40px rgba(79,124,255,.35);

}


/*****************************************

MENU

*****************************************/

.ep-nav{

display:flex;
align-items:center;
gap:38px;

}

.ep-nav a{

text-decoration:none;

font-weight:600;

color:#41506f;

transition:.25s;

}

.ep-nav a:hover{

color:#4F7CFF;

}


/*****************************************

LOGIN BUTTON

*****************************************/

.ep-login{

padding:14px 28px;

border-radius:999px;

background:

linear-gradient(135deg,
#4F7CFF,
#6D5CFF);

color:white;

font-weight:700;

box-shadow:
0 12px 30px rgba(79,124,255,.35);

transition:.3s;

}

.ep-login:hover{

transform:translateY(-3px);

color:white;

text-decoration:none;

}


/*****************************************

HERO

*****************************************/

.hero{

position:relative;

min-height:100vh;

display:flex;

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

overflow:hidden;

padding-top:120px;

}


/*****************************************

BACKGROUND LIGHTS

*****************************************/

.light{

position:absolute;

border-radius:50%;

filter:blur(80px);

opacity:.55;

animation:float 12s infinite ease-in-out;

}

.light1{

width:520px;
height:520px;

background:#d8e7ff;

left:-150px;
top:-80px;

}

.light2{

width:420px;
height:420px;

background:#ece4ff;

right:-100px;
top:100px;

animation-delay:2s;

}

.light3{

width:340px;
height:340px;

background:#dff8ff;

bottom:-100px;
left:40%;

animation-delay:5s;

}

@keyframes float{

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

}


/*****************************************

HERO CONTENT

*****************************************/

.hero-content{

position:relative;

z-index:5;

text-align:center;

max-width:1100px;

padding:0 30px;

}

.hero-logo{

width:170px;
height:170px;

margin:auto;

border-radius:44px;

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

background:

linear-gradient(135deg,
#4F7CFF,
#6D5CFF);

color:white;

font-size:82px;

box-shadow:

0 35px 90px rgba(79,124,255,.35);

animation:

logoFloat 5s infinite ease-in-out;

}

@keyframes logoFloat{

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

}

.hero h1{

margin-top:55px;

font-size:82px;

font-weight:800;

line-height:1.05;

font-family:Poppins;

color:#1d2b48;

}

.hero p{

margin:auto;
margin-top:30px;

max-width:780px;

font-size:24px;

line-height:1.8;

color:#6b7890;

}


/*****************************************

BUTTONS

*****************************************/

.hero-buttons{

margin-top:55px;

display:flex;

justify-content:center;

gap:18px;

flex-wrap:wrap;

}


/*****************************************

SCROLL BUTTON

*****************************************/

.scroll-down{

position:absolute;

bottom:60px;

left:49%;

transform:translateX(-50%);

font-size:30px;

color:#4F7CFF;

animation:scrollArrow 2s infinite;

}

@keyframes scrollArrow{

0%{transform:translate(-50%,0);}
50%{transform:translate(-50%,12px);}
100%{transform:translate(-50%,0);}

}


/*****************************************

REVEAL

*****************************************/

.reveal{

opacity:0;

transform:

translateY(70px);

transition:

opacity 1s,
transform 1s;

}

.reveal.visible{

opacity:1;

transform:none;

}


/*****************************************

RESPONSIVE

*****************************************/

@media(max-width:991px){

.ep-nav{

display:none;

}

.hero h1{

font-size:48px;

}

.hero p{

font-size:19px;

}

.hero-logo{

width:120px;
height:120px;

font-size:56px;

}

}



/************************************************

VISION SECTIONS

************************************************/

.vision-section{

padding:180px 0;

position:relative;

overflow:hidden;

}

.vision-grid{

display:grid;

grid-template-columns:

1fr
1.1fr;

gap:90px;

align-items:center;

}


/************************************************

TEXT

************************************************/

.vision-tag{

display:inline-flex;

padding:10px 22px;

border-radius:999px;

background:#eef4ff;

color:#4f7cff;

font-weight:700;

margin-bottom:30px;

}

.vision-text h2{

font-size:68px;

line-height:1.05;

font-family:Poppins;

font-weight:800;

color:#1d2b48;

margin-bottom:35px;

}

.vision-text p{

font-size:22px;

line-height:2;

color:#6d7892;

max-width:700px;

}


/************************************************

WINDOW

************************************************/

.floating-window{

background:white;

border-radius:38px;

padding:18px;

box-shadow:

0 50px 120px rgba(0,0,0,.12);

transition:1s;

transform:

perspective(1800px)

rotateY(-12deg)

rotateX(6deg);

}

.floating-window:hover{

transform:

perspective(1800px)

rotateY(0deg)

rotateX(0deg)

scale(1.02);

}

.window-header{

display:flex;

gap:10px;

padding-bottom:16px;

}

.window-header span{

width:13px;
height:13px;

border-radius:50%;

}

.window-header span:nth-child(1){

background:#ff5f57;

}

.window-header span:nth-child(2){

background:#febc2e;

}

.window-header span:nth-child(3){

background:#28c840;

}

.dashboard-image{

width:100%;

border-radius:22px;

display:block;

}


/************************************************

FULL SCREEN FEATURE

************************************************/

.feature-highlight{

min-height:100vh;

display:flex;

align-items:center;

justify-content:center;

padding:120px 20px;

}

.feature-highlight.light{

background:

linear-gradient(

180deg,

#ffffff,

#f8fbff

);

}

.feature-card{

max-width:900px;

text-align:center;

}

.feature-card small{

display:inline-block;

padding:10px 20px;

border-radius:999px;

background:#eef4ff;

color:#4f7cff;

font-size:15px;

font-weight:700;

margin-bottom:30px;

}

.feature-card h2{

font-size:74px;

line-height:1.05;

font-family:Poppins;

font-weight:800;

color:#1d2b48;

margin-bottom:40px;

}

.feature-card p{

font-size:26px;

line-height:2;

color:#6d7892;

}


/************************************************

IMAGE SCALE

************************************************/

.dashboard-image{

transform:scale(.90);

opacity:.6;

transition:

1.2s;

}

.visible .dashboard-image{

transform:scale(1);

opacity:1;

}


/************************************************

RESPONSIVE

************************************************/

@media(max-width:1000px){

.vision-grid{

grid-template-columns:1fr;

}

.vision-text{

text-align:center;

}

.vision-text p{

margin:auto;

}

.vision-text h2{

font-size:48px;

}

.feature-card h2{

font-size:46px;

}

.feature-card p{

font-size:20px;

}

}





/*********************************************

STATEMENT

*********************************************/

.statement{

min-height:100vh;

display:flex;

justify-content:center;

align-items:center;

padding:120px 30px;

}

.statement-content{

text-align:center;

max-width:900px;

}

.statement h2{

font-family:Poppins;

font-size:84px;

font-weight:800;

line-height:1.05;

margin-bottom:40px;

color:#1d2b48;

}

.statement p{

font-size:26px;

line-height:2;

color:#6d7892;

}


/*********************************************

RESPONSIVE

*********************************************/

@media(max-width:1100px){

.cards-track{

padding-left:60vw;

}

.floating-card{

width:360px;

}

.statement h2{

font-size:52px;

}

.experience-title h2{

font-size:50px;

}

}




/************************************************

IMMERSION

************************************************/

.immersion{

height:420vh;

position:relative;

background:

linear-gradient(

180deg,

#f9fbff,

white,

#f8fbff

);

}

.immersion-sticky{

position:sticky;

top:0;

height:100vh;

overflow:hidden;

display:flex;

justify-content:center;

align-items:center;

}


/************************************************

DEVICE

************************************************/

.device-frame{

position:absolute;

width:950px;

max-width:92vw;

border-radius:42px;

padding:18px;

background:white;

box-shadow:

0 60px 140px rgba(0,0,0,.16);

transition:

transform .3s linear,

opacity .35s;

}

.device-screen{

    width:100%;
    display:block;
    border-radius:26px;

    opacity:1;

    transition:
        opacity 1s ease,
        transform 1s ease;

}


/************************************************

TEXT

************************************************/

.story{

position:absolute;

left:6%;
top:50%;

transform:translateY(-50%);

max-width:520px;

padding:40px 45px;

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

backdrop-filter:blur(4px);
-webkit-backdrop-filter:blur(24px);

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

border-radius:30px;

box-shadow:
0 30px 80px rgba(0,0,0,.12);

opacity:0;

transition:
opacity .8s,
transform .8s;

pointer-events:none;

z-index:100;

}

.story.active{

opacity:1;

transform:

translateY(-50%)

translateX(0);

}

.story small{

display:inline-flex;

padding:10px 20px;

border-radius:999px;

background:#eef4ff;

color:#4f7cff;

font-weight:700;

margin-bottom:25px;

}

.story h2{

font-family:Poppins;

font-size:70px;

font-weight:800;

line-height:1.05;

margin-bottom:28px;

color:#1d2b48;

}

.story p{

font-size:22px;

line-height:2;

color:#6b7892;

}


/************************************************

NUMBERS

************************************************/

.numbers{

padding:170px 0;

background:white;

}

.numbers-grid{

display:grid;

grid-template-columns:

repeat(4,1fr);

gap:50px;

}

.number{

text-align:center;

padding:60px 30px;

background:white;

border-radius:30px;

box-shadow:

0 20px 70px rgba(0,0,0,.08);

transition:.35s;

}

.number:hover{

transform:

translateY(-12px);

}

.number h2{

font-size:72px;

font-family:Poppins;

font-weight:800;

background:

linear-gradient(

135deg,

#4f7cff,

#6d5cff

);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

margin-bottom:20px;

}

.number p{

font-size:20px;

color:#6b7892;

}


/************************************************

RESPONSIVE

************************************************/

@media(max-width:1100px){

.story{

left:50%;

transform:

translate(-50%,-50%);

text-align:center;

width:90%;

}

.story.active{

transform:

translate(-50%,-50%);

}

.story h2{

font-size:46px;

}

.story p{

font-size:19px;

}

.device-frame{

width:95vw;

}

.numbers-grid{

grid-template-columns:

repeat(2,1fr);

}

}

@media(max-width:700px){

.numbers-grid{

grid-template-columns:1fr;

}

}



/****************************************

ECOSYSTEM

****************************************/

.ecosystem{

padding:180px 0;

background:

linear-gradient(

180deg,

white,

#f9fbff

);

}

.ecosystem-title{

text-align:center;

max-width:900px;

margin:auto auto 90px;

}

.ecosystem-title small{

display:inline-flex;

padding:10px 20px;

border-radius:999px;

background:#eef4ff;

color:#4f7cff;

font-weight:700;

margin-bottom:25px;

}

.ecosystem-title h2{

font-family:Poppins;

font-size:70px;

font-weight:800;

line-height:1.05;

margin-bottom:30px;

color:#1d2b48;

}

.ecosystem-title p{

font-size:22px;

color:#6b7892;

}



/****************************************

GRID

****************************************/

.ecosystem-grid{

display:grid;

grid-template-columns:

repeat(12,1fr);

gap:28px;

}

.eco-card{

grid-column:span 4;

background:white;

border-radius:34px;

padding:34px;

overflow:hidden;

box-shadow:

0 30px 80px rgba(0,0,0,.08);

transition:.45s;

position:relative;

}

.eco-card:hover{

transform:

translateY(-12px);

box-shadow:

0 40px 100px rgba(0,0,0,.12);

}

.eco-large{

grid-column:span 8;

}

.eco-wide{

grid-column:span 8;

display:flex;

align-items:center;

justify-content:space-between;

gap:40px;

}

.eco-wide img{

width:330px;

border-radius:22px;

}

.eco-large img{

margin-top:35px;

border-radius:24px;

width:100%;

}



/****************************************

ICON

****************************************/

.eco-icon{

width:74px;
height:74px;

border-radius:22px;

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

font-size:32px;

color:white;

background:

linear-gradient(

135deg,

#4f7cff,

#6d5cff

);

margin-bottom:28px;

}

.reading{

background:

linear-gradient(

135deg,

#00b4d8,

#48cae4

);

}

.speaking{

background:

linear-gradient(

135deg,

#ff6b35,

#ff8a5b

);

}

.games{

background:

linear-gradient(

135deg,

#20bf6b,

#2ed573

);

}

.podcast{

background:

linear-gradient(

135deg,

#8a63ff,

#6d5cff

);

}

.homework{

background:

linear-gradient(

135deg,

#ffb703,

#f48c06

);

}

.certificate{

background:

linear-gradient(

135deg,

#ffd166,

#f4a261

);

}



/****************************************

TEXT

****************************************/

.eco-card h3{

font-size:34px;

font-family:Poppins;

margin-bottom:18px;

color:#1d2b48;

}

.eco-card p{

font-size:19px;

line-height:1.9;

color:#6b7892;

}



/****************************************

FLOATING PANEL

****************************************/

.floating-features{

position:relative;

padding:220px 0;

overflow:hidden;

background:white;

}

.floating-panel{

position:relative;

z-index:10;

max-width:900px;

margin:auto;

text-align:center;

padding:90px;

border-radius:40px;

background:

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

backdrop-filter:blur(24px);

box-shadow:

0 40px 120px rgba(0,0,0,.10);

}

.floating-panel h2{

font-size:72px;

font-family:Poppins;

font-weight:800;

line-height:1.05;

margin-bottom:35px;

color:#1d2b48;

}

.floating-panel p{

font-size:24px;

line-height:2;

margin-bottom:50px;

color:#6b7892;

}



/****************************************

LIGHTS

****************************************/

.floating-circle{

position:absolute;

border-radius:50%;

filter:blur(80px);

opacity:.45;

animation:float 12s infinite ease-in-out;

}

.circle1{

width:360px;
height:360px;

background:#dfe8ff;

left:-80px;
top:80px;

}

.circle2{

width:300px;
height:300px;

background:#ece4ff;

right:-60px;
top:220px;

animation-delay:2s;

}

.circle3{

width:340px;
height:340px;

background:#ddf8ff;

bottom:-80px;
left:40%;

animation-delay:5s;

}



/****************************************

RESPONSIVE

****************************************/

@media(max-width:1100px){

.eco-card,
.eco-large,
.eco-wide{

grid-column:span 12;

}

.eco-wide{

flex-direction:column;

}

.ecosystem-title h2{

font-size:48px;

}

.floating-panel{

padding:50px 35px;

}

.floating-panel h2{

font-size:46px;

}

.floating-panel p{

font-size:20px;

}

}



/************************************************
SECTION HEADINGS
************************************************/

.section-heading{

text-align:center;

margin-bottom:90px;

}

.section-heading small{

display:inline-flex;

padding:10px 22px;

background:#eef4ff;

border-radius:999px;

font-weight:700;

color:#4f7cff;

margin-bottom:22px;

}

.section-heading h2{

font-family:Poppins;

font-size:64px;

font-weight:800;

margin-bottom:25px;

color:#1d2b48;

}

.section-heading p{

font-size:22px;

color:#6b7892;

}



/************************************************
TESTIMONIALS
************************************************/

.testimonials{

padding:180px 0;

background:white;

}

.testimonial-grid{

display:grid;

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

gap:35px;

}

.testimonial-card{

padding:40px;

border-radius:32px;

background:white;

box-shadow:0 30px 80px rgba(0,0,0,.08);

transition:.4s;

}

.testimonial-card:hover{

transform:translateY(-10px);

}

.quote{

font-size:42px;

color:#4f7cff;

margin-bottom:25px;

}

.author{

display:flex;

gap:15px;

margin-top:30px;

align-items:center;

}

.author img{

width:60px;

height:60px;

border-radius:50%;

}

.author h4{

margin:0;

font-size:18px;

}

.author span{

color:#8b96aa;

font-size:14px;

}



/************************************************
PRICING
************************************************/

.pricing-section{

padding:180px 0;

background:#f8fbff;

}

.pricing-grid{

display:grid;

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

gap:35px;

}

.price-card{

background:white;

padding:45px;

border-radius:34px;

box-shadow:0 25px 70px rgba(0,0,0,.08);

position:relative;

transition:.4s;

}

.price-card:hover{

transform:translateY(-12px);

}

.featured{

transform:scale(1.05);

border:2px solid #4f7cff;

}

.popular{

position:absolute;

top:-16px;

left:50%;

transform:translateX(-50%);

padding:10px 24px;

background:#4f7cff;

color:white;

border-radius:999px;

font-weight:700;

}

.price{

font-size:68px;

font-weight:800;

font-family:Poppins;

margin:30px 0;

color:#1d2b48;

}

.price span{

font-size:18px;

font-weight:500;

}

.price-card ul{

list-style:none;

padding:0;

margin:35px 0;

}

.price-card li{

margin-bottom:18px;

}

.price-card i{

color:#20bf6b;

margin-right:10px;

}



/************************************************
CTA
************************************************/

.final-cta{

position:relative;

overflow:hidden;

padding:220px 20px;

text-align:center;

background:linear-gradient(180deg,#ffffff,#eef5ff);

}

.cta-content{

position:relative;

z-index:5;

max-width:900px;

margin:auto;

}

.cta-content h2{

font-size:82px;

font-family:Poppins;

font-weight:800;

line-height:1.05;

margin-bottom:35px;

color:#1d2b48;

}

.cta-content p{

font-size:24px;

line-height:2;

color:#6b7892;

margin-bottom:55px;

}



/************************************************
ORB
************************************************/

.gradient-orb{

position:absolute;

border-radius:50%;

filter:blur(90px);

opacity:.45;

}

.orb1{

width:380px;
height:380px;

background:#dce8ff;

left:-100px;
top:60px;

}

.orb2{

width:320px;
height:320px;

background:#ece4ff;

right:-80px;
bottom:60px;

}



/************************************************
FOOTER
************************************************/

.landing-footer{

padding:80px 0;

background:#111827;

color:white;

}

.footer-grid{

display:grid;

grid-template-columns:2fr 1fr 1fr 1fr;

gap:50px;

}

.footer-grid h5{

margin-bottom:20px;

}

.footer-grid a{

display:block;

margin-bottom:12px;

color:#c7d0df;

text-decoration:none;

transition:.3s;

}

.footer-grid a:hover{

color:white;

padding-left:8px;

}

.footer-grid p{

color:#c7d0df;

}

.footer-bottom{

display:flex;

justify-content:space-between;

margin-top:40px;

color:#94a3b8;

}



/************************************************
RESPONSIVE
************************************************/

@media(max-width:1100px){

.testimonial-grid,
.pricing-grid,
.footer-grid{

grid-template-columns:1fr;

}

.featured{

transform:none;

}

.section-heading h2{

font-size:46px;

}

.cta-content h2{

font-size:48px;

}

.footer-bottom{

flex-direction:column;

gap:15px;

text-align:center;

}

}



/************************************************
APPLE SHOWCASE CAROUSEL
************************************************/


.showcase-carousel{

position:relative;

max-width:1400px;

margin:auto;

padding:40px 0;

overflow:hidden;

}

.showcase-track{

position:relative;

height:720px;

display:flex;

align-items:center;

justify-content:center;

}


/************************************************
SLIDES
************************************************/

.showcase-slide{

position:absolute;

width:840px;

max-width:72vw;

transition:

transform .85s cubic-bezier(.22,.61,.36,1),
opacity .65s ease,
filter .65s ease;

cursor:pointer;

user-select:none;

will-change:transform;

}


/************************************************
CENTER
************************************************/

.showcase-slide.active{

transform:
translateX(0)
scale(1);

opacity:1;

z-index:30;

}


/************************************************
LEFT
************************************************/

.showcase-slide.prev{

transform:
translateX(-63%)
scale(.82);

opacity:.42;

z-index:20;

}


/************************************************
RIGHT
************************************************/

.showcase-slide.next{

transform:
translateX(63%)
scale(.82);

opacity:.42;

z-index:20;

}


/************************************************
HIDDEN
************************************************/

.showcase-slide.hidden{

transform:scale(.65);

opacity:0;

pointer-events:none;

z-index:1;

}


/************************************************
IMAGE
************************************************/

.showcase-slide img{

width:100%;

display:block;

border-radius:34px;

box-shadow:

0 40px 120px rgba(0,0,0,.14);

transition:

transform .45s,
box-shadow .45s;

}

.showcase-slide.active img:hover{

transform:scale(1.02);

box-shadow:

0 60px 140px rgba(0,0,0,.18);

}


/************************************************
CAPTION
************************************************/

.showcase-caption{

margin-top:34px;

text-align:center;

max-width:720px;

margin-left:auto;

margin-right:auto;

transition:.45s;

}

.showcase-slide:not(.active) .showcase-caption{

opacity:0;

transform:translateY(15px);

pointer-events:none;

}


/************************************************
PREMIUM NAVIGATION ARROWS
************************************************/

.showcase-arrow{

position:absolute;

top:50%;

transform:translateY(-50%);

width:72px;
height:72px;

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

border:none;
border-radius:24px;

cursor:pointer;

background:
linear-gradient(
180deg,
rgba(255,255,255,.92),
rgba(244,248,255,.88)
);

backdrop-filter:blur(22px);
-webkit-backdrop-filter:blur(22px);

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

box-shadow:
0 15px 45px rgba(79,124,255,.12),
0 5px 18px rgba(0,0,0,.05);

transition:
all .35s cubic-bezier(.22,.61,.36,1);

z-index:100;

}

.showcase-arrow i{

font-size:24px;

font-weight:700;

color:#4F7CFF;

transition:.35s;

}

.showcase-arrow:hover{

transform:
translateY(-50%)
translateY(-4px)
scale(1.05);

background:
linear-gradient(
135deg,
#4F7CFF,
#6D5CFF);

box-shadow:
0 25px 60px rgba(79,124,255,.35);

}

.showcase-arrow:hover i{

color:white;

transform:scale(1.15);

}
.showcase-arrow:active{

transform:
translateY(-50%)
scale(.95);

}

.showcase-arrow.prev{

left:22px;

}

.showcase-arrow.next{

right:22px;

}

@media(max-width:992px){

.showcase-arrow{

width:56px;
height:56px;

border-radius:18px;

}

.showcase-arrow i{

font-size:20px;

}

}


/************************************************
PREMIUM PAGE INDICATOR
************************************************/

.showcase-dots{

display:flex;

justify-content:center;

align-items:center;

gap:14px;

margin-top:55px;

position:relative;

z-index:100;

}

.showcase-dots .dot{

position:relative;

width:12px;
height:12px;

padding:0;

border:none;

border-radius:999px;

cursor:pointer;

background:#d7deea;

opacity:.7;

transition:

width .45s cubic-bezier(.22,.61,.36,1),
height .45s cubic-bezier(.22,.61,.36,1),
background .35s,
opacity .35s,
transform .35s,
box-shadow .35s;

}

.showcase-dots .dot.active{

width:54px;

height:12px;

background:

linear-gradient(
90deg,
#4F7CFF,
#6D5CFF
);

opacity:1;

box-shadow:

0 6px 18px rgba(79,124,255,.35);

}

.showcase-dots .dot:hover{

transform:scale(1.25);

opacity:1;

background:#b8c7ff;

}

.showcase-dots .dot.active::after{

content:"";

position:absolute;

left:6px;
right:6px;
top:2px;
bottom:2px;

border-radius:999px;

background:

rgba(255,255,255,.45);

}

.showcase-dots .dot.active{

animation:dotPulse .8s;

}

@keyframes dotPulse{

0%{

transform:scale(.8);

}

60%{

transform:scale(1.08);

}

100%{

transform:scale(1);

}

}

/* ==========================================
   APPLE CAROUSEL — MOBILE
========================================== */
@media (max-width:768px){

.showcase-section{
    padding:80px 0 60px;
}

.showcase-header{
    max-width:100%;
    padding:0 22px;
    margin-bottom:26px;
    text-align:center;
}

.showcase-header h2{
    font-size:42px;
    line-height:1.05;
    margin-bottom:16px;
}

.showcase-header p{
    font-size:17px;
    line-height:1.7;
    max-width:100%;
    margin:0 auto;
}

/* Give the active card room to breathe */
.showcase-carousel{
    padding:24px 0 0;
    overflow:visible;
}

/* Keep the desktop engine but reduce its footprint */
.showcase-track{
    height:470px;
}

/* Wider cards */
.showcase-slide{
    width:92vw;
    max-width:92vw;
}

.showcase-slide.prev{
    transform:translateX(-48%) scale(.82);
    opacity:.28;
}

.showcase-slide.next{
    transform:translateX(48%) scale(.82);
    opacity:.28;
}

.showcase-slide img{
    border-radius:22px;
}

/* Caption */
.showcase-caption{
    margin-top:20px;
    padding:0 16px;
}

.showcase-caption h3{
    font-size:28px;
    margin-bottom:10px;
}

.showcase-caption p{
    font-size:17px;
    line-height:1.65;
}

/* Dots closer to the card */
.showcase-dots{
    margin-top:20px;
    gap:10px;
}

/* Hide arrows */
.showcase-arrow{
    display:none;
}

}


/* ==========================================
   MOBILE
========================================== */


@media (max-width:768px){

.statement{

    min-height:auto;
    padding:70px 24px;

}

.statement-content{

    max-width:600px;

}

.statement h2{

    font-size:42px;
    margin-bottom:18px;

}

.statement p{

    font-size:17px;
    line-height:1.7;
    margin:0 auto;
    max-width:32ch;

}

}


@media (max-width:900px){

.immersion{

height:auto;
padding:80px 0;

}

.immersion-sticky{

position:relative;
display:block;
height:auto;
overflow:visible;

}

.device-frame{

position:relative;
width:100%;
max-width:420px;
margin:0 auto 40px;
transform:none!important;

}

.story{

position:relative;

left:auto;
top:auto;

transform:none!important;

opacity:1;

width:min(92%,480px);

margin:0 auto 80px;

padding:0;

background:none;

backdrop-filter:none;

border:none;

box-shadow:none;

text-align:center;

}

.story h2{

font-size:40px;

}

.story p{

font-size:18px;

line-height:1.8;

}

}


@media screen and (max-width: 991px){

html,
body{
    overflow-x:hidden;
}

section{
    overflow:hidden;
}

/* Top bar */

.ep-topbar{

    top:10px;
    width:96%;
    height:60px;
    border-radius:18px;

}

.ep-brand{

    font-size:20px;
    gap:10px;

}

.ep-brand-logo{

    width:42px;
    height:42px;
    font-size:20px;

}

.ep-login{

    padding:10px 18px;
    font-size:14px;

}

/* Hero */

.hero{

    min-height:auto;
    padding:140px 20px 80px;

}

.hero-logo{

    width:100px;
    height:100px;
    font-size:46px;

}

.hero h1{

    font-size:44px;

}

.hero p{

    font-size:18px;

}

/* General titles */

.vision-text h2,
.feature-card h2,
.statement h2,
.story h2,
.ecosystem-title h2,
.section-heading h2,
.floating-panel h2,
.cta-content h2,
.experience-title h2{

    font-size:42px;

}

/* General text */

.vision-text p,
.feature-card p,
.statement p,
.story p,
.ecosystem-title p,
.section-heading p,
.cta-content p{

    font-size:18px;

}

/* Reduce huge vertical spaces */

.vision-section,
.ecosystem,
.testimonials,
.pricing-section,
.final-cta,
.floating-features,
.numbers{

    padding:90px 0;

}

/* Grid sections */

.vision-grid{

    grid-template-columns:1fr;
    gap:40px;

}

.numbers-grid,
.testimonial-grid,
.pricing-grid,
.footer-grid{

    grid-template-columns:1fr;

}

.ecosystem-grid{

    grid-template-columns:1fr;

}

.eco-card,
.eco-large,
.eco-wide{

    grid-column:auto;

}

.eco-wide{

    display:block;

}

.eco-wide img{

    width:100%;
    margin-top:25px;

}

/* Images */

.dashboard-image,
.device-screen{

    width:100%;
    height:auto;

}

/* Decorative effects */

.light,
.gradient-orb,
.floating-circle{

    display:none;

}

}

/* =========================================================
   EasyPeasyBe LANDING — PEPPY LAYER
   Uses the existing EasyPeasy UI variables from skin.css
   and layout conventions from structure.css.
   ========================================================= */

:root{
  --landing-purple:#7C5CFF;
  --landing-pink:#F472B6;
  --landing-yellow:#FFB547;
  --landing-mint:#16C7B7;
  --landing-blue:#4F7CFF;
  --landing-green:#28C76F;
}

/* ---------- GLOBAL LANDING ---------- */

body{
  background:var(--ep-body);
}

.hero,
.vision-section,
.feature-highlight,
.showcase-section,
.statement,
.immersion,
.numbers,
.ecosystem,
.floating-features,
.testimonials,
.pricing-section,
.final-cta,
.landing-footer{
  position:relative;
  overflow:hidden;
}

.container{
  position:relative;
  z-index:2;
}

/* ---------- TOP BAR ---------- */

.ep-topbar{
  background:rgba(255,255,255,.88) !important;
  border-bottom:1px solid rgba(79,124,255,.10);
  box-shadow:0 8px 30px rgba(36,50,75,.07);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.ep-brand{
  color:var(--ep-text) !important;
}

.ep-brand-logo{
  background:linear-gradient(135deg,var(--ep-primary),var(--ep-secondary)) !important;
  box-shadow:0 8px 22px rgba(79,124,255,.28);
  transform:rotate(-3deg);
}

.ep-nav a{
  color:var(--ep-text-light) !important;
  font-weight:600;
  transition:.2s ease;
}

.ep-nav a:hover{
  color:var(--ep-primary) !important;
  transform:translateY(-1px);
}

.ep-login{
  background:var(--ep-primary) !important;
  color:#fff !important;
  border-radius:var(--ep-button-radius) !important;
  box-shadow:var(--ep-shadow-sm);
}

/* ---------- HERO ---------- */

.hero{
  min-height:calc(100vh - 76px);
  background:
    radial-gradient(circle at 12% 22%,rgba(124,92,255,.20),transparent 25%),
    radial-gradient(circle at 84% 18%,rgba(22,199,183,.20),transparent 24%),
    radial-gradient(circle at 76% 82%,rgba(244,114,182,.18),transparent 26%),
    linear-gradient(145deg,#F8FAFF 0%,#EEF4FF 45%,#FFF8FC 100%);
}

.hero::before{
  content:"";
  position:absolute;
  width:520px;
  height:520px;
  border-radius:50%;
  right:-180px;
  top:80px;
  background:linear-gradient(135deg,rgba(79,124,255,.20),rgba(124,92,255,.05));
  filter:blur(2px);
}

.hero::after{
  content:"";
  position:absolute;
  width:280px;
  height:280px;
  border-radius:50%;
  left:-120px;
  bottom:60px;
  background:rgba(22,199,183,.14);
}

.hero-content{
  max-width:950px !important;
}

.hero-logo{
  background:linear-gradient(135deg,var(--ep-primary),var(--landing-purple)) !important;
  box-shadow:0 15px 35px rgba(79,124,255,.30) !important;
  border:5px solid rgba(255,255,255,.8);
}

.hero h1{
  background:linear-gradient(
    90deg,
    #24324B 0%,
    #4F7CFF 32%,
    #7C5CFF 62%,
    #F472B6 100%
  );
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  letter-spacing:-.045em;
}

.hero p{
  max-width:760px;
  color:var(--ep-text-light);
}

/* Three audience chips make the page immediately speak to both groups. */

.peppy-audience{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  margin:26px 0 8px;
}

.peppy-audience-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 15px;
  border-radius:999px;
  background:#fff;
  font-size:.86rem;
  font-weight:700;
  box-shadow:0 8px 24px rgba(36,50,75,.08);
  border:1px solid rgba(255,255,255,.9);
}

.peppy-audience-chip.teacher{
  color:#4F7CFF;
  background:#EEF4FF;
}

.peppy-audience-chip.pupil{
  color:#D9468A;
  background:#FFF0F7;
}

.peppy-audience-chip.ai{
  color:#6E5BFF;
  background:#F2EFFF;
}

.peppy-audience-chip i{
  font-size:1rem;
}

.ep-btn-primary{
  background:linear-gradient(135deg,var(--ep-primary),var(--ep-secondary)) !important;
  box-shadow:0 12px 28px rgba(79,124,255,.25) !important;
}

.ep-btn-outline{
  background:#fff !important;
  border-color:rgba(79,124,255,.35) !important;
}

/* ---------- SECTION HEADINGS ---------- */

.vision-tag,
.showcase-tag,
.section-heading small,
.ecosystem-title small{
  color:var(--ep-primary) !important;
  font-weight:800 !important;
}

.vision-tag::before,
.showcase-tag::before,
.section-heading small::before,
.ecosystem-title small::before{
  content:"✦";
  margin-right:7px;
  color:var(--landing-pink);
}

/* ---------- VISION ---------- */

.vision-section{
  background:
    radial-gradient(circle at 100% 0,rgba(79,124,255,.12),transparent 28%),
    #fff;
}

.vision-image .floating-window{
  border:8px solid #fff !important;
  box-shadow:
    0 25px 70px rgba(79,124,255,.20),
    0 0 0 1px rgba(79,124,255,.08);
}

.window-header span:first-child{background:#EA5455 !important;}
.window-header span:nth-child(2){background:#FFB547 !important;}
.window-header span:nth-child(3){background:#28C76F !important;}

/* ---------- AI / SPEAKING ---------- */

.peppy-ai-section{
  background:
    radial-gradient(circle at 15% 20%,rgba(124,92,255,.18),transparent 25%),
    linear-gradient(135deg,#F6F2FF,#FFFFFF 60%);
}

.peppy-ai-section .feature-card{
  border:1px solid rgba(124,92,255,.14);
  box-shadow:0 25px 70px rgba(124,92,255,.13);
}

.peppy-ai-section .feature-card small{
  color:#6E5BFF !important;
  font-weight:800;
}

.peppy-ai-section .feature-card small::before{
  content:"🤖 ";
}

.peppy-speaking-section{
  background:
    radial-gradient(circle at 85% 25%,rgba(22,199,183,.17),transparent 27%),
    linear-gradient(135deg,#EEFFFC,#FFFFFF 65%);
}

.peppy-speaking-section .feature-card{
  border:1px solid rgba(22,199,183,.15);
  box-shadow:0 25px 70px rgba(22,199,183,.11);
}

.peppy-speaking-section .feature-card small{
  color:#119E92 !important;
  font-weight:800;
}

.peppy-speaking-section .feature-card small::before{
  content:"🎤 ";
}

/* ---------- SHOWCASE ---------- */

.peppy-showcase{
  background:
    linear-gradient(180deg,#FFFFFF 0%,#F5F8FF 100%);
}

.showcase-slide{
  border:1px solid rgba(79,124,255,.10);
  box-shadow:0 25px 70px rgba(36,50,75,.12);
}

.showcase-caption{
  background:linear-gradient(
    180deg,
    rgba(255,255,255,.94),
    rgba(248,250,255,.98)
  ) !important;
}

.showcase-caption h3{
  color:var(--ep-primary);
}

.showcase-arrow{
  background:#fff !important;
  color:var(--ep-primary) !important;
  border:1px solid rgba(79,124,255,.12) !important;
  box-shadow:var(--ep-shadow-md);
}

.showcase-arrow:hover{
  background:var(--ep-primary) !important;
  color:#fff !important;
}

/* ---------- STATEMENT ---------- */

.peppy-statement{
  background:
    radial-gradient(circle at 20% 30%,rgba(255,181,71,.25),transparent 25%),
    radial-gradient(circle at 80% 70%,rgba(244,114,182,.22),transparent 25%),
    linear-gradient(135deg,#FFF8EA,#FFF2F8);
}

.peppy-statement h2{
  background:linear-gradient(90deg,#F59E0B,#EC4899,#7C5CFF);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ---------- IMMERSIVE EXPERIENCE ---------- */

.peppy-immersion{
  background:
    radial-gradient(circle at 10% 20%,rgba(79,124,255,.14),transparent 25%),
    radial-gradient(circle at 90% 70%,rgba(22,199,183,.14),transparent 25%),
    #F7F9FE;
}

.story small{
  color:var(--ep-primary) !important;
  font-weight:800;
}

.story:nth-child(2) small{color:#7C5CFF !important;}
.story:nth-child(3) small{color:#119E92 !important;}

/* ---------- NUMBERS ---------- */

.peppy-numbers{
  background:#fff;
}

.peppy-numbers .number{
  position:relative;
  padding:24px 15px;
}

.peppy-numbers .number:nth-child(1) h2{color:var(--ep-primary);}
.peppy-numbers .number:nth-child(2) h2{color:#7C5CFF;}
.peppy-numbers .number:nth-child(3) h2{color:#16A99D;}
.peppy-numbers .number:nth-child(4) h2{color:#F59E0B;}

.peppy-numbers .number::after{
  content:"";
  position:absolute;
  width:8px;
  height:8px;
  border-radius:50%;
  background:currentColor;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
}

/* ---------- ECOSYSTEM ---------- */

.peppy-ecosystem{
  background:
    radial-gradient(circle at 90% 10%,rgba(124,92,255,.13),transparent 24%),
    #F5F8FE;
}

.peppy-eco-card,
.peppy-eco-ai{
  transition:transform .28s ease,box-shadow .28s ease;
}

.peppy-eco-card:hover,
.peppy-eco-ai:hover{
  transform:translateY(-7px);
  box-shadow:0 25px 55px rgba(36,50,75,.13) !important;
}

.peppy-eco-ai{
  border:1px solid rgba(124,92,255,.18) !important;
  background:linear-gradient(145deg,#fff,#F6F2FF) !important;
}

.peppy-eco-ai .eco-icon{
  background:linear-gradient(135deg,#6E5BFF,#D16BFF) !important;
}

.peppy-eco-card:nth-child(2) .eco-icon{
  background:linear-gradient(135deg,#16C7B7,#55E3D2) !important;
}

.peppy-eco-card:nth-child(3) .eco-icon{
  background:linear-gradient(135deg,#4F7CFF,#5FD3FF) !important;
}

.peppy-eco-card:nth-child(4) .eco-icon{
  background:linear-gradient(135deg,#FFB547,#FFD76A) !important;
}

.peppy-eco-card:nth-child(5) .eco-icon{
  background:linear-gradient(135deg,#F472B6,#FF9FD0) !important;
}

.peppy-eco-card:nth-child(6) .eco-icon{
  background:linear-gradient(135deg,#28C76F,#65E6A0) !important;
}

/* ---------- SCHOOL / SPECIAL NEEDS ---------- */

.peppy-school{
  background:
    radial-gradient(circle at 12% 30%,rgba(40,199,111,.17),transparent 25%),
    radial-gradient(circle at 88% 70%,rgba(79,124,255,.17),transparent 25%),
    linear-gradient(135deg,#F3FFF9,#F3F7FF);
}

.peppy-school .floating-panel{
  background:rgba(255,255,255,.88);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 25px 70px rgba(36,50,75,.12);
}

.peppy-school .floating-panel h2{
  background:linear-gradient(90deg,#28C76F,#4F7CFF);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ---------- TESTIMONIALS ---------- */

.peppy-testimonials{
  background:#fff;
}

.peppy-testimonials .testimonial-card{
  border:1px solid rgba(79,124,255,.10);
  box-shadow:0 18px 45px rgba(36,50,75,.08);
  transition:.25s ease;
}

.peppy-testimonials .testimonial-card:hover{
  transform:translateY(-5px);
  box-shadow:0 25px 60px rgba(36,50,75,.12);
}

.peppy-testimonials .quote{
  color:var(--ep-primary) !important;
}

.peppy-testimonials .testimonial-card:nth-child(2) .quote{
  color:#7C5CFF !important;
}

.peppy-testimonials .testimonial-card:nth-child(3) .quote{
  color:#16C7B7 !important;
}

/* ---------- PRICING ---------- */

.peppy-pricing{
  background:
    radial-gradient(circle at 50% 0,rgba(79,124,255,.12),transparent 30%),
    #F6F8FD;
}

.peppy-pricing .price-card{
  border:1px solid rgba(79,124,255,.10);
  box-shadow:0 18px 45px rgba(36,50,75,.08);
  transition:.28s ease;
}

.peppy-pricing .price-card:hover{
  transform:translateY(-8px);
  box-shadow:0 28px 65px rgba(36,50,75,.14);
}

.peppy-pricing .price-card:nth-child(1){
  border-top:5px solid #28C76F;
}

.peppy-pricing .price-card:nth-child(2){
  border-top:5px solid #4F7CFF;
}

.peppy-pricing .price-card:nth-child(3){
  border-top:5px solid #7C5CFF;
}

.peppy-pricing .price-card.featured{
  transform:translateY(-10px);
  box-shadow:0 28px 70px rgba(79,124,255,.20);
}

.peppy-pricing .popular{
  background:linear-gradient(90deg,#4F7CFF,#7C5CFF) !important;
}

/* ---------- FINAL CTA ---------- */

.peppy-final{
  background:
    radial-gradient(circle at 15% 20%,rgba(22,199,183,.35),transparent 24%),
    radial-gradient(circle at 85% 25%,rgba(244,114,182,.32),transparent 25%),
    radial-gradient(circle at 50% 90%,rgba(124,92,255,.38),transparent 30%),
    linear-gradient(135deg,#405FEF,#7049E8 50%,#9B4DCC);
}

.peppy-final h2{
  text-shadow:0 8px 30px rgba(0,0,0,.15);
}

.peppy-final .ep-btn-outline{
  background:rgba(255,255,255,.12) !important;
  color:#fff !important;
  border-color:rgba(255,255,255,.55) !important;
  backdrop-filter:blur(8px);
}

.peppy-final .ep-btn-outline:hover{
  background:#fff !important;
  color:var(--ep-primary) !important;
}

/* ---------- FOOTER ---------- */

.landing-footer{
  background:#17223B !important;
}

.landing-footer a:hover{
  color:#7FA2FF !important;
}

.footer-bottom{
  border-color:rgba(255,255,255,.12) !important;
}

/* ---------- MOBILE ---------- */

@media(max-width:768px){

  .hero{
    min-height:auto;
    padding-top:90px;
    padding-bottom:80px;
  }

  .hero h1{
    letter-spacing:-.035em;
  }

  .peppy-audience{
    gap:7px;
  }

  .peppy-audience-chip{
    padding:8px 11px;
    font-size:.78rem;
  }

  .peppy-pricing .price-card.featured{
    transform:none;
  }

  .hero::before{
    width:300px;
    height:300px;
    right:-150px;
  }
}

/* Respect reduced motion */
@media(prefers-reduced-motion:reduce){
  .peppy-eco-card,
  .peppy-eco-ai,
  .testimonial-card,
  .price-card{
    transition:none !important;
  }
}



/* =========================================================
   EasyPeasyBe LANDING — FINAL HARMONIZATION
   ---------------------------------------------------------
   Important:
   - Keeps welcome.js carousel/sticky mechanics intact.
   - Does NOT turn the landing sections into scroll containers.
   - Keeps .immersion sticky behavior intact.
   - Reduces oversized vertical spacing for a more natural flow.
   - Uses the existing EasyPeasy skin variables wherever possible.
   ========================================================= */

/* ---------- SAFE PAGE FLOW ---------- */
html{
    scroll-behavior:smooth;
    scroll-padding-top:96px;
}

body{
    overflow-x:hidden;
    overflow-y:auto;
    background:var(--ep-body);
}

/* Never clip the sticky immersion section itself.
   The sticky child needs the normal page flow. */
.hero,
.vision-section,
.feature-highlight,
.showcase-section,
.statement,
.numbers,
.ecosystem,
.floating-features,
.testimonials,
.pricing-section,
.final-cta,
.landing-footer{
    position:relative;
    overflow:clip;
}

.immersion{
    position:relative;
    overflow:visible !important;
}

.immersion-sticky{
    position:sticky;
    top:0;
}

/* ---------- TOP BAR ---------- */
.ep-topbar{
    background:rgba(255,255,255,.88);
    border-color:rgba(79,124,255,.12);
    box-shadow:0 8px 30px rgba(36,50,75,.08);
}

.ep-brand-logo{
    background:linear-gradient(135deg,var(--ep-primary),var(--ep-secondary));
    box-shadow:0 10px 28px rgba(79,124,255,.28);
}

.ep-login{
    background:linear-gradient(135deg,var(--ep-primary),var(--ep-secondary));
    box-shadow:0 10px 25px rgba(79,124,255,.25);
}

/* ---------- HERO ---------- */
.hero{
    min-height:calc(100vh - 20px);
    padding-top:110px;
    padding-bottom:70px;
    background:
        radial-gradient(circle at 12% 22%,rgba(124,92,255,.18),transparent 25%),
        radial-gradient(circle at 84% 18%,rgba(22,199,183,.17),transparent 24%),
        radial-gradient(circle at 76% 82%,rgba(244,114,182,.14),transparent 25%),
        linear-gradient(145deg,#F8FAFF 0%,#EEF4FF 48%,#FFF9FC 100%);
}

.hero-logo{
    background:linear-gradient(135deg,var(--ep-primary),#7C5CFF);
    box-shadow:0 20px 50px rgba(79,124,255,.28);
    border:5px solid rgba(255,255,255,.82);
}

.hero h1{
    background:linear-gradient(90deg,#24324B 0%,#4F7CFF 32%,#7C5CFF 62%,#F472B6 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    letter-spacing:-.045em;
}

.hero p{max-width:760px;}

/* Existing hero buttons only — no dependency on extra PHP classes. */
.hero .ep-btn-primary{
    background:linear-gradient(135deg,var(--ep-primary),var(--ep-secondary));
}

.hero .ep-btn-outline{
    background:rgba(255,255,255,.82);
    border-color:rgba(79,124,255,.35);
}

/* ---------- NORMAL SECTION RHYTHM ----------
   These replace the old 180/220px Apple-style gaps with a tighter,
   still spacious rhythm. */
.vision-section{
    padding:105px 0;
    background:
        radial-gradient(circle at 100% 0,rgba(79,124,255,.10),transparent 28%),
        #fff;
}

.vision-grid{gap:65px;}

.feature-highlight{
    min-height:auto;
    padding:105px 20px;
}

.feature-highlight.light{
    background:linear-gradient(180deg,#fff,#F7FAFF);
}

.feature-card h2{margin-bottom:25px;}
.feature-card p{line-height:1.75;}

/* ---------- CAROUSEL: PRESERVE THE ENGINE ----------
   Keep absolute slides, track height, arrows and overflow behavior.
   Only tighten the surrounding vertical padding. */
.showcase-section{
    padding:105px 0 75px;
    background:linear-gradient(180deg,#fff,#F5F8FF);
}

.showcase-carousel{
    padding:20px 0 0;
    overflow:hidden;
}

.showcase-track{
    height:720px;
}

.showcase-slide{
    border:1px solid rgba(79,124,255,.10);
}

.showcase-slide img{
    box-shadow:0 35px 95px rgba(36,50,75,.13);
}

.showcase-caption h3{color:var(--ep-primary);}

.showcase-dots{margin-top:28px;}

/* ---------- STATEMENT ---------- */
.statement{
    min-height:auto;
    padding:100px 30px;
    background:
        radial-gradient(circle at 20% 30%,rgba(255,181,71,.20),transparent 25%),
        radial-gradient(circle at 80% 70%,rgba(244,114,182,.18),transparent 25%),
        linear-gradient(135deg,#FFF9EC,#FFF4F9);
}

.statement h2{
    margin-bottom:25px;
    background:linear-gradient(90deg,#F59E0B,#EC4899,#7C5CFF);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}

.statement p{line-height:1.75;}

/* ---------- IMMERSION / STICKY PICTURES ----------
   420vh is intentional: it is the scroll runway used by welcome.js.
   Do not replace it with min-height or auto on desktop. */
.immersion{
    height:420vh;
    background:
        radial-gradient(circle at 10% 20%,rgba(79,124,255,.12),transparent 25%),
        radial-gradient(circle at 90% 70%,rgba(22,199,183,.12),transparent 25%),
        linear-gradient(180deg,#F7F9FE,#fff,#F7FAFF);
}

.immersion-sticky{
    height:100vh;
    overflow:hidden;
}

.device-frame{
    box-shadow:0 45px 120px rgba(36,50,75,.15);
}

.story{
    box-shadow:0 25px 70px rgba(36,50,75,.10);
}

.story small{
    background:#EEF4FF;
    color:var(--ep-primary);
}

.story2 small{background:#F2EFFF;color:#7C5CFF;}
.story3 small{background:#E9FBF8;color:#119E92;}

/* ---------- NUMBERS ---------- */
.numbers{
    padding:100px 0;
    background:#fff;
}

.numbers-grid{gap:30px;}

.number{
    padding:35px 25px;
}

.number h2{
    background:linear-gradient(135deg,var(--ep-primary),#7C5CFF);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}

.number:nth-child(2) h2{
    background:linear-gradient(135deg,#7C5CFF,#D16BFF);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}

.number:nth-child(3) h2{
    background:linear-gradient(135deg,#16A99D,#55E3D2);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}

.number:nth-child(4) h2{
    background:linear-gradient(135deg,#F59E0B,#F472B6);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}

/* ---------- ECOSYSTEM ---------- */
.ecosystem{
    padding:105px 0;
    background:
        radial-gradient(circle at 90% 10%,rgba(124,92,255,.10),transparent 24%),
        #F7F9FE;
}

.ecosystem-title{margin-bottom:55px;}
.ecosystem-grid{gap:22px;}

.eco-card{
    box-shadow:0 22px 60px rgba(36,50,75,.075);
    border:1px solid rgba(79,124,255,.07);
}

.eco-card:hover{
    transform:translateY(-7px);
    box-shadow:0 30px 75px rgba(36,50,75,.12);
}

.eco-icon{
    background:linear-gradient(135deg,var(--ep-primary),#7C5CFF);
}

.eco-card:nth-child(2) .eco-icon{background:linear-gradient(135deg,#16C7B7,#55E3D2);}
.eco-card:nth-child(3) .eco-icon{background:linear-gradient(135deg,#4F7CFF,#5FD3FF);}
.eco-card:nth-child(4) .eco-icon{background:linear-gradient(135deg,#8A63FF,#D16BFF);}
.eco-card:nth-child(5) .eco-icon{background:linear-gradient(135deg,#F472B6,#FF9FD0);}
.eco-card:nth-child(6) .eco-icon{background:linear-gradient(135deg,#28C76F,#65E6A0);}

/* ---------- SCHOOL PANEL ---------- */
.floating-features{
    padding:105px 0;
    background:
        radial-gradient(circle at 12% 30%,rgba(40,199,111,.14),transparent 25%),
        radial-gradient(circle at 88% 70%,rgba(79,124,255,.14),transparent 25%),
        #F7FBFF;
}

.floating-panel{
    padding:65px;
    box-shadow:0 30px 85px rgba(36,50,75,.10);
}

/* ---------- TESTIMONIALS ---------- */
.testimonials{
    padding:105px 0;
    background:#fff;
}

.section-heading{margin-bottom:55px;}

.testimonial-grid{gap:25px;}

.testimonial-card{
    box-shadow:0 20px 55px rgba(36,50,75,.075);
    border:1px solid rgba(79,124,255,.08);
}

.testimonial-card:nth-child(1) .quote{color:#4F7CFF;}
.testimonial-card:nth-child(2) .quote{color:#7C5CFF;}
.testimonial-card:nth-child(3) .quote{color:#16A99D;}

/* ---------- PRICING ---------- */
.pricing-section{
    padding:105px 0;
    background:
        radial-gradient(circle at 50% 0,rgba(79,124,255,.10),transparent 30%),
        #F7F9FE;
}

.pricing-grid{gap:25px;}

.price-card{
    border:1px solid rgba(79,124,255,.09);
    box-shadow:0 20px 55px rgba(36,50,75,.075);
}

.price-card:nth-child(1){border-top:5px solid #28C76F;}
.price-card:nth-child(2){border-top:5px solid #4F7CFF;}
.price-card:nth-child(3){border-top:5px solid #7C5CFF;}

.price-card.featured{
    transform:translateY(-6px);
    box-shadow:0 28px 65px rgba(79,124,255,.16);
}

.popular{background:linear-gradient(90deg,#4F7CFF,#7C5CFF);}

/* ---------- FINAL CTA ---------- */
.final-cta{
    padding:125px 20px;
    background:
        radial-gradient(circle at 15% 20%,rgba(22,199,183,.30),transparent 24%),
        radial-gradient(circle at 85% 25%,rgba(244,114,182,.28),transparent 25%),
        radial-gradient(circle at 50% 90%,rgba(124,92,255,.30),transparent 30%),
        linear-gradient(135deg,#405FEF,#7049E8 50%,#9B4DCC);
}

.final-cta .cta-content h2,
.final-cta .cta-content p{color:#fff;}

.final-cta .ep-btn-outline{
    background:rgba(255,255,255,.10);
    color:#fff;
    border-color:rgba(255,255,255,.55);
}

.final-cta .ep-btn-outline:hover{
    background:#fff;
    color:var(--ep-primary);
}

/* ---------- FOOTER ---------- */
.landing-footer{background:#17223B;}

/* ---------- NATURAL MOBILE FLOW ---------- */
@media(max-width:991px){
    .hero{
        min-height:auto;
        padding:125px 20px 65px;
    }

    .vision-section,
    .feature-highlight,
    .showcase-section,
    .numbers,
    .ecosystem,
    .floating-features,
    .testimonials,
    .pricing-section{
        padding-top:70px;
        padding-bottom:70px;
    }

    .statement{
        min-height:auto;
        padding:70px 24px;
    }

    /* Keep sticky mechanics untouched on tablet/desktop.
       On small screens the original welcome.css deliberately
       converts immersion into normal document flow. */
}

@media(max-width:900px){
    .immersion{
        height:auto !important;
        padding:70px 0 !important;
        overflow:visible !important;
    }

    .immersion-sticky{
        position:relative !important;
        height:auto !important;
        overflow:visible !important;
    }

    .story{
        margin-bottom:55px;
    }

    .story:last-child{margin-bottom:0;}
}

@media(max-width:768px){
    .ep-topbar{top:10px;}

    .hero h1{font-size:44px;}
    .hero p{font-size:18px;line-height:1.65;}

    .hero-buttons{margin-top:32px;}

    .vision-section,
    .feature-highlight,
    .showcase-section,
    .numbers,
    .ecosystem,
    .floating-features,
    .testimonials,
    .pricing-section,
    .final-cta{
        padding-top:60px;
        padding-bottom:60px;
    }

    .showcase-track{height:470px;}
    .showcase-carousel{padding-top:10px;}
    .showcase-dots{margin-top:15px;}

    .floating-panel{padding:42px 28px;}

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

/* ---------- ACCESSIBILITY / MOTION ---------- */
@media(prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;}
    .reveal,
    .light,
    .hero-logo,
    .scroll-down,
    .showcase-slide,
    .eco-card,
    .price-card,
    .testimonial-card{
        transition:none !important;
        animation:none !important;
    }
}

/* =========================================================
   TOP BAR — CTA INTEGRATION
   Keep navigation independent from the right-side actions.
   Both buttons deliberately share exactly the same dimensions.
   ========================================================= */

.ep-topbar{
    position:fixed;
    z-index:5000;
}

/* The existing nav stays visually centred and is not squeezed
   by Start Free + Login. */
.ep-topbar .ep-nav{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    white-space:nowrap;
}

.ep-topbar-actions{
    position:absolute;
    right:18px;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    align-items:center;
    gap:8px;
    flex-shrink:0;
}

/* Same dimensions for both actions */
.ep-topbar .ep-topbar-start,
.ep-topbar .ep-login{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:44px;
    min-height:44px;
    padding:0 18px;
    border-radius:999px;
    box-sizing:border-box;
    font-size:14px;
    font-weight:700;
    line-height:1;
    white-space:nowrap;
}

/* Start Free uses the framework's existing colour system */
.ep-topbar .ep-topbar-start{
    background:linear-gradient(135deg,var(--ep-primary),var(--ep-secondary));
    color:#fff !important;
    text-decoration:none !important;
    box-shadow:var(--ep-shadow-sm);
    transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

.ep-topbar .ep-topbar-start:hover{
    color:#fff !important;
    transform:translateY(-2px);
    filter:brightness(1.04);
    box-shadow:var(--ep-shadow-glow);
}

/* Make Login match Start Free exactly */
.ep-topbar .ep-login{
    background:linear-gradient(135deg,var(--ep-primary),var(--ep-secondary)) !important;
    color:#fff !important;
    text-decoration:none !important;
    box-shadow:var(--ep-shadow-sm);
}

.ep-topbar .ep-login:hover{
    color:#fff !important;
    transform:translateY(-2px);
    box-shadow:var(--ep-shadow-glow);
}

/* Tablet: navigation disappears, so actions can remain on the right. */
@media(max-width:991px){
    .ep-topbar .ep-nav{
        display:none;
    }

    .ep-topbar-actions{
        right:14px;
    }

    .ep-topbar .ep-topbar-start,
    .ep-topbar .ep-login{
        height:40px;
        min-height:40px;
        padding:0 15px;
        font-size:13px;
    }
}

/* Phone */
@media(max-width:600px){
    .ep-topbar{
        top:10px;
        width:calc(100% - 20px);
        height:58px;
        padding:0 9px;
    }

    .ep-topbar-actions{
        right:9px;
        gap:5px;
    }

    .ep-topbar .ep-topbar-start,
    .ep-topbar .ep-login{
        height:36px;
        min-height:36px;
        padding:0 11px;
        font-size:12px;
    }

    .ep-brand{
        font-size:17px;
        gap:8px;
    }

    .ep-brand-logo{
        width:40px;
        height:40px;
        min-width:40px;
        font-size:19px;
    }
}

/* Very small phones */
@media(max-width:390px){
    .ep-topbar{
        width:calc(100% - 14px);
        padding:0 7px;
    }

    .ep-topbar-actions{
        right:7px;
        gap:4px;
    }

    .ep-topbar .ep-topbar-start,
    .ep-topbar .ep-login{
        height:34px;
        min-height:34px;
        padding:0 9px;
        font-size:11px;
    }

    .ep-brand{
        font-size:15px;
    }

    .ep-brand-logo{
        width:36px;
        height:36px;
        min-width:36px;
        font-size:17px;
    }
}

/* =========================================================
   START FREE — distinct CTA
   Same shape/size as Login, green EasyPeasy success colour.
   ========================================================= */

.ep-topbar .ep-topbar-start{
    height:44px;
    min-height:44px;
    padding:0 18px;
    border-radius:999px !important;
    background:linear-gradient(135deg,#28C76F,#16B86A) !important;
    color:#fff !important;
    box-shadow:0 10px 25px rgba(40,199,111,.28);
}

.ep-topbar .ep-topbar-start:hover{
    background:linear-gradient(135deg,#32D67A,#20C978) !important;
    color:#fff !important;
    transform:translateY(-2px);
    box-shadow:0 14px 32px rgba(40,199,111,.34);
}

@media(max-width:991px){
    .ep-topbar .ep-topbar-start{
        height:40px;
        min-height:40px;
        padding:0 15px;
        border-radius:999px !important;
    }
}

@media(max-width:600px){
    .ep-topbar .ep-topbar-start{
        height:36px;
        min-height:36px;
        padding:0 11px;
        border-radius:999px !important;
    }
}

@media(max-width:390px){
    .ep-topbar .ep-topbar-start{
        height:34px;
        min-height:34px;
        padding:0 9px;
        border-radius:999px !important;
    }
}

/* =========================================================
   CAROUSEL CAPTION — BLEND WITH THE SHOWCASE
   Remove the hard white box and let the caption sit naturally
   over the section background.
   ========================================================= */

.showcase-caption{
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    border-radius:0 !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    padding:0 20px !important;
    margin-top:22px;
}

.showcase-caption h3{
    color:var(--ep-primary) !important;
    text-shadow:0 1px 2px rgba(255,255,255,.7);
}

.showcase-caption p{
    color:var(--ep-text-light) !important;
    text-shadow:0 1px 2px rgba(255,255,255,.8);
    max-width:760px;
    margin-left:auto;
    margin-right:auto;
}

/* Keep the caption visually attached to the image */
.showcase-slide.active .showcase-caption{
    background:linear-gradient(
        180deg,
        rgba(255,255,255,0),
        rgba(255,255,255,.10)
    ) !important;
}

/* Mobile: no panel, slightly tighter text */
@media(max-width:768px){
    .showcase-caption{
        padding:0 12px !important;
        margin-top:16px;
    }

    .showcase-caption h3{
        font-size:25px;
    }

    .showcase-caption p{
        font-size:16px;
        line-height:1.55;
    }
}

/* =========================================================
   CAROUSEL SELECTED ELEMENT — NORMAL PILL SIZE
   Keep the selected state prominent without the oversized pill.
   ========================================================= */

.showcase-slide.active .showcase-caption .showcase-tag,
.showcase-slide.active .showcase-caption .showcase-label,
.showcase-slide.active .showcase-caption .tag,
.showcase-slide.active .showcase-caption small{
    display:inline-flex;
    align-items:center;
    width:auto;
    max-width:max-content;
    padding:7px 14px !important;
    min-height:0 !important;
    border-radius:999px !important;
    font-size:13px !important;
    line-height:1.2 !important;
    box-sizing:border-box;
}

/* If the selected element itself is the caption pill */
.showcase-slide.active .showcase-caption{
    width:auto;
}

/* =========================================================
   CAROUSEL DOTS — NORMAL SELECTED SIZE
   Keep the active dot highlighted, but never turn it into
   a large pill.
   ========================================================= */

.showcase-dots .dot,
.showcase-dots .dot.active{
    width:12px !important;
    min-width:12px !important;
    height:12px !important;
    min-height:12px !important;
    padding:0 !important;
    border-radius:50% !important;
    box-sizing:border-box;
}

.showcase-dots .dot.active{
    background:var(--ep-primary) !important;
    transform:none !important;
    box-shadow:0 4px 12px rgba(79,124,255,.30) !important;
}

.showcase-dots .dot.active::after{
    display:none !important;
}