/* ==================================
   REPSENSE AI
================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;700&family=Sora:wght@400;600;700;800&display=swap');

a{

text-decoration:none;

color:inherit;

}

:root{

--bg:#06060b;

--pink:#ff4fd8;

--purple:#8f5bff;

--text:#ffffff;

--muted:#bfc0cf;

--glass:rgba(255,255,255,.04);

--border:rgba(255,255,255,.08);

--heading:'Sora',sans-serif;

--body:'Space Grotesk',sans-serif;

}

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

html{
scroll-behavior:smooth;
}

body{

font-family:var(--body);

background:
radial-gradient(
circle at top,
#2a091e 0%,
#100913 35%,
#06060b 100%
);

color:white;

overflow-x:hidden;

position:relative;

}


/* animated background */

body::before{

content:"";

position:fixed;

width:650px;
height:650px;

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

background:

radial-gradient(
circle,
rgba(255,79,216,.14),
transparent 70%
);

filter:blur(100px);

animation:blob1 15s ease-in-out infinite;

pointer-events:none;

z-index:0;

}


body::after{

content:"";

position:fixed;

width:550px;
height:550px;

right:-100px;
bottom:-100px;

background:

radial-gradient(
circle,
rgba(143,91,255,.15),
transparent 70%
);

filter:blur(100px);

animation:blob2 18s ease-in-out infinite;

pointer-events:none;

z-index:0;

}

@keyframes blob1{

50%{

transform:
translateX(220px)
translateY(120px);

}

}

@keyframes blob2{

50%{

transform:
translateX(-150px)
translateY(-100px);

}

}



/* NAV */

.nav{

position:fixed;

top:0;
left:0;
right:0;

padding:24px 70px;

display:flex;

justify-content:space-between;

align-items:center;

z-index:1000;

background:
rgba(0,0,0,.25);

backdrop-filter:blur(20px);

border-bottom:
1px solid rgba(255,255,255,.05);

}

.nav-logo{

font-family:var(--heading);

font-size:14px;

font-weight:700;

letter-spacing:4px;

}

.nav-logo span{

color:var(--pink);

}

.nav-links{

display:flex;

gap:40px;

}

.nav-links a{

color:#d0d0dc;

position:relative;

transition:.4s;

}

.nav-links a:hover{

color:white;

}

.nav-links a{

color:#d0d0dc;

position:relative;

transition:.35s ease;

text-decoration:none;

padding-bottom:4px;

}


.nav-links a::after{

content:"";

position:absolute;

left:50%;
bottom:-4px;

width:0;

height:2px;

background:
linear-gradient(
90deg,
#ff4fd8,
#8f5bff
);

transform:
translateX(-50%);

border-radius:10px;

transition:
width .35s ease;

opacity:.85;

}


.nav-links a:hover{

color:white;

}


.nav-links a:hover::after{

width:65%;

}



/* HERO */

.hero{

min-height:100vh;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

padding:120px 20px;

position:relative;

overflow:hidden;

z-index:2;

}

.hero-bg-glow{

position:absolute;

width:900px;
height:900px;

left:50%;
top:50%;

transform:
translate(-50%,-50%);

background:

radial-gradient(
circle,
rgba(255,79,216,.14),
transparent 70%
);

filter:blur(100px);

animation:heroPulse 8s ease infinite;

}

@keyframes heroPulse{

50%{

transform:
translate(-50%,-50%)
scale(1.2);

opacity:.5;

}

}

.hero-content{

max-width:1000px;

position:relative;

z-index:3;

}

.hero-tag{

display:inline-block;

padding:12px 22px;

border-radius:100px;

background:var(--glass);

border:1px solid var(--border);

backdrop-filter:blur(20px);

letter-spacing:4px;

font-size:12px;

color:#ff8ce7;

margin-bottom:35px;

}

.hero h1{

font-size:
clamp(80px,11vw,170px);

line-height:.88;

font-family:var(--heading);

font-weight:800;

letter-spacing:-5px;

}

.hero h1 > span{

display:block;

background:
linear-gradient(
90deg,
#ff4fd8,
#8f5bff
);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

background-size:200%;

animation:
gradientMove 6s linear infinite;

}

