/*=====================================
          LAREN WEB SERVICES 2.0
======================================*/
:root{
    --purple-deep:#160824;
    --purple-dark:#2A0D45;
    --purple:#7C3AED;
    --purple-bright:#A855F7;
    --purple-light:#C084FC;
    --purple-soft:#F3E8FF;
    --pink:#EC4899;
    --white:#FFFFFF;
    --surface:#F8F7FB;
    --dark:#17131D;
    --text:#6D6874;
    --border:#E9E3EF;
    --font-title:"Space Grotesk",sans-serif;
    --font-text:"Manrope",sans-serif;
    --core-container:1220px;
    --core-gutter:40px;
    --core-section-space:120px;
    --core-font-primary:var(--font-text);
    --core-background:var(--white);
    --core-surface:var(--surface);
    --core-text:var(--text);
    --core-heading:var(--dark);
    --core-primary:var(--purple);
    --core-primary-hover:var(--purple-dark);
    --core-border:var(--border);
    --core-white:var(--white);
    --core-radius:14px;
    --core-shadow:0 24px 60px rgba(42,13,69,.12);
}
body{
    font-family:var(--font-text);
}
h1,h2,h3,h4,strong{
    font-family:var(--font-title);
}
/*=====================================
                NAVBAR
======================================*/
.Header{
    position:fixed;
    top:0;
    left:0;
    z-index:1000;
    width:100%;
    padding:20px 0;
    border-bottom:1px solid transparent;
    transition:padding .35s ease,background .35s ease,border-color .35s ease,box-shadow .35s ease;
}
.Header.Scrolled{
    padding:12px 0;
    background:rgba(22,8,36,.9);
    border-color:rgba(255,255,255,.08);
    box-shadow:0 16px 45px rgba(15,5,25,.2);
    backdrop-filter:blur(20px);
}
.HeaderContainer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:28px;
}
.Logo{
    display:flex;
    align-items:center;
    gap:12px;
    color:var(--white);
}
.LogoSymbol{
    position:relative;
    width:48px;
    height:48px;
    display:flex;
    justify-content:center;
    align-items:center;
    background:linear-gradient(145deg,var(--purple),var(--purple-bright));
    border-radius:15px;
    box-shadow:0 12px 28px rgba(124,58,237,.3);
    overflow:hidden;
}
.LogoLetter{
    position:relative;
    z-index:2;
    font-family:var(--font-title);
    font-size:1.35rem;
    font-weight:800;
}
.LogoCode{
    position:absolute;
    right:5px;
    bottom:2px;
    color:rgba(255,255,255,.38);
    font-size:1.45rem;
    font-weight:800;
}
.LogoText{
    display:flex;
    flex-direction:column;
    line-height:1;
}
.LogoText strong{
    font-size:1.25rem;
    font-weight:800;
}
.LogoText small{
    margin-top:5px;
    color:rgba(255,255,255,.52);
    font-size:.47rem;
    font-weight:800;
    letter-spacing:.21em;
    text-transform:uppercase;
}
.Navigation{
    display:flex;
    align-items:center;
    gap:28px;
}
.Navigation a{
    position:relative;
    color:rgba(255,255,255,.64);
    font-size:14px;
    font-weight:700;
    transition:color .3s ease;
}
.Navigation a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-9px;
    width:0;
    height:2px;
    background:linear-gradient(90deg,var(--purple-light),var(--pink));
    border-radius:5px;
    transition:width .3s ease;
}
.Navigation a:hover,.Navigation a.Active{
    color:var(--white);
}
.Navigation a:hover::after,.Navigation a.Active::after{
    width:100%;
}
.HeaderActions{
    display:flex;
    align-items:center;
    gap:15px;
}
.HeaderButton{
    min-height:47px;
    padding:0 19px;
    display:inline-flex;
    justify-content:center;
    align-items:center;
    gap:9px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.14);
    border-radius:13px;
    color:var(--white);
    font-size:.62rem;
    font-weight:800;
    transition:background .3s ease,border-color .3s ease,transform .3s ease;
}
.HeaderButton:hover{
    background:var(--purple);
    border-color:var(--purple);
    transform:translateY(-2px);
}
.MenuButton{
    width:44px;
    height:44px;
    display:none;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.15);
    border-radius:12px;
    cursor:pointer;
}
.MenuButton span{
    width:20px;
    height:2px;
    display:block;
    background:var(--white);
    transition:transform .3s ease,opacity .3s ease;
}
.MenuButton span+span{
    margin-top:5px;
}
.MenuButton.Active span:nth-child(1){
    transform:translateY(7px) rotate(45deg);
}
.MenuButton.Active span:nth-child(2){
    opacity:0;
}
.MenuButton.Active span:nth-child(3){
    transform:translateY(-7px) rotate(-45deg);
}
/*=====================================
                  HERO
======================================*/
.Hero{
    position:relative;
    min-height:900px;
    padding:180px 0 145px;
    display:flex;
    align-items:center;
    background:var(--purple-deep);
    color:var(--white);
    overflow:hidden;
}
.HeroBackground{
    position:absolute;
    inset:0;
}
.HeroGrid{
    position:absolute;
    inset:0;
    background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
    background-size:70px 70px;
    mask-image:linear-gradient(to bottom,black,transparent 92%);
}
.HeroGlow{
    position:absolute;
    border-radius:50%;
    filter:blur(20px);
}
.HeroGlowOne{
    top:-220px;
    left:-160px;
    width:620px;
    height:620px;
    background:rgba(124,58,237,.25);
}
.HeroGlowTwo{
    right:-180px;
    bottom:-250px;
    width:700px;
    height:700px;
    background:rgba(236,72,153,.14);
}
.HeroContainer{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:1fr .92fr;
    align-items:center;
    gap:85px;
}
.HeroContent{
    max-width:700px;
}
.HeroBadge{
    margin-bottom:25px;
    padding:9px 13px;
    display:inline-flex;
    align-items:center;
    gap:9px;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.11);
    border-radius:30px;
    color:var(--purple-light);
    font-size:.57rem;
    font-weight:800;
    letter-spacing:.1em;
    text-transform:uppercase;
}
.HeroContent h1{
    max-width:720px;
    font-size:clamp(3.7rem,6.2vw,5.7rem);
    font-weight:700;
    line-height:.96;
    letter-spacing:-.05em;
}
.HeroContent h1 span{
    background:linear-gradient(90deg,var(--purple-light),#F0ABFC,var(--pink));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}
.HeroContent>p{
    max-width:620px;
    margin-top:27px;
    color:rgba(255,255,255,.62);
    font-size:16px;
    line-height:1.9;
}
.HeroActions{
    margin-top:37px;
    display:flex;
    gap:14px;
}
.HeroPrimary{
    background:linear-gradient(135deg,var(--purple),var(--purple-bright));
    box-shadow:0 16px 34px rgba(124,58,237,.28);
}
.HeroPrimary:hover{
    background:linear-gradient(135deg,var(--purple-bright),var(--pink));
}
.HeroSecondary{
    border-color:rgba(255,255,255,.18);
    color:var(--white);
}
.HeroSecondary:hover{
    background:rgba(255,255,255,.08);
    border-color:rgba(255,255,255,.32);
    color:var(--white);
}
.HeroProof{
    margin-top:38px;
    padding-top:25px;
    display:flex;
    align-items:center;
    gap:16px;
    border-top:1px solid rgba(255,255,255,.1);
}
.HeroProofAvatars{
    display:flex;
}
.HeroProofAvatars span{
    width:37px;
    height:37px;
    margin-left:-8px;
    display:flex;
    justify-content:center;
    align-items:center;
    background:var(--purple-dark);
    border:3px solid var(--purple-deep);
    border-radius:50%;
    color:var(--white);
    font-size:.52rem;
    font-weight:800;
}
.HeroProofAvatars span:first-child{
    margin-left:0;
}
.HeroProofAvatars span:last-child{
    background:var(--purple);
}
.HeroStars{
    display:flex;
    gap:4px;
    color:#FBBF24;
    font-size:.58rem;
}
.HeroProof p{
    margin-top:5px;
    color:rgba(255,255,255,.48);
    font-size:12px;
}
.HeroVisual{
    position:relative;
    min-height:560px;
}
.BrowserMockup{
    position:absolute;
    top:30px;
    right:0;
    width:95%;
    background:#191221;
    border:1px solid rgba(255,255,255,.12);
    border-radius:23px;
    box-shadow:0 40px 90px rgba(0,0,0,.38);
    overflow:hidden;
    transform:perspective(1200px) rotateY(-5deg) rotateX(2deg);
}
.BrowserTop{
    height:50px;
    padding:0 17px;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:15px;
    background:#21172C;
    border-bottom:1px solid rgba(255,255,255,.07);
}
.BrowserDots{
    display:flex;
    gap:6px;
}
.BrowserDots span{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#6B5A76;
}
.BrowserDots span:first-child{
    background:#F87171;
}
.BrowserDots span:nth-child(2){
    background:#FBBF24;
}
.BrowserDots span:nth-child(3){
    background:#4ADE80;
}
.BrowserAddress{
    max-width:280px;
    width:100%;
    height:28px;
    margin:auto;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:7px;
    background:rgba(255,255,255,.06);
    border-radius:8px;
    color:rgba(255,255,255,.42);
    font-size:.48rem;
}
.BrowserScreen{
    position:relative;
    height:440px;
    overflow:hidden;
}
.BrowserScreen img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.BrowserOverlay{
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,transparent 35%,rgba(22,8,36,.88));
}
.BrowserContent{
    position:absolute;
    right:30px;
    bottom:30px;
    left:30px;
}
.BrowserContent span{
    color:var(--purple-light);
    font-size:.52rem;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
}
.BrowserContent strong{
    max-width:420px;
    margin-top:9px;
    display:block;
    font-size:1.8rem;
    line-height:1.12;
}
.HeroFloatingCard{
    position:absolute;
    z-index:5;
    padding:14px 16px;
    display:flex;
    align-items:center;
    gap:11px;
    background:rgba(255,255,255,.94);
    border:1px solid rgba(255,255,255,.8);
    border-radius:15px;
    box-shadow:0 18px 40px rgba(0,0,0,.18);
    color:var(--dark);
    backdrop-filter:blur(12px);
}
.HeroPerformance{
    top:5px;
    left:-15px;
}
.HeroResponsive{
    right:-20px;
    bottom:14px;
    animation-delay:.9s;
}
.HeroFloatingIcon{
    width:38px;
    height:38px;
    display:flex;
    justify-content:center;
    align-items:center;
    background:var(--purple-soft);
    border-radius:11px;
    color:var(--purple);
}
.HeroFloatingCard>div{
    display:flex;
    flex-direction:column;
    gap:3px;
}
.HeroFloatingCard small{
    color:var(--text);
    font-size:.45rem;
}
.HeroFloatingCard strong{
    font-size:.62rem;
}
.HeroProjectCount{
    position:absolute;
    left:5px;
    bottom:-36px;
    z-index:4;
    width:175px;
    padding:20px;
    background:linear-gradient(145deg,var(--purple),var(--purple-bright));
    border-radius:17px;
    box-shadow:0 20px 42px rgba(124,58,237,.3);
}
.HeroProjectCount strong{
    font-size:2rem;
}
.HeroProjectCount p{
    margin-top:5px;
    color:rgba(255,255,255,.72);
    font-size:.5rem;
    line-height:1.5;
}
.HeroBottom{
    position:absolute;
    right:0;
    bottom:0;
    left:0;
    z-index:3;
    min-height:92px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    background:rgba(255,255,255,.045);
    border-top:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(14px);
}
.HeroBottom>div{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    border-right:1px solid rgba(255,255,255,.08);
}
.HeroBottom>div:first-child{
    border-left:1px solid rgba(255,255,255,.08);
}
.HeroBottom i{
    color:var(--purple-light);
    font-size:.7rem;
}
.HeroBottom span{
    color:rgba(255,255,255,.58);
    font-size:14px;
    font-weight:700;
}
/*=====================================
              PRUEBA SOCIAL
======================================*/
.SocialProof{
    position:relative;
    z-index:5;
    background:var(--white);
    border-bottom:1px solid var(--border);
}
.SocialProofContainer{
    min-height:150px;
    display:grid;
    grid-template-columns:.75fr 1.25fr;
    align-items:center;
    gap:70px;
}
.SocialProofIntro>span{
    display:block;
    margin-bottom:8px;
    color:var(--purple);
    font-size:.55rem;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
}
.SocialProofIntro>strong{
    max-width:480px;
    display:block;
    color:var(--dark);
    font-size:1rem;
    line-height:1.5;
}
.SocialProofIndustries{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:14px;
}
.SocialProofIndustries span{
    min-height:63px;
    padding:10px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:13px;
    color:var(--text);
    font-size:12px;
    font-weight:700;
    text-align:center;
    transition:background .3s ease,border-color .3s ease,color .3s ease,transform .3s ease;
}
.SocialProofIndustries span:hover{
    background:var(--purple-soft);
    border-color:rgba(124,58,237,.22);
    color:var(--purple);
    transform:translateY(-4px);
}
.SocialProofIndustries i{
    color:var(--purple);
    font-size:.72rem;
}
/*=====================================
                SERVICIOS
======================================*/
.Services{
    background:var(--surface);
    overflow:hidden;
}
.ServicesHeader{
    margin-bottom:55px;
    display:grid;
    grid-template-columns:1fr .68fr;
    align-items:end;
    gap:80px;
}
.ServicesHeader .SectionTitle{
    max-width:750px;
    margin-top:16px;
    font-size:clamp(2.8rem,5vw,4.3rem);
    letter-spacing:-.045em;
}
.ServicesHeaderText{
    padding-bottom:5px;
}
.ServicesHeaderText .SectionDescription{
    max-width:520px;
}
.TextLink{
    margin-top:21px;
    display:inline-flex;
    align-items:center;
    gap:9px;
    color:var(--dark);
    font-size:.62rem;
    font-weight:800;
}
.TextLink i{
    color:var(--purple);
    transition:transform .3s ease;
}
.TextLink:hover i{
    transform:translateX(5px);
}
.ServicesGrid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    grid-auto-rows:minmax(310px,auto);
    gap:22px;
}
.ServiceCard{
    position:relative;
    padding:30px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    background:var(--white);
    border:1px solid var(--border);
    border-radius:22px;
    overflow:hidden;
    transition:transform .4s ease,box-shadow .4s ease,border-color .4s ease;
}
.ServiceCard:hover{
    border-color:transparent;
    box-shadow:0 26px 60px rgba(42,13,69,.11);
    transform:translateY(-8px);
}
.ServiceFeatured{
    grid-column:span 2;
    grid-row:span 2;
    min-height:642px;
    background:var(--purple-deep);
    border-color:var(--purple-deep);
    color:var(--white);
}
.ServiceFeatured::before{
    content:"";
    position:absolute;
    top:-130px;
    right:-110px;
    width:380px;
    height:380px;
    background:rgba(124,58,237,.18);
    border-radius:50%;
    filter:blur(3px);
}
.ServiceFeatured::after{
    content:"";
    position:absolute;
    right:45px;
    bottom:-170px;
    width:330px;
    height:330px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:50%;
}
.ServiceTop{
    position:absolute;
    top:28px;
    right:28px;
    left:28px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.ServiceIcon{
    width:52px;
    height:52px;
    display:flex;
    justify-content:center;
    align-items:center;
    background:var(--purple-soft);
    border-radius:15px;
    color:var(--purple);
    font-size:.95rem;
    transition:background .3s ease,color .3s ease,transform .3s ease;
}
.ServiceFeatured .ServiceIcon{
    background:rgba(255,255,255,.08);
    color:var(--purple-light);
}
.ServiceCard:hover .ServiceIcon{
    background:var(--purple);
    color:var(--white);
    transform:rotate(-5deg) scale(1.05);
}
.ServiceNumber{
    color:rgba(23,19,29,.08);
    font-family:var(--font-title);
    font-size:3rem;
    font-weight:800;
}
.ServiceFeatured .ServiceNumber{
    color:rgba(255,255,255,.07);
    font-size:5rem;
}
.ServiceLabel{
    position:relative;
    z-index:2;
    color:var(--purple);
    font-size:.5rem;
    font-weight:800;
    letter-spacing:.13em;
    text-transform:uppercase;
}
.ServiceFeatured .ServiceLabel{
    color:var(--purple-light);
}
.ServiceCard h3{
    position:relative;
    z-index:2;
    margin-top:11px;
    color:var(--dark);
    font-size:1.65rem;
    line-height:1.08;
}
.ServiceFeatured h3{
    max-width:650px;
    color:var(--white);
    font-size:3.1rem;
    letter-spacing:-.035em;
}
.ServiceCard>p{
    position:relative;
    z-index:2;
    margin-top:14px;
    color:var(--text);
    font-size:.66rem;
    line-height:1.78;
}
.ServiceFeatured>p{
    max-width:650px;
    color:rgba(255,255,255,.58);
    font-size:.75rem;
}
.ServiceFeatured ul{
    position:relative;
    z-index:2;
    margin-top:27px;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px 24px;
}
.ServiceFeatured li{
    display:flex;
    align-items:center;
    gap:9px;
    color:rgba(255,255,255,.7);
    font-size:.61rem;
}
.ServiceFeatured li i{
    color:var(--purple-light);
}
.ServiceCard>a:not(.Btn){
    position:relative;
    z-index:2;
    margin-top:24px;
    display:inline-flex;
    align-items:center;
    gap:9px;
    color:var(--dark);
    font-size:.59rem;
    font-weight:800;
}
.ServiceFeatured>a:not(.Btn){
    color:var(--white);
}
.ServiceCard>a i{
    color:var(--purple);
    transition:transform .3s ease;
}
.ServiceCard:hover>a i{
    transform:translateX(5px);
}
.ServiceCta{
    justify-content:center;
    align-items:flex-start;
    background:linear-gradient(145deg,var(--purple),var(--purple-bright));
    border-color:transparent;
    color:var(--white);
}
.ServiceCta::before{
    content:"";
    position:absolute;
    top:-80px;
    right:-65px;
    width:220px;
    height:220px;
    background:rgba(255,255,255,.1);
    border-radius:50%;
}
.ServiceCtaIcon{
    position:relative;
    z-index:2;
    width:50px;
    height:50px;
    display:flex;
    justify-content:center;
    align-items:center;
    background:rgba(255,255,255,.13);
    border-radius:15px;
    font-size:.95rem;
}
.ServiceCta h3{
    color:var(--white);
}
.ServiceCta>p{
    color:rgba(255,255,255,.68);
}
.ServiceCta .Btn{
    position:relative;
    z-index:2;
    margin-top:24px;
    background:var(--white);
    color:var(--purple);
}
.ServiceCta .Btn:hover{
    background:var(--purple-deep);
    color:var(--white);
}
/*=====================================
                PORTAFOLIO
======================================*/
.Portfolio{
    position:relative;
    background:var(--white);
    overflow:hidden;
}
.Portfolio::before{
    content:"";
    position:absolute;
    top:6%;
    right:-220px;
    width:540px;
    height:540px;
    background:rgba(124,58,237,.06);
    border-radius:50%;
    filter:blur(10px);
}
.PortfolioHeader{
    position:relative;
    z-index:2;
    margin-bottom:75px;
    display:grid;
    grid-template-columns:1fr .68fr;
    align-items:end;
    gap:80px;
}
.PortfolioHeader .SectionTitle{
    max-width:760px;
    margin-top:16px;
    letter-spacing:-.045em;
}
.PortfolioHeaderText{
    padding-bottom:5px;
}
.PortfolioHeaderText .SectionDescription{
    max-width:520px;
}
.PortfolioList{
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    gap:110px;
}
.PortfolioProject{
    display:grid;
    grid-template-columns:1.2fr .8fr;
    align-items:center;
    gap:80px;
}
.PortfolioProject.PortfolioReverse{
    grid-template-columns:.8fr 1.2fr;
}
.PortfolioReverse .PortfolioVisual{
    order:2;
}
.PortfolioReverse .PortfolioContent{
    order:1;
}
.PortfolioVisual{
    position:relative;
}
.PortfolioBrowser{
    position:relative;
    background:#1C1226;
    border:1px solid rgba(124,58,237,.13);
    border-radius:22px;
    box-shadow:0 35px 80px rgba(42,13,69,.18);
    overflow:hidden;
    transition:transform .5s ease,box-shadow .5s ease;
}
.PortfolioProject:hover .PortfolioBrowser{
    box-shadow:0 45px 95px rgba(42,13,69,.25);
    transform:translateY(-8px);
}
.PortfolioBrowserTop{
    min-height:48px;
    padding:0 18px;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:15px;
    background:#24172F;
    border-bottom:1px solid rgba(255,255,255,.06);
}
.PortfolioBrowserTop>div{
    display:flex;
    gap:6px;
}
.PortfolioBrowserTop>div span{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#695774;
}
.PortfolioBrowserTop>div span:first-child{
    background:#F87171;
}
.PortfolioBrowserTop>div span:nth-child(2){
    background:#FBBF24;
}
.PortfolioBrowserTop>div span:nth-child(3){
    background:#4ADE80;
}
.PortfolioBrowserTop small{
    justify-self:center;
    color:rgba(255,255,255,.37);
    font-size:.47rem;
}
.PortfolioBrowserTop>i{
    color:rgba(255,255,255,.35);
    font-size:.58rem;
}
.PortfolioImage{
    position:relative;
    height:430px;
    overflow:hidden;
}
.PortfolioImage img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:top;
    transition:transform 1.2s cubic-bezier(.2,.8,.2,1);
}
.PortfolioProject:hover .PortfolioImage img{
    transform:scale(1.035);
}
.PortfolioImageOverlay{
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,transparent 65%,rgba(22,8,36,.18));
    pointer-events:none;
}
.PortfolioIndex{
    position:absolute;
    right:-22px;
    bottom:-37px;
    z-index:-1;
    color:var(--purple-soft);
    font-family:var(--font-title);
    font-size:8rem;
    font-weight:800;
    line-height:1;
}
.PortfolioReverse .PortfolioIndex{
    right:auto;
    left:-22px;
}
.PortfolioContent{
    max-width:500px;
}
.PortfolioCategory{
    color:var(--purple);
    font-size:.53rem;
    font-weight:800;
    letter-spacing:.14em;
    text-transform:uppercase;
}
.PortfolioContent h3{
    margin-top:12px;
    color:var(--dark);
    font-size:3.2rem;
    line-height:1;
    letter-spacing:-.045em;
}
.PortfolioContent>p{
    margin-top:19px;
    color:var(--text);
    font-size: 16px;
    color: #121212;
    line-height:1.85;
}
.PortfolioTags{
    margin-top:25px;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}
