/* ===========================
   HOME.CSS
   Premium Landing UI
=========================== */

:root{

--black:#101010;
--dark:#1a1a1a;
--orange:#ff6a00;
--white:#ffffff;
--gray:#666;
--light:#f5f5f5;
--border:#ececec;
--blue: #5c6cf5;
--skyblue: #a9b2fb;
}

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

html{

scroll-behavior:smooth;

}

body{

font-family:'Pretendard',sans-serif;
color:var(--black);
background:#fff;
overflow-x:hidden;
line-height:1.6;

}

img{

width:100%;
display:block;

}

a{

text-decoration:none;
color:inherit;

}

section{

padding:140px 8%;

}

.section-title{

text-align:center;
margin-bottom:80px;

}

.section-title span{

display:inline-block;
letter-spacing:3px;
font-size:.8rem;
color:var(--blue);
font-weight:700;
margin-bottom:15px;

}

.section-title h2{

font-size:3rem;
font-weight:800;

}



/* ===========================
Hero
=========================== */

.hero{

position:relative;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;

}

.hero-bg{

position:absolute;
inset:0;

}

.hero-bg img{

width:100%;
height:100%;
object-fit:cover;
transform:scale(1.05);
animation:heroZoom 15s linear infinite alternate;

}

.hero-overlay{

position:absolute;
inset:0;

background:

linear-gradient(

180deg,

rgba(0, 0, 0, 0.5),

rgba(0,0,0,.05)

);

z-index:1;

}

.hero-content{

position:relative;
z-index:5;
max-width:1300px;
width:100%;
padding:0 8%;
color:#fff;

}

.hero-subtitle{

display:inline-block;

padding:8px 18px;

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

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

backdrop-filter:blur(10px);

border-radius:100px;

margin-bottom:30px;

letter-spacing:2px;

font-size:.8rem;

}

.hero h1{

font-size:5rem;

font-weight:900;

line-height:1.1;

margin-bottom:25px;

}

.hero h1 span{

color:var(--blue);

}

.hero p{

font-size:1.3rem;

opacity:.9;

margin-bottom:50px;

}

.hero-buttons{

display:flex;
gap:20px;

flex-wrap:wrap;

}



/* ===========================
Buttons
=========================== */

.btn{

position:relative;

overflow:hidden;

padding:18px 38px;

border-radius:100px;

font-weight:700;

transition:.45s;

border:5px solid transparent;

box-sizing:border-box;
}

.btn-primary{

background:var(--blue);

color:#fff;

}

.btn-primary:hover{

transform:translateY(-6px);

box-shadow:

0 20px 50px rgba(165, 176, 255, 0.4);

}

.btn-secondary{

background:var(--white);

color:var(--black);

}

.btn-secondary:hover{

transform:translateY(-6px);

box-shadow:

0 20px 50px rgba(255, 255, 255, 0.4);

}



.btn-blog{

box-sizing: border-box;

border:5px solid rgb(133, 255, 141);

color:#000000;

backdrop-filter:blur(10px);

}

.btn-blog:hover{

background:rgb(133, 255, 141);

transform:translateY(-6px);

box-shadow:

0 20px 50px rgba(133, 255, 141, 0.4);

}


/* Shine */

.btn::before{

content:"";

position:absolute;

left:-130%;

top:0;

width:70%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.5),

transparent

);

transform:skewX(-25deg);

transition:.8s;

}

.btn:hover::before{

left:150%;

}



/* ===========================
Scroll indicator
=========================== */

.scroll-indicator{

position:absolute;

bottom:40px;

left:50%;

transform:translateX(-50%);

z-index:5;

}

.scroll-indicator span{

display:block;

width:2px;

height:70px;

background:#fff;

animation:scroll 2s infinite;

}



/* ===========================
Services
=========================== */

.services{

background:#fff;

}

.service-grid{

display:grid;

grid-template-columns:

repeat(4,1fr);

gap:35px;

}

.service-card{

   background:#fff;

   // border:2px solid var(--border);
   border:2px solid #929cf7;
   
   padding:50px;

   border-radius:30px;

   transition:
      transform .45s,
      box-shadow .45s,
      border-color .45s;

}

.service-card:hover{

   transform:translateY(-15px);

   border-color:var(--blue);

   background:#f9f6ff;

   box-shadow:0 30px 70px rgba(55, 0, 255, 0.18);

}

.icon{

font-size:60px;

margin-bottom:30px;

transition:.5s;

}

.service-card:hover .icon{

transform:scale(1.2);

}

.service-card h3{

font-size:1.5rem;

margin-bottom:15px;

}

.service-card p{

color:#666666;

}



/* ===========================
WHY
=========================== */

.about{

display:grid;

grid-template-columns:

1fr 1fr;

gap:100px;

align-items:center;

background:#fafafa;

}

.about-left span{

color:var(--blue);

font-weight:700;

}

