/* =====================================================
   HOME STYLE · FINAL VERSION
===================================================== */


/* =====================================================
   HERO
===================================================== */

.home-hero{

position:relative;

padding:120px 20px 100px;

text-align:center;

overflow:hidden;

background:transparent;

}

.home-hero-bg{

position:absolute;

top:70%;
right:-180px;

transform:translateY(-50%);

width:720px;
height:720px;

background-image:url("/media/img/Cloud_Home.png");

background-repeat:no-repeat;
background-size:contain;
background-position:center;

opacity:.08;

pointer-events:none;

}

.home-hero-content{

max-width:800px;

margin:0 auto;

position:relative;
z-index:2;

}

.home-hero h1{

font-size:clamp(2.8rem,6vw,4.2rem);

font-weight:700;

letter-spacing:-0.04em;

line-height:1.05;

margin-bottom:24px;

color:#1d1d1f;

}

.home-hero p{

max-width:580px;

margin:0 auto 44px;

font-size:21px;

line-height:1.4;

color:#6e6e73;

letter-spacing:-0.015em;

}


/* =====================================================
   BUTTONS
===================================================== */

.home-actions{

display:flex;

justify-content:center;

gap:18px;

flex-wrap:wrap;

}

.btn-primary,
.btn-secondary{

display:inline-block;

padding:14px 32px;

border-radius:980px;

font-size:17px;

font-weight:500;

text-decoration:none;

transition:
transform .25s ease,
background .25s ease,
color .25s ease;

}

.btn-primary{

background:#0071e3;

color:#fff;

border:1px solid #0071e3;

}

.btn-primary:hover{

background:#0077ed;

transform:translateY(-2px);

}

.btn-secondary{

border:1px solid #0071e3;

color:#0071e3;

background:transparent;

}

.btn-secondary:hover{

background:rgba(0,113,227,.05);

transform:translateY(-2px);

}


/* =====================================================
   FEATURES
===================================================== */

.features{

padding:100px 20px;

background:#f5f5f7;

}

.features-inner{

max-width:1100px;

margin:0 auto;

display:grid;

grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

gap:24px;

}

.feature{

background:#fff;

border-radius:24px;

padding:48px;

text-align:left;

box-shadow:0 1px 3px rgba(0,0,0,.03);

transition:
transform .35s ease,
box-shadow .35s ease;

}

.feature:hover{

transform:translateY(-6px);

box-shadow:0 20px 40px rgba(0,0,0,.06);

}

.feature span{

font-size:32px;

margin-bottom:20px;

display:block;

}

.feature h3{

font-size:24px;

font-weight:600;

margin-bottom:14px;

letter-spacing:-0.02em;

}

.feature p{

font-size:17px;

line-height:1.5;

color:#6e6e73;

}


/* =====================================================
   CLOUD PARTNERS
===================================================== */

.cloud-partners{

padding:120px 20px;

text-align:center;

background:#ffffff;

}

.partners-title{

font-size:clamp(2rem,4vw,2.8rem);

font-weight:700;

letter-spacing:-0.03em;

margin-bottom:18px;

}

.partners-subtitle{

font-size:19px;

color:#6e6e73;

margin-bottom:60px;

}

/* =====================================================
   CLOUD PARTNERS LOGOS
===================================================== */

.partners-logos{

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

gap:70px;

flex-wrap:wrap;

margin-top:40px;

}


/* LOGOS */

.partners-logos img{

height:48px;
width:auto;

display:block;

object-fit:contain;

opacity:.65;

filter:grayscale(1);

transition:
opacity .25s ease,
transform .25s ease,
filter .25s ease;

}


/* HOVER */

.partners-logos img:hover{

opacity:1;

filter:grayscale(0);

transform:scale(1.05);

}



/* =====================================================
   WORKFLOW
===================================================== */

.workflow{

padding:120px 20px;

background:#f5f5f7;

}

.workflow-title{

text-align:center;

font-size:clamp(2rem,4vw,2.8rem);

font-weight:700;

letter-spacing:-0.03em;

margin-bottom:70px;

}

.workflow-grid{

max-width:1000px;

margin:0 auto;

display:grid;

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

gap:40px;

text-align:center;

}

.workflow-number{

font-size:14px;

font-weight:600;

letter-spacing:.12em;

color:#6e6e73;

margin-bottom:12px;

}

.workflow-step h3{

font-size:22px;

font-weight:600;

margin-bottom:12px;

}

.workflow-step p{

font-size:16px;

line-height:1.5;

color:#6e6e73;

}


/* =====================================================
   INFRASTRUCTURE
===================================================== */

.infra{

padding:120px 20px;

background:#ffffff;

text-align:center;

}

.infra h2{

font-size:clamp(2rem,4vw,2.8rem);

font-weight:700;

letter-spacing:-0.03em;

margin-bottom:20px;

}

.infra p{

max-width:720px;

margin:0 auto 60px;

font-size:19px;

color:#6e6e73;

}

.infra-grid{

max-width:1000px;

margin:0 auto;

display:grid;

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

gap:40px;

text-align:left;

}

.infra-grid h4{

font-size:20px;

font-weight:600;

margin-bottom:10px;

}

.infra-grid p{

font-size:16px;

color:#6e6e73;

}


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

.final-cta{

padding:140px 20px;

text-align:center;

background:#f5f5f7;

}

.final-cta h2{

font-size:clamp(2.2rem,4vw,3rem);

font-weight:700;

letter-spacing:-0.03em;

margin-bottom:20px;

}

.final-cta p{

font-size:19px;

color:#6e6e73;

margin-bottom:40px;

}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width:900px){

.workflow-grid{
grid-template-columns:1fr;
gap:40px;
}

.infra-grid{
grid-template-columns:1fr;
gap:40px;
}

}

@media (max-width:768px){

.home-hero{
padding:80px 16px 60px;
}

.home-hero h1{
font-size:34px;
}

.features{
padding:80px 16px;
}

.cloud-partners{
padding:90px 16px;
}

.workflow{
padding:90px 16px;
}

.infra{
padding:90px 16px;
}

.final-cta{
padding:100px 16px;
}

}