html{
    scroll-behavior:smooth;
}
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family:'Inter',sans-serif;
  background:#ffffff;
  color:#111827;
}

a{
  text-decoration:none;
}

.logo-text h2{
  color:#fff;
  font-size:34px;
  font-weight:800;
  font-family:'Nickainley', cursive;
  letter-spacing:0.5px;
}
.footer-logo{
  display:flex;
  align-items:center;
  gap:10px;
  color:#fff;
  font-size:22px;
  font-weight:700;
  font-family:'Nickainley', cursive;
}
button{
  border:none;
  outline:none;
  cursor:pointer;
  font-family:'Inter',sans-serif;
}

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

.hero-section{
  background:
    radial-gradient(circle at top right,#173ea7 0%,transparent 30%),
    linear-gradient(135deg,#020817,#04113d 50%,#020617 100%);
  min-height:100vh;
  padding:60px 90px 140px;
  position:relative;
}

/* NAVBAR */

.navbar{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(2,8,23,0.95);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,0.06);
}

.navbar-main{
  display:flex;
  flex-direction:column;
}

.navbar-main .navbar-top{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding:10px 90px;
  gap:24px;
  border-bottom:1px solid rgba(255,255,255,0.06);
  background:rgba(255,255,255,0.03);
  flex-wrap:wrap;
}

.navbar-main .navbar-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 90px;
}

.navbar-order{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  padding:18px 90px;
  min-height:80px;
}

.navbar-order .header-left{
  display:flex;
  align-items:center;
}

.navbar-order .header-center{
  flex:1;
  text-align:center;
  color:#dbe3f5;
  font-size:16px;
  font-weight:500;
  padding:0 30px;
}

.navbar-order .header-right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
}

.navbar-order .header-top-links{
  display:flex;
  align-items:center;
  gap:20px;
}

.navbar-order .header-bottom-links{
  display:flex;
  align-items:center;
  gap:16px;
}

.navbar-order .top-link{
  color:#94a3b8;
  font-size:13px;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:6px;
  transition:0.2s;
}

.navbar-order .top-link:hover{
  color:#fff;
}

.navbar-order .earn-link{
  color:#3b82f6;
  font-size:14px;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:8px;
}