.PortfolioTags span{
    padding:8px 11px;
    background:var(--purple-soft);
    border:1px solid rgba(124,58,237,.1);
    border-radius:30px;
    color:var(--purple);
    font-size:.49rem;
    font-weight:800;
}
.PortfolioLink{
    margin-top:28px;
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:var(--dark);
    font-size:.62rem;
    font-weight:800;
}
.PortfolioLink i{
    color:var(--purple);
    transition:transform .3s ease;
}
.PortfolioLink:hover i{
    transform:translateX(6px);
}
.PortfolioCta{
    margin-top:120px;
    padding:38px 42px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:40px;
    background:linear-gradient(135deg,var(--purple-deep),var(--purple-dark));
    border-radius:26px;
    color:var(--white);
    box-shadow:0 28px 65px rgba(42,13,69,.2);
}
.PortfolioCta>div{
    max-width:720px;
}
.PortfolioCta span{
    display:flex;
    align-items:center;
    gap:9px;
    color:var(--purple-light);
    font-size:.53rem;
    font-weight:800;
    letter-spacing:.11em;
    text-transform:uppercase;
}
.PortfolioCta h3{
    margin-top:12px;
    font-size:2rem;
    line-height:1.15;
    letter-spacing:-.03em;
}
.PortfolioCta .Btn{
    flex-shrink:0;
    background:var(--white);
    color:var(--purple);
}
.PortfolioCta .Btn:hover{
    background:var(--purple);
    color:var(--white);
}
/*=====================================
            PROCESO DE TRABAJO
======================================*/
.Process{
    position:relative;
    background:var(--surface);
    overflow:hidden;
}
.Process::before{
    content:"";
    position:absolute;
    top:-230px;
    left:-180px;
    width:520px;
    height:520px;
    background:rgba(124,58,237,.07);
    border-radius:50%;
}
.ProcessHeader{
    position:relative;
    z-index:2;
    margin-bottom:60px;
    display:grid;
    grid-template-columns:1fr .68fr;
    align-items:end;
    gap:80px;
}
.ProcessHeader .SectionTitle{
    max-width:760px;
    margin-top:16px;
    letter-spacing:-.045em;
}
.ProcessHeaderText{
    padding-bottom:5px;
}
.ProcessHeaderText .SectionDescription{
    max-width:520px;
}
.ProcessGrid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}
.ProcessGrid::before{
    content:"";
    position:absolute;
    top:71px;
    right:8%;
    left:8%;
    z-index:-1;
    height:2px;
    background:linear-gradient(90deg,rgba(124,58,237,.1),rgba(124,58,237,.55),rgba(236,72,153,.25));
}
.ProcessCard{
    position:relative;
    min-height:390px;
    padding:28px;
    display:flex;
    flex-direction:column;
    background:var(--white);
    border:1px solid var(--border);
    border-radius:21px;
    transition:transform .4s ease,box-shadow .4s ease,border-color .4s ease;
}
.ProcessCard:hover{
    border-color:transparent;
    box-shadow:0 25px 58px rgba(42,13,69,.1);
    transform:translateY(-8px);
}
.ProcessTop{
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.ProcessNumber{
    color:var(--purple);
    font-family:var(--font-title);
    font-size:1.15rem;
    font-weight:800;
}
.ProcessIcon{
    width:54px;
    height:54px;
    display:flex;
    justify-content:center;
    align-items:center;
    background:var(--purple-deep);
    border-radius:16px;
    color:var(--white);
    font-size:.92rem;
    box-shadow:0 14px 30px rgba(42,13,69,.18);
    transition:background .3s ease,transform .3s ease;
}
.ProcessCard:hover .ProcessIcon{
    background:linear-gradient(145deg,var(--purple),var(--purple-bright));
    transform:rotate(-5deg) scale(1.05);
}
.ProcessLabel{
    margin-top:34px;
    color:var(--purple);
    font-size:.49rem;
    font-weight:800;
    letter-spacing:.13em;
    text-transform:uppercase;
}
.ProcessCard h3{
    margin-top:10px;
    color:var(--dark);
    font-size:1.55rem;
    line-height:1.1;
    letter-spacing:-.025em;
}
.ProcessCard>p{
    margin-top:15px;
    color:var(--text);
    font-size:.64rem;
    line-height:1.78;
}
.ProcessMeta{
    margin-top:auto;
    padding-top:21px;
    display:flex;
    align-items:center;
    gap:8px;
    border-top:1px solid var(--border);
    color:var(--text);
}
.ProcessMeta i{
    color:var(--purple);
    font-size:.62rem;
}
.ProcessMeta span{
    font-size:.52rem;
    font-weight:700;
}
.ProcessBanner{
    position:relative;
    z-index:2;
    margin-top:34px;
    padding:29px 32px;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:20px;
    background:var(--white);
    border:1px solid var(--border);
    border-radius:21px;
}
.ProcessBannerIcon{
    width:54px;
    height:54px;
    display:flex;
    justify-content:center;
    align-items:center;
    background:var(--purple-soft);
    border-radius:16px;
    color:var(--purple);
}
.ProcessBanner>div:nth-child(2){
    display:flex;
    flex-direction:column;
    gap:6px;
}
.ProcessBanner span{
    color:var(--purple);
    font-size:.49rem;
    font-weight:800;
    letter-spacing:.1em;
    text-transform:uppercase;
}
.ProcessBanner h3{
    color:var(--dark);
    font-size:1.1rem;
    line-height:1.35;
}
.ProcessBanner .Btn{
    flex-shrink:0;
}
/*=====================================
            WHY LAREN
======================================*/
.Why{
    background:#fff;
}
.WhyHeader{
    display:grid;
    grid-template-columns:1fr .65fr;
    gap:80px;
    align-items:end;
    margin-bottom:70px;
}
.WhyComparison{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    gap:30px;
    align-items:center;
}
.CompareCard{
    padding:45px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:25px;
}
.CompareCard h3{
    margin:20px 0 30px;
    font-size:2rem;
}
.CompareCard ul{
    display:flex;
    flex-direction:column;
    gap:18px;
}
.CompareCard li{
    display:flex;
    gap:12px;
    align-items:center;
    font-size:.72rem;
    color:var(--text);
}
.CompareCard li i{
    width:30px;
    height:30px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
}
.Bad li i{
    background:#FFE8E8;
    color:#D93B3B;
}
.Good li i{
    background:#E9F8EE;
    color:#17A34A;
}
.CompareTag{
    display:inline-flex;
    padding:8px 14px;
    border-radius:30px;
    background:var(--purple-soft);
    color:var(--purple);
    font-size:.52rem;
    font-weight:800;
}
.Bad{
    background:#FFF2F2;
    color:#D93B3B;
}
.CompareCenter{
    width:90px;
    height:90px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--purple),var(--purple-bright));
    display:flex;
    justify-content:center;
    align-items:center;
    color:#fff;
    font-size:1.3rem;
    font-weight:800;
}
.WhyStats{
    margin-top:70px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}
