:root {
   --primary: #635bff;
   --primary-dark: #5148e5;
   --secondary: #0f172a;
   --dark: #08111f;
   --text: #64748b;
   --light-bg: #f8fafc;
   --border: #e2e8f0;
   --success: #16a34a;
}

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

html {
   scroll-behavior: smooth;
}

body {
   font-family: "Inter", sans-serif;
   color: var(--secondary);
   background: #fff;
   line-height: 1.7;
}

a {
   text-decoration: none;
}

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

.navbar {
   padding: 18px 0;
   background: rgba(255, 255, 255, 0.92);
   backdrop-filter: blur(15px);
   border-bottom: 1px solid rgba(226, 232, 240, 0.7);
}

.navbar-brand {
   font-size: 1.55rem;
   font-weight: 800;
   color: var(--secondary);
}

.brand-icon {
   width: 38px;
   height: 38px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 11px;
   color: white;
   background: linear-gradient(135deg,
         var(--primary),
         #8b5cf6);
   margin-right: 9px;
}

.navbar-nav .nav-link {
   font-weight: 500;
   color: #475569;
   margin: 0 9px;
   transition: 0.25s;
}

.navbar-nav .nav-link:hover {
   color: var(--primary);
}

.btn-primary-custom {
   background: var(--primary);
   color: white;
   border: none;
   padding: 11px 21px;
   border-radius: 9px;
   font-weight: 600;
   transition: 0.25s;
}

.btn-primary-custom:hover {
   background: var(--primary-dark);
   color: white;
   transform: translateY(-2px);
}

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

.hero {
   position: relative;
   overflow: hidden;
   padding: 120px 0 90px;
   background:
      radial-gradient(circle at 80% 20%,
         rgba(99, 91, 255, 0.16),
         transparent 30%),
      radial-gradient(circle at 10% 80%,
         rgba(139, 92, 246, 0.10),
         transparent 30%),
      #f8fafc;
}

.hero-badge {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 7px 13px;
   background: #eef2ff;
   color: var(--primary);
   border: 1px solid #ddd6fe;
   border-radius: 50px;
   font-size: 0.85rem;
   font-weight: 600;
   margin-bottom: 25px;
}

.hero h1 {
   font-size: clamp(2.7rem, 6vw, 4.8rem);
   line-height: 1.05;
   letter-spacing: -3px;
   font-weight: 800;
   max-width: 800px;
}

.gradient-text {
   background: linear-gradient(135deg,
         var(--primary),
         #8b5cf6,
         #ec4899);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

.hero-description {
   color: var(--text);
   font-size: 1.1rem;
   max-width: 650px;
   margin: 25px 0 32px;
}

.hero-buttons {
   display: flex;
   gap: 14px;
   flex-wrap: wrap;
}

.btn-outline-custom {
   padding: 11px 21px;
   border: 1px solid var(--border);
   color: var(--secondary);
   background: white;
   border-radius: 9px;
   font-weight: 600;
   transition: 0.25s;
}

.btn-outline-custom:hover {
   border-color: var(--primary);
   color: var(--primary);
}

.hero-trust {
   display: flex;
   gap: 25px;
   margin-top: 35px;
   flex-wrap: wrap;
}

.trust-item {
   display: flex;
   align-items: center;
   gap: 8px;
   color: #64748b;
   font-size: 0.9rem;
}

.trust-item i {
   color: var(--success);
}

/* =========================
           SERVER CARD
        ========================== */

.server-card {
   position: relative;
   background: #0b1220;
   border-radius: 24px;
   padding: 25px;
   color: white;
   box-shadow: 0 25px 60px rgba(15, 23, 42, 0.25);
}

.server-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 25px;
}

.server-dots {
   display: flex;
   gap: 6px;
}

.server-dots span {
   width: 9px;
   height: 9px;
   border-radius: 50%;
   background: #334155;
}

.server-status {
   font-size: 0.75rem;
   color: #4ade80;
   display: flex;
   gap: 6px;
   align-items: center;
}

.server-status span {
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: #4ade80;
}

.server-screen {
   background: #111827;
   border-radius: 16px;
   padding: 25px;
}

.server-icon {
   width: 65px;
   height: 65px;
   background: rgba(99, 91, 255, 0.2);
   border-radius: 16px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #a5b4fc;
   font-size: 30px;
   margin-bottom: 20px;
}

.server-screen h4 {
   font-weight: 700;
}

.server-screen p {
   color: #94a3b8;
   font-size: 0.9rem;
}

.server-stat {
   margin-top: 22px;
}

.server-stat-label {
   display: flex;
   justify-content: space-between;
   font-size: 0.8rem;
   color: #94a3b8;
   margin-bottom: 7px;
}

.progress {
   height: 7px;
   background: #1e293b;
}

/* =========================
           DOMAIN SEARCH
        ========================== */

.domain-section {
   padding: 55px 0;
   background: var(--secondary);
   color: white;
}

.domain-section h3 {
   font-weight: 700;
}

.domain-section p {
   color: #94a3b8;
}

.domain-search {
   display: flex;
   background: white;
   padding: 6px;
   border-radius: 10px;
   margin-top: 20px;
}

.domain-search input {
   flex: 1;
   border: none;
   outline: none;
   padding: 12px 15px;
   min-width: 0;
}

.domain-search button {
   border: none;
   background: var(--primary);
   color: white;
   border-radius: 7px;
   padding: 0 22px;
   font-weight: 600;
}

.domain-extensions {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
   margin-top: 15px;
}

.domain-extension {
   padding: 5px 10px;
   border-radius: 6px;
   background: #1e293b;
   color: #cbd5e1;
   font-size: 0.78rem;
}

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

.section {
   padding: 100px 0;
}

.section-title {
   max-width: 650px;
   margin: auto;
   text-align: center;
   margin-bottom: 55px;
}

.section-title span {
   color: var(--primary);
   font-weight: 700;
   font-size: 0.85rem;
   text-transform: uppercase;
   letter-spacing: 1px;
}

.section-title h2 {
   font-weight: 800;
   font-size: 2.5rem;
   letter-spacing: -1px;
   margin: 10px 0 15px;
}

.section-title p {
   color: var(--text);
}

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

.feature-card {
   padding: 28px;
   border: 1px solid var(--border);
   border-radius: 16px;
   height: 100%;
   transition: 0.3s;
   background: white;
}

.feature-card:hover {
   transform: translateY(-6px);
   box-shadow: 0 15px 35px rgba(15, 23, 42, 0.08);
   border-color: #c7d2fe;
}

.feature-icon {
   width: 50px;
   height: 50px;
   border-radius: 13px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #eef2ff;
   color: var(--primary);
   font-size: 22px;
   margin-bottom: 18px;
}

.feature-card h5 {
   font-weight: 700;
}

.feature-card p {
   color: var(--text);
   font-size: 0.9rem;
   margin: 0;
}

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

.pricing-section {
   background: var(--light-bg);
}

.billing-toggle {
   display: inline-flex;
   padding: 5px;
   background: #e2e8f0;
   border-radius: 10px;
   margin-bottom: 45px;
}

.billing-toggle button {
   border: none;
   background: transparent;
   padding: 9px 20px;
   border-radius: 7px;
   font-weight: 600;
   color: #64748b;
}

.billing-toggle button.active {
   background: white;
   color: var(--secondary);
   box-shadow: 0 3px 10px rgba(0, 0, 0, 0.07);
}

.pricing-card {
   background: white;
   border: 1px solid var(--border);
   border-radius: 18px;
   padding: 32px;
   height: 100%;
   position: relative;
   transition: 0.3s;
}

.pricing-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 20px 40px rgba(15, 23, 42, 0.09);
}

.pricing-card.popular {
   border: 2px solid var(--primary);
   box-shadow: 0 20px 45px rgba(99, 91, 255, 0.12);
}

.popular-badge {
   position: absolute;
   top: -14px;
   left: 50%;
   transform: translateX(-50%);
   padding: 5px 14px;
   border-radius: 50px;
   background: var(--primary);
   color: white;
   font-size: 0.72rem;
   font-weight: 700;
}

.pricing-card h5 {
   font-weight: 700;
}

.pricing-description {
   color: var(--text);
   font-size: 0.85rem;
   min-height: 45px;
}

.price {
   font-size: 2.7rem;
   font-weight: 800;
   letter-spacing: -2px;
   margin: 20px 0;
}

.price small {
   font-size: 0.85rem;
   color: var(--text);
   font-weight: 400;
   letter-spacing: 0;
}

.pricing-button {
   width: 100%;
   padding: 12px;
   border-radius: 9px;
   font-weight: 600;
   border: 1px solid var(--border);
   background: white;
   color: var(--secondary);
}

.pricing-card.popular .pricing-button {
   background: var(--primary);
   border-color: var(--primary);
   color: white;
}

.pricing-features {
   list-style: none;
   padding: 0;
   margin-top: 25px;
}

.pricing-features li {
   display: flex;
   gap: 9px;
   align-items: flex-start;
   padding: 8px 0;
   color: #475569;
   font-size: 0.9rem;
}

.pricing-features i {
   color: var(--success);
}

/* =========================
           STATS
        ========================== */

.stats-section {
   padding: 70px 0;
   background: var(--secondary);
   color: white;
}

.stat-box {
   text-align: center;
}

.stat-number {
   font-size: 2.5rem;
   font-weight: 800;
}

.stat-label {
   color: #94a3b8;
   font-size: 0.9rem;
}

/* =========================
           WHY US
        ========================== */

.why-list {
   list-style: none;
   padding: 0;
}

.why-list li {
   display: flex;
   gap: 15px;
   margin-bottom: 22px;
}

.why-check {
   width: 35px;
   height: 35px;
   flex: 0 0 35px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #dcfce7;
   color: #16a34a;
   border-radius: 9px;
}

.why-list h6 {
   font-weight: 700;
   margin-bottom: 3px;
}

.why-list p {
   color: var(--text);
   font-size: 0.9rem;
   margin: 0;
}

.dashboard-card {
   background: #0f172a;
   color: white;
   border-radius: 20px;
   padding: 25px;
   box-shadow: 0 25px 60px rgba(15, 23, 42, .18);
}

.dashboard-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 25px;
}