.navbar-order .review-btn{
  height:36px;
  padding:0 16px;
  border-radius:8px;
  background:linear-gradient(135deg,#2563eb,#1d4ed8);
  color:#fff;
  font-size:13px;
  font-weight:700;
  border:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:8px;
  font-family:'Inter',sans-serif;
}

.navbar-order .review-btn i{
  color:#fbbf24;
}


.logo-area{
  display:flex;
  align-items:center;
  gap:12px;
}

.logo-icon{
  color:#3b82f6;
  font-size:30px;
}

.logo-text h2{
  color:#fff;
  font-size:34px;
  font-weight:800;
}

.logo-text span{
  color:#3b82f6;
}

.logo-text p{
  color:#94a3b8;
  font-size:14px;
  margin-top:2px;
}

.nav-links{
  display:flex;
  align-items:center;
  gap:34px;
}

.nav-links a{
  color:#dbe3f5;
  font-size:16px;
  font-weight:500;
}

.nav-links i{
  font-size:12px;
}

.nav-buttons{
  display:flex;
  align-items:center;
  gap:12px;
}

.login-btn{
  background:transparent;
  border:1px solid rgba(255,255,255,0.15);
  color:#fff;
  width:100px;
  height:42px;
  border-radius:12px;
  font-size:15px;
  font-weight:600;
}

.signup-btn{
  width:110px;
  height:42px;
  border-radius:12px;
  background:linear-gradient(135deg,#3b82f6,#2563eb);
  color:#fff;
  font-size:15px;
  font-weight:700;
  box-shadow:0 8px 20px rgba(59,130,246,0.35);
}

.topbar-phone{
  color:#94a3b8;
  font-size:13px;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:6px;
  transition:0.2s;
}

.topbar-phone:hover{
  color:#fff;
}

.topbar-link{
  color:#94a3b8;
  font-size:13px;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:6px;
  transition:0.2s;
}

.topbar-link:hover{
  color:#fff;
}

.topbar-reviews-btn{
  height:34px;
  padding:0 14px;
  border-radius:8px;
  background:linear-gradient(135deg,#2563eb,#1d4ed8);
  color:#fff;
  font-size:12px;
  font-weight:700;
  border:none;
  cursor:pointer;
  font-family:'Inter',sans-serif;
  display:flex;
  align-items:center;
  gap:6px;
  box-shadow:0 4px 12px rgba(37,99,235,0.4);
  transition:0.2s;
}

.topbar-reviews-btn i{
  color:#fbbf24;
}

.topbar-reviews-btn:hover{
  transform:translateY(-1px);
}

/* HERO CONTENT */

.hero-content{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:80px;
  gap:60px;
}

/* LEFT */

.hero-left{
  width:52%;
}

/* HERO SLIDER */

.hero-slider{
  position:relative;
}

.hero-slide{
  display:none;
}

.hero-slide.active{
  display:block;
  animation:heroSlideIn 0.7s ease;
}

@keyframes heroSlideIn{
  from{
    opacity:0;
    transform:translateX(28px);
  }
  to{
    opacity:1;
    transform:translateX(0);
  }
}

.hero-slider-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:52px;
  height:52px;
  border-radius:50%;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  color:#fff;
  font-size:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  backdrop-filter:blur(10px);
  transition:0.2s;
  z-index:6;
}

.hero-slider-arrow:hover{
  background:rgba(59,130,246,0.25);
  border-color:rgba(59,130,246,0.4);
}

.hero-slider-arrow.prev{
  left:-70px;
}

.hero-slider-arrow.next{
  right:-70px;
}

.hero-slider-dots{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:38px;
}

.hero-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:rgba(255,255,255,0.25);
  border:none;
  cursor:pointer;
  padding:0;
  transition:0.25s;
}

.hero-dot.active{
  width:30px;
  border-radius:6px;
  background:linear-gradient(90deg,#60a5fa,#2563eb);
}

.hero-dot:hover{
  background:rgba(255,255,255,0.5);
}

.top-badge{
  width:max-content;
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 22px;
  border-radius:999px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.08);
  color:#fff;
  font-size:15px;
  font-weight:600;
  backdrop-filter:blur(10px);
}

.top-badge .fa-star{
  color:#fbbf24;
}

.hero-left h1{
  font-size:78px;
  line-height:1.05;
  color:#fff;
  margin-top:34px;
  font-weight:800;
  letter-spacing:-3px;
}

.hero-left h1 span{
  background:linear-gradient(90deg,#60a5fa,#2563eb);

  background-clip:text;
  -webkit-background-clip:text;

  color:transparent;
  -webkit-text-fill-color:transparent;
}

.hero-description{
  margin-top:28px;
  color:#b8c2d6;
  font-size:24px;
  line-height:1.8;
  max-width:780px;
}

/* FEATURES */

.features-row{
  display:flex;
  gap:38px;
  margin-top:36px;
}

.feature-item{
  display:flex;
  align-items:center;
  gap:12px;
  color:#dce4f7;
  font-size:19px;
}

.feature-item i{
  color:#3b82f6;
}

/* BUTTONS */

.hero-buttons{
  display:flex;
  gap:22px;
  margin-top:42px;
}

.primary-btn{
  height:68px;
  padding:0 34px;
  border-radius:18px;
  background:linear-gradient(135deg,#3b82f6,#2563eb);
  color:#fff;
  font-size:20px;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:14px;
  box-shadow:0 20px 40px rgba(37,99,235,0.4);
}

.secondary-btn{
  height:68px;
  padding:0 34px;
  border-radius:18px;
  background:transparent;
  border:1px solid rgba(255,255,255,0.12);
  color:#fff;
  font-size:20px;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:14px;
}

/* REVIEWS */

.review-section{
  display:flex;
  align-items:center;
  gap:18px;
  margin-top:42px;
}

.review-avatars{
  display:flex;
}

.review-avatars img{
  width:54px;
  height:54px;
  border-radius:50%;
  border:3px solid #09122c;
  margin-left:-10px;
}

.review-avatars img:first-child{
  margin-left:0;
}

.review-content h4{
  color:#fff;
  font-size:18px;
  font-weight:600;
}

.stars-row{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:10px;
}

.stars{
  color:#fbbf24;
}

.stars-row span{
  color:#b7c2d6;
  font-size:15px;
}

/* RIGHT */

.hero-right{
  width:48%;
  position:relative;
  display:flex;
  justify-content:center;
  align-items:flex-end;
  min-height:700px;
}

.circle-bg{
  width:640px;
  height:640px;
  background:radial-gradient(circle,#1d4ed8 0%,transparent 70%);
  position:absolute;
  border-radius:50%;
  opacity:0.4;
}

.student-image{
  width:620px;
  position:relative;
  z-index:2;
  object-fit:contain;
  mix-blend-mode:screen;
}

/* FLOATING CARDS */

.floating-card{
  position:absolute;
  z-index:4;
  display:flex;
  align-items:center;
  gap:18px;
  background:rgba(255,255,255,0.08);
  backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,0.08);
  padding:22px;
  border-radius:24px;
}

.floating-card p{
  color:#dce4f7;
  font-size:15px;
}

.floating-card h3{
  color:#fff;
  font-size:38px;
  margin-top:6px;
}

.plagiarism-card{
  top:140px;
  left:10px;
}

.delivery-card{
  top:60px;
  right:0;
}

.floating-icon{
  width:72px;
  height:72px;
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
}

.green{
  background:rgba(16,185,129,0.15);
  color:#10b981;
}

.blue{
  background:rgba(59,130,246,0.15);
  color:#3b82f6;
}

/* STEPS CARD */

.steps-card{
  position:absolute;
  bottom:1px;
  left:0px;

  width:360px;

  background:#ffffff;
  padding:28px;

  border-radius:22px;

  z-index:5;

  box-shadow:0 25px 50px rgba(0,0,0,0.25);
}

.steps-card h3{
  font-size:18px;
  line-height:1.4;  color:#0f172a;
  margin-bottom:22px;
}

.step-item{
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin-bottom:18px;
}

.step-item:last-child{
  margin-bottom:0;
}

.step-number{
  min-width:36px;
  height:36px;
  font-size:14px;
    border-radius:50%;
  background:#e7efff;
  color:#2563eb;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
}
.step-item h4{
  font-size:16px;
}

.step-item p{
  font-size:14px;
}
.step-item h4{
  font-size:18px;
  color:#111827;
}

.step-item p{
  color:#64748b;
  margin-top:4px;
}

/* STATS */

.stats-wrapper{
  position:absolute;

  bottom:-70px;

  left:50%;
  transform:translateX(-50%);

  width:88%;

  display:flex;
  justify-content:space-between;

  background:linear-gradient(135deg,#0f1d54,#101d4a);

  border-radius:28px;

  padding:38px 44px;

  box-shadow:0 30px 80px rgba(0,0,0,0.45);

  z-index:20;
}

.stat-box{
  display:flex;
  align-items:center;
  gap:18px;
}

.stat-icon{
  width:76px;
  height:76px;
  border-radius:20px;
  background:rgba(59,130,246,0.12);
  color:#4f8cff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:32px;
}

.stat-box h2{
  color:#fff;
  font-size:42px;
}

.stat-box p{
  color:#b7c2d6;
  margin-top:4px;
  font-size:17px;
}

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

.services-section{
  padding:140px 90px 100px;
    background:#f8fafc;
}

.section-label{
  display:block;
  text-align:center;
  color:#2563eb;
  font-size:14px;
  font-weight:700;
  letter-spacing:1px;
}

.services-section h2{
  text-align:center;
  font-size:52px;
  color:#0f172a;
  margin-top:18px;
  font-weight:800;
}

.section-desc{
  text-align:center;
  color:#64748b;
  font-size:20px;
  margin-top:20px;
}

/* GRID */

.services-grid{
  margin-top:70px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
}

.service-card{
  background:#fff;
  border-radius:28px;
  padding:42px;
  border:1px solid #e5e7eb;
  transition:0.3s;
}

.service-card:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 50px rgba(15,23,42,0.08);
}

.service-icon{
  width:86px;
  height:86px;
  border-radius:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:34px;
}

.blue-bg{
  background:#eaf1ff;
  color:#2563eb;
}

.purple-bg{
  background:#f3e8ff;
  color:#9333ea;
}

.green-bg{
  background:#dcfce7;
  color:#16a34a;
}

.orange-bg{
  background:#ffedd5;
  color:#ea580c;
}

.pink-bg{
  background:#ffe4e6;
  color:#e11d48;
}

.service-card h3{
  font-size:30px;
  margin-top:28px;
  color:#0f172a;
}

.service-card p{
  margin-top:18px;
  color:#64748b;
  line-height:1.8;
  font-size:18px;
}

.service-card a{
  margin-top:30px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:#2563eb;
  font-weight:700;
}

/* RESPONSIVE */

@media(max-width:1400px){

  .hero-content{
    flex-direction:column;
  }

  .hero-left,
  .hero-right{
    width:100%;
  }

  .hero-slider-arrow{
    display:none;
  }

  .services-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .stats-wrapper{
    position:relative;
    bottom:auto;
    margin-top:100px;
    flex-wrap:wrap;
    gap:30px;
  }

}

@media(max-width:768px){

  .hero-section,
  .services-section{
    padding-left:24px;
    padding-right:24px;
  }

 .navbar-main .navbar-top{
  padding:8px 24px;
  justify-content:center;
  gap:12px;
}
.navbar-main .navbar-bottom{
  padding:12px 24px;
}
.navbar-order{
  flex-direction:column;
  padding:20px 24px;
  gap:16px;
  text-align:center;
}
.navbar-order .header-right{
  align-items:center;
}
.navbar-order .header-top-links,
.navbar-order .header-bottom-links{
  justify-content:center;
  flex-wrap:wrap;
}
  .nav-links{
    display:none;
  }

  .hero-left h1{
    font-size:48px;
  }

  .hero-slider-dots{
    justify-content:center;
    margin-top:28px;
  }

  .hero-description{
    font-size:18px;
  }

  .features-row{
    flex-direction:column;
    gap:18px;
  }

  .hero-buttons{
    flex-direction:column;
  }

  .student-image{
    width:100%;
  }

  .steps-card{
    position:relative;
    width:100%;
    left:auto;
    margin-top:20px;
  }

  .services-grid{
    grid-template-columns:1fr;
  }

  .services-section h2{
    font-size:36px;
  }

}
/* ========================= */
/* MEGA DROPDOWN */
/* ========================= */

.mega-dropdown{
    width:700px;
    background:transparent;
    display:flex;
    border-radius:6px;
    overflow:hidden;
    box-shadow:0 10px 35px rgba(0,0,0,0.12);
    font-family:'Inter',sans-serif;
}

/* LEFT */

.dropdown-left{
    width:55%;
    padding:8px 12px;
    border-right:1px solid #e5e7eb;
    background:#ffffff;
}

.work-card{
    padding:10px 14px;
    border-bottom:1px solid #ececec;
    transition:0.3s;
}

.work-card:last-child{
    border-bottom:none;
}

.work-card.active{
    background:#f5f5f5;
}

.work-card span{
    font-size:14px;

    color:#9ca3af;

    font-style:italic;
}

.work-card h3{
    margin-top:1px;
    font-size:13px;
    font-weight:700;
    color:#3f3f46;
    display:inline-block;
    margin-left:6px;
}

.work-card p{
    margin-top:2px;
    font-size:12px;
    color:#555;
    font-style:italic;
    line-height:1.4;
}

/* RIGHT */

.dropdown-right{
    width:0;
    background:#fff;
    padding:0;
    display:none;
    overflow:hidden;
}

.dropdown-right.show{
    display:block;
    width:45%;
    padding:6px 0;
}

.dropdown-right a{
    display:block;
    padding:10px 20px;
    color:#444;
    font-size:13px;
    border-bottom:1px solid #f1f1f1;
    transition:0.3s;
}

.dropdown-right a:last-child{
    border-bottom:none;
}

.dropdown-right a:hover{
    background:#f8fafc;

    color:#2563eb;
}
.nav-links{
    list-style:none;
}

.nav-links li{
    position:relative;
}

.mega-dropdown{
    position:absolute;

    top:45px;
    left:-220px;

    opacity:0;
    visibility:hidden;

    transform:translateY(20px);

    transition:0.3s;

    z-index:999;
}

.mega-dropdown.show{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}
.service-content{
    display:none;
}

.service-content.active{
    display:block;
}
/* ========================= */
/* WHY SECTION */
/* ========================= */

.why-section{
    padding:150px 90px 110px;
    background:#f8fafc;
    position:relative;
    z-index:1;
}
/* HEADER */

.why-header{
    text-align:center;

    max-width:900px;

    margin:0 auto;
}

.why-header h2{
    font-size:42px;

    line-height:1.25;

    color:#0f172a;

    font-weight:800;

    letter-spacing:-1px;
}

.why-header p{
    margin-top:22px;

    font-size:18px;

    line-height:1.8;

    color:#64748b;

    max-width:850px;

    margin-left:auto;
    margin-right:auto;
}

/* CONTENT */

.why-content{
    margin-top:80px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:50px;
}

/* COLUMN */

.why-column{
    width:32%;

    display:flex;

    flex-direction:column;

    gap:50px;
}

/* CARD */

.why-card{
    display:flex;

    align-items:flex-start;

    gap:22px;
}

.why-icon{
     min-width:56px;

    height:56px;

  border-radius:16px;

    font-size:24px;

    background:#eff6ff;

    color:#2563eb;

    display:flex;

    align-items:center;

    justify-content:center;

}

.why-text h3{
    font-size:18px;

    color:#0f172a;

    font-weight:700;

    line-height:1.4;
}

.why-text p{
    margin-top:10px;

    font-size:15px;

    line-height:1.7;

    color:#64748b;
}
/* CENTER IMAGE */

.why-image{
    width:36%;

    display:flex;

    justify-content:center;
}

.why-image img{
    width:100%;

    max-width:500px;

    object-fit:contain;
}

/* BUTTON */

.why-btn-wrap{
    margin-top:70px;

    display:flex;

    justify-content:center;
}

.why-btn{
    height:68px;

    padding:0 36px;

    border:none;

    border-radius:18px;

    background:linear-gradient(135deg,#f97316,#ea580c);

    color:#fff;

    font-size:18px;

    font-weight:700;

    display:flex;

    align-items:center;

    gap:14px;

    box-shadow:0 20px 40px rgba(249,115,22,0.25);

    cursor:pointer;
}

/* RESPONSIVE */

@media(max-width:1200px){

    .why-content{
        flex-direction:column;
    }

    .why-column,
    .why-image{
        width:100%;
    }

    .why-header h2{
        font-size:42px;
    }

}

@media(max-width:768px){

    .why-section{
        padding:80px 24px;
    }

    .why-header h2{
        font-size:34px;
    }

    .why-header p{
        font-size:18px;
    }

    .why-card{
        flex-direction:column;
    }

}
/* ========================= */
/* LIVE CHAT */
/* ========================= */

.chat-bubble{
  position:fixed;
  bottom:30px;
  right:30px;
  width:64px;
  height:64px;
  border-radius:50%;
  background:linear-gradient(135deg,#3b82f6,#2563eb);
  color:#fff;
  font-size:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:9999;
  box-shadow:0 8px 30px rgba(37,99,235,0.5);
  transition:transform 0.3s;
}

.chat-bubble:hover{
  transform:scale(1.1);
}

.chat-pulse{
  position:absolute;
  width:100%;
  height:100%;
  border-radius:50%;
  background:rgba(59,130,246,0.4);
  animation:pulse 2s infinite;
}

@keyframes pulse{
  0%{transform:scale(1);opacity:1;}
  100%{transform:scale(1.7);opacity:0;}
}

.chat-popup{
  position:fixed;
  bottom:110px;
  right:30px;
  width:370px;
  background:#fff;
  border-radius:24px;
  box-shadow:0 20px 60px rgba(0,0,0,0.18);
  z-index:9998;
  display:none;
  flex-direction:column;
  overflow:hidden;
  animation:slideUp 0.3s ease;
}

.chat-popup.open{
  display:flex;
}
.chat-notify{
  position:fixed;
  bottom:104px;
  right:30px;
  background:#fff;
  border-radius:16px;
  padding:14px 18px;
  box-shadow:0 8px 30px rgba(0,0,0,0.15);
  display:flex;
  align-items:center;
  gap:12px;
  z-index:9997;
  animation:slideUp 0.4s ease;
  max-width:260px;
  border-left:4px solid #22c55e;
}

.chat-notify-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#22c55e;
  flex-shrink:0;
  animation:pulse 1.5s infinite;
}

.chat-notify p{
  font-size:13px;
  color:#1e293b;
  font-weight:600;
  line-height:1.4;
}

.chat-notify span{
  font-size:12px;
  color:#64748b;
  font-weight:400;
  display:block;
  margin-top:2px;
}

@keyframes slideUp{
  from{opacity:0;transform:translateY(20px);}
  to{opacity:1;transform:translateY(0);}
}

/* HEADER */

.chat-header{
  background:linear-gradient(135deg,#1e3a8a,#2563eb);
  padding:18px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.chat-header-left{
  display:flex;
  align-items:center;
  gap:14px;
}

.chat-avatar{
  position:relative;
}

.chat-avatar img{
  width:46px;
  height:46px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,0.3);
}

.online-dot{
  position:absolute;
  bottom:2px;
  right:2px;
  width:12px;
  height:12px;
  background:#22c55e;
  border-radius:50%;
  border:2px solid #2563eb;
}

.chat-header h4{
  color:#fff;
  font-size:15px;
  font-weight:700;
}

.chat-header p{
  color:rgba(255,255,255,0.75);
  font-size:12px;
  margin-top:3px;
}

.live-badge{
  color:#4ade80;
  font-weight:700;
}

.chat-close{
  background:rgba(255,255,255,0.15);
  border:none;
  color:#fff;
  width:32px;
  height:32px;
  border-radius:50%;
  cursor:pointer;
  font-size:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:0.2s;
}

.chat-close:hover{
  background:rgba(255,255,255,0.3);
}

/* BODY */

.chat-body{
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:14px;
  max-height:260px;
  overflow-y:auto;
  background:#f8fafc;
}

.chat-message{
  display:flex;
  align-items:flex-end;
  gap:10px;
}

.chat-message.user{
  flex-direction:row-reverse;
}

.chat-message img{
  width:32px;
  height:32px;
  border-radius:50%;
  flex-shrink:0;
}

.message-bubble{
  max-width:230px;
  padding:12px 16px;
  border-radius:18px;
  font-size:14px;
  line-height:1.5;
  color:#1e293b;
  background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,0.07);
}

.chat-message.user .message-bubble{
  background:linear-gradient(135deg,#3b82f6,#2563eb);
  color:#fff;
  border-bottom-right-radius:4px;
}

.chat-message.bot .message-bubble{
  border-bottom-left-radius:4px;
}

/* QUICK REPLIES */

.chat-quick-replies{
  padding:10px 16px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  background:#f8fafc;
  border-top:1px solid #e5e7eb;
}

.chat-quick-replies button{
  padding:7px 14px;
  border-radius:999px;
  border:1px solid #dbeafe;
  background:#eff6ff;
  color:#2563eb;
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  transition:0.2s;
  font-family:'Inter',sans-serif;
}

.chat-quick-replies button:hover{
  background:#2563eb;
  color:#fff;
}

/* FOOTER */

.chat-footer{
  padding:14px 16px;
  display:flex;
  align-items:center;
  gap:10px;
  border-top:1px solid #e5e7eb;
  background:#fff;
}

.chat-footer input{
  flex:1;
  height:42px;
  border:1px solid #e2e8f0;
  border-radius:12px;
  padding:0 14px;
  font-size:14px;
  outline:none;
  font-family:'Inter',sans-serif;
  color:#1e293b;
}

.chat-footer input:focus{
  border-color:#3b82f6;
}

.chat-send{
  width:42px;
  height:42px;
  border-radius:12px;
  background:linear-gradient(135deg,#3b82f6,#2563eb);
  color:#fff;
  font-size:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  border:none;
  transition:0.2s;
}

.chat-send:hover{
  transform:scale(1.05);
}
.chat-start-wrap{
  padding:16px;
  background:#f8fafc;
  border-top:1px solid #e5e7eb;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.chat-form-group input.error,
.chat-form-group textarea.error{
  border-color:#ef4444;
  background:#fff5f5;
}

.chat-form-error{
  font-size:11px;
  color:#ef4444;
  margin-top:2px;
  display:none;
}

.chat-form-error.show{
  display:block;
}

.chat-start-btn{
  width:100%;
  height:46px;
  border-radius:14px;
  background:linear-gradient(135deg,#3b82f6,#2563eb);
  color:#fff;
  font-size:15px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  cursor:pointer;
  border:none;
  font-family:'Inter',sans-serif;
  box-shadow:0 8px 20px rgba(37,99,235,0.3);
  transition:0.2s;
}

.chat-start-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(37,99,235,0.4);
}
.chat-form-wrap{
  padding:18px 16px;
  background:#f8fafc;
  border-top:1px solid #e5e7eb;
  display:flex;
  flex-direction:column;
  gap:14px;
  overflow-y:auto;
  max-height:400px;
}

.chat-form-title{
  font-size:13px;
  color:#1e293b;
  font-weight:500;
  line-height:1.5;
}

.chat-form-group{
  display:flex;
  flex-direction:column;
  gap:6px;
  width:100%;
}

.chat-form-group label{
  font-size:13px;
  font-weight:700;
  color:#1e293b;
}

.chat-form-group input,
.chat-form-group textarea{
  width:100%;
  padding:10px 14px;
  border:1px solid #e2e8f0;
  border-radius:10px;
  font-size:13px;
  font-family:'Inter',sans-serif;
  color:#1e293b;
  outline:none;
  background:#fff;
  box-sizing:border-box;
}

.chat-form-group input:focus,
.chat-form-group textarea:focus{
  border-color:#3b82f6;
}

.chat-form-group textarea{
  height:80px;
  resize:none;
}

.chat-form-submit{
  width:100%;
  height:46px;
  border-radius:12px;
  background:#16a34a;
  color:#fff;
  font-size:15px;
  font-weight:700;
  border:none;
  cursor:pointer;
  font-family:'Inter',sans-serif;
  transition:0.2s;
}

.chat-form-submit:hover{
  background:#15803d;
}
.chat-real-person{
  padding:14px 16px 0;
}

.chat-real-person h4{
  font-size:15px;
  font-weight:700;
  color:#0f172a;
}

.chat-real-person p{
  margin-top:6px;
  font-size:13px;
  color:#64748b;
  line-height:1.5;
}
/* ========================= */
/* ORDER PAGE                */
/* ========================= */

.order-hero{
  background:
    radial-gradient(circle at top right,#173ea7 0%,transparent 30%),
    linear-gradient(135deg,#020817,#04113d 50%,#020617 100%);
  padding:60px 90px;
  text-align:center;
}

.order-hero h1{
  font-size:48px;
  font-weight:800;
  color:#fff;
  letter-spacing:-1px;
}

.order-hero p{
  margin-top:14px;
  color:#b8c2d6;
  font-size:18px;
  letter-spacing:1px;
}

.order-hero-badges{
  display:flex;
  justify-content:center;
  gap:30px;
  margin-top:28px;
  flex-wrap:wrap;
}

.order-hero-badge{
  display:flex;
  align-items:center;
  gap:10px;
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.1);
  padding:10px 20px;
  border-radius:999px;
  color:#fff;
  font-size:14px;
  font-weight:600;
}

.order-hero-badge i{
  color:#3b82f6;
}

.order-section{
  background:#f1f5f9;
  padding:60px 90px 80px;
}

.order-layout{
  display:grid;
  grid-template-columns:1fr 360px;
  gap:30px;
  max-width:1300px;
  margin:0 auto;
}

.order-form-card{
  background:#fff;
  border-radius:24px;
  padding:48px;
  box-shadow:0 4px 30px rgba(0,0,0,0.06);
}

.order-form-top{
  text-align:center;
  padding-bottom:32px;
  border-bottom:1px solid #e5e7eb;
  margin-bottom:36px;
}

.order-form-top h2{
  font-size:20px;
  font-weight:800;
  color:#0f172a;
  letter-spacing:0.5px;
}

.order-form-top p{
  margin-top:10px;
  font-size:14px;
  color:#64748b;
  letter-spacing:0.5px;
}

.order-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}

.order-form-grid .full{
  grid-column:1/-1;
}

.form-group{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.form-group label{
  font-size:14px;
  font-weight:700;
  color:#1e293b;
}

.input-wrap{
  display:flex;
  align-items:center;
  border:1.5px solid #e2e8f0;
  border-radius:12px;
  overflow:hidden;
  background:#fff;
  transition:0.2s;
}

.input-wrap:focus-within{
  border-color:#3b82f6;
  box-shadow:0 0 0 3px rgba(59,130,246,0.1);
}

.input-wrap i{
  padding:0 14px;
  color:#94a3b8;
  font-size:15px;
}

.input-wrap input,
.input-wrap select{
  flex:1;
  height:48px;
  border:none;
  outline:none;
  font-size:14px;
  font-family:'Inter',sans-serif;
  color:#1e293b;
  background:transparent;
  padding-right:14px;
}

.input-wrap select{
  cursor:pointer;
}

.textarea-upload-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}

.form-group textarea{
  width:100%;
  height:160px;
  border:1.5px solid #e2e8f0;
  border-radius:12px;
  padding:14px;
  font-size:14px;
  font-family:'Inter',sans-serif;
  color:#1e293b;
  resize:none;
  outline:none;
  transition:0.2s;
  box-sizing:border-box;
}

.form-group textarea:focus{
  border-color:#3b82f6;
  box-shadow:0 0 0 3px rgba(59,130,246,0.1);
}

.file-upload-area{
  height:160px;
  border:2px dashed #cbd5e1;
  border-radius:12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  cursor:pointer;
  transition:0.2s;
  background:#f8fafc;
}

.file-upload-area:hover{
  border-color:#3b82f6;
  background:#eff6ff;
}

.file-upload-area i{
  font-size:36px;
  color:#94a3b8;
}

.file-upload-area p{
  font-size:13px;
  color:#64748b;
  text-align:center;
  line-height:1.5;
}

.file-upload-area span{
  font-size:12px;
  color:#3b82f6;
  font-weight:600;
}

.order-submit-wrap{
  margin-top:32px;
  display:flex;
  justify-content:center;
}

.order-submit-btn{
  height:58px;
  padding:0 60px;
  border-radius:16px;
  background:linear-gradient(135deg,#3b82f6,#2563eb);
  color:#fff;
  font-size:18px;
  font-weight:700;
  border:none;
  cursor:pointer;
  font-family:'Inter',sans-serif;
  display:flex;
  align-items:center;
  gap:12px;
  box-shadow:0 10px 30px rgba(37,99,235,0.35);
  transition:0.2s;
}

.order-submit-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 40px rgba(37,99,235,0.45);
}

/* SIDEBAR */

.order-sidebar{
  display:flex;
  flex-direction:column;
  gap:20px;
}

.sidebar-card{
  background:#fff;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 4px 20px rgba(0,0,0,0.06);
}

.sidebar-card-header{
  padding:16px 22px;
  font-size:14px;
  font-weight:800;
  letter-spacing:0.5px;
  display:flex;
  align-items:center;
  gap:10px;
}

.sidebar-card-header.gray{
  background:#f1f5f9;
  color:#0f172a;
  border-bottom:1px solid #e5e7eb;
}

.sidebar-card-body{
  padding:20px 22px;
}

.sidebar-card-body p{
  font-size:14px;
  color:#475569;
  line-height:1.7;
}

.sidebar-card-body .highlight{
  color:#16a34a;
  font-weight:700;
}

.upload-info-list{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.upload-info-item{
  display:flex;
  align-items:flex-start;
  gap:14px;
}

.upload-info-item i{
  font-size:22px;
  color:#ea580c;
  margin-top:2px;
  flex-shrink:0;
}

.upload-info-item p{
  font-size:13px;
  color:#475569;
  line-height:1.6;
}

.callback-btn{
  width:100%;
  height:52px;
  background:linear-gradient(135deg,#0e7490,#0891b2);
  color:#fff;
  font-size:15px;
  font-weight:700;
  border:none;
  cursor:pointer;
  font-family:'Inter',sans-serif;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  transition:0.2s;
}

.callback-btn:hover{
  background:linear-gradient(135deg,#0891b2,#06b6d4);
}

/* FAQ */

.faq-section{
  background:#fff;
  padding:80px 90px;
}

.faq-section h2{
  text-align:center;
  font-size:42px;
  font-weight:800;
  color:#0f172a;
  margin-bottom:50px;
}

.faq-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  max-width:1100px;
  margin:0 auto;
  border:1px solid #e5e7eb;
  border-radius:16px;
  overflow:hidden;
}

.faq-item{
  padding:32px;
  border-right:1px solid #e5e7eb;
  border-bottom:1px solid #e5e7eb;
}

.faq-item:nth-child(3),
.faq-item:nth-child(6){
  border-right:none;
}

.faq-item:nth-child(4),
.faq-item:nth-child(5),
.faq-item:nth-child(6){
  border-bottom:none;
}

.faq-item h3{
  font-size:16px;
  font-weight:700;
  color:#0f172a;
  margin-bottom:12px;
}

.faq-item p{
  font-size:14px;
  color:#64748b;
  line-height:1.7;
}

.faq-item p a{
  color:#3b82f6;
}

/* RESPONSIVE */

@media(max-width:1100px){
  .order-layout{
    grid-template-columns:1fr;
  }
  .order-sidebar{
    display:grid;
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:768px){
  .order-hero,
  .order-section,
  .faq-section{
    padding-left:24px;
    padding-right:24px;
  }
  .order-form-grid,
  .textarea-upload-grid{
    grid-template-columns:1fr;
  }
  .order-form-card{
    padding:24px;
  }
  .faq-grid{
    grid-template-columns:1fr;
  }
  .faq-item{
    border-right:none;
  }
  .order-sidebar{
    grid-template-columns:1fr;
  }
  .order-hero h1{
    font-size:32px;
  }
}
/* ========================= */
/* FOOTER                    */
/* ========================= */

.footer{
  background:linear-gradient(135deg,#020817,#04113d);
  border-top:1px solid rgba(255,255,255,0.06);
  padding:30px 90px;
}

.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
}

.footer-logo{
  display:flex;
  align-items:center;
  gap:10px;
  color:#fff;
  font-size:20px;
  font-weight:700;
}

.footer-logo i{
  color:#3b82f6;
  font-size:24px;
}

.footer-logo b{
  color:#3b82f6;
}

.footer-copy{
  color:#64748b;
  font-size:14px;
}

@media(max-width:768px){
  .footer{
    padding:30px 24px;
  }
  .footer-inner{
    flex-direction:column;
    align-items:center;
    text-align:center;
  }
}

/* ========================= */
/* LOGIN PAGE */
/* ========================= */

.login-page .login-container{
    display:flex;
    width:100%;
    min-height:100vh;
}

/* LEFT PANEL */

.login-page .left-panel{
    width:34%;
    background:#fff;
    padding:40px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.login-page .logo{
    text-align:center;
    margin-bottom:30px;
}

.login-page .logo h1{
    font-size:42px;
    line-height:1.2;
    color:#1f2937;
    font-weight:700;
}

/* SUBTEXT */

.login-page .sub-text{
    font-size:16px;
    color:#4b5563;
    margin-bottom:32px;
}

.login-page .sub-text a{
    color:#2563eb;
}

/* FORM */

.login-page .form-group{
    margin-bottom:24px;
}

.login-page .form-group label{
    display:block;
    margin-bottom:10px;
    font-size:16px;
    font-weight:600;
    color:#111827;
}

.login-page .input-box{
    position:relative;
}

.login-page .input-box input{
    width:100%;
    height:56px;
    border:1px solid #d1d5db;
    border-radius:6px;
    padding:0 18px;
    font-size:16px;
    outline:none;
    transition:0.3s;
}

.login-page .input-box input:focus{
    border-color:#2563eb;
}

/* LOGIN BUTTON */

.login-page .login-btn{
    width:100%;
    height:56px;
    border:none;
    border-radius:6px;
    background:#d97757;
    color:#fff;
    font-size:18px;
    font-weight:600;
    margin-top:8px;
    transition:0.3s;
}

.login-page .login-btn:hover{
    background:#c96b4b;
}

/* LINKS */

.login-page .bottom-links{
    display:flex;
    justify-content:space-between;
    margin-top:28px;
    flex-wrap:wrap;
    gap:10px;
}

.login-page .bottom-links a{
    font-size:14px;
    color:#2563eb;
}

/* COPYRIGHT */

.login-page .copyright{
    margin-top:50px;
    text-align:center;
    font-size:13px;
    color:#6b7280;
}

/* RIGHT PANEL */

.login-page .right-panel{
    width:66%;
    background:
    linear-gradient(rgba(20,93,185,0.92), rgba(20,93,185,0.92)),
    url('https://images.unsplash.com/photo-1522202176988-66273c2fd55f?q=80&w=1400&auto=format&fit=crop');

    background-size:cover;
    background-position:center;

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

    text-align:center;

    padding:60px;
    color:#fff;
}

.login-page .content{
    max-width:900px;
}

.login-page .content h2{
    font-size:44px;
    line-height:1.25;
    font-weight:700;
    margin-bottom:26px;
}

.login-page .content > p{
    font-size:18px;
    line-height:1.7;
    margin-bottom:70px;
    color:#f3f4f6;
}

/* FEATURES */

.login-page .features{
    display:flex;
    gap:30px;
}

.login-page .feature{
    flex:1;
    padding:0 20px;
    border-right:1px solid rgba(255,255,255,0.25);
}

.login-page .feature:last-child{
    border-right:none;
}

.login-page .feature i{
    font-size:52px;
    margin-bottom:20px;
}

.login-page .feature h3{
    font-size:18px;
    line-height:1.4;
    margin-bottom:16px;
}

.login-page .feature p{
    font-size:14px;
    line-height:1.8;
    color:#e5e7eb;
}

/* BUTTONS */

.login-page .action-buttons{
    display:flex;
    justify-content:center;
    gap:20px;
    margin-top:60px;
}

.login-page .btn{
    padding:16px 34px;
    border-radius:10px;
    font-size:16px;
    font-weight:600;
}

.login-page .btn-white{
    background:#fff;
    color:#d97757;
}

.login-page .btn-orange{
    background:#e18466;
    color:#fff;
}

/* RESPONSIVE */

@media(max-width:992px){

    .login-page .login-container{
        flex-direction:column;
    }

    .login-page .left-panel,
    .login-page .right-panel{
        width:100%;
    }

    .login-page .features{
        flex-direction:column;
    }

    .login-page .feature{
        border-right:none;
        border-bottom:1px solid rgba(255,255,255,0.2);
        padding-bottom:24px;
    }

    .login-page .content h2{
        font-size:34px;
    }

}
/* ========================= */
/* PRICING PAGE              */
/* ========================= */

/* HERO */
.pg-hero{
  background:#fff;
  text-align:center;
  padding:70px 90px 60px;
  border-bottom:1px solid #e5e7eb;
}

.pg-hero h1{
  font-size:42px;
  font-weight:800;
  color:#1f2937;
}

.pg-hero p{
  margin-top:16px;
  font-size:17px;
  color:#4b5563;
  line-height:1.7;
}

.pg-hero-btns{
  display:flex;
  justify-content:center;
  gap:20px;
  margin-top:30px;
  flex-wrap:wrap;
}

.pg-btn-teal{
  height:52px;
  padding:0 30px;
  border-radius:8px;
  background:#2a9d8f;
  color:#fff;
  font-size:16px;
  font-weight:600;
  border:none;
  cursor:pointer;
  font-family:'Inter',sans-serif;
  display:flex;
  align-items:center;
  gap:10px;
  transition:0.2s;
}

.pg-btn-teal:hover{
  background:#21867a;
}

.pg-btn-orange{
  height:52px;
  padding:0 30px;
  border-radius:8px;
  background:#d97757;
  color:#fff;
  font-size:16px;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:10px;
  transition:0.2s;
}

.pg-btn-orange:hover{
  background:#c96b4b;
}

/* PRICE DETERMINATION */
.pg-determination{
  background:#f3f4f6;
  padding:70px 90px;
  text-align:center;
}

.pg-determination h2{
  font-size:36px;
  font-weight:800;
  color:#1f2937;
}

.pg-determination > p{
  margin-top:16px;
  font-size:16px;
  color:#4b5563;
  max-width:700px;
  margin-left:auto;
  margin-right:auto;
  line-height:1.7;
}

.pg-factors{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:30px;
  margin-top:50px;
}

.pg-factor{
  text-align:center;
}

.pg-factor i{
  font-size:32px;
  color:#2a9d8f;
  margin-bottom:14px;
}

.pg-factor h3{
  font-size:15px;
  font-weight:700;
  color:#1f2937;
  margin-bottom:10px;
}

.pg-factor p{
  font-size:14px;
  color:#6b7280;
  line-height:1.6;
}

/* PRICE CALCULATOR */
.pg-calculator{
  padding:70px 90px;
  background:#fff;
  text-align:center;
}

.pg-calculator h2{
  font-size:36px;
  font-weight:800;
  color:#1f2937;
}

.pg-calculator > p{
  margin-top:14px;
  font-size:16px;
  color:#4b5563;
}

.pg-currency{
  margin-top:20px;
  font-size:14px;
  color:#4b5563;
  text-align:right;
}

.pg-currency a{
  color:#2a9d8f;
  font-weight:600;
}

.pg-currency a.active{
  font-weight:800;
  color:#1f2937;
}

.pg-table-wrap{
  margin-top:20px;
  overflow-x:auto;
}

.pg-table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
}

.pg-table th,
.pg-table td{
  padding:16px 20px;
  text-align:center;
  border:1px solid #e5e7eb;
}

.th-orange{
  background:#d97757;
  color:#fff;
  font-weight:700;
  font-size:14px;
  letter-spacing:0.5px;
}

.th-teal{
  background:#2a9d8f;
  color:#fff;
  font-weight:600;
  font-size:14px;
}

.th-teal strong{
  font-size:22px;
}

.pg-table tbody tr td:first-child{
  text-align:left;
  color:#374151;
}

.pg-date{
  font-size:12px;
  color:#d97757;
  display:block;
  margin-top:4px;
}

.pg-row-alt{
  background:#f9fafb;
}

.pg-order-now{
  color:#2a9d8f;
  font-weight:700;
  margin-left:8px;
}

/* CTA BANNER */
.pg-cta{
  background:#d97757;
  padding:60px 90px;
  text-align:center;
}

.pg-cta h2{
  font-size:28px;
  font-weight:700;
  color:#fff;
}

.pg-cta p{
  margin-top:10px;
  font-size:16px;
  color:#fff;
  opacity:0.9;
}

.pg-cta-btn{
  display:inline-block;
  margin-top:24px;
  padding:14px 36px;
  border-radius:8px;
  background:#fff;
  color:#d97757;
  font-size:16px;
  font-weight:700;
  transition:0.2s;
}

.pg-cta-btn:hover{
  background:#f9fafb;
}

/* ADD-ONS */
.pg-addons{
  background:#f3f4f6;
  padding:70px 90px;
  text-align:center;
}

.pg-addons h2{
  font-size:36px;
  font-weight:800;
  color:#1f2937;
}

.pg-addons > p{
  margin-top:16px;
  font-size:15px;
  color:#4b5563;
  max-width:800px;
  margin-left:auto;
  margin-right:auto;
  line-height:1.7;
}

.pg-addons-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
  margin-top:50px;
}

.pg-addon{
  text-align:center;
}

.pg-addon img{
  width:80px;
  height:80px;
  object-fit:contain;
  margin-bottom:16px;
}

.pg-addon h3{
  font-size:14px;
  font-weight:700;
  color:#1f2937;
  letter-spacing:0.5px;
  margin-bottom:12px;
}

.pg-addon p{
  font-size:14px;
  color:#6b7280;
  line-height:1.7;
}

/* FREE INCLUSIONS */
.pg-free{
  background:#fff;
  padding:70px 90px;
  text-align:center;
}

.pg-free h2{
  font-size:36px;
  font-weight:800;
  color:#1f2937;
}

.pg-free > p{
  margin-top:16px;
  font-size:15px;
  color:#4b5563;
  max-width:800px;
  margin-left:auto;
  margin-right:auto;
  line-height:1.7;
}

.pg-free-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:40px;
  text-align:left;
}

.pg-free-item{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:15px;
  color:#374151;
  padding:8px 0;
}

.pg-free-item i{
  color:#16a34a;
  font-size:14px;
}

/* SECURE PAYMENT */
.pg-payment{
  background:#fff;
  padding:70px 90px;
  text-align:center;
}

.pg-payment h2{
  font-size:36px;
  font-weight:800;
  color:#1f2937;
}

.pg-payment > p{
  margin-top:16px;
  font-size:15px;
  color:#4b5563;
  max-width:800px;
  margin-left:auto;
  margin-right:auto;
  line-height:1.7;
}

.pg-payment-sub{
  margin-top:24px;
  font-size:15px;
  color:#4b5563;
}

.pg-payment-logos{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:30px;
  margin-top:30px;
  flex-wrap:wrap;
}

.pg-payment-logos img{
  height:60px;
  object-fit:contain;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,0.1));
}

/* PRICING FAQ */
.pg-faq{
  background:#f3f4f6;
  padding:70px 90px;
}

.pg-faq h2{
  font-size:36px;
  font-weight:800;
  color:#1f2937;
  text-align:center;
}

.pg-faq > p{
  margin-top:16px;
  font-size:15px;
  color:#4b5563;
  max-width:800px;
  margin-left:auto;
  margin-right:auto;
  line-height:1.7;
  text-align:center;
}

.pg-faq-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  margin-top:50px;
}

.pg-faq-col h3{
  font-size:20px;
  font-weight:700;
  color:#1f2937;
  margin-bottom:28px;
}

.pg-faq-item{
  margin-bottom:28px;
}

.pg-faq-item h4{
  font-size:15px;
  font-weight:700;
  color:#1f2937;
  margin-bottom:10px;
}

.pg-faq-item p{
  font-size:14px;
  color:#4b5563;
  line-height:1.7;
}

/* BIG FOOTER */
.pg-footer{
  background:linear-gradient(135deg,#0f1d54,#101d4a);
  padding:60px 90px 30px;
}

.pg-footer-inner{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:40px;
}

.pg-footer-col h4{
  color:#fff;
  font-size:16px;
  font-weight:700;
  margin-bottom:20px;
}

.pg-footer-col a{
  display:block;
  color:#b7c2d6;
  font-size:14px;
  margin-bottom:10px;
  transition:0.2s;
}

.pg-footer-col a:hover{
  color:#fff;
}

.pg-footer-col p{
  color:#b7c2d6;
  font-size:13px;
  margin-bottom:10px;
  line-height:1.6;
  display:flex;
  align-items:flex-start;
  gap:8px;
}

.pg-footer-col p i{
  margin-top:2px;
  flex-shrink:0;
}

.pg-social{
  display:flex;
  gap:12px;
  margin-bottom:20px;
}

.pg-social a{
  width:38px;
  height:38px;
  border-radius:50%;
  background:rgba(255,255,255,0.15);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  margin-bottom:0;
}

.pg-social a:hover{
  background:rgba(255,255,255,0.3);
}

.pg-footer-input{
  width:100%;
  height:46px;
  border:1px solid rgba(255,255,255,0.2);
  border-radius:6px;
  padding:0 14px;
  font-size:14px;
  background:rgba(255,255,255,0.1);
  color:#fff;
  outline:none;
  font-family:'Inter',sans-serif;
  margin-top:12px;
}

.pg-footer-input::placeholder{
  color:rgba(255,255,255,0.5);
}

.pg-footer-submit{
  width:100%;
  height:46px;
  margin-top:12px;
  border-radius:6px;
  background:#fff;
  color:#d97757;
  font-size:15px;
  font-weight:700;
  border:none;
  cursor:pointer;
  font-family:'Inter',sans-serif;
  transition:0.2s;
}

.pg-footer-submit:hover{
  background:#f9fafb;
}

.pg-affiliate-btn{
  width:100%;
  height:46px;
  margin-top:12px;
  border-radius:6px;
  background:transparent;
  border:2px solid #f4a261;
  color:#f4a261;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  font-family:'Inter',sans-serif;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  transition:0.2s;
}

.pg-affiliate-btn:hover{
  background:#f4a261;
  color:#fff;
}

.pg-footer-bottom{
  margin-top:40px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,0.1);
  text-align:center;
  color:rgba(255,255,255,0.5);
  font-size:13px;
}

/* RESPONSIVE */
@media(max-width:1100px){
  .pg-factors{
    grid-template-columns:repeat(2,1fr);
  }
  .pg-footer-inner{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:768px){
  .pg-hero,
  .pg-determination,
  .pg-calculator,
  .pg-cta,
  .pg-addons,
  .pg-free,
  .pg-payment,
  .pg-faq,
  .pg-footer{
    padding-left:24px;
    padding-right:24px;
  }
  .pg-factors,
  .pg-addons-grid,
  .pg-free-grid,
  .pg-faq-grid{
    grid-template-columns:1fr;
  }
  .pg-footer-inner{
    grid-template-columns:1fr;
  }
  .pg-hero h1{
    font-size:30px;
  }
}
.pg-footer-disclaimer{
  margin-top:30px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,0.1);
  text-align:center;
  color:rgba(255,255,255,0.5);
  font-size:13px;
  line-height:1.7;
  max-width:900px;
  margin-left:auto;
  margin-right:auto;
}

.pg-footer-countries{
  margin-top:40px;
  padding:40px 0;
  border-top:1px solid rgba(0,0,0,0.1);
  background:rgba(0,0,0,0.1);
  text-align:center;
}

.pg-footer-logo-area{
  margin-bottom:24px;
}

.pg-footer-logo-area i{
  font-size:48px;
  color:#3b82f6;
}

.pg-footer-logo-area h3{
  font-size:22px;
  font-weight:700;
  color:#fff;
  margin-top:10px;
}

.pg-footer-logo-area p{
  font-size:14px;
  color:rgba(255,255,255,0.7);
  margin-top:8px;
  font-weight:600;
}

.pg-countries-list{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:30px;
  flex-wrap:wrap;
  margin-top:20px;
}

.pg-countries-list a{
  color:rgba(255,255,255,0.85);
  font-size:15px;
  font-weight:500;
  transition:0.2s;
  display:flex;
  align-items:center;
  gap:6px;
}

.pg-countries-list a:hover{
  color:#fff;
}

.pg-footer-bottom{
  margin-top:0;
  padding:20px 0;
  text-align:center;
  color:rgba(255,255,255,0.5);
  font-size:13px;
  border-top:1px solid rgba(255,255,255,0.1);
}
.pg-price-cell{
  position:relative;
  cursor:pointer;
}

.pg-price-cell .pg-order-now{
  display:none;
  color:#d97757;
  font-size:13px;
  font-weight:700;
  margin-left:10px;
}

.pg-price-cell:hover .pg-order-now{
  display:inline;
}
/* ========================= */
/* REVIEWS SECTION           */
/* ========================= */

.rv-section{
  background:#f3f4f6;
  padding:70px 90px;
  text-align:center;
}

.rv-section h2{
  font-size:36px;
  font-weight:800;
  color:#1f2937;
}

.rv-section > p{
  margin-top:14px;
  font-size:15px;
  color:#4b5563;
  max-width:700px;
  margin-left:auto;
  margin-right:auto;
  line-height:1.7;
}

.rv-layout{
  display:grid;
  grid-template-columns:200px 1fr;
  gap:40px;
  margin-top:50px;
  text-align:left;
}

.rv-platforms{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.rv-platform{
  padding:18px 20px;
  border-radius:12px;
  background:#fff;
  border:2px solid #e5e7eb;
  font-size:15px;
  font-weight:700;
  color:#374151;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:10px;
  transition:0.2s;
}

.rv-platform.active{
  border-color:#2a9d8f;
  color:#2a9d8f;
}

.rv-card{
  background:#fff;
  border-radius:16px;
  padding:32px;
  box-shadow:0 4px 20px rgba(0,0,0,0.06);
}

.rv-card-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:14px;
}

.rv-user{
  display:flex;
  align-items:center;
  gap:14px;
}

.rv-avatar{
  width:48px;
  height:48px;
  border-radius:50%;
  background:#e5e7eb;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  color:#6b7280;
}

.rv-date{
  font-size:13px;
  color:#9ca3af;
}

.rv-stars{
  color:#22c55e;
  font-size:18px;
  margin-bottom:14px;
}

.rv-card h4{
  font-size:17px;
  font-weight:700;
  color:#1f2937;
  margin-bottom:12px;
  line-height:1.5;
}

.rv-card p{
  font-size:14px;
  color:#4b5563;
  line-height:1.7;
}

.rv-arrows{
  display:flex;
  gap:12px;
  margin-top:24px;
}

.rv-arrow{
  width:44px;
  height:44px;
  border:2px solid #2563eb;
  border-radius:4px;
  background:#fff;
  color:#2563eb;
  font-size:16px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:0.2s;
}

.rv-arrow:hover{
  background:#2563eb;
  color:#fff;
}

/* ========================= */
/* CLAIM OFFER               */
/* ========================= */

.offer-section{
  background:#fff;
  padding:70px 90px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}

.offer-left h2{
  font-size:32px;
  font-weight:800;
  color:#1f2937;
  margin-bottom:20px;
}

.offer-left p{
  font-size:14px;
  color:#4b5563;
  line-height:1.8;
  font-style:italic;
}

.offer-person{
  margin-top:24px;
}

.offer-person strong{
  display:block;
  font-size:16px;
  color:#1f2937;
}

.offer-person span{
  font-size:13px;
  color:#6b7280;
}

.offer-right h3{
  font-size:28px;
  font-weight:800;
  color:#2563eb;
  margin-bottom:10px;
}

.offer-right h3 span{
  font-size:18px;
  color:#1f2937;
  font-weight:600;
}

.offer-right > p{
  font-size:15px;
  color:#4b5563;
  margin-bottom:20px;
}

.offer-input-wrap{
  display:flex;
  align-items:center;
  border:1px solid #d1d5db;
  border-radius:8px;
  overflow:hidden;
}

.offer-code{
  padding:0 14px;
  height:50px;
  display:flex;
  align-items:center;
  background:#f3f4f6;
  border-right:1px solid #d1d5db;
  font-weight:600;
  color:#374151;
}

.offer-input-wrap input{
  flex:1;
  height:50px;
  border:none;
  outline:none;
  padding:0 14px;
  font-size:14px;
  font-family:'Inter',sans-serif;
}

.offer-input-wrap button{
  height:50px;
  padding:0 20px;
  background:#22c55e;
  color:#fff;
  font-size:14px;
  font-weight:700;
  border:none;
  cursor:pointer;
  font-family:'Inter',sans-serif;
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}

/* ========================= */
/* RECENT PROJECTS           */
/* ========================= */

.projects-section{
  background:#f3f4f6;
  padding:70px 90px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:center;
}

.projects-info{
  background:#2563eb;
  padding:50px 40px;
  border-radius:8px;
  color:#fff;
}

.projects-line{
  width:50px;
  height:3px;
  background:#fff;
  margin-bottom:20px;
}

.projects-info h2{
  font-size:28px;
  font-weight:800;
  margin-bottom:16px;
}

.projects-info p{
  font-size:14px;
  line-height:1.7;
  opacity:0.85;
}

.projects-right{
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
}

.projects-arrows{
  display:flex;
  gap:12px;
}

/* ========================= */
/* INFO SECTION              */
/* ========================= */

.info-section{
  background:#fff;
  padding:70px 90px;
  text-align:center;
}

.info-section h2{
  font-size:34px;
  font-weight:800;
  color:#1f2937;
  margin-bottom:40px;
}

.info-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  text-align:justify;
  margin-bottom:50px;
}

.info-grid p{
  font-size:14px;
  color:#4b5563;
  line-height:1.8;
}

.info-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:30px;
  border-top:1px solid #e5e7eb;
  padding-top:40px;
}

.info-stat h3{
  font-size:36px;
  font-weight:800;
  color:#2a9d8f;
  margin-bottom:10px;
}

.info-stat img{
  height:50px;
  object-fit:contain;
  margin-bottom:10px;
}

.info-stat p{
  font-size:13px;
  color:#4b5563;
  font-weight:600;
  line-height:1.5;
}

/* ========================= */
/* ASSIGNMENT HELP SERVICES  */
/* ========================= */

.ahs-section{
  background:#f3f4f6;
  padding:70px 90px;
}

.ahs-section h2{
  font-size:34px;
  font-weight:800;
  color:#1f2937;
  text-align:center;
  margin-bottom:40px;
}

.ahs-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  text-align:justify;
}

.ahs-grid p{
  font-size:14px;
  color:#4b5563;
  line-height:1.8;
  margin-bottom:20px;
}

.ahs-stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:30px;
  margin-top:50px;
  border-top:1px solid #d1d5db;
  padding-top:40px;
  text-align:center;
}

.ahs-stat h3{
  font-size:36px;
  font-weight:800;
  color:#2a9d8f;
  margin-bottom:10px;
}

.ahs-stat p{
  font-size:13px;
  color:#4b5563;
  font-weight:600;
  line-height:1.5;
}

/* ========================= */
/* BEST QUALITY              */
/* ========================= */

.bq-section{
  background:#fff;
  padding:70px 90px;
  text-align:center;
}

.bq-section h2{
  font-size:34px;
  font-weight:800;
  color:#1f2937;
  margin-bottom:30px;
}

.bq-flags{
  display:flex;
  justify-content:center;
  gap:30px;
  flex-wrap:wrap;
  margin-bottom:30px;
}

.bq-flags span{
  font-size:15px;
  color:#6b7280;
  font-weight:600;
}

.bq-section > p{
  font-size:15px;
  color:#4b5563;
  max-width:900px;
  margin:0 auto 50px;
  line-height:1.8;
}

.bq-features{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
  margin-bottom:40px;
}

.bq-feature i{
  font-size:48px;
  color:#2a9d8f;
  margin-bottom:16px;
}

.bq-feature h3{
  font-size:14px;
  font-weight:700;
  color:#1f2937;
  letter-spacing:0.5px;
  margin-bottom:12px;
}

.bq-feature p{
  font-size:14px;
  color:#6b7280;
  line-height:1.7;
}

.bq-order-wrap{
  display:flex;
  justify-content:center;
}

.bq-order-btn{
  height:52px;
  padding:0 36px;
  border-radius:8px;
  background:#d97757;
  color:#fff;
  font-size:16px;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:10px;
  transition:0.2s;
}

.bq-order-btn:hover{
  background:#c96b4b;
}

/* ========================= */
/* SECURITY PARTNERS         */
/* ========================= */

.sp-section{
  background:#f3f4f6;
  padding:60px 90px;
  text-align:center;
}

.sp-section h2{
  font-size:32px;
  font-weight:800;
  color:#1f2937;
  margin-bottom:40px;
}

.sp-logos{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:40px;
  flex-wrap:wrap;
}

.sp-logos img{
  height:50px;
  object-fit:contain;
  filter:grayscale(100%);
  opacity:0.7;
  transition:0.2s;
}

.sp-logos img:hover{
  filter:grayscale(0%);
  opacity:1;
}

/* ========================= */
/* BEAT ACADEMIC STRESS      */
/* ========================= */

.bas-section{
  background:#fff;
  padding:70px 90px;
}

.bas-section h2{
  font-size:32px;
  font-weight:800;
  color:#1f2937;
  text-align:center;
  margin-bottom:30px;
}

.bas-section p{
  font-size:15px;
  color:#4b5563;
  line-height:1.8;
  max-width:1100px;
  margin:0 auto;
}

/* ========================= */
/* WHY AVAILING HELP         */
/* ========================= */

.wah-section{
  background:#f3f4f6;
  padding:70px 90px;
}

.wah-section h2{
  font-size:32px;
  font-weight:800;
  color:#1f2937;
  text-align:center;
  margin-bottom:30px;
}

.wah-section p{
  font-size:15px;
  color:#4b5563;
  line-height:1.8;
  max-width:1100px;
  margin:0 auto;
}

/* ========================= */
/* RATED NUMBER 1            */
/* ========================= */

.rn1-section{
  background:#fff;
  padding:70px 90px;
}

.rn1-section h2{
  font-size:32px;
  font-weight:800;
  color:#1f2937;
  text-align:center;
  margin-bottom:40px;
}

.rn1-unis{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:30px;
  flex-wrap:wrap;
  margin-bottom:40px;
}

.rn1-unis img{
  height:50px;
  object-fit:contain;
  filter:grayscale(100%);
  opacity:0.6;
}

.rn1-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  text-align:justify;
}