.WhyStat{
    padding:35px;
    background:var(--surface);
    border-radius:22px;
    text-align:center;
}
.WhyStat strong{
    display:block;
    font-size:3rem;
    color:var(--purple);
}
.WhyStat span{
    display:block;
    margin-top:12px;
    color:var(--text);
    font-size:.62rem;
    line-height:1.7;
}
/*=====================================
                PLANES
======================================*/
.Plans{
    position:relative;
    background:var(--surface);
    overflow:hidden;
}
.Plans::before{
    content:"";
    position:absolute;
    top:-220px;
    right:-180px;
    width:520px;
    height:520px;
    background:rgba(124,58,237,.08);
    border-radius:50%;
}
.PlansHeader{
    position:relative;
    z-index:2;
    margin-bottom:60px;
    display:grid;
    grid-template-columns:1fr .68fr;
    align-items:end;
    gap:80px;
}
.PlansHeader .SectionTitle{
    max-width:720px;
    margin-top:16px;
    letter-spacing:-.045em;
}
.PlansHeaderText{
    padding-bottom:5px;
}
.PlansHeaderText .SectionDescription{
    max-width:520px;
}
.PlansGrid{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    align-items:stretch;
    gap:22px;
}
.PlanCard{
    position:relative;
    padding:32px;
    display:flex;
    flex-direction:column;
    background:var(--white);
    border:1px solid var(--border);
    border-radius:24px;
    transition:transform .4s ease,box-shadow .4s ease,border-color .4s ease;
}
.PlanCard:hover{
    border-color:transparent;
    box-shadow:0 28px 65px rgba(42,13,69,.12);
    transform:translateY(-8px);
}
.PlanFeatured{
    background:var(--purple-deep);
    border-color:var(--purple-deep);
    color:var(--white);
    box-shadow:0 30px 70px rgba(42,13,69,.2);
    transform:translateY(-14px);
}
.PlanFeatured:hover{
    transform:translateY(-22px);
}
.PlanBadge{
    position:absolute;
    top:-15px;
    left:50%;
    padding:9px 16px;
    display:flex;
    align-items:center;
    gap:7px;
    background:linear-gradient(135deg,var(--purple),var(--purple-bright));
    border-radius:30px;
    color:var(--white);
    font-size:.5rem;
    font-weight:800;
    white-space:nowrap;
    transform:translateX(-50%);
    box-shadow:0 12px 25px rgba(124,58,237,.3);
}
.PlanTop{
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.PlanIcon{
    width:52px;
    height:52px;
    display:flex;
    justify-content:center;
    align-items:center;
    background:var(--purple-soft);
    border-radius:15px;
    color:var(--purple);
    font-size:.9rem;
}
.PlanFeatured .PlanIcon{
    background:rgba(255,255,255,.09);
    color:var(--purple-light);
}
.PlanType{
    padding:7px 10px;
    background:var(--surface);
    border-radius:20px;
    color:var(--text);
    font-size:.46rem;
    font-weight:800;
    text-transform:uppercase;
}
.PlanFeatured .PlanType{
    background:rgba(255,255,255,.08);
    color:rgba(255,255,255,.58);
}
.PlanLabel{
    margin-top:29px;
    color:var(--purple);
    font-size:.49rem;
    font-weight:800;
    letter-spacing:.13em;
    text-transform:uppercase;
}
.PlanFeatured .PlanLabel{
    color:var(--purple-light);
}
.PlanCard h3{
    margin-top:9px;
    color:var(--dark);
    font-size:1.75rem;
    line-height:1.08;
}
.PlanFeatured h3{
    color:var(--white);
}
.PlanDescription{
    min-height:70px;
    margin-top:14px;
    color:var(--text);
    font-size:.64rem;
    line-height:1.75;
}
.PlanFeatured .PlanDescription{
    color:rgba(255,255,255,.56);
}
.PlanPrice{
    margin-top:25px;
    padding:22px 0;
    display:flex;
    align-items:flex-end;
    gap:7px;
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
}
.PlanFeatured .PlanPrice{
    border-color:rgba(255,255,255,.1);
}
.PlanPrice span{
    align-self:center;
    color:var(--text);
    font-size:.49rem;
    font-weight:800;
    text-transform:uppercase;
}
.PlanFeatured .PlanPrice span{
    color:rgba(255,255,255,.46);
}
.PlanPrice strong{
    color:var(--purple);
    font-size:2.45rem;
    line-height:1;
    letter-spacing:-.05em;
}
.PlanFeatured .PlanPrice strong{
    color:var(--purple-light);
}
.PlanPrice small{
    margin-bottom:3px;
    color:var(--text);
    font-size:.53rem;
}
.PlanFeatured .PlanPrice small{
    color:rgba(255,255,255,.46);
}
.PlanOwnership{
    margin-top:15px;
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--purple);
    font-size:.54rem;
    font-weight:800;
}
.PlanFeatured .PlanOwnership{
    color:var(--purple-light);
}
.PlanFeatures{
    margin:25px 0 30px;
    display:flex;
    flex-direction:column;
    gap:13px;
}
.PlanFeatures li{
    display:flex;
    align-items:flex-start;
    gap:9px;
    color:var(--text);
    font-size:14px;
    color: #121212;
    line-height:1.55;
}
.PlanFeatured .PlanFeatures li{
    color:rgba(255,255,255,.65);
}
.PlanFeatures i{
    margin-top:2px;
    color:var(--purple);
}
.PlanFeatured .PlanFeatures i{
    color:var(--purple-light);
}
.PlanButton{
    width:100%;
    margin-top:auto;
    border-color:var(--border);
    color:var(--dark);
}
.PlanCard:not(.PlanFeatured) .PlanButton:hover{
    background:var(--purple);
    border-color:var(--purple);
    color:var(--white);
}
.PlanFeatured .PlanButton{
    background:linear-gradient(135deg,var(--purple),var(--purple-bright));
}
.PlansNote{
    position:relative;
    z-index:2;
    margin-top:38px;
    padding:20px 24px;
    display:flex;
    align-items:flex-start;
    gap:12px;
    background:var(--white);
    border:1px solid var(--border);
    border-radius:16px;
}
.PlansNote i{
    margin-top:2px;
    color:var(--purple);
}
.PlansNote p{
    color:var(--text);
    font-size:.57rem;
    line-height:1.7;
}
/*=====================================
              COMPLEMENTOS
======================================*/
.Extras{
    background:var(--white);
}
.ExtrasHeader{
    margin-bottom:55px;
    display:grid;
    grid-template-columns:1fr .68fr;
    align-items:end;
    gap:80px;
}
.ExtrasHeader .SectionTitle{
    max-width:760px;
    margin-top:16px;
    letter-spacing:-.045em;
}
.ExtrasGrid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px;
}
.ExtraCard{
    position:relative;
    padding:35px;
    display:grid;
    grid-template-columns:auto 1fr;
    gap:24px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:24px;
    overflow:hidden;
    transition:transform .4s ease,box-shadow .4s ease,border-color .4s ease;
}
.ExtraCard:hover{
    border-color:transparent;
    box-shadow:0 26px 60px rgba(42,13,69,.11);
    transform:translateY(-8px);
}
.ExtraCare{
    background:linear-gradient(145deg,var(--purple-deep),var(--purple-dark));
    border-color:transparent;
    color:var(--white);
}
.ExtraCare::before{
    content:"";
    position:absolute;
    top:-100px;
    right:-90px;
    width:260px;
    height:260px;
    background:rgba(168,85,247,.16);
    border-radius:50%;
}
.ExtraIcon{
    position:relative;
    z-index:2;
    width:58px;
    height:58px;
    display:flex;
    justify-content:center;
    align-items:center;
    background:var(--purple-soft);
    border-radius:17px;
    color:var(--purple);
    font-size:1rem;
}
.ExtraCare .ExtraIcon{
    background:rgba(255,255,255,.09);
    color:var(--purple-light);
}
.ExtraContent{
    position:relative;
    z-index:2;
}
.ExtraLabel{
    color:var(--purple);
    font-size:.48rem;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
}
.ExtraCare .ExtraLabel{
    color:var(--purple-light);
}
.ExtraContent h3{
    margin-top:8px;
    color:var(--dark);
    font-size:1.8rem;
}
.ExtraCare h3{
    color:var(--white);
}
.ExtraContent>p{
    margin-top:13px;
    color:var(--text);
    font-size:12px;
    line-height:1.75;
}
.ExtraCare .ExtraContent>p{
    color:rgba(255,255,255,.56);
}
.ExtraPrice{
    margin-top:22px;
    display:flex;
    align-items:flex-end;
    gap:7px;
}
.ExtraPrice span{
    align-self:center;
    color:var(--text);
    font-size:.48rem;
    text-transform:uppercase;
}
.ExtraPrice strong{
    color:var(--purple);
    font-size:1.9rem;
    line-height:1;
}
.ExtraCare .ExtraPrice strong{
    color:var(--purple-light);
}
.ExtraPrice small{
    color:var(--text);
    font-size:.5rem;
}
.ExtraCare .ExtraPrice span,.ExtraCare .ExtraPrice small{
    color:rgba(255,255,255,.45);
}
.ExtraContent ul{
    margin-top:23px;
    display:flex;
    flex-direction:column;
    gap:11px;
}
.ExtraContent li{
    display:flex;
    align-items:flex-start;
    gap:9px;
    color:var(--text);
    font-size:14px;
}
.ExtraCare li{
    color:rgba(255,255,255,.62);
}
.ExtraContent li i{
    color:var(--purple);
}
.ExtraCare li i{
    color:var(--purple-light);
}
.ExtraNote{
    margin-top:20px;
    display:block;
    color:var(--text);
    font-size:.5rem;
    line-height:1.6;
}
.ExtraCare .ExtraNote{
    color:rgba(255,255,255,.4);
}
.ExtraCare .TextLink{
    color:var(--white);
}
.ExtraCare .TextLink i{
    color:var(--purple-light);
}
/*=====================================
                  FAQ
======================================*/
.Faq{
    position:relative;
    background:var(--white);
    overflow:hidden;
}
.Faq::before{
    content:"";
    position:absolute;
    right:-190px;
    bottom:-230px;
    width:520px;
    height:520px;
    background:rgba(124,58,237,.06);
    border-radius:50%;
}
.FaqContainer{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:.72fr 1.28fr;
    align-items:start;
    gap:90px;
}
.FaqIntro{
    position:sticky;
    top:125px;
}
.FaqIntro .SectionTitle{
    max-width:570px;
    margin-top:16px;
    letter-spacing:-.045em;
}
.FaqIntro>.SectionDescription{
    max-width:500px;
    margin-top:21px;
    color: #121212;
    font-size: 14px;
}
.FaqHelp{
    margin-top:31px;
    padding:22px;
    display:grid;
    grid-template-columns:auto 1fr;
    gap:15px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:18px;
}
.FaqHelpIcon{
    width:48px;
    height:48px;
    display:flex;
    justify-content:center;
    align-items:center;
    background:var(--purple-soft);
    border-radius:14px;
    color:var(--purple);
}
.FaqHelp>div{
    display:flex;
    flex-direction:column;
}
.FaqHelp small{
    color:var(--purple);
    font-size:.47rem;
    font-weight:800;
    letter-spacing:.1em;
    text-transform:uppercase;
}
.FaqHelp strong{
    margin-top:5px;
    color:var(--dark);
    font-size:.9rem;
}
.FaqHelp p{
    margin-top:6px;
    color:var(--text);
    font-size:.57rem;
    line-height:1.65;
}
.FaqIntro>.Btn{
    margin-top:25px;
}
.FaqList{
    gap:13px;
}
.FaqItem{
    border-radius:17px;
}
.FaqItem.Active{
    border-color:rgba(124,58,237,.3);
    box-shadow:0 18px 45px rgba(42,13,69,.08);
}
.FaqQuestion{
    min-height:82px;
    padding:21px 23px;
    font-size:14px;
}
.FaqQuestion>i{
    background:var(--purple-soft);
    border-radius:11px;
    color:var(--purple);
}
.FaqItem.Active .FaqQuestion>i{
    background:linear-gradient(135deg,var(--purple),var(--purple-bright));
}
.FaqAnswer p{
    padding:0 75px 23px 23px;
    font-size: 14px;
    color: #121212;
}
/*=====================================
                CONTACTO
======================================*/
.Contact{
    position:relative;
    background:#d5ccf1;
    overflow:hidden;
}
.Contact::before{
    content:"";
    position:absolute;
    top:-190px;
    left:-180px;
    width:520px;
    height:520px;
    background:rgba(124,58,237,.08);
    border-radius:50%;
}
.ContactContainer{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:.82fr 1.18fr;
    align-items:center;
    gap:80px;
}
.ContactIntro .SectionTitle{
    max-width:620px;
    margin-top:16px;
    letter-spacing:-.045em;
}
.ContactIntro>.SectionDescription{
    max-width:540px;
    margin-top:21px;
}
.ContactBenefits{
    margin-top:35px;
    display:flex;
    flex-direction:column;
    gap:20px;
}
.ContactBenefits>div{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:15px;
}
.ContactBenefits>div>span{
    width:46px;
    height:46px;
    display:flex;
    justify-content:center;
    align-items:center;
    background:var(--purple-soft);
    border-radius:14px;
    color:var(--purple);
}
.ContactBenefits strong{
    color:var(--dark);
    font-size:.72rem;
}
.ContactBenefits p{
    margin-top:5px;
    color:var(--text);
    font-size:.58rem;
    line-height:1.65;
}
.ContactDirect{
    margin-top:35px;
    padding-top:27px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
    border-top:1px solid var(--border);
}
.ContactDirect>span{
    color:var(--text);
    font-size:.52rem;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.ContactDirect a{
    display:flex;
    align-items:center;
    gap:9px;
    color:var(--dark);
    font-size:.63rem;
    font-weight:800;
}
.ContactDirect a i{
    width:18px;
    color:var(--purple);
}
.ContactPanel{
    padding:45px;
    background:var(--white);
    border:1px solid var(--border);
    border-radius:26px;
    box-shadow:0 32px 75px rgba(42,13,69,.12);
}
.ContactFormHeader>span{
    color:var(--purple);
    font-size:.5rem;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
}
.ContactFormHeader h3{
    margin-top:8px;
    color:var(--dark);
    font-size:2rem;
    letter-spacing:-.035em;
}
.ContactForm .FormGrid{
    margin-top:30px;
}
.ContactForm .FormGroup input,.ContactForm .FormGroup select,.ContactForm .FormGroup textarea{
    background:var(--surface);
    border-color:var(--border);
    border-radius:13px;
}
.ContactForm .FormGroup textarea{
    min-height:150px;
}
.Honeypot{
    position:absolute!important;
    left:-9999px!important;
    width:1px!important;
    height:1px!important;
    opacity:0!important;
}
.ContactForm .FormCheck{
    margin-top:21px;
}
.ContactSubmit{
    margin-top:23px;
    background:linear-gradient(135deg,var(--purple),var(--purple-bright));
    box-shadow:0 16px 34px rgba(124,58,237,.22);
}
.ContactSubmit:hover{
    background:linear-gradient(135deg,var(--purple-bright),var(--pink));
}
/*=====================================
              CTA FINAL
======================================*/
.FinalCta{
    padding:50 0 50px;
    background:var(--surface);
}
.FinalCtaContainer{
    position:relative;
    padding:48px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:40px;
    background:linear-gradient(135deg,var(--purple-deep),var(--purple-dark));
    border-radius:28px;
    color:var(--white);
    box-shadow:0 30px 70px rgba(42,13,69,.22);
    overflow:hidden;
}
.FinalCtaContainer::before{
    content:"";
    position:absolute;
    top:-160px;
    right:-100px;
    width:360px;
    height:360px;
    background:rgba(168,85,247,.18);
    border-radius:50%;
}
.FinalCtaContainer>div{
    position:relative;
    z-index:2;
    max-width:780px;
}
.FinalCtaContainer span{
    display:flex;
    align-items:center;
    gap:9px;
    color:var(--purple-light);
    font-size:.52rem;
    font-weight:800;
    letter-spacing:.11em;
    text-transform:uppercase;
}
.FinalCtaContainer h2{
    margin-top:13px;
    font-size:2.4rem;
    line-height:1.12;
    letter-spacing:-.04em;
}
.FinalCtaButton{
    position:relative;
    z-index:2;
    flex-shrink:0;
    background:var(--white);
    color:var(--purple);
}
.FinalCtaButton:hover{
    background:var(--purple);
    color:var(--white);
}
/*=====================================
                FOOTER
======================================*/
.Footer{
    background:#100619;
    color:var(--white);
}
.FooterMain{
    padding-top:85px;
    padding-bottom:68px;
    display:grid;
    grid-template-columns:1.35fr .7fr 1fr 1fr;
    gap:60px;
}
.FooterLogo{
    width:max-content;
}
.FooterBrand>p{
    max-width:370px;
    margin-top:23px;
    color:rgba(255,255,255,.43);
    font-size:12px;
    line-height:1.85;
}
.FooterSocial{
    margin-top:25px;
    display:flex;
    gap:9px;
}
.FooterSocial a{
    width:39px;
    height:39px;
    display:flex;
    justify-content:center;
    align-items:center;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.1);
    border-radius:12px;
    color:rgba(255,255,255,.66);
    font-size:.65rem;
    transition:background .3s ease,border-color .3s ease,color .3s ease,transform .3s ease;
}
.FooterSocial a:hover{
    background:var(--purple);
    border-color:var(--purple);
    color:var(--white);
    transform:translateY(-3px);
}
.FooterColumn h3{
    margin-bottom:22px;
    color:var(--white);
    font-size:1rem;
}
.FooterColumn nav{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
}
.FooterColumn nav a{
    color:rgba(255,255,255,.43);
    font-size:12px;
    transition:color .3s ease,transform .3s ease;
}
.FooterColumn nav a:hover{
    color:var(--purple-light);
    transform:translateX(4px);
}
.FooterContact{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:15px;
}
.FooterContact h3{
    margin-bottom:7px;
}
.FooterContact>a,.FooterContact>p{
    display:grid;
    grid-template-columns:18px 1fr;
    gap:9px;
    color:rgba(255,255,255,.43);
    font-size:12px;
    line-height:1.6;
}
.FooterContact i{
    margin-top:2px;
    color:var(--purple-light);
}
.FooterContact a{
    transition:color .3s ease;
}
.FooterContact a:hover{
    color:var(--white);
}
.FooterBottom{
    min-height:78px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:25px;
    border-top:1px solid rgba(255,255,255,.08);
}
.FooterBottom p,.FooterBottom a{
    color:rgba(255,255,255,.3);
    font-size:.5rem;
}
.FooterBottom>div{
    display:flex;
    gap:22px;
}
.FooterBottom a{
    transition:color .3s ease;
}
.FooterBottom a:hover{
    color:var(--purple-light);
}
/*=====================================
              RESPONSIVE
======================================*/
@media(max-width:1050px){
    .Navigation{
        gap:18px;
    }
    .HeroContainer{
        gap:50px;
    }
    .BrowserScreen{
        height:400px;
    }
}
@media(max-width:900px){
    .MenuButton{
        display:flex;
    }
    .Navigation{
        position:absolute;
        top:calc(100% + 1px);
        right:20px;
        left:20px;
        padding:18px;
        flex-direction:column;
        align-items:stretch;
        gap:4px;
        background:var(--white);
        border:1px solid var(--border);
        border-radius:18px;
        box-shadow:0 25px 60px rgba(20,8,31,.22);
        opacity:0;
        visibility:hidden;
        transform:translateY(-12px);
        transition:opacity .3s ease,visibility .3s ease,transform .3s ease;
    }
    .Navigation.Active{
        opacity:1;
        visibility:visible;
        transform:translateY(0);
    }
    .Navigation a{
        padding:14px 15px;
        border-radius:11px;
        color:var(--dark);
    }
    .Navigation a::after{
        display:none;
    }
    .Navigation a:hover,.Navigation a.Active{
        background:var(--purple-soft);
        color:var(--purple);
    }
    .Hero{
        min-height:auto;
        padding:155px 0 155px;
    }
    .HeroContainer{
        grid-template-columns:1fr;
    }
    .HeroVisual{
        width:min(100%,700px);
        margin:auto;
    }
}
@media(max-width:650px){
    .HeaderButton{
        display:none;
    }
    .Hero{
        padding:135px 0 355px;
    }
    .HeroContent h1{
        font-size:3.35rem;
    }
    .HeroActions{
        flex-direction:column;
    }
    .HeroActions .Btn{
        width:100%;
    }
    .HeroVisual{
        min-height:480px;
    }
    .BrowserMockup{
        width:100%;
        transform:none;
    }
    .BrowserScreen{
        height:350px;
    }
    .HeroPerformance{
        left:8px;
    }
    .HeroResponsive{
        right:8px;
    }
    .HeroBottom{
        grid-template-columns:repeat(2,1fr);
    }
    .HeroBottom>div{
        min-height:82px;
    }
}
@media(max-width:430px){
    .LogoText small{
        display:none;
    }
    .Hero{
        padding-bottom:660px;
    }
    .HeroContent h1{
        font-size:2.9rem;
    }
    .HeroVisual{
        min-height:440px;
    }
    .BrowserScreen{
        height:300px;
    }
    .BrowserContent strong{
        font-size:1.45rem;
    }
    .HeroFloatingCard{
        padding:11px;
    }
    .HeroResponsive{
        bottom:35px;
    }
    .HeroProjectCount{
        bottom:-55px;
    }
    .HeroBottom{
        grid-template-columns:1fr;
    }
    .HeroBottom>div{
        border-right:none;
        border-bottom:1px solid rgba(255,255,255,.08);
    }
    .HeroBottom>div:first-child{
        border-left:none;
    }
    .HeroBottom>div:last-child{
        border-bottom:none;
    }
}
@media(max-width:1050px){
    .SocialProofContainer{
        grid-template-columns:1fr;
        padding:35px 0;
        gap:25px;
    }
    .SocialProofIndustries{
        grid-template-columns:repeat(5,1fr);
    }
    .ServicesHeader{
        gap:50px;
    }
    .ServicesGrid{
        grid-template-columns:repeat(2,1fr);
    }
    .ServiceFeatured{
        grid-column:1/-1;
        grid-row:auto;
        min-height:530px;
    }
}
@media(max-width:750px){
    .SocialProofIndustries{
        grid-template-columns:repeat(2,1fr);
    }
    .SocialProofIndustries span:last-child{
        grid-column:1/-1;
    }
    .ServicesHeader{
        grid-template-columns:1fr;
        gap:23px;
    }
}
@media(max-width:600px){
    .ServicesGrid{
        grid-template-columns:1fr;
    }
    .ServiceFeatured{
        min-height:570px;
    }
    .ServiceFeatured h3{
        font-size:2.45rem;
    }
    .ServiceFeatured ul{
        grid-template-columns:1fr;
    }
}
@media(max-width:430px){
    .SocialProofIndustries{
        grid-template-columns:1fr;
    }
    .SocialProofIndustries span:last-child{
        grid-column:auto;
    }
    .ServiceCard{
        min-height:320px;
        padding:25px;
    }
    .ServiceFeatured{
        min-height:620px;
    }
    .ServiceTop{
        top:24px;
        right:24px;
        left:24px;
    }
}
@media(max-width:1050px){
    .PortfolioHeader{
        gap:50px;
    }
    .PortfolioProject,.PortfolioProject.PortfolioReverse{
        grid-template-columns:1fr 1fr;
        gap:50px;
    }
    .PortfolioImage{
        height:370px;
    }
    .PortfolioContent h3{
        font-size:2.75rem;
    }
}
@media(max-width:800px){
    .PortfolioHeader{
        grid-template-columns:1fr;
        gap:23px;
    }
    .PortfolioList{
        gap:85px;
    }
    .PortfolioProject,.PortfolioProject.PortfolioReverse{
        grid-template-columns:1fr;
        gap:38px;
    }
    .PortfolioReverse .PortfolioVisual,.PortfolioReverse .PortfolioContent{
        order:initial;
    }
    .PortfolioContent{
        max-width:680px;
    }
    .PortfolioImage{
        height:430px;
    }
    .PortfolioCta{
        align-items:flex-start;
        flex-direction:column;
    }
}
@media(max-width:600px){
    .PortfolioList{
        gap:70px;
    }
    .PortfolioBrowserTop small{
        max-width:180px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }
    .PortfolioImage{
        height:330px;
    }
    .PortfolioIndex{
        right:0;
        bottom:-27px;
        font-size:5.5rem;
    }
    .PortfolioReverse .PortfolioIndex{
        left:0;
    }
    .PortfolioContent h3{
        font-size:2.45rem;
    }
    .PortfolioCta{
        margin-top:85px;
        padding:32px 27px;
    }
    .PortfolioCta h3{
        font-size:1.7rem;
    }
    .PortfolioCta .Btn{
        width:100%;
    }
}
@media(max-width:430px){
    .PortfolioImage{
        height:270px;
    }
    .PortfolioBrowserTop{
        padding:0 12px;
        gap:8px;
    }
    .PortfolioBrowserTop small{
        max-width:135px;
    }
    .PortfolioContent h3{
        font-size:2.15rem;
    }
}
@media(max-width:1050px){
    .ProcessHeader{
        gap:50px;
    }
    .ProcessGrid{
        grid-template-columns:repeat(2,1fr);
    }
    .ProcessGrid::before{
        display:none;
    }
}
@media(max-width:750px){
    .ProcessHeader{
        grid-template-columns:1fr;
        gap:23px;
    }
    .ProcessBanner{
        grid-template-columns:auto 1fr;
    }
    .ProcessBanner .Btn{
        grid-column:1/-1;
        margin-left:74px;
    }
}
@media(max-width:600px){
    .ProcessGrid{
        grid-template-columns:1fr;
    }
    .ProcessCard{
        min-height:350px;
    }
    .ProcessBanner{
        padding:26px;
        grid-template-columns:1fr;
        text-align:center;
    }
    .ProcessBannerIcon{
        margin:auto;
    }
    .ProcessBanner .Btn{
        grid-column:auto;
        width:100%;
        margin-left:0;
    }
}

