/* ===========================
   GLOBAL DESIGN SYSTEM
=========================== */

:root {

  --primary: #8b5cf6;
  --secondary: #ec4899;
  --accent: #f97316;

  --text: #111827;
  --muted: #64748b;

  --background: #ffffff;
  --soft-bg: #f8fafc;

}


* {

  margin: 0;
  padding: 0;
  box-sizing: border-box;

}


body {

  font-family: "Inter", sans-serif;
  color: var(--text);
  background: var(--background);

}



/* ===========================
      NAVBAR
=========================== */


.navbar {

  padding: 25px 0;
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(15px);

}


.navbar-brand {

  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text);

}


.nav-link {

  color: #475569;
  font-weight: 500;
  margin-left: 25px;

}


.nav-link:hover {

  color: var(--primary);

}





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


.gradient-btn {

  color:white;
  border:none;

  background:
  linear-gradient(
      135deg,
      var(--primary),
      var(--secondary),
      var(--accent)
  );

  padding:14px 30px;

  border-radius:50px;

  font-weight:600;

  box-shadow:
  0 15px 35px rgba(139,92,246,.25);

  transition:.3s;

}



.gradient-btn:hover {

  color:white;

  transform:translateY(-3px);

}



.secondary-btn {


  border:1px solid #e5e7eb;

  padding:14px 30px;

  border-radius:50px;

  font-weight:600;

  color:var(--text);

  background:white;

}



.secondary-btn:hover {

  background:#f8fafc;

}



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


.hero {

  position:relative;

  overflow:hidden;

  padding-top:80px;

}





/* Gradient Background Shapes */


.gradient-circle {


  position:absolute;

  border-radius:50%;

  filter:blur(80px);

  z-index:-1;

}




.circle-one {


  width:500px;

  height:500px;

  background:#ddd6fe;

  right:-150px;

  top:50px;


}




.circle-two {


  width:400px;

  height:400px;

  background:#fbcfe8;

  left:-150px;

  bottom:0;


}






/* Badge */


.small-badge {


  display:inline-block;

  background:#f5f3ff;

  color:#7c3aed;

  padding:10px 20px;

  border-radius:50px;

  font-weight:600;

  margin-bottom:25px;


}






/* Heading */


.hero h1 {

  font-size:5rem;
  line-height:1.05;
  font-weight:800;
  letter-spacing:-3px;
  max-width:900px;
  margin:auto;

}


.hero p {


  margin-top:30px;

  font-size:1.2rem;

  color:var(--muted);

  max-width:520px;

  line-height:1.7;


}




.hero-buttons {


  display:flex;

  gap:20px;

  margin-top:40px;


}





/* Features */


.trust-items {


  display:flex;

  gap:30px;

  margin-top:45px;

  color:#475569;

}



.trust-items i {


  color:#8b5cf6;

  margin-right:8px;

}






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



.hero-mockup {


  position:relative;

  padding:40px;


}




.hero-mockup img {


  border-radius:30px;

  box-shadow:

  0 40px 90px rgba(15,23,42,.15);


}






/* FLOATING CARDS */


.floating-card {


  position:absolute;

  background:white;

  padding:18px 25px;

  border-radius:20px;


  box-shadow:

  0 20px 50px rgba(15,23,42,.12);


  display:flex;

  flex-direction:column;

  gap:5px;


  animation:float 5s infinite ease-in-out;


}




.floating-card strong {


  font-size:1.4rem;


}




.card-one {


  top:50px;

  left:0;


}





.card-two {


  bottom:70px;

  right:0;


}





@keyframes float {


  50% {

      transform:translateY(-15px);

  }


}







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


@media(max-width:991px){


.hero {

  text-align:center;

  padding-top:60px;

}


.hero h1 {


  font-size:3rem;


}


.hero p {


  margin-left:auto;

  margin-right:auto;


}



.hero-buttons {


  justify-content:center;

}



.trust-items {


  justify-content:center;

  flex-wrap:wrap;


}



.hero-mockup {


  margin-top:60px;


}


.floating-card {


  display:none;

}



}

/* ==========================
      WHAT I DO
=========================== */


.what-i-do {

  padding:120px 0;

  background:#f8fafc;

}




.section-heading h2 {


  font-size:3.5rem;

  font-weight:800;

  letter-spacing:-2px;

  margin-top:20px;


}



.section-heading p {


  color:var(--muted);

  font-size:1.2rem;

  max-width:650px;

  margin:25px auto 0;

  line-height:1.7;


}