.rn1-grid p{
  font-size:14px;
  color:#4b5563;
  line-height:1.8;
}

/* RESPONSIVE */
@media(max-width:768px){
  .rv-layout,
  .offer-section,
  .projects-section,
  .info-grid,
  .ahs-grid,
  .rn1-grid,
  .bq-features{
    grid-template-columns:1fr;
  }
  .info-stats,
  .ahs-stats{
    grid-template-columns:repeat(2,1fr);
  }
  .rv-section,
  .offer-section,
  .projects-section,
  .info-section,
  .ahs-section,
  .bq-section,
  .sp-section,
  .bas-section,
  .wah-section,
  .rn1-section{
    padding-left:24px;
    padding-right:24px;
  }
}
/* ========================= */
/* ABOUT US PAGE             */
/* ========================= */

.au-label{
  display:inline-block;
  font-size:13px;
  font-weight:700;
  letter-spacing:1.5px;
  color:#2563eb;
  margin-bottom:14px;
}

/* HERO */
.au-hero{
  background:
    radial-gradient(circle at top right,#173ea7 0%,transparent 30%),
    linear-gradient(135deg,#020817,#04113d 50%,#020617 100%);
  padding:80px 90px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}

.au-hero-content h1{
  font-size:52px;
  font-weight:800;
  color:#fff;
  line-height:1.15;
  letter-spacing:-1px;
  margin-bottom:20px;
}

.au-hero-content p{
  font-size:18px;
  color:#b8c2d6;
  line-height:1.8;
  margin-bottom:36px;
}

.au-hero-btns{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}

.au-btn-primary{
  height:52px;
  padding:0 28px;
  border-radius:12px;
  background:linear-gradient(135deg,#3b82f6,#2563eb);
  color:#fff;
  font-size:16px;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:10px;
  box-shadow:0 10px 30px rgba(37,99,235,0.35);
  transition:0.2s;
}

.au-btn-primary:hover{
  transform:translateY(-2px);
}

.au-btn-secondary{
  height:52px;
  padding:0 28px;
  border-radius:12px;
  background:transparent;
  border:1px solid rgba(255,255,255,0.2);
  color:#fff;
  font-size:16px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  transition:0.2s;
}

.au-btn-secondary:hover{
  background:rgba(255,255,255,0.08);
}

.au-hero-image{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

.au-hero-card{
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:20px;
  padding:28px 24px;
  text-align:center;
  backdrop-filter:blur(10px);
}

.au-hero-card i{
  font-size:32px;
  color:#3b82f6;
  margin-bottom:12px;
}

.au-hero-card h3{
  font-size:32px;
  font-weight:800;
  color:#fff;
  margin-bottom:6px;
}

.au-hero-card p{
  font-size:13px;
  color:#94a3b8;
}

/* OUR STORY */
.au-story{
  background:#fff;
  padding:80px 90px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}

.au-story-left h2{
  font-size:38px;
  font-weight:800;
  color:#0f172a;
  line-height:1.2;
  margin-bottom:24px;
}

.au-story-left p{
  font-size:15px;
  color:#475569;
  line-height:1.8;
  margin-bottom:16px;
}

.au-story-right{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
}

.au-story-img{
  width:100%;
  height:380px;
  background:linear-gradient(135deg,#1e3a8a,#2563eb);
  border-radius:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:120px;
  color:rgba(255,255,255,0.15);
}

.au-story-badge{
  position:absolute;
  bottom:-20px;
  left:30px;
  background:#fff;
  border-radius:14px;
  padding:16px 22px;
  display:flex;
  align-items:center;
  gap:12px;
  box-shadow:0 10px 30px rgba(0,0,0,0.12);
  font-size:14px;
  font-weight:700;
  color:#0f172a;
}

.au-story-badge i{
  color:#fbbf24;
  font-size:20px;
}

/* MISSION VISION VALUES */
.au-mvv{
  background:#f8fafc;
  padding:80px 90px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
}

.au-mvv-card{
  background:#fff;
  border-radius:20px;
  padding:40px 32px;
  box-shadow:0 4px 20px rgba(0,0,0,0.06);
  text-align:center;
}

.au-mvv-icon{
  width:70px;
  height:70px;
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  margin:0 auto 20px;
}

.au-mvv-icon.blue{
  background:#eaf1ff;
  color:#2563eb;
}

.au-mvv-icon.teal{
  background:#ccfbf1;
  color:#0d9488;
}

.au-mvv-icon.orange{
  background:#ffedd5;
  color:#ea580c;
}

.au-mvv-card h3{
  font-size:22px;
  font-weight:700;
  color:#0f172a;
  margin-bottom:14px;
}

.au-mvv-card p{
  font-size:14px;
  color:#64748b;
  line-height:1.7;
}

/* STATS */
.au-stats{
  background:linear-gradient(135deg,#0f1d54,#101d4a);
  padding:50px 90px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:20px;
  text-align:center;
}

.au-stat h2{
  font-size:42px;
  font-weight:800;
  color:#fff;
  margin-bottom:8px;
}

.au-stat p{
  font-size:14px;
  color:#94a3b8;
}

/* WHY CHOOSE US */
.au-why{
  background:#fff;
  padding:80px 90px;
  text-align:center;
}

.au-why h2{
  font-size:38px;
  font-weight:800;
  color:#0f172a;
  margin-bottom:14px;
}

.au-why > p{
  font-size:16px;
  color:#64748b;
  margin-bottom:50px;
}

.au-why-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  text-align:left;
}

.au-why-card{
  background:#f8fafc;
  border-radius:16px;
  padding:32px 28px;
  border:1px solid #e5e7eb;
  transition:0.3s;
}

.au-why-card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 40px rgba(0,0,0,0.08);
  border-color:#3b82f6;
}

.au-why-card i{
  font-size:32px;
  color:#2563eb;
  margin-bottom:16px;
}

.au-why-card h3{
  font-size:18px;
  font-weight:700;
  color:#0f172a;
  margin-bottom:10px;
}

.au-why-card p{
  font-size:14px;
  color:#64748b;
  line-height:1.7;
}

/* TEAM */
.au-team{
  background:#f8fafc;
  padding:80px 90px;
  text-align:center;
}

.au-team h2{
  font-size:38px;
  font-weight:800;
  color:#0f172a;
  margin-bottom:14px;
}

.au-team > p{
  font-size:16px;
  color:#64748b;
  margin-bottom:50px;
}

.au-team-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}

.au-team-card{
  background:#fff;
  border-radius:20px;
  padding:32px 24px;
  box-shadow:0 4px 20px rgba(0,0,0,0.06);
  text-align:center;
  transition:0.3s;
}

.au-team-card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 40px rgba(0,0,0,0.1);
}

.au-team-avatar img{
  width:90px;
  height:90px;
  border-radius:50%;
  object-fit:cover;
  border:3px solid #e5e7eb;
  margin-bottom:16px;
}

.au-team-card h3{
  font-size:18px;
  font-weight:700;
  color:#0f172a;
  margin-bottom:4px;
}

.au-team-card span{
  font-size:13px;
  color:#2563eb;
  font-weight:600;
  display:block;
  margin-bottom:12px;
}

.au-team-card p{
  font-size:13px;
  color:#64748b;
  line-height:1.6;
  margin-bottom:16px;
}

.au-team-social{
  display:flex;
  justify-content:center;
  gap:10px;
}

.au-team-social a{
  width:34px;
  height:34px;
  border-radius:50%;
  background:#f1f5f9;
  color:#475569;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  transition:0.2s;
}

.au-team-social a:hover{
  background:#2563eb;
  color:#fff;
}

/* CTA */
.au-cta{
  background:linear-gradient(135deg,#2563eb,#1d4ed8);
  padding:80px 90px;
  text-align:center;
}

.au-cta h2{
  font-size:42px;
  font-weight:800;
  color:#fff;
  margin-bottom:14px;
}

.au-cta p{
  font-size:18px;
  color:rgba(255,255,255,0.8);
  margin-bottom:36px;
}

.au-cta-btns{
  display:flex;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
}

.au-btn-chat{
  height:52px;
  padding:0 28px;
  border-radius:12px;
  background:rgba(255,255,255,0.15);
  border:1px solid rgba(255,255,255,0.3);
  color:#fff;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
  font-family:'Inter',sans-serif;
  display:inline-flex;
  align-items:center;
  gap:10px;
  transition:0.2s;
}

.au-btn-chat:hover{
  background:rgba(255,255,255,0.25);
}

/* RESPONSIVE */
@media(max-width:1100px){
  .au-team-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .au-stats{
    grid-template-columns:repeat(3,1fr);
  }
}

@media(max-width:768px){
  .au-hero,
  .au-story,
  .au-mvv,
  .au-why-grid,
  .au-team-grid{
    grid-template-columns:1fr;
  }
  .au-stats{
    grid-template-columns:repeat(2,1fr);
  }
  .au-hero,
  .au-story,
  .au-mvv,
  .au-why,
  .au-team,
  .au-cta{
    padding-left:24px;
    padding-right:24px;
  }
  .au-hero-content h1{
    font-size:36px;
  }
}
/* ========================= */
/* DASHBOARD                 */
/* ========================= */

.dashboard-body{
  background:#f1f5f9;
  overflow-x:hidden;
}

.db-wrapper{
  display:flex;
  min-height:100vh;
}

/* SIDEBAR */
.db-sidebar{
  width:260px;
  min-width:260px;
  background:linear-gradient(180deg,#020817,#04113d);
  display:flex;
  flex-direction:column;
  position:fixed;
  top:0;
  left:0;
  height:100vh;
  overflow-y:auto;
  z-index:100;
  transition:0.3s;
}

.db-sidebar-logo{
  padding:24px 24px 16px;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:22px;
  font-weight:800;
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,0.06);
}

.db-sidebar-logo i{
  color:#3b82f6;
  font-size:28px;
}

.db-sidebar-logo b{
  color:#3b82f6;
}

.db-user-info{
  padding:20px 24px;
  display:flex;
  align-items:center;
  gap:14px;
  border-bottom:1px solid rgba(255,255,255,0.06);
}

.db-user-avatar img{
  width:46px;
  height:46px;
  border-radius:50%;
  border:2px solid #3b82f6;
}

.db-user-info h4{
  color:#fff;
  font-size:15px;
  font-weight:700;
}

.db-user-info span{
  color:#fbbf24;
  font-size:12px;
}

.db-nav{
  flex:1;
  padding:16px 12px;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.db-nav-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:10px;
  color:#94a3b8;
  font-size:14px;
  font-weight:500;
  transition:0.2s;
  position:relative;
}

.db-nav-item:hover{
  background:rgba(255,255,255,0.06);
  color:#fff;
}

.db-nav-item.active{
  background:rgba(59,130,246,0.15);
  color:#3b82f6;
  font-weight:600;
}

.db-nav-item i{
  width:18px;
  text-align:center;
}

.db-badge{
  margin-left:auto;
  background:#ef4444;
  color:#fff;
  font-size:11px;
  font-weight:700;
  padding:2px 7px;
  border-radius:999px;
}

.db-sidebar-footer{
  padding:16px 12px;
  border-top:1px solid rgba(255,255,255,0.06);
  display:flex;
  flex-direction:column;
  gap:8px;
}

.db-back-btn,
.db-logout-btn{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:10px;
  font-size:14px;
  font-weight:500;
  transition:0.2s;
}

.db-back-btn{
  color:#94a3b8;
}

.db-back-btn:hover{
  color:#fff;
  background:rgba(255,255,255,0.06);
}

.db-logout-btn{
  color:#ef4444;
}

.db-logout-btn:hover{
  background:rgba(239,68,68,0.1);
}

/* MAIN */
.db-main{
  margin-left:260px;
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

/* TOPBAR */
.db-topbar{
  background:#fff;
  padding:14px 30px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #e5e7eb;
  position:sticky;
  top:0;
  z-index:50;
}

.db-menu-toggle{
  display:none;
  background:none;
  border:none;
  font-size:22px;
  cursor:pointer;
  color:#374151;
}

.db-topbar-right{
  display:flex;
  align-items:center;
  gap:14px;
}

.db-notif-btn{
  position:relative;
  background:none;
  border:none;
  font-size:20px;
  cursor:pointer;
  color:#374151;
}

.db-notif-dot{
  position:absolute;
  top:0;
  right:0;
  width:8px;
  height:8px;
  background:#ef4444;
  border-radius:50%;
}

.db-new-order-btn{
  height:38px;
  padding:0 18px;
  border-radius:10px;
  background:linear-gradient(135deg,#3b82f6,#2563eb);
  color:#fff;
  font-size:14px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:0.2s;
  border:none;
  cursor:pointer;
  font-family:'Inter',sans-serif;
}

.db-new-order-btn:hover{
  transform:translateY(-1px);
}

/* SECTIONS */
.db-section{
  display:none;
  padding:30px;
  flex:1;
}

.db-section.active{
  display:block;
}

.db-section-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:28px;
  flex-wrap:wrap;
  gap:14px;
}

.db-section-header h1{
  font-size:28px;
  font-weight:800;
  color:#0f172a;
}

.db-section-header p{
  font-size:14px;
  color:#64748b;
  margin-top:4px;
}

/* STAT CARDS */
.db-stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  margin-bottom:28px;
}

.db-stat-card{
  background:#fff;
  border-radius:16px;
  padding:24px;
  display:flex;
  align-items:center;
  gap:16px;
  box-shadow:0 2px 10px rgba(0,0,0,0.05);
}

.db-stat-card h2{
  font-size:32px;
  font-weight:800;
  color:#0f172a;
}

.db-stat-card p{
  font-size:13px;
  color:#64748b;
  margin-top:2px;
}

.db-stat-icon{
  width:56px;
  height:56px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  flex-shrink:0;
}

.db-stat-card.blue .db-stat-icon{ background:#eaf1ff; color:#2563eb; }
.db-stat-card.teal .db-stat-icon{ background:#ccfbf1; color:#0d9488; }
.db-stat-card.green .db-stat-icon{ background:#dcfce7; color:#16a34a; }
.db-stat-card.orange .db-stat-icon{ background:#ffedd5; color:#ea580c; }

/* CARDS */
.db-card{
  background:#fff;
  border-radius:16px;
  padding:24px;
  box-shadow:0 2px 10px rgba(0,0,0,0.05);
  margin-bottom:24px;
}

.db-card-header{
  margin-bottom:20px;
  padding-bottom:14px;
  border-bottom:1px solid #f1f5f9;
}

.db-card-header h3{
  font-size:17px;
  font-weight:700;
  color:#0f172a;
  display:flex;
  align-items:center;
  gap:10px;
}

.db-card-header h3 i{
  color:#2563eb;
}

/* DEADLINE */
.db-deadline-list{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.db-deadline-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px;
  border-radius:12px;
  border-left:4px solid;
}

.db-deadline-item.urgent{ background:#fef2f2; border-color:#ef4444; }
.db-deadline-item.warning{ background:#fffbeb; border-color:#f59e0b; }
.db-deadline-item.normal{ background:#f0fdf4; border-color:#22c55e; }

.db-deadline-info h4{
  font-size:15px;
  font-weight:600;
  color:#0f172a;
}

.db-deadline-info p{
  font-size:13px;
  color:#64748b;
  margin-top:2px;
}

.db-deadline-badge{
  padding:5px 14px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
}

.db-deadline-badge.urgent{ background:#ef4444; color:#fff; }
.db-deadline-badge.warning{ background:#f59e0b; color:#fff; }
.db-deadline-badge.normal{ background:#22c55e; color:#fff; }

/* ACTIVITY */
.db-activity-list{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.db-activity-item{
  display:flex;
  align-items:center;
  gap:16px;
}

.db-activity-icon{
  width:40px;
  height:40px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  flex-shrink:0;
}

.db-activity-icon.green{ background:#dcfce7; color:#16a34a; }
.db-activity-icon.blue{ background:#eaf1ff; color:#2563eb; }
.db-activity-icon.orange{ background:#ffedd5; color:#ea580c; }
.db-activity-icon.teal{ background:#ccfbf1; color:#0d9488; }

.db-activity-info{
  flex:1;
}

.db-activity-info h4{
  font-size:14px;
  font-weight:600;
  color:#0f172a;
}

.db-activity-info p{
  font-size:13px;
  color:#64748b;
  margin-top:2px;
}

.db-activity-time{
  font-size:12px;
  color:#94a3b8;
  white-space:nowrap;
}

/* FILTER TABS */
.db-filter-tabs{
  display:flex;
  gap:8px;
  margin-bottom:20px;
  flex-wrap:wrap;
}

.db-filter-tab{
  height:36px;
  padding:0 16px;
  border-radius:999px;
  border:1px solid #e5e7eb;
  background:#fff;
  color:#64748b;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  font-family:'Inter',sans-serif;
  transition:0.2s;
}

.db-filter-tab.active{
  background:#2563eb;
  color:#fff;
  border-color:#2563eb;
}

/* ORDER CARDS */
.db-orders-list{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.db-order-card{
  background:#fff;
  border-radius:16px;
  padding:24px;
  box-shadow:0 2px 10px rgba(0,0,0,0.05);
}

.db-order-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:16px;
}

.db-order-top h3{
  font-size:17px;
  font-weight:700;
  color:#0f172a;
}

.db-order-top p{
  font-size:13px;
  color:#94a3b8;
  margin-top:2px;
}

.db-order-details{
  display:flex;
  gap:24px;
  flex-wrap:wrap;
  margin-bottom:16px;
}

.db-order-detail{
  font-size:13px;
  color:#475569;
  display:flex;
  align-items:center;
  gap:6px;
}

.db-order-detail i{
  color:#2563eb;
}

.db-order-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* STATUS BADGES */
.db-status-badge{
  padding:4px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
}

.db-status-badge.active{ background:#dbeafe; color:#1d4ed8; }
.db-status-badge.completed{ background:#dcfce7; color:#15803d; }
.db-status-badge.pending{ background:#ffedd5; color:#c2410c; }
.db-status-badge.revision{ background:#fce7f3; color:#be185d; }

/* ACTION BUTTONS */
.db-action-btn{
  height:36px;
  padding:0 16px;
  border-radius:8px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  border:none;
  font-family:'Inter',sans-serif;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:0.2s;
}

.db-action-btn.blue{ background:#eaf1ff; color:#2563eb; }
.db-action-btn.blue:hover{ background:#2563eb; color:#fff; }
.db-action-btn.green{ background:#dcfce7; color:#15803d; }
.db-action-btn.green:hover{ background:#16a34a; color:#fff; }
.db-action-btn.orange{ background:#ffedd5; color:#c2410c; }
.db-action-btn.orange:hover{ background:#ea580c; color:#fff; }
.db-action-btn.yellow{ background:#fef9c3; color:#854d0e; }
.db-action-btn.yellow:hover{ background:#eab308; color:#fff; }
.db-action-btn.gray{ background:#f1f5f9; color:#475569; }
.db-action-btn.gray:hover{ background:#e2e8f0; }

/* TABLE */
.db-table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
}

.db-table th{
  text-align:left;
  padding:12px 16px;
  background:#f8fafc;
  color:#475569;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.5px;
  border-bottom:1px solid #e5e7eb;
}

.db-table td{
  padding:14px 16px;
  border-bottom:1px solid #f1f5f9;
  color:#374151;
  vertical-align:middle;
}

.db-table tr:last-child td{
  border-bottom:none;
}

/* MESSAGES */
.db-messages-layout{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:20px;
  height:600px;
}

.db-msg-list{
  background:#fff;
  border-radius:16px;
  overflow-y:auto;
  box-shadow:0 2px 10px rgba(0,0,0,0.05);
}

.db-msg-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px;
  cursor:pointer;
  border-bottom:1px solid #f1f5f9;
  transition:0.2s;
  position:relative;
}

.db-msg-item:hover{
  background:#f8fafc;
}

.db-msg-item.active{
  background:#eaf1ff;
}

.db-msg-item img{
  width:42px;
  height:42px;
  border-radius:50%;
  flex-shrink:0;
}

.db-msg-item h4{
  font-size:14px;
  font-weight:600;
  color:#0f172a;
}

.db-msg-item p{
  font-size:12px;
  color:#64748b;
  margin-top:2px;
}

.db-msg-item span{
  font-size:11px;
  color:#94a3b8;
}

.db-msg-unread{
  position:absolute;
  top:14px;
  right:14px;
  background:#ef4444;
  color:#fff;
  font-size:11px;
  font-weight:700;
  width:20px;
  height:20px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.db-msg-chat{
  background:#fff;
  border-radius:16px;
  display:flex;
  flex-direction:column;
  box-shadow:0 2px 10px rgba(0,0,0,0.05);
  overflow:hidden;
}

.db-msg-chat-header{
  padding:16px 20px;
  border-bottom:1px solid #f1f5f9;
  display:flex;
  align-items:center;
  gap:12px;
}

.db-msg-chat-header img{
  width:40px;
  height:40px;
  border-radius:50%;
}

.db-msg-chat-header h4{
  font-size:15px;
  font-weight:700;
  color:#0f172a;
}

.db-msg-chat-header span{
  font-size:12px;
  color:#64748b;
}

.db-msg-chat-body{
  flex:1;
  overflow-y:auto;
  padding:20px;
  background:#f8fafc;
  display:flex;
  flex-direction:column;
  gap:16px;
}

.db-msg-bubble{
  max-width:65%;
  padding:12px 16px;
  border-radius:16px;
  font-size:14px;
  line-height:1.5;
}

.db-msg-bubble.received{
  background:#fff;
  color:#1e293b;
  border-bottom-left-radius:4px;
  align-self:flex-start;
  box-shadow:0 2px 8px rgba(0,0,0,0.06);
}

.db-msg-bubble.sent{
  background:linear-gradient(135deg,#3b82f6,#2563eb);
  color:#fff;
  border-bottom-right-radius:4px;
  align-self:flex-end;
}

.db-msg-bubble span{
  display:block;
  font-size:11px;
  margin-top:6px;
  opacity:0.6;
}

.db-msg-chat-footer{
  padding:14px 16px;
  border-top:1px solid #e5e7eb;
  display:flex;
  gap:10px;
}

.db-msg-chat-footer input{
  flex:1;
  height:42px;
  border:1px solid #e2e8f0;
  border-radius:10px;
  padding:0 14px;
  font-size:14px;
  outline:none;
  font-family:'Inter',sans-serif;
}

.db-msg-chat-footer input:focus{
  border-color:#3b82f6;
}

.db-msg-chat-footer button{
  width:42px;
  height:42px;
  border-radius:10px;
  background:linear-gradient(135deg,#3b82f6,#2563eb);
  color:#fff;
  border:none;
  cursor:pointer;
  font-size:16px;
}

/* OFFERS */
.db-offers-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}

.db-offer-card{
  background:#fff;
  border-radius:16px;
  padding:28px;
  box-shadow:0 2px 10px rgba(0,0,0,0.05);
}

.db-offer-card.highlight{
  background:linear-gradient(135deg,#eaf1ff,#dbeafe);
  border:1px solid #bfdbfe;
}

.db-offer-icon{
  width:52px;
  height:52px;
  border-radius:14px;
  background:#eaf1ff;
  color:#2563eb;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  margin-bottom:16px;
}

.db-offer-icon.gold{
  background:#fef9c3;
  color:#ca8a04;
}

.db-offer-card h3{
  font-size:18px;
  font-weight:700;
  color:#0f172a;
  margin-bottom:8px;
}

.db-offer-card > p{
  font-size:14px;
  color:#64748b;
  margin-bottom:16px;
  line-height:1.6;
}

.db-coupon-box{
  display:flex;
  align-items:center;
  background:#fff;
  border:1.5px dashed #3b82f6;
  border-radius:10px;
  overflow:hidden;
  margin-bottom:10px;
}

.db-coupon-box span{
  flex:1;
  padding:10px 14px;
  font-size:14px;
  font-weight:700;
  color:#2563eb;
  letter-spacing:1px;
}

.db-coupon-box button{
  height:42px;
  padding:0 16px;
  background:#2563eb;
  color:#fff;
  border:none;
  cursor:pointer;
  font-size:13px;
  font-weight:600;
  font-family:'Inter',sans-serif;
  display:flex;
  align-items:center;
  gap:6px;
}

.db-offer-expiry{
  font-size:12px;
  color:#94a3b8;
}

.db-referral-stats{
  display:flex;
  gap:24px;
  margin-top:16px;
}

.db-referral-stats h4{
  font-size:22px;
  font-weight:800;
  color:#0f172a;
}

.db-referral-stats p{
  font-size:12px;
  color:#64748b;
  margin-top:2px;
}

.db-perks-list{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:8px;
}

.db-perks-list li{
  font-size:14px;
  color:#374151;
  display:flex;
  align-items:center;
  gap:10px;
}

.db-perks-list li i{
  color:#16a34a;
}

.db-progress-wrap{
  margin:16px 0 8px;
}

.db-progress-label{
  display:flex;
  justify-content:space-between;
  font-size:13px;
  color:#475569;
  margin-bottom:8px;
}

.db-progress-bar{
  height:8px;
  background:#e5e7eb;
  border-radius:999px;
  overflow:hidden;
}

.db-progress-fill{
  height:100%;
  background:linear-gradient(135deg,#3b82f6,#2563eb);
  border-radius:999px;
  transition:0.3s;
}

.db-progress-fill.blue{ background:linear-gradient(135deg,#3b82f6,#2563eb); }
.db-progress-fill.teal{ background:linear-gradient(135deg,#0d9488,#14b8a6); }
.db-progress-fill.green{ background:linear-gradient(135deg,#16a34a,#22c55e); }
.db-progress-fill.orange{ background:linear-gradient(135deg,#ea580c,#f97316); }

.db-cashback-note{
  font-size:12px;
  color:#94a3b8;
}

/* NOTIFICATIONS */
.db-notif-list{
  display:flex;
  flex-direction:column;
  gap:0;
}

.db-notif-item{
  display:flex;
  align-items:flex-start;
  gap:16px;
  padding:18px 0;
  border-bottom:1px solid #f1f5f9;
}

.db-notif-item:last-child{
  border-bottom:none;
}

.db-notif-item.unread{
  background:#fafbff;
  padding:18px 16px;
  border-radius:10px;
  margin-bottom:4px;
}

.db-notif-icon{
  width:40px;
  height:40px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  flex-shrink:0;
}

.db-notif-icon.green{ background:#dcfce7; color:#16a34a; }
.db-notif-icon.blue{ background:#eaf1ff; color:#2563eb; }
.db-notif-icon.orange{ background:#ffedd5; color:#ea580c; }
.db-notif-icon.teal{ background:#ccfbf1; color:#0d9488; }
.db-notif-icon.yellow{ background:#fef9c3; color:#ca8a04; }

.db-notif-content h4{
  font-size:14px;
  font-weight:700;
  color:#0f172a;
}

.db-notif-content p{
  font-size:13px;
  color:#64748b;
  margin-top:4px;
  line-height:1.5;
}

.db-notif-content span{
  font-size:11px;
  color:#94a3b8;
  display:block;
  margin-top:6px;
}

/* PROFILE */
.db-profile-top{
  display:flex;
  gap:30px;
  align-items:flex-start;
}

.db-profile-avatar{
  position:relative;
  flex-shrink:0;
}

.db-profile-avatar img{
  width:110px;
  height:110px;
  border-radius:50%;
  border:3px solid #3b82f6;
}

.db-profile-badge{
  position:absolute;
  bottom:-6px;
  left:50%;
  transform:translateX(-50%);
  background:#fbbf24;
  color:#fff;
  font-size:11px;
  font-weight:700;
  padding:3px 10px;
  border-radius:999px;
  white-space:nowrap;
}

.db-profile-info h2{
  font-size:26px;
  font-weight:800;
  color:#0f172a;
  margin-bottom:14px;
}

.db-profile-email,
.db-profile-phone,
.db-profile-country,
.db-profile-joined{
  font-size:14px;
  color:#475569;
  margin-bottom:10px;
  display:flex;
  align-items:center;
  gap:10px;
}

.db-profile-email i,
.db-profile-phone i,
.db-profile-country i,
.db-profile-joined i{
  color:#2563eb;
  width:16px;
}

.db-profile-notice{
  margin-top:16px;
  padding:12px 16px;
  background:#fffbeb;
  border:1px solid #fde68a;
  border-radius:10px;
  font-size:13px;
  color:#92400e;
  display:flex;
  align-items:center;
  gap:10px;
}

/* SECURITY */
.db-security-form{
  display:flex;
  flex-direction:column;
  gap:18px;
  max-width:500px;
}

.db-form-group{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.db-form-group label{
  font-size:14px;
  font-weight:600;
  color:#374151;
}

.db-form-group input{
  height:46px;
  border:1.5px solid #e2e8f0;
  border-radius:10px;
  padding:0 14px;
  font-size:14px;
  outline:none;
  font-family:'Inter',sans-serif;
  transition:0.2s;
}

.db-form-group input:focus{
  border-color:#3b82f6;
}

.db-security-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 0;
  border-bottom:1px solid #f1f5f9;
}

.db-security-row:last-child{
  border-bottom:none;
}

.db-security-row h4{
  font-size:15px;
  font-weight:600;
  color:#0f172a;
}

.db-security-row p{
  font-size:13px;
  color:#64748b;
  margin-top:2px;
}

.db-toggle{
  position:relative;
  display:inline-block;
  width:46px;
  height:26px;
}

.db-toggle input{
  opacity:0;
  width:0;
  height:0;
}

.db-toggle-slider{
  position:absolute;
  cursor:pointer;
  top:0;left:0;right:0;bottom:0;
  background:#cbd5e1;
  border-radius:999px;
  transition:0.3s;
}

.db-toggle-slider:before{
  position:absolute;
  content:"";
  height:20px;
  width:20px;
  left:3px;
  bottom:3px;
  background:#fff;
  border-radius:50%;
  transition:0.3s;
}

.db-toggle input:checked + .db-toggle-slider{
  background:#2563eb;
}

.db-toggle input:checked + .db-toggle-slider:before{
  transform:translateX(20px);
}

.db-session-item{
  display:flex;
  align-items:center;
  gap:0;
  padding:16px 0;
  border-bottom:1px solid #f1f5f9;
}

.db-session-item:last-child{
  border-bottom:none;
}

.db-session-item h4{
  font-size:14px;
  font-weight:600;
  color:#0f172a;
}

.db-session-item p{
  font-size:13px;
  color:#64748b;
  margin-top:2px;
}

.db-session-item .db-status-badge{
  margin-left:auto;
  margin-right:0;
}

/* REVIEWS */
.db-review-item{
  display:flex;
  align-items:center;
  gap:20px;
  padding:16px 0;
  flex-wrap:wrap;
}

.db-review-info h4{
  font-size:15px;
  font-weight:600;
  color:#0f172a;
}

.db-review-info p{
  font-size:13px;
  color:#64748b;
  margin-top:2px;
}

.db-star-rating{
  display:flex;
  gap:6px;
  font-size:22px;
  color:#d1d5db;
  cursor:pointer;
}

.db-star-rating i.active,
.db-star-rating i:hover{
  color:#fbbf24;
}

.db-submitted-review{
  padding:16px 0;
}

.db-review-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:10px;
}

.db-review-top h4{
  font-size:15px;
  font-weight:600;
  color:#0f172a;
}

.db-review-top p{
  font-size:13px;
  color:#64748b;
  margin-top:2px;
}

.db-review-stars{
  color:#fbbf24;
  font-size:16px;
}

.db-submitted-review > p{
  font-size:14px;
  color:#475569;
  font-style:italic;
  line-height:1.6;
}

/* STATISTICS */
.db-subjects-list{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.db-subject-item{
  display:flex;
  align-items:center;
  gap:16px;
  font-size:14px;
  color:#374151;
}

.db-subject-item span:first-child{
  width:100px;
  font-weight:600;
}

.db-subject-item .db-progress-bar{
  flex:1;
}

.db-subject-item span:last-child{
  width:60px;
  text-align:right;
  color:#64748b;
}

/* RESPONSIVE */
@media(max-width:1024px){
  .db-stats-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .db-offers-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:768px){
  .db-sidebar{
    transform:translateX(-100%);
  }
  .db-sidebar.open{
    transform:translateX(0);
  }
  .db-main{
    margin-left:0;
  }
  .db-menu-toggle{
    display:block;
  }
  .db-messages-layout{
    grid-template-columns:1fr;
    height:auto;
  }
  .db-stats-grid{
    grid-template-columns:1fr 1fr;
  }
  .db-section{
    padding:20px 16px;
  }
}
/* ========================= */
/* WALLET                    */
/* ========================= */

.db-wallet-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:linear-gradient(135deg,#1e3a8a,#2563eb);
  border-radius:16px;
  padding:28px 32px;
  margin-bottom:24px;
  flex-wrap:wrap;
  gap:20px;
}

.db-wallet-left{
  display:flex;
  align-items:center;
  gap:20px;
}

.db-wallet-icon{
  width:64px;
  height:64px;
  border-radius:16px;
  background:rgba(255,255,255,0.15);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  color:#fff;
  flex-shrink:0;
}

.db-wallet-label{
  font-size:13px;
  color:rgba(255,255,255,0.7);
  margin-bottom:6px;
}

.db-wallet-amount{
  font-size:42px;
  font-weight:800;
  color:#fff;
  line-height:1;
  margin-bottom:8px;
}

.db-wallet-sub{
  font-size:12px;
  color:rgba(255,255,255,0.6);
  max-width:300px;
  line-height:1.5;
}

.db-wallet-right{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.db-wallet-add-btn{
  height:44px;
  padding:0 24px;
  border-radius:10px;
  background:#fff;
  color:#2563eb;
  font-size:14px;
  font-weight:700;
  border:none;
  cursor:pointer;
  font-family:'Inter',sans-serif;
  display:flex;
  align-items:center;
  gap:8px;
  transition:0.2s;
}

.db-wallet-add-btn:hover{
  background:#f0f7ff;
  transform:translateY(-1px);
}

.db-wallet-history-btn{
  height:44px;
  padding:0 24px;
  border-radius:10px;
  background:rgba(255,255,255,0.15);
  color:#fff;
  font-size:14px;
  font-weight:600;
  border:1px solid rgba(255,255,255,0.25);
  cursor:pointer;
  font-family:'Inter',sans-serif;
  display:flex;
  align-items:center;
  gap:8px;
  transition:0.2s;
}

.db-wallet-history-btn:hover{
  background:rgba(255,255,255,0.25);
}

/* MODAL OVERLAY */
.db-wallet-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.5);
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  backdrop-filter:blur(4px);
}

.db-wallet-modal.open{
  display:flex;
}

.db-wallet-modal-box{
  background:#fff;
  border-radius:20px;
  width:100%;
  max-width:480px;
  margin:20px;
  box-shadow:0 25px 60px rgba(0,0,0,0.2);
  overflow:hidden;
  animation:slideUp 0.3s ease;
}

.db-wallet-modal-header{
  background:linear-gradient(135deg,#1e3a8a,#2563eb);
  padding:20px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.db-wallet-modal-header h3{
  color:#fff;
  font-size:18px;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:10px;
}

.db-wallet-modal-close{
  width:32px;
  height:32px;
  border-radius:50%;
  background:rgba(255,255,255,0.15);
  border:none;
  color:#fff;
  font-size:16px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:0.2s;
}

.db-wallet-modal-close:hover{
  background:rgba(255,255,255,0.3);
}

.db-wallet-modal-body{
  padding:24px;
}

.db-wallet-modal-balance{
  font-size:14px;
  color:#475569;
  margin-bottom:20px;
  padding:12px 16px;
  background:#f8fafc;
  border-radius:10px;
}

.db-wallet-modal-balance strong{
  color:#2563eb;
  font-size:18px;
}

.db-wallet-modal-label{
  font-size:13px;
  font-weight:700;
  color:#374151;
  margin-bottom:10px;
}

.db-wallet-amounts{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}

.db-wallet-amount-btn{
  height:44px;
  border-radius:10px;
  border:2px solid #e5e7eb;
  background:#fff;
  color:#374151;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  font-family:'Inter',sans-serif;
  transition:0.2s;
}

.db-wallet-amount-btn:hover,
.db-wallet-amount-btn.active{
  border-color:#2563eb;
  background:#eaf1ff;
  color:#2563eb;
}

.db-wallet-input-wrap{
  display:flex;
  align-items:center;
  border:1.5px solid #e2e8f0;
  border-radius:10px;
  overflow:hidden;
  transition:0.2s;
}

.db-wallet-input-wrap:focus-within{
  border-color:#2563eb;
}

.db-wallet-input-wrap span{
  padding:0 14px;
  font-size:18px;
  font-weight:700;
  color:#374151;
  background:#f8fafc;
  height:48px;
  display:flex;
  align-items:center;
  border-right:1px solid #e2e8f0;
}

.db-wallet-input-wrap input{
  flex:1;
  height:48px;
  border:none;
  outline:none;
  padding:0 14px;
  font-size:16px;
  font-family:'Inter',sans-serif;
  color:#1e293b;
}

.db-wallet-methods{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.db-wallet-method{
  flex:1;
  min-width:100px;
  height:48px;
  border:2px solid #e5e7eb;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:14px;
  font-weight:600;
  color:#374151;
  cursor:pointer;
  transition:0.2s;
}

.db-wallet-method input{
  display:none;
}

.db-wallet-method.active,
.db-wallet-method:hover{
  border-color:#2563eb;
  background:#eaf1ff;
  color:#2563eb;
}

.db-wallet-pay-btn{
  width:100%;
  height:52px;
  margin-top:24px;
  border-radius:12px;
  background:linear-gradient(135deg,#2563eb,#1d4ed8);
  color:#fff;
  font-size:16px;
  font-weight:700;
  border:none;
  cursor:pointer;
  font-family:'Inter',sans-serif;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  transition:0.2s;
  box-shadow:0 8px 20px rgba(37,99,235,0.3);
}

.db-wallet-pay-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(37,99,235,0.4);
}

.db-wallet-secure-note{
  text-align:center;
  font-size:12px;
  color:#94a3b8;
  margin-top:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}
/* ========================= 
   REVIEW SLIDER
========================= */
.rv-slider {
  overflow: hidden;
  position: relative;
}

.rv-track {
  display: flex;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.rv-track .rv-card {
  min-width: 100%;
  box-sizing: border-box;
}

/* Dot indicators */
.rv-dots {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  justify-content: center;
}

.rv-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ccc;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.3s, transform 0.3s;
}

.rv-dot.active {
  background: #2a9d8f;
  transform: scale(1.3);
}
/* =========================
   FLAG ICONS
========================= */
.topbar-flag {
  width: 20px;
  height: auto;
  border-radius: 2px;
  vertical-align: middle;
  margin-right: 5px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
}

.bq-flag {
  width: 22px;
  height: auto;
  border-radius: 3px;
  vertical-align: middle;
  margin-right: 7px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.12);
}
/* =========================
   SECURITY PARTNERS
========================= */
.sp-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px;
  margin-top: 30px;
}

.sp-logo {
  height: 45px;
  width: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.65;
  transition: filter 0.3s, opacity 0.3s;
}

.sp-logo:hover {
  filter: grayscale(0%);
  opacity: 1;
}
.sp-logo-text {
  font-size: 22px;
  font-weight: 700;
  color: #F6821F;
  letter-spacing: -0.5px;
  opacity: 0.65;
  transition: opacity 0.3s;
  font-family: 'Inter', sans-serif;
}

.sp-logo-text:hover {
  opacity: 1;
}
.sp-logo-text.mcafee {
  font-size: 22px;
  font-weight: 700;
  color: #C01F27;
  letter-spacing: -0.5px;
  opacity: 0.65;
  transition: opacity 0.3s;
  font-family: 'Inter', sans-serif;
}

.sp-logo-text.mcafee:hover {
  opacity: 1;
}
/* =========================
   UNIVERSITY LOGOS
========================= */
.rn1-unis {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px;
  margin: 30px 0;
  padding: 20px;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

.uni-text {
  font-size: 17px;
  font-weight: 700;
  opacity: 0.55;
  transition: opacity 0.3s, transform 0.3s;
  font-family: 'Inter', sans-serif;
  cursor: default;
  letter-spacing: -0.3px;
}

.uni-text:hover {
  opacity: 1;
  transform: scale(1.05);
}
.topbar-reviews-btn {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
    /* ── PAGE SHELL ── */
    * { box-sizing: border-box; margin: 0; padding: 0; }

    body { font-family: 'Inter', sans-serif; background: #f8fafc; color: #1e293b; }

    /* ── STICKY SIDE-NAV ── */
    .srv-layout {
      display: flex;
      max-width: 1200px;
      margin: 0 auto;
      padding: 40px 20px 80px;
      gap: 40px;
      align-items: flex-start;
    }

    .srv-sidenav {
      position: sticky;
      top: 100px;
      width: 240px;
      flex-shrink: 0;
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 4px 24px rgba(0,0,0,0.07);
      padding: 24px 16px;
    }

    .srv-sidenav h4 {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: #94a3b8;
      margin-bottom: 16px;
      padding-left: 12px;
    }

    .srv-sidenav a {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 10px;
      font-size: 13.5px;
      font-weight: 500;
      color: #475569;
      text-decoration: none;
      transition: background 0.2s, color 0.2s;
      margin-bottom: 4px;
    }

    .srv-sidenav a i {
      width: 18px;
      text-align: center;
      color: #2a9d8f;
    }

    .srv-sidenav a:hover,
    .srv-sidenav a.active {
      background: #f0fdf9;
      color: #2a9d8f;
      font-weight: 600;
    }

    /* ── MAIN CONTENT ── */
    .srv-content { flex: 1; min-width: 0; }

    /* ── HERO BANNER ── */
    .srv-hero {
      background: linear-gradient(135deg, #1e293b 0%, #0f766e 100%);
      padding: 70px 40px;
      text-align: center;
      color: #fff;
    }

    .srv-hero .srv-label {
      display: inline-block;
      background: rgba(255,255,255,0.15);
      border: 1px solid rgba(255,255,255,0.25);
      border-radius: 100px;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      padding: 6px 18px;
      margin-bottom: 20px;
      color: #a7f3d0;
    }

    .srv-hero h1 {
      font-size: clamp(28px, 4vw, 46px);
      font-weight: 800;
      line-height: 1.15;
      margin-bottom: 16px;
    }

    .srv-hero h1 span { color: #34d399; }

    .srv-hero p {
      font-size: 16px;
      color: rgba(255,255,255,0.75);
      max-width: 580px;
      margin: 0 auto 30px;
      line-height: 1.7;
    }

    .srv-hero-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #2a9d8f;
      color: #fff;
      font-weight: 700;
      font-size: 15px;
      padding: 14px 32px;
      border-radius: 50px;
      text-decoration: none;
      transition: background 0.2s, transform 0.2s;
    }

    .srv-hero-btn:hover { background: #21867a; transform: translateY(-2px); }

    /* ── SERVICE SECTION CARD ── */
    .srv-section {
      background: #fff;
      border-radius: 20px;
      box-shadow: 0 4px 24px rgba(0,0,0,0.06);
      margin-bottom: 32px;
      overflow: hidden;
      scroll-margin-top: 110px;
    }

    .srv-section-header {
      display: flex;
      align-items: center;
      gap: 20px;
      padding: 32px 36px 28px;
      border-bottom: 1px solid #f1f5f9;
    }

    .srv-section-icon {
      width: 60px;
      height: 60px;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      flex-shrink: 0;
    }

    .icon-blue   { background: #eff6ff; color: #3b82f6; }
    .icon-purple { background: #faf5ff; color: #9333ea; }
    .icon-green  { background: #f0fdf4; color: #22c55e; }
    .icon-orange { background: #fff7ed; color: #f97316; }
    .icon-pink   { background: #fdf2f8; color: #ec4899; }
    .icon-teal   { background: #f0fdfa; color: #14b8a6; }
    .icon-indigo { background: #eef2ff; color: #6366f1; }
    .icon-yellow { background: #fefce8; color: #eab308; }
    .icon-red    { background: #fef2f2; color: #ef4444; }

    .srv-section-header-text h2 {
      font-size: 22px;
      font-weight: 800;
      color: #1e293b;
      margin-bottom: 4px;
    }

    .srv-section-header-text p {
      font-size: 14px;
      color: #64748b;
    }

    .srv-section-body { padding: 32px 36px; }

    .srv-section-body p {
      font-size: 15px;
      color: #475569;
      line-height: 1.8;
      margin-bottom: 24px;
    }

    /* ── FEATURE LIST ── */
    .srv-features {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-bottom: 28px;
    }

    .srv-feature-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      background: #f8fafc;
      border-radius: 10px;
      padding: 12px 14px;
      font-size: 13.5px;
      color: #334155;
      font-weight: 500;
    }

    .srv-feature-item i {
      color: #2a9d8f;
      margin-top: 2px;
      flex-shrink: 0;
    }

    /* ── STATS ROW ── */
    .srv-stats {
      display: flex;
      gap: 16px;
      margin-bottom: 28px;
      flex-wrap: wrap;
    }

    .srv-stat {
      flex: 1;
      min-width: 100px;
      background: linear-gradient(135deg, #f0fdfa, #e6fffa);
      border: 1px solid #99f6e4;
      border-radius: 12px;
      padding: 16px;
      text-align: center;
    }

    .srv-stat h3 {
      font-size: 22px;
      font-weight: 800;
      color: #0f766e;
      margin-bottom: 4px;
    }

    .srv-stat p {
      font-size: 12px;
      color: #64748b;
      margin: 0;
      line-height: 1.4;
    }

    /* ── CTA STRIP ── */
    .srv-cta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      background: linear-gradient(135deg, #1e293b, #0f766e);
      border-radius: 14px;
      padding: 20px 24px;
      flex-wrap: wrap;
    }

    .srv-cta p {
      color: rgba(255,255,255,0.85);
      font-size: 14px;
      margin: 0;
    }

    .srv-cta strong { color: #fff; font-size: 16px; display: block; margin-bottom: 2px; }

    .srv-cta a {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #2a9d8f;
      color: #fff;
      font-weight: 700;
      font-size: 14px;
      padding: 12px 24px;
      border-radius: 50px;
      text-decoration: none;
      white-space: nowrap;
      transition: background 0.2s;
      flex-shrink: 0;
    }

    .srv-cta a:hover { background: #21867a; }

    /* ── SUBJECT TAGS ── */
    .srv-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 24px;
    }

    .srv-tag {
      background: #f1f5f9;
      color: #475569;
      font-size: 12.5px;
      font-weight: 500;
      padding: 6px 14px;
      border-radius: 100px;
      border: 1px solid #e2e8f0;
    }

    /* ── RESPONSIVE ── */
    @media (max-width: 900px) {
      .srv-sidenav { display: none; }
      .srv-layout { padding: 20px 16px 60px; }
    }

    @media (max-width: 600px) {
      .srv-section-header { flex-direction: column; align-items: flex-start; padding: 24px 20px 20px; }
      .srv-section-body { padding: 20px; }
      .srv-features { grid-template-columns: 1fr; }
      .srv-hero { padding: 50px 20px; }
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: 'Inter', sans-serif; background: #f8fafc; color: #1e293b; }

    /* ── HERO ── */
    .ft-hero {
      position: relative;
      background: #0f172a;
      overflow: hidden;
      padding: 100px 24px 90px;
      text-align: center;
    }

    .ft-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 60% 55% at 20% 50%, rgba(42,157,143,0.18) 0%, transparent 70%),
        radial-gradient(ellipse 50% 60% at 80% 40%, rgba(99,102,241,0.14) 0%, transparent 70%);
      pointer-events: none;
    }

    .ft-hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(42,157,143,0.15);
      border: 1px solid rgba(42,157,143,0.35);
      color: #5eead4;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 1.8px;
      text-transform: uppercase;
      padding: 7px 20px;
      border-radius: 100px;
      margin-bottom: 28px;
    }

    .ft-hero h1 {
      font-size: clamp(32px, 5vw, 58px);
      font-weight: 900;
      color: #fff;
      line-height: 1.1;
      margin-bottom: 20px;
      letter-spacing: -1.5px;
    }

    .ft-hero h1 span {
      background: linear-gradient(90deg, #2a9d8f, #34d399);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .ft-hero p {
      color: rgba(255,255,255,0.6);
      font-size: 17px;
      max-width: 560px;
      margin: 0 auto 40px;
      line-height: 1.75;
    }

    .ft-hero-actions {
      display: flex;
      gap: 14px;
      justify-content: center;
      flex-wrap: wrap;
    }

    .ft-btn-primary {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      background: #2a9d8f;
      color: #fff;
      font-weight: 700;
      font-size: 15px;
      padding: 14px 32px;
      border-radius: 50px;
      text-decoration: none;
      transition: background 0.2s, transform 0.2s;
    }
    .ft-btn-primary:hover { background: #21867a; transform: translateY(-2px); }

    .ft-btn-outline {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      background: rgba(255,255,255,0.07);
      color: rgba(255,255,255,0.85);
      font-weight: 600;
      font-size: 15px;
      padding: 14px 32px;
      border-radius: 50px;
      text-decoration: none;
      border: 1px solid rgba(255,255,255,0.15);
      transition: background 0.2s;
    }
    .ft-btn-outline:hover { background: rgba(255,255,255,0.12); }

    /* ── TRUST BAR ── */
    .ft-trust {
      background: #fff;
      border-bottom: 1px solid #e2e8f0;
      padding: 18px 24px;
      display: flex;
      justify-content: center;
      gap: 48px;
      flex-wrap: wrap;
    }

    .ft-trust-item {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 14px;
      font-weight: 600;
      color: #475569;
    }

    .ft-trust-item i { color: #2a9d8f; font-size: 18px; }

    /* ── SECTION LABEL ── */
    .ft-section-label {
      text-align: center;
      padding: 72px 24px 0;
    }

    .ft-section-label .eyebrow {
      display: inline-block;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: #2a9d8f;
      margin-bottom: 12px;
    }

    .ft-section-label h2 {
      font-size: clamp(24px, 3.5vw, 38px);
      font-weight: 800;
      color: #0f172a;
      letter-spacing: -0.8px;
      margin-bottom: 14px;
    }

    .ft-section-label p {
      color: #64748b;
      font-size: 16px;
      max-width: 520px;
      margin: 0 auto;
      line-height: 1.7;
    }

    /* ── FEATURES BENTO GRID ── */
    .ft-bento {
      max-width: 1160px;
      margin: 56px auto 0;
      padding: 0 24px 80px;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 20px;
    }

    /* card base */
    .ft-card {
      background: #fff;
      border-radius: 24px;
      border: 1px solid #e8edf3;
      padding: 36px 32px;
      position: relative;
      overflow: hidden;
      transition: transform 0.25s, box-shadow 0.25s;
    }

    .ft-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 20px 60px rgba(0,0,0,0.09);
    }

    /* grid spans */
    .ft-card.span-4  { grid-column: span 4; }
    .ft-card.span-6  { grid-column: span 6; }
    .ft-card.span-8  { grid-column: span 8; }
    .ft-card.span-12 { grid-column: span 12; }

    @media (max-width: 900px) {
      .ft-card.span-4,
      .ft-card.span-6,
      .ft-card.span-8,
      .ft-card.span-12 { grid-column: span 12; }
    }

    /* dark card variant */
    .ft-card.dark {
      background: #0f172a;
      border-color: #1e293b;
    }

    /* accent card variant */
    .ft-card.accent {
      background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%);
      border-color: transparent;
    }

    /* decorative circle bg */
    .ft-card-deco {
      position: absolute;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      background: rgba(42,157,143,0.06);
      right: -50px;
      bottom: -60px;
      pointer-events: none;
    }

    .ft-card.dark .ft-card-deco { background: rgba(255,255,255,0.04); }
    .ft-card.accent .ft-card-deco { background: rgba(255,255,255,0.08); }

    /* icon pill */
    .ft-icon-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 52px;
      height: 52px;
      border-radius: 14px;
      margin-bottom: 22px;
      font-size: 22px;
    }

    .pill-teal   { background: #ccfbf1; color: #0f766e; }
    .pill-purple { background: #ede9fe; color: #7c3aed; }
    .pill-blue   { background: #dbeafe; color: #1d4ed8; }
    .pill-amber  { background: #fef3c7; color: #d97706; }
    .pill-pink   { background: #fce7f3; color: #be185d; }
    .pill-green  { background: #dcfce7; color: #15803d; }
    .pill-white  { background: rgba(255,255,255,0.15); color: #fff; }

    /* card text */
    .ft-card-tag {
      display: inline-block;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: #2a9d8f;
      margin-bottom: 8px;
    }

    .ft-card.dark .ft-card-tag  { color: #5eead4; }
    .ft-card.accent .ft-card-tag { color: rgba(255,255,255,0.7); }

    .ft-card h3 {
      font-size: 20px;
      font-weight: 800;
      color: #0f172a;
      letter-spacing: -0.4px;
      margin-bottom: 12px;
      line-height: 1.25;
    }

    .ft-card.dark h3    { color: #f1f5f9; }
    .ft-card.accent h3  { color: #fff; }

    .ft-card p {
      font-size: 14.5px;
      color: #64748b;
      line-height: 1.75;
    }

    .ft-card.dark p   { color: #94a3b8; }
    .ft-card.accent p { color: rgba(255,255,255,0.75); }

    /* checklist inside card */
    .ft-checklist {
      list-style: none;
      margin-top: 18px;
      display: flex;
      flex-direction: column;
      gap: 9px;
    }

    .ft-checklist li {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 13.5px;
      color: #475569;
      font-weight: 500;
    }

    .ft-checklist li i { color: #2a9d8f; font-size: 15px; flex-shrink: 0; }
    .ft-card.dark .ft-checklist li { color: #cbd5e1; }
    .ft-card.dark .ft-checklist li i { color: #5eead4; }
    .ft-card.accent .ft-checklist li { color: rgba(255,255,255,0.85); }
    .ft-card.accent .ft-checklist li i { color: #a7f3d0; }

    /* big stat inside card */
    .ft-big-stat {
      font-size: 64px;
      font-weight: 900;
      letter-spacing: -3px;
      color: #0f172a;
      line-height: 1;
      margin-bottom: 6px;
    }

    .ft-card.dark .ft-big-stat { color: #fff; }
    .ft-card.accent .ft-big-stat { color: #fff; }

    .ft-big-stat span { color: #2a9d8f; }
    .ft-card.dark .ft-big-stat span { color: #5eead4; }
    .ft-card.accent .ft-big-stat span { color: rgba(255,255,255,0.6); }

    /* horizontal mini stats row */
    .ft-mini-stats {
      display: flex;
      gap: 0;
      margin-top: 24px;
      border-top: 1px solid #f1f5f9;
      padding-top: 20px;
    }

    .ft-mini-stat {
      flex: 1;
      text-align: center;
      padding: 0 12px;
      border-right: 1px solid #f1f5f9;
    }

    .ft-mini-stat:last-child { border-right: none; }

    .ft-mini-stat h4 {
      font-size: 22px;
      font-weight: 800;
      color: #0f172a;
      letter-spacing: -0.5px;
    }

    .ft-mini-stat p {
      font-size: 11.5px;
      color: #94a3b8;
      margin-top: 2px;
      font-weight: 500;
    }

    /* payment logos row */
    .ft-pay-logos {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 22px;
    }

    .ft-pay-logo {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 8px 16px;
      font-size: 13px;
      font-weight: 700;
      color: #475569;
      display: flex;
      align-items: center;
      gap: 7px;
    }

    .ft-pay-logo i { font-size: 16px; }
    .ft-pay-logo.visa   { color: #1a1f71; }
    .ft-pay-logo.pp     { color: #003087; }
    .ft-pay-logo.stripe { color: #635bff; }
    .ft-pay-logo.mc     { color: #eb001b; }

    /* step row (horizontal) */
    .ft-steps {
      display: flex;
      gap: 0;
      margin-top: 28px;
      position: relative;
    }

    .ft-steps::before {
      content: '';
      position: absolute;
      top: 20px;
      left: 24px;
      right: 24px;
      height: 1px;
      background: #e2e8f0;
    }

    .ft-step {
      flex: 1;
      text-align: center;
      position: relative;
    }

    .ft-step-num {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: #fff;
      border: 2px solid #2a9d8f;
      color: #2a9d8f;
      font-size: 15px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 12px;
      position: relative;
      z-index: 1;
    }

    .ft-step h4 {
      font-size: 13px;
      font-weight: 700;
      color: #1e293b;
      margin-bottom: 4px;
    }

    .ft-step p {
      font-size: 12px;
      color: #94a3b8;
    }

    /* mobile preview mockup */
    .ft-phone {
      width: 160px;
      height: 290px;
      background: #1e293b;
      border-radius: 28px;
      border: 6px solid #334155;
      margin: 24px auto 0;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .ft-phone-notch {
      width: 60px;
      height: 10px;
      background: #0f172a;
      border-radius: 0 0 10px 10px;
      margin: 0 auto 12px;
      flex-shrink: 0;
    }

    .ft-phone-screen {
      flex: 1;
      padding: 0 10px 10px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .ft-phone-bar {
      height: 8px;
      border-radius: 4px;
      background: #334155;
    }

    .ft-phone-bar.green  { background: #0d9488; width: 70%; }
    .ft-phone-bar.short  { width: 45%; }
    .ft-phone-bar.full   { width: 100%; }

    .ft-phone-card {
      background: #0f766e;
      border-radius: 10px;
      padding: 10px;
      margin-top: 4px;
    }

    .ft-phone-card-line {
      height: 6px;
      border-radius: 3px;
      background: rgba(255,255,255,0.25);
      margin-bottom: 5px;
    }

    .ft-phone-card-line.w60 { width: 60%; }
    .ft-phone-card-line.w80 { width: 80%; }
    .ft-phone-card-line.w40 { width: 40%; }

    .ft-phone-btn {
      height: 22px;
      border-radius: 6px;
      background: rgba(255,255,255,0.9);
      margin-top: 6px;
    }

    /* guarantee badge */
    .ft-guarantee-badge {
      display: flex;
      align-items: center;
      gap: 16px;
      background: rgba(255,255,255,0.1);
      border: 1px solid rgba(255,255,255,0.2);
      border-radius: 16px;
      padding: 18px 22px;
      margin-top: 22px;
    }

    .ft-guarantee-badge i {
      font-size: 28px;
      color: #a7f3d0;
      flex-shrink: 0;
    }

    .ft-guarantee-badge h4 { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 3px; }
    .ft-guarantee-badge p  { font-size: 13px; color: rgba(255,255,255,0.65); line-height: 1.5; }

    /* revision timeline */
    .ft-revision-timeline {
      margin-top: 22px;
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .ft-rt-item {
      display: flex;
      gap: 14px;
      padding-bottom: 18px;
      position: relative;
    }

    .ft-rt-item:not(:last-child)::after {
      content: '';
      position: absolute;
      left: 15px;
      top: 32px;
      bottom: 0;
      width: 1px;
      background: #e2e8f0;
    }

    .ft-rt-dot {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: #f0fdf9;
      border: 2px solid #2a9d8f;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 13px;
      color: #2a9d8f;
    }

    .ft-rt-text h4 { font-size: 14px; font-weight: 700; color: #1e293b; margin-bottom: 2px; }
    .ft-rt-text p  { font-size: 12.5px; color: #94a3b8; }

    /* pricing pill */
    .ft-price-row {
      display: flex;
      align-items: baseline;
      gap: 6px;
      margin-top: 16px;
    }

    .ft-price-from { font-size: 13px; color: #94a3b8; }
    .ft-price-amt  { font-size: 42px; font-weight: 900; color: #0f172a; letter-spacing: -1.5px; }
    .ft-price-per  { font-size: 14px; color: #94a3b8; }

    .ft-price-features {
      margin-top: 16px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .ft-price-feature {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13.5px;
      color: #475569;
    }

    .ft-price-feature i { color: #2a9d8f; }

    /* ── CTA STRIP ── */
    .ft-cta-strip {
      background: linear-gradient(135deg, #0f172a 0%, #0f766e 100%);
      padding: 80px 24px;
      text-align: center;
    }

    .ft-cta-strip h2 {
      font-size: clamp(26px, 4vw, 42px);
      font-weight: 900;
      color: #fff;
      letter-spacing: -1px;
      margin-bottom: 14px;
    }

    .ft-cta-strip p {
      color: rgba(255,255,255,0.65);
      font-size: 16px;
      max-width: 480px;
      margin: 0 auto 36px;
      line-height: 1.7;
    }

    .ft-cta-strip .ft-btn-primary { font-size: 16px; padding: 16px 40px; }

      *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: 'Inter', sans-serif; background: #f8fafc; color: #1e293b; }

    /* ════════════════════════
       HERO
    ════════════════════════ */
    .af-hero {
      background: #0f172a;
      position: relative;
      overflow: hidden;
      padding: 110px 24px 100px;
      text-align: center;
    }
    .af-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 55% 60% at 15% 50%, rgba(234,179,8,0.13) 0%, transparent 65%),
        radial-gradient(ellipse 50% 55% at 85% 40%, rgba(42,157,143,0.15) 0%, transparent 65%);
      pointer-events: none;
    }
    .af-hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(234,179,8,0.12);
      border: 1px solid rgba(234,179,8,0.3);
      color: #fbbf24;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 1.8px;
      text-transform: uppercase;
      padding: 7px 20px;
      border-radius: 100px;
      margin-bottom: 28px;
    }
    .af-hero h1 {
      font-size: clamp(36px, 6vw, 68px);
      font-weight: 900;
      color: #fff;
      line-height: 1.05;
      letter-spacing: -2px;
      margin-bottom: 20px;
    }
    .af-hero h1 span {
      background: linear-gradient(90deg, #fbbf24, #f59e0b);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .af-hero p {
      color: rgba(255,255,255,0.6);
      font-size: 17px;
      max-width: 540px;
      margin: 0 auto 44px;
      line-height: 1.75;
    }
    .af-hero-actions {
      display: flex;
      gap: 14px;
      justify-content: center;
      flex-wrap: wrap;
    }
    .af-btn-gold {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      background: linear-gradient(135deg, #f59e0b, #d97706);
      color: #fff;
      font-weight: 800;
      font-size: 16px;
      padding: 16px 36px;
      border-radius: 50px;
      text-decoration: none;
      border: none;
      cursor: pointer;
      transition: opacity 0.2s, transform 0.2s;
    }
    .af-btn-gold:hover { opacity: 0.9; transform: translateY(-2px); }
    .af-btn-ghost {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      background: rgba(255,255,255,0.07);
      color: rgba(255,255,255,0.8);
      font-weight: 600;
      font-size: 15px;
      padding: 15px 32px;
      border-radius: 50px;
      text-decoration: none;
      border: 1px solid rgba(255,255,255,0.15);
      transition: background 0.2s;
    }
    .af-btn-ghost:hover { background: rgba(255,255,255,0.12); }

    /* floating reward pills */
    .af-hero-pills {
      display: flex;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 50px;
      position: relative;
      z-index: 1;
    }
    .af-pill {
      background: rgba(255,255,255,0.07);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 100px;
      padding: 10px 20px;
      font-size: 13.5px;
      font-weight: 600;
      color: rgba(255,255,255,0.8);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .af-pill i { color: #fbbf24; }

    /* ════════════════════════
       HOW IT WORKS
    ════════════════════════ */
    .af-how {
      max-width: 1100px;
      margin: 0 auto;
      padding: 80px 24px 0;
      text-align: center;
    }
    .af-how .eyebrow {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: #f59e0b;
      margin-bottom: 12px;
      display: block;
    }
    .af-how h2 {
      font-size: clamp(24px, 3.5vw, 38px);
      font-weight: 900;
      color: #0f172a;
      letter-spacing: -0.8px;
      margin-bottom: 14px;
    }
    .af-how > p {
      color: #64748b;
      font-size: 16px;
      max-width: 480px;
      margin: 0 auto 56px;
      line-height: 1.7;
    }
    .af-steps-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      position: relative;
    }
    .af-steps-row::before {
      content: '';
      position: absolute;
      top: 32px;
      left: 12.5%;
      right: 12.5%;
      height: 2px;
      background: linear-gradient(90deg, #fbbf24, #2a9d8f);
    }
    @media(max-width:700px){
      .af-steps-row { grid-template-columns: 1fr 1fr; }
      .af-steps-row::before { display: none; }
    }
    .af-step-col { padding: 0 16px; }
    .af-step-circle {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      margin: 0 auto 20px;
      position: relative;
      z-index: 1;
    }
    .sc1 { background: #fef3c7; color: #d97706; border: 3px solid #fbbf24; }
    .sc2 { background: #e0f2fe; color: #0284c7; border: 3px solid #38bdf8; }
    .sc3 { background: #dcfce7; color: #16a34a; border: 3px solid #4ade80; }
    .sc4 { background: #f3e8ff; color: #9333ea; border: 3px solid #c084fc; }
    .af-step-col h3 { font-size: 16px; font-weight: 800; color: #0f172a; margin-bottom: 8px; }
    .af-step-col p  { font-size: 13.5px; color: #64748b; line-height: 1.65; }

    /* ════════════════════════
       REWARD TIERS
    ════════════════════════ */
    .af-tiers {
      max-width: 1100px;
      margin: 80px auto 0;
      padding: 0 24px;
    }
    .af-tiers-header { text-align: center; margin-bottom: 44px; }
    .af-tiers-header .eyebrow {
      font-size: 11px; font-weight: 700; letter-spacing: 2px;
      text-transform: uppercase; color: #f59e0b;
      display: block; margin-bottom: 12px;
    }
    .af-tiers-header h2 {
      font-size: clamp(24px, 3.5vw, 36px);
      font-weight: 900; color: #0f172a; letter-spacing: -0.8px;
    }
    .af-tiers-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }
    @media(max-width:700px){ .af-tiers-grid { grid-template-columns: 1fr; } }

    .af-tier-card {
      background: #fff;
      border: 1.5px solid #e2e8f0;
      border-radius: 24px;
      padding: 36px 28px;
      position: relative;
      overflow: hidden;
      transition: transform 0.25s, box-shadow 0.25s;
    }
    .af-tier-card:hover { transform: translateY(-5px); box-shadow: 0 24px 60px rgba(0,0,0,0.09); }
    .af-tier-card.popular {
      border-color: #f59e0b;
      border-width: 2px;
    }
    .af-popular-badge {
      position: absolute;
      top: 18px; right: 18px;
      background: #fef3c7;
      color: #92400e;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      padding: 5px 12px;
      border-radius: 100px;
    }
    .af-tier-icon {
      width: 56px; height: 56px;
      border-radius: 16px;
      display: flex; align-items: center; justify-content: center;
      font-size: 24px;
      margin-bottom: 20px;
    }
    .ti-bronze { background: #fef3c7; color: #d97706; }
    .ti-silver { background: #f1f5f9; color: #475569; }
    .ti-gold   { background: linear-gradient(135deg,#fef3c7,#fde68a); color: #92400e; }

    .af-tier-name {
      font-size: 12px; font-weight: 700; letter-spacing: 1.5px;
      text-transform: uppercase; color: #94a3b8; margin-bottom: 8px;
    }
    .af-tier-card h3 { font-size: 22px; font-weight: 900; color: #0f172a; margin-bottom: 6px; }
    .af-tier-earn {
      font-size: 40px; font-weight: 900;
      letter-spacing: -1.5px; color: #0f172a;
      margin: 14px 0 4px; line-height: 1;
    }
    .af-tier-earn span { font-size: 18px; color: #94a3b8; font-weight: 500; }
    .af-tier-desc { font-size: 13px; color: #64748b; margin-bottom: 22px; line-height: 1.6; }
    .af-tier-divider { border: none; border-top: 1px solid #f1f5f9; margin-bottom: 20px; }
    .af-tier-perks { list-style: none; display: flex; flex-direction: column; gap: 10px; }
    .af-tier-perks li {
      display: flex; align-items: center; gap: 10px;
      font-size: 13.5px; color: #475569; font-weight: 500;
    }
    .af-tier-perks li i { color: #2a9d8f; font-size: 14px; }
    .af-tier-card.popular .af-tier-earn { color: #d97706; }

    /* ════════════════════════
       DASHBOARD
    ════════════════════════ */
    .af-dashboard-wrap {
      max-width: 1100px;
      margin: 80px auto 0;
      padding: 0 24px 80px;
    }
    .af-dashboard-header { text-align: center; margin-bottom: 44px; }
    .af-dashboard-header .eyebrow {
      font-size: 11px; font-weight: 700; letter-spacing: 2px;
      text-transform: uppercase; color: #2a9d8f;
      display: block; margin-bottom: 12px;
    }
    .af-dashboard-header h2 {
      font-size: clamp(24px, 3.5vw, 36px);
      font-weight: 900; color: #0f172a; letter-spacing: -0.8px;
      margin-bottom: 10px;
    }
    .af-dashboard-header p { font-size: 15px; color: #64748b; }

    /* dashboard shell */
    .af-dashboard {
      background: #fff;
      border: 1px solid #e2e8f0;
      border-radius: 24px;
      overflow: hidden;
      box-shadow: 0 8px 40px rgba(0,0,0,0.07);
    }

    /* dashboard top bar */
    .af-db-topbar {
      background: #0f172a;
      padding: 18px 28px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;
    }
    .af-db-topbar-left { display: flex; align-items: center; gap: 14px; }
    .af-db-avatar {
      width: 40px; height: 40px;
      border-radius: 50%;
      background: linear-gradient(135deg, #f59e0b, #d97706);
      display: flex; align-items: center; justify-content: center;
      font-weight: 800; font-size: 15px; color: #fff;
    }
    .af-db-name { font-size: 15px; font-weight: 700; color: #fff; }
    .af-db-tier { font-size: 12px; color: #fbbf24; font-weight: 600; }
    .af-db-topbar-right { display: flex; gap: 10px; flex-wrap: wrap; }
    .af-db-top-btn {
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.15);
      color: rgba(255,255,255,0.8);
      font-size: 13px;
      font-weight: 600;
      padding: 8px 16px;
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.2s;
      display: flex; align-items: center; gap: 7px;
    }
    .af-db-top-btn:hover { background: rgba(255,255,255,0.15); }
    .af-db-top-btn.gold { background: linear-gradient(135deg,#f59e0b,#d97706); border-color: transparent; color: #fff; }

    /* dashboard body */
    .af-db-body { padding: 28px; }

    /* stat cards row */
    .af-db-stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      margin-bottom: 28px;
    }
    @media(max-width:700px){ .af-db-stats { grid-template-columns: 1fr 1fr; } }

    .af-db-stat {
      background: #f8fafc;
      border: 1px solid #e8edf3;
      border-radius: 16px;
      padding: 20px 18px;
      position: relative;
      overflow: hidden;
    }
    .af-db-stat::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      border-radius: 16px 16px 0 0;
    }
    .af-db-stat.s-green::before  { background: #22c55e; }
    .af-db-stat.s-blue::before   { background: #3b82f6; }
    .af-db-stat.s-amber::before  { background: #f59e0b; }
    .af-db-stat.s-purple::before { background: #9333ea; }

    .af-db-stat-label {
      font-size: 12px; font-weight: 600;
      color: #94a3b8; letter-spacing: 0.5px;
      margin-bottom: 8px;
      display: flex; align-items: center; gap: 7px;
    }
    .af-db-stat-label i { font-size: 13px; }
    .s-green  .af-db-stat-label i { color: #22c55e; }
    .s-blue   .af-db-stat-label i { color: #3b82f6; }
    .s-amber  .af-db-stat-label i { color: #f59e0b; }
    .s-purple .af-db-stat-label i { color: #9333ea; }

    .af-db-stat-val {
      font-size: 28px; font-weight: 900;
      color: #0f172a; letter-spacing: -1px; line-height: 1;
    }
    .af-db-stat-sub { font-size: 11.5px; color: #94a3b8; margin-top: 4px; }

    /* referral link box */
    .af-ref-box {
      background: linear-gradient(135deg, #0f172a, #1e293b);
      border-radius: 16px;
      padding: 22px 24px;
      margin-bottom: 28px;
      display: flex;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
    }
    .af-ref-box-left { flex: 1; min-width: 200px; }
    .af-ref-box-label {
      font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
      text-transform: uppercase; color: #fbbf24; margin-bottom: 8px;
    }
    .af-ref-link-row {
      display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
    }
    .af-ref-link {
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: 10px;
      padding: 10px 16px;
      font-size: 13.5px;
      color: rgba(255,255,255,0.85);
      font-family: monospace;
      flex: 1;
      min-width: 180px;
      user-select: all;
    }
    .af-copy-btn {
      background: linear-gradient(135deg, #f59e0b, #d97706);
      color: #fff;
      font-size: 13px; font-weight: 700;
      padding: 10px 20px;
      border-radius: 10px;
      border: none;
      cursor: pointer;
      display: flex; align-items: center; gap: 7px;
      transition: opacity 0.2s;
      white-space: nowrap;
    }
    .af-copy-btn:hover { opacity: 0.9; }
    .af-ref-share { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
    .af-share-btn {
      display: flex; align-items: center; gap: 7px;
      background: rgba(255,255,255,0.07);
      border: 1px solid rgba(255,255,255,0.12);
      color: rgba(255,255,255,0.75);
      font-size: 12.5px; font-weight: 600;
      padding: 7px 14px;
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.2s;
    }
    .af-share-btn:hover { background: rgba(255,255,255,0.13); }
    .af-share-btn.wa i { color: #25d366; }
    .af-share-btn.em i { color: #60a5fa; }
    .af-share-btn.tw i { color: #38bdf8; }

    /* progress to next tier */
    .af-tier-progress {
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 14px;
      padding: 18px 20px;
      min-width: 220px;
    }
    .af-tier-progress-label {
      font-size: 11px; font-weight: 700; letter-spacing: 1px;
      text-transform: uppercase; color: rgba(255,255,255,0.5);
      margin-bottom: 6px;
    }
    .af-tier-progress-title {
      font-size: 15px; font-weight: 800; color: #fff; margin-bottom: 14px;
    }
    .af-tier-progress-title span { color: #fbbf24; }
    .af-progress-bar-wrap {
      background: rgba(255,255,255,0.1);
      border-radius: 100px;
      height: 8px;
      margin-bottom: 8px;
    }
    .af-progress-bar-fill {
      height: 8px;
      border-radius: 100px;
      background: linear-gradient(90deg, #f59e0b, #fbbf24);
      width: 60%;
      transition: width 1s ease;
    }
    .af-progress-counts {
      display: flex; justify-content: space-between;
      font-size: 11.5px; color: rgba(255,255,255,0.5);
    }

    /* dashboard two-col */
    .af-db-two-col {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }
    @media(max-width:700px){ .af-db-two-col { grid-template-columns: 1fr; } }

    /* recent referrals table */
    .af-db-panel {
      background: #f8fafc;
      border: 1px solid #e8edf3;
      border-radius: 16px;
      overflow: hidden;
    }
    .af-db-panel-header {
      padding: 16px 20px;
      border-bottom: 1px solid #e8edf3;
      display: flex; align-items: center; justify-content: space-between;
    }
    .af-db-panel-header h4 {
      font-size: 14px; font-weight: 800; color: #0f172a;
      display: flex; align-items: center; gap: 8px;
    }
    .af-db-panel-header h4 i { color: #2a9d8f; }
    .af-db-panel-header a {
      font-size: 12.5px; color: #2a9d8f; font-weight: 600;
      text-decoration: none;
    }
    .af-ref-table { width: 100%; border-collapse: collapse; }
    .af-ref-table th {
      font-size: 11px; font-weight: 700; letter-spacing: 0.8px;
      text-transform: uppercase; color: #94a3b8;
      padding: 10px 20px; text-align: left;
      background: #f1f5f9;
    }
    .af-ref-table td {
      padding: 12px 20px;
      font-size: 13.5px; color: #475569;
      border-bottom: 1px solid #e8edf3;
    }
    .af-ref-table tr:last-child td { border-bottom: none; }
    .af-ref-table tr:hover td { background: #fff; }
    .af-status-badge {
      display: inline-block;
      font-size: 11px; font-weight: 700;
      padding: 3px 10px;
      border-radius: 100px;
    }
    .st-paid     { background: #dcfce7; color: #15803d; }
    .st-pending  { background: #fef3c7; color: #92400e; }
    .st-ordered  { background: #dbeafe; color: #1d4ed8; }

    /* earnings chart bars */
    .af-chart-body { padding: 20px; }
    .af-chart-title {
      font-size: 12px; font-weight: 700;
      color: #94a3b8; letter-spacing: 0.5px;
      margin-bottom: 16px;
    }
    .af-bars {
      display: flex;
      align-items: flex-end;
      gap: 8px;
      height: 120px;
    }
    .af-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
    .af-bar-fill {
      width: 100%; border-radius: 6px 6px 0 0;
      background: linear-gradient(180deg, #2a9d8f, #0f766e);
      transition: height 0.8s ease;
      min-height: 4px;
    }
    .af-bar-fill.highlight { background: linear-gradient(180deg, #f59e0b, #d97706); }
    .af-bar-label { font-size: 10px; color: #94a3b8; font-weight: 600; }
    .af-chart-total {
      margin-top: 16px;
      padding-top: 14px;
      border-top: 1px solid #e8edf3;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .af-chart-total span { font-size: 12px; color: #94a3b8; }
    .af-chart-total strong { font-size: 18px; font-weight: 900; color: #0f172a; }

    /* withdraw */
    .af-withdraw-box {
      margin-top: 20px;
      background: linear-gradient(135deg, #0f172a, #1e293b);
      border-radius: 16px;
      padding: 20px 22px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
    }
    .af-withdraw-box h4 { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 4px; }
    .af-withdraw-box p  { font-size: 12.5px; color: rgba(255,255,255,0.55); }
    .af-withdraw-btn {
      background: linear-gradient(135deg, #f59e0b, #d97706);
      color: #fff; font-size: 13px; font-weight: 700;
      padding: 11px 22px; border-radius: 10px;
      border: none; cursor: pointer;
      display: flex; align-items: center; gap: 8px;
      white-space: nowrap;
      transition: opacity 0.2s;
    }
    .af-withdraw-btn:hover { opacity: 0.9; }

    /* ════════════════════════
       FAQ
    ════════════════════════ */
    .af-faq {
      max-width: 760px;
      margin: 80px auto 0;
      padding: 0 24px;
    }
    .af-faq-header { text-align: center; margin-bottom: 40px; }
    .af-faq-header .eyebrow {
      font-size: 11px; font-weight: 700; letter-spacing: 2px;
      text-transform: uppercase; color: #f59e0b;
      display: block; margin-bottom: 12px;
    }
    .af-faq-header h2 {
      font-size: clamp(22px, 3vw, 34px);
      font-weight: 900; color: #0f172a; letter-spacing: -0.8px;
    }
    .af-faq-item {
      background: #fff;
      border: 1px solid #e2e8f0;
      border-radius: 14px;
      margin-bottom: 12px;
      overflow: hidden;
    }
    .af-faq-q {
      width: 100%; background: none; border: none;
      padding: 20px 24px;
      display: flex; align-items: center; justify-content: space-between;
      cursor: pointer;
      text-align: left;
      font-family: 'Inter', sans-serif;
      transition: background 0.2s;
    }
    .af-faq-q:hover { background: #f8fafc; }
    .af-faq-q span {
      font-size: 15px; font-weight: 700; color: #0f172a;
    }
    .af-faq-q i { color: #2a9d8f; font-size: 16px; transition: transform 0.3s; flex-shrink: 0; }
    .af-faq-item.open .af-faq-q i { transform: rotate(45deg); }
    .af-faq-a {
      max-height: 0; overflow: hidden;
      transition: max-height 0.35s ease, padding 0.3s;
      font-size: 14.5px; color: #64748b; line-height: 1.75;
      padding: 0 24px;
    }
    .af-faq-item.open .af-faq-a { max-height: 200px; padding: 0 24px 20px; }

    /* ════════════════════════
       CTA STRIP
    ════════════════════════ */
    .af-cta {
      background: linear-gradient(135deg, #0f172a 0%, #78350f 100%);
      margin-top: 80px;
      padding: 90px 24px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .af-cta::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(245,158,11,0.12), transparent 70%);
    }
    .af-cta h2 {
      font-size: clamp(28px, 4.5vw, 50px);
      font-weight: 900; color: #fff;
      letter-spacing: -1.5px; margin-bottom: 16px;
    }
    .af-cta h2 span { color: #fbbf24; }
    .af-cta p {
      color: rgba(255,255,255,0.6);
      font-size: 16px; max-width: 440px;
      margin: 0 auto 40px; line-height: 1.7;
    }
    /* ========================= */
/* RESOURCES SIMPLE DROPDOWN */
/* ========================= */

.resources-menu{
  position:relative;
}

.simple-dropdown{
  position:absolute;
  top:45px;
  left:0;

  width:240px;
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 10px 35px rgba(0,0,0,0.12);

  opacity:0;
  visibility:hidden;
  transform:translateY(15px);
  transition:0.25s;
  z-index:999;
}

.resources-menu:hover .simple-dropdown{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.simple-dropdown a{
  display:flex;
  align-items:center;
  gap:12px;

  padding:12px 18px;
  font-size:14px;
  font-weight:500;
  color:#374151;

  border-bottom:1px solid #f1f1f1;
  transition:0.2s;
}

.simple-dropdown a:last-child{
  border-bottom:none;
}

.simple-dropdown a i{
  width:16px;
  text-align:center;
  color:#2563eb;
  font-size:13px;
}

.simple-dropdown a:hover{
  background:#f8fafc;
  color:#2563eb;
  padding-left:22px;
}
/* ========================= */
/* AI & PLAGIARISM CHECKER MODAL */
/* ========================= */

.modal-overlay{
  position:fixed;
  inset:0;
  width:100%;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background:rgba(15,23,42,.55);
  z-index:99999;
  opacity:1;
  visibility:visible;
  transition:opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay.hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.checker-modal{
  width:430px;
  max-width:90%;
  background:#ffffff;
  border-radius:22px;
  padding:35px;
  position:relative;
  box-shadow:0 18px 45px rgba(0,0,0,.18);
  font-family:'Inter',sans-serif;
}

.checker-modal .close-btn{
  position:absolute;
  right:18px;
  top:18px;
  width:40px;
  height:40px;
  border:none;
  background:#f1f5f9;
  border-radius:50%;
  cursor:pointer;
  transition:.3s;
  font-size:15px;
  color:#334155;
}

.checker-modal .close-btn:hover{
  background:#ef4444;
  color:#fff;
}

.checker-modal .modal-header{
  text-align:center;
}

.checker-modal .icon-box{
  width:75px;
  height:75px;
  margin:auto;
  margin-bottom:20px;
  border-radius:18px;
  background:linear-gradient(135deg,#4f46e5,#7c3aed);
  color:white;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:34px;
}

.checker-modal .modal-header h2{
  font-size:27px;
  color:#1e293b;
  margin-bottom:10px;
}

.checker-modal .modal-header p{
  color:#64748b;
  font-size:15px;
  line-height:24px;
}

.checker-modal .result-box{
  margin-top:30px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#f8fafc;
  border:1px solid #e2e8f0;
  border-radius:15px;
  padding:22px;
}

.checker-modal .result-item{
  width:45%;
  text-align:center;
}

.checker-modal .result-item span{
  display:block;
  color:#64748b;
  margin-bottom:10px;
  font-size:15px;
}

.checker-modal .result-item strong{
  font-size:30px;
  color:#4338ca;
}

.checker-modal .divider{
  width:1px;
  height:60px;
  background:#d6dce5;
}

.checker-modal .price-box{
  margin-top:28px;
  text-align:center;
}

.checker-modal .price-box p{
  color:#64748b;
  margin-bottom:6px;
}

.checker-modal .price-box h3{
  font-size:34px;
  color:#0f172a;
}

.checker-modal .price-box span{
  color:#10b981;
}

.checker-modal .button-group{
  margin-top:30px;
  display:flex;
  gap:15px;
}

.checker-modal .button-group button,
.checker-modal .button-group a{
  flex:1;
  height:52px;
  border:none;
  border-radius:12px;
  cursor:pointer;
  font-size:16px;
  font-weight:600;
  transition:.3s;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

.checker-modal .report-btn{
  background:#e2e8f0;
  color:#334155;
}

.checker-modal .report-btn:hover{
  background:#cbd5e1;
}

.checker-modal .order-btn{
  background:linear-gradient(135deg,#4f46e5,#7c3aed);
  color:white;
}

.checker-modal .order-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(79,70,229,.35);
}

.checker-modal .button-group i{
  margin-right:8px;
}

@media(max-width:480px){
  .checker-modal{
    padding:24px;
  }
  .checker-modal .modal-header h2{
    font-size:22px;
  }
}
.chat-attach {
  background: none;
  border: none;
  color: #64748b;
  cursor: pointer;
  font-size: 16px;
  padding: 6px 8px;
}
.chat-attach:hover { color: #2563eb; }