/* =========================================
   SERVICES PAGE
========================================= */


/* HERO */

.page-hero{

  min-height:85vh;

  display:flex;

  flex-direction:column;

  justify-content:center;

  padding-top:160px;

  padding-bottom:120px;

  position:relative;

  overflow:hidden;

}

.page-hero::before{

  content:"";

  position:absolute;

  width:900px;

  height:900px;

  background:
  radial-gradient(
    circle,
    rgba(56,189,248,.12),
    transparent 70%
  );

  top:-350px;

  right:-250px;

  z-index:-1;

}

.page-hero h1{

  font-family:'Merriweather',serif;

  font-weight:900;

  font-size:clamp(4rem,8vw,7rem);

  line-height:.9;

  letter-spacing:-.05em;

  margin:25px 0 35px;

  max-width:950px;

}

.page-hero p{

  max-width:760px;

  color:var(--muted);

  font-size:1.05rem;

  line-height:2;

}



/* INTRO */

.services-intro{

  padding:120px 0 140px;

}



.services-intro p{

  max-width:850px;

    color:var(--muted);

    line-height:2;

}





/* SERVICE GRID */


.service-page{

    display:grid;

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

    gap:35px;

  padding-bottom:180px;

}





.service-detail{

    position:relative;


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


  border-radius:36px;


  padding:55px;


  overflow:hidden;


    background:

    linear-gradient(
        180deg,
        rgba(255,255,255,.03),
        rgba(255,255,255,.01)
    );


  backdrop-filter:blur(10px);

}



.service-detail::before{

    content:"";


    position:absolute;

    inset:0;


    background:

    linear-gradient(
        135deg,
        rgba(56,189,248,.10),
  transparent 45%
    );


    opacity:0;

  transition:.5s ease;

}



.service-detail:hover{

  transform:translateY(-14px);

  border-color:rgba(56,189,248,.4);

  box-shadow:

  0 30px 70px rgba(0,0,0,.35);

}



.service-detail:hover::before{

    opacity:1;

}





.service-detail.full{

  grid-column:span 2;

}





/* NUMBER */


.service-number{

  display:inline-flex;

  align-items:center;

  gap:10px;


  color:var(--accent);

  font-size:.78rem;

  letter-spacing:.28em;

  margin-bottom:25px;

}



.service-number::after{

  content:"";

  width:40px;

  height:1px;

  background:rgba(56,189,248,.4);

}




/* TITLE */


.service-detail h2{

    font-family:'Merriweather',serif;

  font-size:2.3rem;

  line-height:1.1;

    margin-bottom:25px;

}



.service-detail p{

    color:var(--muted);

  max-width:600px;

  line-height:1.95;

  margin-bottom:35px;

}





/* TAGS */


.tags{

  display:flex;

  flex-wrap:wrap;

  gap:14px;

  margin-bottom:40px;

}



.tags span{

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


  padding:12px 18px;


  border-radius:100px;


  color:var(--accent);


  font-size:.68rem;


  letter-spacing:.16em;


  background:

  rgba(56,189,248,.05);

}



.tags span:hover{

  background:

  rgba(56,189,248,.15);

  transform:translateY(-3px);

}





/* CTA */


.services-cta{

  padding-bottom:180px;

}



.trust-box{

  position:relative;


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


  border-radius:42px;


  padding:90px;


  overflow:hidden;


  background:

  linear-gradient(
  135deg,
  rgba(56,189,248,.08),
  rgba(255,255,255,.01)
  );


  text-align:center;

}



.trust-box::before{

  content:"";

  position:absolute;

  width:500px;

  height:500px;


  background:

  radial-gradient(
  circle,
  rgba(56,189,248,.15),
  transparent 70%
  );


  top:-250px;

  right:-200px;

}



.trust-box h2{

  position:relative;


  font-family:'Merriweather',serif;


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


  margin-bottom:30px;

}



.trust-box p{

  position:relative;


  max-width:820px;


  margin:auto auto 40px;


  color:var(--muted);

  line-height:2;

}





/* MOBILE */


@media(max-width:1000px){


.service-page{

        grid-template-columns:1fr;

    }



.service-detail.full{

grid-column:span 1;

}



}