.service-card {


  background:white;

  padding:40px 35px;

  border-radius:28px;

  height:100%;

  border:1px solid #e5e7eb;

  transition:.3s;


}




.service-card:hover {


  transform:translateY(-10px);

  box-shadow:

  0 25px 60px rgba(15,23,42,.1);


}




.service-icon {


  width:65px;

  height:65px;

  display:flex;

  align-items:center;

  justify-content:center;


  border-radius:20px;


  background:

  linear-gradient(
  135deg,
  #ede9fe,
  #fce7f3
  );


  color:#8b5cf6;


  font-size:30px;


  margin-bottom:25px;


}




.service-card h3 {


  font-size:1.5rem;

  font-weight:700;

  margin-bottom:15px;


}




.service-card p {


  color:#64748b;

  line-height:1.8;

  font-size:1rem;


}





@media(max-width:991px){


.section-heading h2 {

  font-size:2.5rem;

}


}







/* ==========================
      FEATURED WORK
=========================== */


.featured-work {

  padding:120px 0;

  background:#f8fafc;

}





.featured-project {


  background:white;

  border-radius:40px;

  padding:40px;

  box-shadow:

  0 30px 80px rgba(15,23,42,.08);


}





.project-preview {


  border-radius:30px;

  overflow:hidden;

  background:#f1f5f9;


}





.project-preview img {


  width:100%;

  transition:.5s;


}



.featured-project:hover img {


  transform:scale(1.03);


}





.project-tag {


  display:inline-block;

  padding:8px 18px;

  border-radius:50px;

  background:#f5f3ff;

  color:#7c3aed;

  font-weight:600;

  margin-bottom:25px;


}





.project-info h3 {


  font-size:2.4rem;

  font-weight:800;

  letter-spacing:-1px;

  margin-bottom:20px;


}





.project-info p {


  color:#64748b;

  font-size:1.1rem;

  line-height:1.8;


}





.project-features {


  margin-top:30px;

  display:flex;

  flex-direction:column;

  gap:12px;

}




.project-features i {


  color:#8b5cf6;

  margin-right:10px;


}




.project-link {


  display:inline-flex;

  align-items:center;

  gap:10px;

  margin-top:35px;

  color:#111827;

  text-decoration:none;

  font-weight:700;


}


.project-link i {


  transition:.3s;

}



.project-link:hover i {


  transform:translateX(5px);


}


/*PRICING*/

/* ==========================
        PRICING SECTION
=========================== */


.pricing-section {

  padding:120px 0;

  background:#ffffff;

}





/* Pricing Cards Container */

.pricing-card {

  position:relative;

  height:100%;

  padding:45px 35px;

  background:#ffffff;

  border-radius:35px;

  border:1px solid #e5e7eb;

  transition:all .35s ease;

  overflow:hidden;

}





.pricing-card:hover {

  transform:translateY(-10px);

  box-shadow:

  0 30px 70px rgba(15,23,42,.12);

}







/* Featured Plan */

.pricing-card.featured {


  border:none;


  background:

  linear-gradient(
      180deg,
      #ffffff 0%,
      #faf5ff 100%
  );


  box-shadow:

  0 30px 80px rgba(139,92,246,.18);


}





/* Gradient Glow Behind Featured Card */

.pricing-card.featured::before {


  content:"";

  position:absolute;

  width:250px;

  height:250px;

  background:#ddd6fe;

  border-radius:50%;

  filter:blur(80px);

  top:-100px;

  right:-80px;

  z-index:0;

  opacity:.5;


}





.pricing-card > * {

  position:relative;

  z-index:1;

}







/* Popular Badge */

.popular-badge {


  position:absolute;

  top:0;

  right:30px;


  background:

  linear-gradient(
      135deg,
      #8b5cf6,
      #ec4899,
      #f97316
  );


  color:white;

  padding:9px 22px;

  border-radius:0 0 20px 20px;


  font-size:.85rem;

  font-weight:700;


}







/* Title */

.pricing-card h3 {


  font-size:2rem;

  font-weight:800;

  letter-spacing:-.5px;

  margin-bottom:15px;


}





/* Description */


.pricing-description {


  color:#64748b;

  line-height:1.7;

  min-height:75px;


}







/* Price */


.price {


  margin:35px 0;


  font-size:3.5rem;

  font-weight:800;

  letter-spacing:-2px;


}




.price span {


  display:block;

  margin-top:5px;


  font-size:1rem;

  font-weight:500;

  letter-spacing:0;

  color:#64748b;


}