@keyframes gradientMove{

100%{
background-position:200%;
}

}

.hero-desc{

max-width:700px;

margin:35px auto;

font-size:20px;

line-height:1.8;

color:#d4d4df;

}



/* BUTTONS */

.hero-buttons{

display:flex;

justify-content:center;

gap:18px;

margin-top:55px;

flex-wrap:wrap;

}

.btn-primary{

position:relative;

min-width:220px;

padding:18px 34px;

display:flex;

justify-content:center;

align-items:center;

border-radius:20px;

background:

linear-gradient(
135deg,
#ff4fd8,
#c45cff,
#8f5bff
);

color:white;

font-weight:700;

overflow:hidden;

box-shadow:
0 20px 60px rgba(255,79,216,.30);

transition:.5s;

}

.btn-primary::before{

content:"";

position:absolute;

top:0;
left:-120%;

width:50%;
height:100%;

background:

linear-gradient(
90deg,
transparent,
rgba(255,255,255,.45),
transparent
);

transform:
skewX(-20deg);

transition:.8s;

}

.btn-primary:hover::before{

left:140%;

}

.btn-primary:hover{

transform:
translateY(-8px);

}


.btn-secondary{

min-width:200px;

padding:18px 34px;

display:flex;

justify-content:center;

align-items:center;

border-radius:20px;

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

backdrop-filter:blur(20px);

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

color:white;

transition:.4s;

}

.btn-secondary:hover{

transform:
translateY(-8px);

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

border-color:
rgba(255,79,216,.30);

}



/* COMMON */

.story,
.split-section,
.gallery,
.demo,
.cta{

padding:140px 80px;

position:relative;

z-index:2;

}



/* STORY */

.story{

text-align:center;

}

.mini-label{

letter-spacing:6px;

color:#ff7be5;

margin-bottom:20px;

}

.story h2{

font-size:
clamp(50px,6vw,90px);

font-family:var(--heading);

margin-bottom:25px;

}

.story-desc{

max-width:700px;

margin:auto;

line-height:1.8;

color:#c8c8d7;

font-size:20px;

}



/* SPLIT */

.split-section{

display:grid;

grid-template-columns:1fr 1fr;

gap:100px;

align-items:center;

}

.reverse{

direction:rtl;

}

.reverse *{

direction:ltr;

}

.section-number{

font-size:120px;

opacity:.08;

font-weight:700;

}

.split-text h2{

font-size:60px;

font-family:var(--heading);

margin:20px 0;

}

.split-text p{

font-size:20px;

line-height:1.8;

color:#c8c8d7;

}

.split-image img{

width:100%;

border-radius:35px;

transition:.5s;

box-shadow:
0 40px 100px rgba(255,79,216,.12);

}

.split-image img:hover{

transform:
translateY(-12px);

}



.gallery{

padding:140px 80px;

text-align:center;

}

.gallery h2{

font-size:70px;

font-family:var(--heading);

margin-bottom:70px;

}

.gallery-main{

margin-bottom:35px;

}

.gallery-main img{

width:100%;

max-width:1200px;

border-radius:30px;

box-shadow:
0 40px 100px rgba(255,79,216,.15);

transition:.4s;

}

.gallery-main img:hover{

transform:translateY(-10px);

}

.gallery-secondary{

display:grid;

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

gap:25px;

}

.gallery-secondary img{

width:100%;

border-radius:24px;

transition:.4s;

}

.gallery-secondary img:hover{

transform:translateY(-8px);

}



/* DEMO */

.demo{

text-align:center;

}

.demo h2{

font-size:60px;

font-family:var(--heading);

margin-bottom:20px;

}

.demo p{

margin-bottom:50px;

color:#c8c8d7;

}

.video-box{

max-width:1100px;

margin:auto;

overflow:hidden;

border-radius:35px;

box-shadow:
0 40px 120px rgba(255,79,216,.15);

}

.video-box video{

width:100%;

display:block;

}

/* ==========================
FOOTER
========================== */