.about-left h2{

font-size:3.5rem;

margin-top:15px;

}

.about-item{

padding:25px 0;

font-size:1.15rem;

border-bottom:1px solid #eee;

transition:.35s;

}

.about-item:hover{

padding-left:20px;

color:var(--blue);

}


/* ===========================
   STATS
=========================== */

.stats{

background:#111;

color:#fff;

display:grid;

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

gap:40px;

text-align:center;

}

.stat{

padding:20px;

}

.stat h2{

font-size:4rem;

font-weight:800;

color:var(--orange);

margin-bottom:10px;

}

.stat p{

font-size:1rem;

opacity:.8;

letter-spacing:1px;

}



/* ===========================
Portfolio
=========================== */

.portfolio{

background:#fff;

}

.portfolio-grid{

display:grid;

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

gap:35px;

}

.portfolio-card{

display:block;

background:#fff;

border-radius:28px;

overflow:hidden;

transition:.45s;

box-shadow:0 10px 35px rgba(0,0,0,.05);

}

.portfolio-card:hover{

transform:translateY(-15px);

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

}

.thumb{

height:320px;

overflow:hidden;

}

.thumb img{

width:100%;

height:100%;

object-fit:cover;

transition:transform .8s;

}

.portfolio-card:hover img{

transform:scale(1.1);

}

.info{

padding:30px;

}

.info span{

display:block;

font-size:.8rem;

color:var(--blue);

font-weight:700;

margin-bottom:10px;

letter-spacing:1px;

}

.info h3{

font-size:1.35rem;

font-weight:700;

line-height:1.4;

}



/* ===========================
Process
=========================== */

.process{

background:#fafafa;

}

.process-line{

display:flex;

justify-content:space-between;

position:relative;

margin-top:80px;

}

.process-line::before{

content:"";

position:absolute;

left:10%;

right:10%;

top:45px;

height:2px;

background:#ddd;

z-index:0;

}

.step{

position:relative;

z-index:1;

width:180px;

text-align:center;

font-size:1.1rem;

font-weight:600;

}

.step span{

display:flex;

justify-content:center;

align-items:center;

width:90px;

height:90px;

margin:auto;

margin-bottom:25px;

border-radius:50%;

background:#fff;

border:4px solid var(--blue);

font-size:2rem;

font-weight:800;

color:var(--blue);

transition:.4s;

}

.step:hover span{

background:var(--blue);

color:#fff;

transform:scale(1.08);

}



/* ===========================
CTA
=========================== */

.cta{

background:

linear-gradient(

135deg,

#111,

#222

);

color:#fff;

text-align:center;

position:relative;

overflow:hidden;

}

.cta::before{

content:"";

position:absolute;

width:600px;

height:600px;

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

border-radius:50%;

right:-200px;

top:-250px;

filter:blur(30px);

}

.cta-content{

position:relative;

z-index:5;

}

.cta h2{

font-size:3.2rem;

line-height:1.3;

margin-bottom:50px;

font-weight:800;

}



/* ===========================
Animation
=========================== */

.reveal{

opacity:0;

transform:translateY(80px);

transition:1s;

}

.reveal.active{

opacity:1;

transform:translateY(0);

}

.fade-left{

opacity:0;

transform:translateX(-80px);

transition:1s;

}

.fade-left.active{

opacity:1;

transform:translateX(0);

}

.fade-right{

opacity:0;

transform:translateX(80px);

transition:1s;

}

.fade-right.active{

opacity:1;

transform:translateX(0);

}



/* ===========================
Responsive
=========================== */

@media(max-width:1200px){

.hero h1{

font-size:4rem;

}

.service-grid{

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

}

.portfolio-grid{

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

}



.stats{

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

}

.process-line{

flex-wrap:wrap;

gap:60px;

justify-content:center;

}

.process-line::before{

display:none;

}

.about{

grid-template-columns:1fr;

gap:60px;

}

}

@media(max-width:768px){

section{

padding:90px 24px;

}

.hero{

text-align:center;

}

.hero h1{

font-size:2.8rem;

}

.hero p{

font-size:1rem;

}

.hero-buttons{

justify-content:center;

}

.service-grid{

grid-template-columns:1fr;

}

.portfolio-grid{

grid-template-columns:1fr;

}

.stats{

grid-template-columns:1fr;

}

.section-title h2{

font-size:2.2rem;

}

.about-left h2{

font-size:2.4rem;

}

.cta h2{

font-size:2.2rem;

}

.step{

width:100%;

}

}



/* ===========================
Keyframes
=========================== */

@keyframes heroZoom{

0%{

transform:scale(1.05);

}

100%{

transform:scale(1.18);

}

}

@keyframes scroll{

0%{

opacity:0;

transform:translateY(0);

}

50%{

opacity:1;

}

100%{

opacity:0;

transform:translateY(30px);

}

}