@media(max-width:1000px){
    .WhyHeader{
        grid-template-columns:1fr;
    }
    .WhyComparison{
        grid-template-columns:1fr;
    }
    .CompareCenter{
        margin:auto;
    }
    .WhyStats{
        grid-template-columns:repeat(2,1fr);
    }
}
@media(max-width:650px){
    .WhyStats{
        grid-template-columns:1fr;
    }
    .CompareCard{
        padding:30px;
    }
}
@media(max-width:1050px){
    .PlansHeader,.ExtrasHeader{
        gap:50px;
    }
    .PlansGrid{
        grid-template-columns:repeat(2,1fr);
    }
    .PlanFeatured{
        transform:none;
    }
    .PlanFeatured:hover{
        transform:translateY(-8px);
    }
    .PlanCard:last-child{
        grid-column:1/-1;
        width:calc(50% - 11px);
        justify-self:center;
    }
}
@media(max-width:800px){
    .PlansHeader,.ExtrasHeader{
        grid-template-columns:1fr;
        gap:23px;
    }
    .ExtrasGrid{
        grid-template-columns:1fr;
    }
}
@media(max-width:650px){
    .PlansGrid{
        grid-template-columns:1fr;
    }
    .PlanCard:last-child{
        grid-column:auto;
        width:100%;
    }
    .PlanCard{
        padding:28px 24px;
    }
    .PlanDescription{
        min-height:auto;
    }
    .ExtraCard{
        grid-template-columns:1fr;
        padding:28px 24px;
    }
}
@media(max-width:900px){
    .FaqContainer{
        grid-template-columns:1fr;
        gap:50px;
    }
    .FaqIntro{
        position:static;
        max-width:700px;
    }
}
@media(max-width:600px){
    .FaqQuestion{
        min-height:76px;
        padding:19px;
    }
    .FaqAnswer p{
        padding:0 19px 21px;
    }
    .FaqIntro>.Btn{
        width:100%;
    }
}
@media(max-width:1050px){
    .ContactContainer{
        gap:50px;
    }
    .ContactPanel{
        padding:38px;
    }
    .FooterMain{
        grid-template-columns:1.2fr repeat(2,1fr);
        gap:45px;
    }
    .FooterContact{
        grid-column:1/-1;
        display:grid;
        grid-template-columns:repeat(2,1fr);
    }
    .FooterContact h3{
        grid-column:1/-1;
    }
}
@media(max-width:850px){
    .ContactContainer{
        grid-template-columns:1fr;
    }
    .ContactIntro{
        max-width:700px;
    }
}
@media(max-width:700px){
    .FinalCta{
        padding-bottom:80px;
    }
    .FinalCtaContainer{
        padding:38px 30px;
        align-items:flex-start;
        flex-direction:column;
    }
    .FinalCtaContainer h2{
        font-size:2rem;
    }
    .FinalCtaButton{
        width:100%;
    }
    .FooterMain{
        padding-top:68px;
        padding-bottom:55px;
        grid-template-columns:repeat(2,1fr);
    }
    .FooterBrand{
        grid-column:1/-1;
    }
    .FooterContact{
        grid-template-columns:1fr;
    }
    .FooterContact h3{
        grid-column:auto;
    }
    .FooterBottom{
        padding:24px 0;
        flex-direction:column;
        justify-content:center;
        text-align:center;
    }
}
@media(max-width:600px){
    .ContactPanel{
        padding:32px 23px;
    }
    .ContactFormHeader h3{
        font-size:1.75rem;
    }
}
@media(max-width:480px){
    .FooterMain{
        grid-template-columns:1fr;
    }
    .FooterBrand{
        grid-column:auto;
    }
    .FooterBottom>div{
        flex-direction:column;
        gap:10px;
    }
}