:root {
   --main-color: #f34213;
   --main-glow: rgba(243, 66, 19, 0.35);
   --main-opacity: rgba(243, 66, 19, 0.1);
   --bg-color: #0b0e13;
   --card-bg: #11151c;
   --header-bg: rgba(11, 14, 19, 0.85);
   --border-color: rgba(255, 255, 255, 0.08);
   --text-main: #ffffff;
   --text-light: #a0aec0;
   --shadow-color: rgba(0, 0, 0, 0.6);
   --section-bg: #0f131a;
   --light-bg: #151a23;
   --text-muted: #6b7280;
   --card-hover-shadow: rgba(0, 0, 0, 0.85);
   --secondary-color: rgba(255, 255, 255, 0.05);
}

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: 'Alexandria', sans-serif;
   scroll-behavior: smooth;
}
body {
   background-color: var(--bg-color);
   color: var(--text-main);
   line-height: 1.6;
   overflow-x: hidden;
}

a { 
   text-decoration: none; 
   transition: 0.3s; 
}
ul { 
   list-style: none; 
}
.container {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 20px;
}
/* --- header --- */
header {
   background: radial-gradient(circle at 10% 20%, var(--main-opacity), transparent 40%);
   backdrop-filter: blur(10px);
   border-bottom: 1px solid var(--border-color);
   padding: 15px 0;
   position: sticky;
   top: 0;
   z-index: 1000;
}