.dashboard-title {
   font-weight: 700;
}

.uptime {
   color: #4ade80;
   font-size: .8rem;
}

.mini-card {
   background: #1e293b;
   border-radius: 12px;
   padding: 18px;
   margin-bottom: 12px;
}

.mini-card span {
   color: #94a3b8;
   font-size: .75rem;
}

.mini-card strong {
   display: block;
   font-size: 1.3rem;
   margin-top: 4px;
}

/* =========================
           TESTIMONIALS
        ========================== */

.testimonial-card {
   border: 1px solid var(--border);
   padding: 28px;
   border-radius: 16px;
   height: 100%;
}

.stars {
   color: #f59e0b;
   margin-bottom: 15px;
}

.testimonial-card p {
   color: #475569;
   font-size: .92rem;
}

.user {
   display: flex;
   gap: 12px;
   align-items: center;
   margin-top: 20px;
}

.avatar {
   width: 42px;
   height: 42px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #eef2ff;
   color: var(--primary);
   font-weight: 700;
}

.user strong {
   display: block;
   font-size: .9rem;
}

.user small {
   color: var(--text);
}

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

.cta {
   padding: 80px 0;
}

.cta-box {
   position: relative;
   overflow: hidden;
   background: linear-gradient(135deg,
         #4338ca,
         #7c3aed);
   border-radius: 25px;
   padding: 70px 40px;
   color: white;
   text-align: center;
}

.cta-box h2 {
   font-weight: 800;
   font-size: 2.6rem;
   position: relative;
}

.cta-box p {
   color: #ddd6fe;
   max-width: 600px;
   margin: 15px auto 25px;
   position: relative;
}

.cta-box .btn {
   background: white;
   color: #4338ca;
   border: none;
   padding: 12px 24px;
   border-radius: 9px;
   font-weight: 700;
   position: relative;
}

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

footer {
   background: #020617;
   color: white;
   padding: 70px 0 25px;
}

.footer-brand {
   font-size: 1.4rem;
   font-weight: 800;
}

footer p {
   color: #94a3b8;
   font-size: .9rem;
}

footer h6 {
   font-weight: 700;
   margin-bottom: 18px;
}

.footer-links {
   list-style: none;
   padding: 0;
}

.footer-links li {
   margin-bottom: 9px;
}

.footer-links a {
   color: #94a3b8;
   font-size: .88rem;
   transition: .2s;
}

.footer-links a:hover {
   color: white;
}

.social-icons {
   display: flex;
   gap: 10px;
   margin-top: 20px;
}

.social-icons a {
   width: 37px;
   height: 37px;
   border-radius: 9px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #111827;
   color: #94a3b8;
   transition: .2s;
}

.social-icons a:hover {
   background: var(--primary);
   color: white;
}

.footer-bottom {
   border-top: 1px solid #1e293b;
   margin-top: 45px;
   padding-top: 20px;
   color: #64748b;
   font-size: .8rem;
}

/* =========================
           BACK TO TOP
        ========================== */

#backToTop {
   position: fixed;
   right: 20px;
   bottom: 20px;
   width: 43px;
   height: 43px;
   border: none;
   border-radius: 10px;
   background: var(--primary);
   color: white;
   display: none;
   z-index: 999;
}

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

@media (max-width: 991px) {

   .hero {
      padding: 90px 0 70px;
   }

   .hero h1 {
      letter-spacing: -2px;
   }

   .server-card {
      margin-top: 45px;
   }

   .navbar-nav {
      padding: 15px 0;
   }
}

@media (max-width: 576px) {

   .section {
      padding: 70px 0;
   }

   .section-title h2 {
      font-size: 2rem;
   }

   .hero {
      padding: 70px 0;
   }

   .hero h1 {
      font-size: 2.6rem;
   }

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

   .hero-buttons a {
      text-align: center;
   }

   .domain-search {
      flex-direction: column;
      gap: 6px;
   }

   .domain-search button {
      height: 48px;
   }

   .cta-box {
      padding: 50px 25px;
   }

   .cta-box h2 {
      font-size: 2rem;
   }
}