.footer{

position:relative;

padding:140px 80px 50px;

overflow:hidden;

border-top:
1px solid rgba(255,255,255,.05);

}


.footer-glow{

position:absolute;

width:800px;
height:400px;

left:50%;
top:0;

transform:
translateX(-50%);

background:

radial-gradient(
circle,
rgba(255,79,216,.12),
transparent 70%
);

filter:blur(80px);

}


.footer-top{

position:relative;

z-index:2;

text-align:center;

max-width:850px;

margin:auto;

}


.footer-tag{

letter-spacing:5px;

font-size:12px;

color:#ff8ce7;

margin-bottom:25px;

}


.footer-top h2{

font-size:
clamp(50px,7vw,95px);

font-family:var(--heading);

line-height:1;

margin-bottom:25px;

}


.footer-sub{

font-size:20px;

color:#c7c7d5;

line-height:1.8;

margin-bottom:45px;

}



.footer-buttons{

display:flex;

justify-content:center;

gap:20px;

margin-bottom:100px;

flex-wrap:wrap;

}


.footer-bottom{

padding-top:35px;

display:flex;

justify-content:space-between;

align-items:center;

border-top:
1px solid rgba(255,255,255,.05);

position:relative;

z-index:2;

}


.footer-brand{

font-family:var(--heading);

font-size:14px;

letter-spacing:4px;

font-weight:700;

}


.footer-brand span{

color:#ff4fd8;

}


.footer-mini-links{

display:flex;

gap:25px;

}


.footer-mini-links a{

color:#bdbdd0;

transition:.4s;

}


.footer-mini-links a:hover{

color:white;

}


@media(max-width:800px){

.footer-bottom{

flex-direction:column;

gap:25px;

}

}

.nav-logo,
.footer-brand{

cursor:pointer;

text-decoration:none;

color:white;

transition:.35s;

}

.nav-logo:hover,
.footer-brand:hover{

transform:scale(1.04);

color:#ff7be5;

}

.hero h1 > span{

display:block;

background:
linear-gradient(
90deg,
#ff4fd8,
#8f5bff
);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

background-size:200%;

animation:
gradientMove 6s linear infinite;

}

/* ===================================
   MOVE EFFECT
=================================== */

.move-wrap{

position:relative;

display:flex;

justify-content:center;

align-items:center;

margin:5px 0;

overflow:visible;

}


.move-word{

position:relative;

display:inline-block;

font:inherit;

font-weight:800;

color:white;

z-index:10;

animation:
moveFloat 2.5s ease-in-out infinite;

}


/* motion trail */

.move-word::before{

content:"Move";

position:absolute;

top:0;
left:-30px;

color:#ff4fd8;

opacity:.18;

filter:blur(10px);

z-index:-1;

animation:
trail1 2.5s ease-in-out infinite;

}


.move-word::after{

content:"Move";

position:absolute;

top:0;
left:-15px;

color:#8f5bff;

opacity:.15;

filter:blur(6px);

z-index:-1;

animation:
trail2 2.5s ease-in-out infinite;

}



@keyframes moveFloat{

0%{

transform:
translateX(-55px);

}

50%{

transform:
translateX(55px);

}

100%{

transform:
translateX(-55px);

}

}


@keyframes trail1{

0%{

transform:translateX(0);

opacity:.08;

}

50%{

transform:translateX(-90px);

opacity:.35;

}

100%{

transform:translateX(0);

opacity:.08;

}

}


@keyframes trail2{

0%{

transform:translateX(0);

opacity:.08;

}

50%{

transform:translateX(-55px);

opacity:.25;

}

100%{

transform:translateX(0);

opacity:.08;

}

}

/* MOBILE */

@media(max-width:1000px){

.split-section{

grid-template-columns:1fr;

}

.gallery-grid{

grid-template-columns:1fr 1fr;

}

}

@media(max-width:700px){

.nav{

padding:20px;

}

.nav-links{

display:none;

}

.gallery-grid{

grid-template-columns:1fr;

}

.story,
.split-section,
.gallery,
.demo,
.cta{

padding:90px 20px;

}

.hero h1{

font-size:70px;

}

}