header .navbar {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

header .navbar .logo {
   font-size: 24px;
   font-weight: 800;
}

header .navbar .logo span,
header .navbar .logo i {
   color: var(--main-color);
}
header .navbar .nav-links {
   display: flex;
   gap: 30px;
}
header .navbar .nav-links a {
   color: var(--text-light);
}
header .navbar .nav-links a:hover,
header .navbar .nav-links a.active {
   color: var(--main-color);
}
header .navbar .menu-toggle {
   display: none;
   font-size: 24px;
}
/* --- hero --- */
.hero {
   position: relative;
   padding: 40px 0;
   min-height: 75vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   background: radial-gradient(circle at 10% 20%, var(--main-opacity), transparent 40%);
}
.hero .content {
   display: flex;
   justify-content: space-between;
   gap: 50px;
   flex-wrap: wrap;
   width: 100%;
}
.hero .text {
   flex: 1;
   min-width: 300px;
}
.hero .text h1 {
   font-size: 3.5rem;
   margin-bottom: 20px;
}
.hero .text > p {
   color: var(--text-light);
   max-width: 500px;
   margin-bottom: 30px;
}
.hero .badge {
   background: var(--main-opacity);
   color: var(--main-color);
   padding: 6px 18px;
   border-radius: 20px;
   font-size: 14px;
   margin-bottom: 15px;
   display: inline-block;
}

.hero .stats {
   display: flex;
   gap: 40px;
   margin-bottom: 30px;
   border-right: 3px solid var(--main-color);
   padding-right: 20px;
}
.hero .stats .item h3 { 
   font-size: 24px; 
   font-weight: 800; 
}
.hero .stats .item p { 
   color: var(--text-light); 
   font-size: 14px; 
}
.hero .card {
   flex: 0 0 400px;
   height: fit-content;
   backdrop-filter: blur(10px);
   padding: 40px;
   border-radius: 20px;
   box-shadow: 0 20px 50px var(--shadow-color);
   border: 1px solid var(--border-color);
   position: relative;
   top: 0;
   transition: top 0.3s;
}
.hero .card:hover { 
   top: -5px; 
}
.hero .card .form-header { 
   text-align: center; 
   margin-bottom: 30px; 
}
.hero .card .form-header h3 { 
   font-size: 24px; 
}
.hero .card .form-header p { 
   color: var(--text-light); 
}
@media (max-width: 768px) {
   .nav-links { 
      display: none; 
   }
   .hero .text h1 { 
      font-size: 2.5rem; 
   }
   .hero .content { 
      flex-direction: column; 
      text-align: center; 
   }
   .hero .stats { 
      justify-content: center; 
      border: none; 
      padding: 0; 
   }
   .hero .card { 
      width: 100%; 
      flex: auto; 
   }
   .menu-toggle { 
      display: flex !important;
      align-items: center;
      cursor: pointer;
      justify-content: center; 
   }
}

/* ---  platforms --- */
.platforms{
   position: relative;
   margin-top: clamp(24px, 3vw, 34px);
   overflow: hidden;
   border-top: 1px solid rgba(255,255,255,.06);
   border-bottom: 1px solid rgba(255,255,255,.06);
   background: rgba(255,255,255,.02);
}
.platforms__track{
   display:flex;
   gap: 10px;
   cursor: pointer;
   padding: 14px 0;
   width: max-content;
   animation: marquee 28s linear infinite;
}
.platforms .pill {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 10px 16px;
   border-radius: 999px;
   background: rgba(255,255,255,.05);
   border: 1px solid rgba(255,255,255,.12);
   font-weight: 800;
   font-size: 13px;
   color: rgba(255,255,255,.9);
   transition: .3s ease;
}
.platforms .pill i {
   font-size: 15px;
}
.pill:hover {
   transform: translateY(-2px);
   background: rgba(255,255,255,.08);
   border-color: currentColor;
}
.platforms .pill.ig { 
   color: #e1306c; 
}
.platforms .pill.tt { 
   color: #ffffff; 
}
.platforms .pill.yt { 
   color: #ff0000; 
}
.platforms .pill.tg { 
   color: #229ED9; 
}
.platforms .pill.x  { 
   color: #ffffff; 
}
.platforms .pill.fb { 
   color: #1877f2; 
}
.platforms .pill.sp { 
   color: #1db954; 
}
.platforms .pill.dc { 
   color: #5865f2; 
}
.platforms .pill.ig:hover { 
   box-shadow: 0 0 20px #e1306c33; 
}
.platforms .pill.yt:hover { 
   box-shadow: 0 0 20px #ff000033; 
}
.platforms .pill.tg:hover { 
   box-shadow: 0 0 20px #229ED933; 
}
.platforms .pill.fb:hover { 
   box-shadow: 0 0 20px #1877f233; 
}
.platforms .pill.sp:hover { 
   box-shadow: 0 0 20px #1db95433; 
}
.platforms .pill.dc:hover { 
   box-shadow: 0 0 20px #5865f233; 
}

@keyframes marquee{
   0%{ 
      transform: translateX(0); 
   }
   100%{ 
      transform: translateX(-50%); 
   }
}

/* ---  services --- */
.services { 
   padding: 100px 0; 
}

.services .cards {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 30px;
}

.services .card {
   background: var(--card-bg);
   padding: 30px;
   border-radius: 15px;
   border: 1px solid var(--border-color);
   box-shadow: 0 10px 30px var(--shadow-color);
   transition: 0.4s;
   text-align: center;
}
.services .card:hover {
   transform: translateY(-10px);
   box-shadow: 0 15px 40px var(--card-hover-shadow);
   border-color: var(--main-color);
}
.services .card .icon-box {
   width: 70px;
   height: 70px;
   background: var(--secondary-color);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 20px;
   font-size: 30px;
   transition: 0.3s;
}

.services .card h3 { 
   margin-bottom: 10px; 
}
.services .card p { 
   color: var(--text-light);
   margin-bottom: 20px; 
   font-size: 14px; 
}
.services .card .link-arrow { 
   color: var(--main-color); 
   padding: 8px 12px;
   border-radius: 8px;
   font-weight: bold; 
   font-size: 14px; 
   transition: 0.3s;
}

/* --- features --- */
.features {
   background: radial-gradient(circle at 10% 20%, var(--main-opacity), transparent 40%);
   padding: 80px 0;
}
.features .wrapper {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 30px;
}
.features .wrapper .box {
   flex: 1;
   min-width: 280px;
   background: var(--card-bg);
   padding: 40px 20px;
   border-radius: 15px;
   text-align: center;
}
.features .wrapper .box i {
   font-size: 40px;
   color: var(--main-color);
   margin-bottom: 20px;
}

/* --- works --- */
.works { 
   padding: 100px 0; 
   background: var(--section-bg); 
}
.works .steps-wrapper { 
   display: flex; 
   gap: 30px; 
   margin-top: 50px; 
}
.works .step-item { 
   flex: 1; 
   padding: 40px; 
   border-radius: 20px; 
   background: var(--card-bg); 
   border: 1px solid var(--border-color);
   position: relative;
   text-align: center;
}
.works .step-number {
   width: 60px; 
   height: 60px; 
   background: var(--main-color); 
   color: #fff;
   border-radius: 50%; 
   display: flex; 
   align-items: center; 
   justify-content: center;
   font-size: 24px; 
   font-weight: 800; 
   margin: 0 auto 20px;
   box-shadow: 0 5px 10px var(--main-opacity);
}

/* --- pricing --- */
.pricing { 
   padding: 100px 0; 
   background: radial-gradient(circle at 10% 20%, var(--main-opacity), transparent 40%);
}
.pricing .table-responsive { 
   overflow-x: auto; 
   border-radius: 15px; 
   box-shadow: 0 10px 30px var(--shadow-color); 
}
.pricing .services-table { 
   width: 100%; 
   border-collapse: collapse; 
   text-align: right; 
}
.pricing .services-table th { 
   background: var(--main-color); 
   color: #fff; 
   padding: 20px; 
}
.services-table td { 
   padding: 20px; 
   border-bottom: 1px solid var(--border-color); 
}
.pricing .text-main { 
   color: var(--main-color); 
   margin-left: 10px; 
}
.pricing .btn-sm { 
   padding: 5px 15px; 
   background: var(--main-color); 
   color: #fff; 
   border-radius: 5px; 
   font-size: 13px; 
}

/* --- counters --- */
.counters { 
   padding: 100px 0; 
   background: var(--section-bg);
}
.counters .cards {
   display: flex;
   justify-content: space-around;
   align-items: center;
   text-align: center;
   flex-wrap: wrap;
   gap: 30px;
}
.counters .item {
   flex: 1;
   min-width: 200px;
}
.counter .item h2 {
   font-size: 48px;
   font-weight: 800;
   color: var(--main-color);
   margin-bottom: 10px;
   font-family: 'Tajawal', sans-serif;
}
.counters .item p {
   font-size: 18px;
   color: var(--text-light);
   font-weight: 500;
}
.counters .item::after {
   content: '';
   display: block;
   width: 40px;
   height: 3px;
   background: var(--main-opacity);
   margin: 15px auto 0;
   border-radius: 2px;
}
@media (max-width: 768px) {
   .counters .item h2 {
      font-size: 36px;
   }
}

/* --- testimonials --- */
.testimonials {
   background: radial-gradient(circle at 10% 20%, var(--main-opacity), transparent 40%);
   padding: 100px 0;
}
.testimonials .slider {
   display: flex;
   gap: 30px;
   overflow-x: auto;
   scroll-behavior: smooth;
   scroll-snap-type: x mandatory;
   -webkit-overflow-scrolling: touch;
   padding-bottom: 10px;
   scrollbar-width: none;
}
.testimonials .slider::-webkit-scrollbar {
   display: none;
}
.testimonials .slider .card {
   flex-shrink: 0;
   min-width: 100%;
   scroll-snap-align: start;
   padding: 30px; 
   border-radius: 20px; 
   border-right: 5px solid var(--main-color); 
   box-shadow: 0 10px 25px var(--shadow-color); 
   transition: 0.4s;
}
.testimonials .slider .stars { 
   color: #f59e0b; 
   margin-bottom: 15px; 
}
.testimonials .slider .user-info { 
   margin-top: 20px; 
   display: flex; 
   flex-direction: column; 
}
.testimonials .slider .user-info strong { 
   color: var(--text-main); 
}
.testimonials .slider .user-info span { 
   color: var(--text-light); 
   font-size: 13px; 
}
@media (min-width: 768px) {
   .testimonials .slider .card {
      min-width: 48%;
   }
}


/* --- faq --- */
.faq {
   background: var(--section-bg);
   padding: 100px 0;
}
.faq .accordion { 
   max-width: 800px; 
   margin: 0 auto; 
}
.faq .accordion-item {
   background: var(--card-bg);
   margin-bottom: 15px;
   transition: 0.4s;
   border: 1px solid var(--border-color);
   border-radius: 10px;
   overflow: hidden;
}
.faq .accordion-header {
   padding: 20px;
   cursor: pointer;
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-weight: bold;
   transition: 0.3s;
}
.accordion-header:hover { 
   background: var(--secondary-color); 
}
.faq .accordion-body {
   padding: 0 20px;
   max-height: 0;
   overflow: hidden;
   background: var(--light-bg);
   color: var(--text-light);
   transition: max-height 0.3s ease-out, padding 0.3s;
}
.faq .accordion-item.active .accordion-header { 
   color: var(--main-color); 
}
.faq .accordion-item.active .accordion-header i { 
   transform: rotate(45deg); 
}
.faq .accordion-item.active .accordion-body { 
   padding: 20px; 
   max-height: 150px; 
}

/* --- footer --- */
footer {
   background: var(--bg-color);
   padding: 60px 0 20px;
}
footer .content {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 40px;
   margin-bottom: 40px;
}
footer .footer-logo p,
footer .footer-links a,
footer .copyright {
   color: var(--text-muted);
}
footer .footer-logo h2 span { 
   color: var(--main-color); 
}
footer .footer-logo p {
   color: #888; 
   margin-top: 10px; 
}
footer .footer-links ul li {
   margin-bottom: 10px; 
}
footer .footer-links a { 
   color: #ccc; 
}
footer .footer-links a:hover { 
   color: var(--main-color); 
}
footer .copyright {
   text-align: center;
   border-top: 1px solid #333;
   padding-top: 20px;
   font-size: 14px;
}
footer .social-icons a {
   color: #fff;
   margin-left: 15px;
   font-size: 20px;
}
footer .social-icons a:hover { 
   color: var(--main-color); 
}



/* --- utils --- */
.section-title {
   text-align: center;
   margin-bottom: 60px;
}
.section-title h2 {
   font-size: 36px;
   margin-bottom: 10px;
}
.section-title p { 
   color: var(--text-light); 
}

.highlight {
   color: var(--main-color);
   display: inline-block;
   animation: pulse-name 2s infinite;
}
@keyframes pulse-name {
   0% { transform: scale(1); }
   50% { transform: scale(1.05); text-shadow: 0 0 15px var(--main-opacity); }
   100% { transform: scale(1); }
}


.input-group {
   position: relative;
}

.input-group i {
   position: absolute;
   right: 15px;
   top: 50%;
   transform: translateY(-50%);
   color: var(--text-muted);
}

.input-group input {
   width: 100%;
   padding: 15px 45px 15px 15px;
   border-radius: 10px;
   background: var(--bg-color);
   border: 1px solid var(--border-color);
   color: var(--text-main);
}

.input-group input:focus {
   outline: none;
   border-color: var(--main-color);
   box-shadow: 0 0 0 4px var(--main-opacity);
}

.form-options {
   display: flex;
   justify-content: space-between;
   font-size: 14px;
   color: var(--text-light);
}
.form-options a { 
   color: var(--main-color); 
   font-weight: bold; 
}
.btn {
   padding: 12px 25px;
   border-radius: 8px;
   font-weight: bold;
   cursor: pointer;
   display: inline-block;
   border: none;
   transition: all 0.3s ease;
}

.btn-primary {
   background-color: var(--main-color);
   color: #fff;
   box-shadow: 0 4px 15px var(--main-opacity);
}
.btn-primary:hover {
   background-color: #d6360e;
   transform: translateY(-2px);
}
.btn-secondary {
   background-color: transparent;
   color: var(--text-main);
   border: 1px solid var(--border-color);
   margin-left: 10px;
}
.btn-secondary:hover {
   background-color: var(--secondary-color);
}
.btn-block { 
   width: 100%; 
   text-align: center; 
}


@media (max-width: 768px) {
   header {
      padding: 10px 0;
   }
   header .navbar {
      flex-wrap: wrap;
      gap: 10px;
   }
   header .navbar .auth-buttons {
      display: none;
   }
   header .navbar .nav-links {
      position: absolute;
      top: 100%;
      right: 0;
      width: 100%;
      background: var(--header-bg);
      flex-direction: column;
      gap: 15px;
      border-top: 1px solid var(--border-color);
      height: 0;
      overflow: hidden;
      transition: all 0.3s ease-in-out;
   }
   header .navbar .nav-links.show {
      display: flex;
      padding: 20px;
      height: auto;

   }
   .btn,
   .btn-lg {
      width: 100%;
      text-align: center;
   }
   .services .cards {
      grid-template-columns: 1fr;
   }
   .service .card {
      padding: 25px;
   }
   .features .wrapper {
      flex-direction: column;
   }
   .features .wrapper .box {
      padding: 30px 20px;
   }
   .works .steps-wrapper {
      flex-direction: column;
   }
   .works .step-item {
      padding: 30px 20px;
   }
   .table-responsive {
      overflow-x: auto;
   }
   .pricing .services-table th,
   .pricing .services-table td {
      font-size: 14px;
      padding: 15px;
      white-space: nowrap;
   }
   .counters .cards {
      flex-direction: column;
   }
   .counter .item h2 {
      font-size: 34px;
   }
   .testimonials .slider .card {
      grid-template-columns: 1fr;
   }
   .faq .accordion-header {
      font-size: 15px;
   }
   .faq .accordion-body {
      font-size: 14px;
   }
   footer .content {
      flex-direction: column;
      text-align: center;
      gap: 30px;
   }
   footer .social-icons a {
      margin: 0 10px;
   }
   .platforms__track {
      width: auto;
   }
}
.hero form {
   display: flex;
   flex-direction: column;
   gap: 15px;
   width: 100%;
}

header img,
footer img {
   max-height: 58px;
   max-width: 200px;
   vertical-align: middle;
   border-style: none;
}