/* Feature List */


.pricing-card ul {


  list-style:none;

  padding:0;

  margin:35px 0;


}





.pricing-card ul li {


  display:flex;

  align-items:center;

  gap:12px;


  margin-bottom:18px;


  color:#475569;

  font-size:.98rem;


}





.pricing-card ul li i {


  color:#8b5cf6;

  font-size:1.1rem;


}







/* Buttons */


.pricing-btn {


  display:block;

  text-align:center;


  width:100%;


  padding:15px 25px;


  border-radius:50px;


  border:1px solid #e5e7eb;


  color:#111827;


  text-decoration:none;


  font-weight:700;


  transition:.3s;


}





.pricing-btn:hover {


  background:#f8fafc;

  color:#111827;


}





/* Featured Button */


.pricing-btn.gradient {


  border:none;

  color:white;


  background:

  linear-gradient(
      135deg,
      #8b5cf6,
      #ec4899,
      #f97316
  );


  box-shadow:

  0 15px 35px rgba(139,92,246,.25);


}





.pricing-btn.gradient:hover {


  color:white;

  transform:translateY(-3px);


}







/* Responsive */


@media(max-width:991px){


  .pricing-section {

      padding:80px 0;

  }


  .pricing-card {

      padding:40px 30px;

  }


  .price {

      font-size:3rem;

  }


}

/* ==========================
        CONTACT
=========================== */


.contact-section {

  padding:120px 0;

  background:#f8fafc;

}



.contact-wrapper {


  background:white;

  border-radius:40px;

  padding:70px;

  box-shadow:

  0 30px 80px rgba(15,23,42,.08);


}




.contact-section h2 {


  font-size:3rem;

  font-weight:800;

  letter-spacing:-1px;

  line-height:1.1;

}



.contact-section p {


  color:#64748b;

  font-size:1.1rem;

  line-height:1.8;

  margin-top:25px;


}





.contact-details {


  margin-top:35px;

  display:flex;

  flex-direction:column;

  gap:20px;


}



.contact-details div {


  display:flex;

  align-items:center;

  gap:15px;

  color:#475569;

  font-weight:500;


}



.contact-details i {


  width:40px;

  height:40px;

  display:flex;

  align-items:center;

  justify-content:center;

  border-radius:12px;


  background:#f5f3ff;

  color:#8b5cf6;


}







/* FORM */


.contact-form {


  background:#ffffff;

  padding:40px;

  border-radius:30px;

  border:1px solid #e5e7eb;


}





.form-control {


  border-radius:15px;

  padding:16px 18px;

  border:1px solid #e5e7eb;

  font-size:1rem;


}



.form-control:focus {


  border-color:#8b5cf6;

  box-shadow:

  0 0 0 4px rgba(139,92,246,.1);


}





textarea {


  resize:none;


}








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


.footer {


  padding:70px 0 30px;

  background:#111827;

  color:white;


}



.footer h4 {


  font-size:1.5rem;

  font-weight:800;


}



.footer p {


  color:#94a3b8;

  margin-top:15px;


}





.footer-links {


  display:flex;

  justify-content:flex-end;

  gap:30px;


}



.footer-links a {


  color:#cbd5e1;

  text-decoration:none;


}



.footer-links a:hover {


  color:white;


}





.footer hr {


  margin:50px 0 25px;

  border-color:rgba(255,255,255,.15);


}





.footer-bottom {


  display:flex;

  justify-content:space-between;

  align-items:center;


}




.footer-bottom p {


  margin:0;

  font-size:.9rem;


}





.footer-bottom a {


  color:#cbd5e1;

  text-decoration:none;

  margin-left:20px;


}




@media(max-width:991px){


.contact-wrapper {

  padding:40px 25px;

}


.contact-section h2 {

  font-size:2.3rem;

}



.footer-links {

  justify-content:flex-start;

  margin-top:30px;

}



.footer-bottom {

  flex-direction:column;

  gap:20px;

}


}


/* ==========================
        BRAND LOGO
=========================== */


.logo-code {

  font-size:1.35rem;

  font-weight:800;

  letter-spacing:-0.8px;

  color:#111827;

  text-decoration:none;

  font-family:"Inter", sans-serif;

}



.logo-code span {


  background:
  linear-gradient(
      135deg,
      #8b5cf6,
      #ec4899,
      #f97316
  );


  -webkit-background-clip:text;

  -webkit-text-fill-color:transparent;


}



.logo-code:hover {

  color:#111827;

}