@media(max-width:700px){


.page-hero{

min-height:auto;

padding-top:140px;

padding-bottom:100px;

}



.page-hero h1{

font-size:3rem;

}



.service-detail{

padding:30px;

}



.service-detail h2{

font-size:1.7rem;

}



.trust-box{

padding:45px 30px;

border-radius:30px;

}



.tags span{

font-size:.6rem;

padding:10px 14px;

}



}

/* =========================================
   FLAGSHIP SERVICES
========================================= */


.cybershield-section{

    padding:60px 0 160px;

}



.cyber-intro{

    max-width:820px;

    margin:30px 0 70px;

    color:var(--muted);

    line-height:2;

    font-size:1.05rem;

}






/* =========================================
   SERVICE CARDS
========================================= */


.pricing-grid{

    display:grid;

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

    gap:35px;

}



.pricing-card{

    position:relative;

    overflow:hidden;

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

    border-radius:32px;

    padding:45px;


    background:

    linear-gradient(
        145deg,
        rgba(255,255,255,.08),
        rgba(255,255,255,.02)
    );


    backdrop-filter:blur(14px);


    transition:.45s ease;


}



/* GOLD LIGHT EFFECT */


.pricing-card::before{

    content:"";

    position:absolute;

    inset:0;


    background:

    linear-gradient(
        135deg,
        rgba(212,175,55,.15),
        transparent 55%
    );


    opacity:0;

    transition:.45s ease;

}



/* TOP GOLD LINE */


.pricing-card::after{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:0;

    height:3px;

    background:var(--accent);

    transition:.45s ease;

}




.pricing-card:hover{


    transform:
    translateY(-14px);


    border-color:
    rgba(212,175,55,.55);


    box-shadow:

    0 30px 70px
    rgba(0,0,0,.35);


}



.pricing-card:hover::before{

    opacity:1;

}



.pricing-card:hover::after{

    width:100%;

}








/* =========================================
   FEATURED CARD
========================================= */


.pricing-card.featured{


    border:

    2px solid var(--accent);



    background:

    linear-gradient(
        145deg,
        rgba(212,175,55,.12),
        rgba(255,255,255,.03)
    );



    box-shadow:

    0 0 50px
    rgba(212,175,55,.18);


}







/* =========================================
   TITLES
========================================= */


.pricing-card h3{


    font-family:'Merriweather',serif;


    font-size:2rem;


    line-height:1.2;


    margin-bottom:25px;


}






/* =========================================
   PRICE / NUMBER
========================================= */


.price{


    font-size:2.6rem;


    font-weight:900;


    color:var(--accent);


    margin-bottom:25px;


}



.price span{


    font-size:1rem;


    font-weight:500;


    color:var(--muted);


}







/* =========================================
   DESCRIPTION
========================================= */


.plan-for{


    color:var(--muted);


    margin-bottom:30px;


    line-height:1.9;


}






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


.pricing-card ul{


    list-style:none;


    padding:0;


    margin:0 0 40px;


}



.pricing-card ul li{


    position:relative;


    padding-left:25px;


    margin-bottom:18px;


    color:#ffffff;


    line-height:1.7;


}



.pricing-card ul li::before{


    content:"✓";


    position:absolute;


    left:0;


    color:var(--accent);


    font-weight:900;


}








/* =========================================
   BUTTON
========================================= */


.pricing-card .primary-btn{


    width:100%;


    justify-content:center;


}








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


@media(max-width:900px){


    .cybershield-section{

        padding-bottom:90px;

    }



    .pricing-grid{


        grid-template-columns:1fr;


        gap:25px;


    }



    .pricing-card{


        padding:32px;


        border-radius:26px;


    }



    .pricing-card h3{


        font-size:1.6rem;


    }



}
/* =========================================
   CYBERSHIELD TABS
=========================================*/

.plan-tabs{

    display:flex;
    justify-content:center;
    gap:15px;
    margin:50px 0;

    flex-wrap:wrap;

}

.tab-btn{

    padding:14px 30px;

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

    background:transparent;

    color:white;

    border-radius:100px;

    cursor:pointer;

    transition:.35s;

    font-size:.95rem;

    font-weight:600;

}

.tab-btn:hover{

    border-color:var(--accent);

    color:var(--accent);

}

.tab-btn.active{

    background:var(--accent);

    color:#081018;

    border-color:var(--accent);

}

.plans-container{

    position:relative;

}

.plans-container .pricing-card{

    display:none;

    animation:fadeUp .45s ease;

}

.plans-container .pricing-card.active{

    display:block;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}