/* =================================================================
   STAR MEDIA AGENCY — MAIN STYLESHEET
   Design tokens:
   --bg: #070B16 (deep night navy-black)
   --pink: #FF2D8D | --orange: #FF9A1F | --blue: #2AA8FF | --purple: #6A3CFF
   Typography: Poppins (all roles, weight contrast carries hierarchy)
   ================================================================= */

:root{
  --bg: #070B16;
  --bg-soft: #0B1120;
  --surface: rgba(255,255,255,0.045);
  --surface-hover: rgba(255,255,255,0.08);
  --border: rgba(255,255,255,0.09);

  --pink: #FF2D8D;
  --orange: #FF9A1F;
  --blue: #2AA8FF;
  --purple: #6A3CFF;

  --text: #F5F6FB;
  --text-muted: #9BA3B9;
  --text-faint: #6b7488;

  --gradient-main: linear-gradient(90deg, var(--pink), var(--orange) 38%, var(--blue) 72%, var(--purple));
  --gradient-main-diag: linear-gradient(135deg, var(--pink), var(--orange) 35%, var(--blue) 70%, var(--purple));

  --radius-lg: 26px;
  --radius-md: 18px;
  --radius-sm: 12px;

  --shadow-soft: 0 20px 60px -20px rgba(0,0,0,0.6);
  --transition: .4s cubic-bezier(.4,0,.2,1);
}

*{ box-sizing: border-box; }

::selection{ background: var(--pink); color: #fff; }

html{
  scroll-behavior: smooth;
}

body{
  background: var(--bg);
  color: var(--text);
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  overflow-x: hidden;
  position: relative;
}

/* subtle ambient noise / vignette so the flat bg doesn't feel dead */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 15% 8%, rgba(106,60,255,0.14), transparent 40%),
    radial-gradient(circle at 85% 15%, rgba(255,45,141,0.10), transparent 45%),
    radial-gradient(circle at 50% 100%, rgba(42,168,255,0.08), transparent 50%);
}

a{ text-decoration: none; color: inherit; }
ul{ list-style: none; padding: 0; margin: 0; }
button{ font-family: inherit; }
img{ max-width: 100%; display: block; }

.gradient-text{
  background: var(--gradient-main);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* =================================================================
   MOUSE GLOW EFFECT
   ================================================================= */
.mouse-glow{
  position: fixed;
  top: 0; left: 0;
  width: 480px; height: 480px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(106,60,255,0.10), rgba(255,45,141,0.05) 45%, transparent 70%);
  transition: opacity .3s ease;
  will-change: transform;
  display: none;
}
@media (min-width: 992px){
  .mouse-glow{ display: block; }
}

/* =================================================================
   LOADING SCREEN
   ================================================================= */
.loader{
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 28px;
  transition: opacity .6s ease, visibility .6s ease;
}
.loader.hide{ opacity: 0; visibility: hidden; }
.loader-star{
  width: 90px; height: 90px;
  animation: pulseLogo 1.6s ease-in-out infinite;
}
.loader-logo{ width: 100%; height: 100%; object-fit: contain; }
@keyframes pulseLogo{
  0%,100%{ transform: scale(1); filter: drop-shadow(0 0 12px rgba(255,45,141,.35)); }
  50%{ transform: scale(1.08); filter: drop-shadow(0 0 26px rgba(106,60,255,.55)); }
}
.loader-bar{
  width: 180px; height: 3px; border-radius: 10px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.loader-bar span{
  display: block; height: 100%; width: 40%;
  background: var(--gradient-main);
  animation: loaderSlide 1.1s ease-in-out infinite;
}
@keyframes loaderSlide{
  0%{ transform: translateX(-100%); }
  100%{ transform: translateX(350%); }
}

/* =================================================================
   NAVBAR
   ================================================================= */
.navbar-wrap{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 18px 0;
  transition: var(--transition);
  background: transparent;
}
.navbar-wrap.scrolled{
  padding: 10px 0;
  background: rgba(7,11,22,0.72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 10px 40px -20px rgba(0,0,0,0.7);
}
.navbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand-logo{ height: 46px; width: auto; transition: var(--transition); }
.navbar-wrap.scrolled .brand-logo{ height: 38px; }

.nav-collapse{
  display: flex;
  align-items: center;
  gap: 6px;
}
.nav-links{
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-link{
  position: relative;
  padding: 10px 18px;
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--text-muted);
  border-radius: 999px;
  transition: var(--transition);
}
.nav-link:hover, .nav-link.active-link{
  color: var(--text);
  background: var(--surface);
}
.nav-link::after{
  content:"";
  position: absolute;
  left: 18px; right: 18px; bottom: 6px;
  height: 2px;
  border-radius: 2px;
  background: var(--gradient-main);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
}
.nav-link:hover::after, .nav-link.active-link::after{ transform: scaleX(1); }

.btn-cta{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9rem;
  color: #070B16;
  background: var(--gradient-main);
  background-size: 200% 100%;
  transition: background-position .5s ease, transform .3s ease, box-shadow .3s ease;
  box-shadow: 0 8px 30px -8px rgba(255,45,141,0.45);
}
.btn-cta:hover{
  background-position: 100% 0;
  transform: translateY(-2px);
  box-shadow: 0 12px 36px -8px rgba(106,60,255,0.55);
  color: #070B16;
}

.navbar-toggler{
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0;
}
.navbar-toggler span{
  display: block;
  width: 18px; height: 2px;
  margin: 0 auto;
  background: var(--text);
  border-radius: 2px;
  transition: var(--transition);
}
.navbar-toggler.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.navbar-toggler.open span:nth-child(2){ opacity: 0; }
.navbar-toggler.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }



/* =================================================================
   HERO
   ================================================================= */
.hero{
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: 110px;
  padding-bottom: 60px;
}
.hero-skyline{
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(7,11,22,0.2), var(--bg) 92%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 46px);
  z-index: 0;
}
.hero-skyline::after{
  content:"";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 46%;
  background-image:
    linear-gradient(180deg, transparent, var(--bg) 96%),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,0.05) 0 34px,
      transparent 34px 70px);
  clip-path: polygon(0% 100%, 0% 40%, 4% 40%, 4% 25%, 9% 25%, 9% 55%, 14% 55%, 14% 15%, 19% 15%, 19% 48%, 25% 48%,
    25% 5%, 31% 5%, 31% 42%, 37% 42%, 37% 30%, 43% 30%, 43% 60%, 49% 60%, 49% 12%, 55% 12%, 55% 45%, 61% 45%,
    61% 20%, 67% 20%, 67% 52%, 73% 52%, 73% 8%, 79% 8%, 79% 40%, 85% 40%, 85% 28%, 91% 28%, 91% 58%, 96% 58%,
    96% 18%, 100% 18%, 100% 100%);
  filter: blur(1.5px);
  opacity: .55;
}
.hero-gradient-overlay{
  position: absolute; inset: -10%;
  z-index: 0;
  background:
    radial-gradient(38% 55% at 15% 20%, rgba(255,45,141,0.20), transparent 70%),
    radial-gradient(35% 45% at 85% 10%, rgba(42,168,255,0.18), transparent 70%),
    radial-gradient(45% 55% at 55% 100%, rgba(106,60,255,0.18), transparent 70%);
  animation: gradientDrift 16s ease-in-out infinite alternate;
}
@keyframes gradientDrift{
  0%{ transform: translate(0,0) scale(1); }
  100%{ transform: translate(-2%, 2%) scale(1.06); }
}

.floating-shape{
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .5;
  z-index: 0;
  animation: floatShape 9s ease-in-out infinite;
}
.shape-1{ width: 260px; height: 260px; background: var(--pink); top: 12%; left: 6%; animation-delay: 0s; }
.shape-2{ width: 220px; height: 220px; background: var(--blue); bottom: 18%; left: 40%; animation-delay: 2s; }
.shape-3{ width: 300px; height: 300px; background: var(--purple); top: 30%; right: 4%; animation-delay: 4s; }
@keyframes floatShape{
  0%,100%{ transform: translateY(0) translateX(0); }
  50%{ transform: translateY(-30px) translateX(18px); }
}

.hero-inner{ position: relative; z-index: 2; }
.hero-logo{ height: 64px; width: auto; filter: drop-shadow(0 0 22px rgba(255,45,141,0.25)); }

.hero-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 18px;
}
.hero-eyebrow::before{
  content:"";
  width: 26px; height: 2px;
  background: var(--gradient-main);
  border-radius: 2px;
}

.hero-title{
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.01em;
  margin-bottom: 22px;
}
.hero-subheading{
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 500;
  color: var(--text);
  margin-bottom: 18px;
}
.hero-subheading .dot{
  color: var(--orange);
  margin: 0 4px;
}
.hero-desc{
  color: var(--text-muted);
  font-size: 1.02rem;
  max-width: 520px;
  line-height: 1.75;
  margin-bottom: 34px;
}
.hero-btns{ display: flex; gap: 16px; flex-wrap: wrap; }

.btn-primary-glow{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 34px;
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  color: #070B16;
  background: var(--gradient-main);
  background-size: 220% 100%;
  border: none;
  cursor: pointer;
  overflow: hidden;
  transition: background-position .5s ease, transform .3s ease, box-shadow .3s ease;
  box-shadow: 0 10px 34px -10px rgba(255,45,141,0.55);
}
.btn-primary-glow:hover{
  background-position: 100% 0;
  transform: translateY(-3px);
  box-shadow: 0 16px 44px -8px rgba(106,60,255,0.6);
  color: #070B16;
}
.btn-outline-glow{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 34px;
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  color: var(--text);
  border: 1.5px solid var(--border);
  background: var(--surface);
  backdrop-filter: blur(10px);
  transition: var(--transition);
}
.btn-outline-glow:hover{
  border-color: transparent;
  background: var(--surface-hover);
  box-shadow: inset 0 0 0 1.5px transparent;
  background-image: linear-gradient(var(--bg-soft), var(--bg-soft)), var(--gradient-main);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  color: var(--text);
  transform: translateY(-3px);
}

/* button ripple effect */
.btn-ripple{ position: relative; overflow: hidden; }
.ripple-el{
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.45);
  transform: scale(0);
  animation: rippleAnim .6s ease-out;
  pointer-events: none;
}
@keyframes rippleAnim{
  to{ transform: scale(3); opacity: 0; }
}

.hero-orb-wrap{
  position: relative;
  height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-orb{
  width: 340px; height: 340px;
  border-radius: 50%;
  background: conic-gradient(from 180deg, var(--pink), var(--orange), var(--blue), var(--purple), var(--pink));
  filter: blur(2px);
  opacity: .85;
  position: relative;
  animation: orbSpin 14s linear infinite;
  box-shadow: 0 0 100px -10px rgba(106,60,255,0.5);
}
.hero-orb::before{
  content:"";
  position: absolute;
  inset: 26px;
  border-radius: 50%;
  background: var(--bg);
}
.hero-orb::after{
  content:"";
  position: absolute;
  inset: -30px;
  border-radius: 50%;
  border: 1px dashed rgba(255,255,255,0.14);
  animation: orbSpin 30s linear infinite reverse;
}
@keyframes orbSpin{ to{ transform: rotate(360deg); } }

.scroll-indicator{
  position: absolute;
  bottom: 34px; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.scroll-indicator span{
  width: 26px; height: 42px;
  border-radius: 20px;
  border: 2px solid var(--border);
  position: relative;
}
.scroll-indicator span::before{
  content:"";
  position: absolute;
  top: 7px; left: 50%;
  width: 4px; height: 8px;
  border-radius: 3px;
  background: var(--gradient-main);
  transform: translateX(-50%);
  animation: scrollDot 1.8s ease-in-out infinite;
}
@keyframes scrollDot{
  0%{ opacity: 1; top: 7px; }
  70%{ opacity: 0; top: 22px; }
  100%{ opacity: 0; top: 7px; }
}
.scroll-indicator p{
  font-size: .7rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.hero-features{
    display:flex;
    flex-wrap:wrap;
    gap:15px;
    margin-top:35px;
}

.hero-features span{
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.15);
    color:#fff;
    padding:10px 18px;
    border-radius:50px;
    font-size:15px;
    backdrop-filter:blur(10px);
}

.hero-features i{
    color:#00d084;
    margin-right:8px;
}

/* =================================================================
   SECTION GENERIC
   ================================================================= */
.section{
  position: relative;
  z-index: 2;
  padding: 120px 0;
}
.section-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 14px;
}
.section-eyebrow::before{
  content:"";
  width: 22px; height: 2px;
  background: var(--gradient-main);
  border-radius: 2px;
}
.section-title{
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  font-weight: 700;
  margin-bottom: 20px;
  letter-spacing: -0.01em;
}
.section-text{
  color: var(--text-muted);
  line-height: 1.8;
  font-size: 1.02rem;
}

/* =================================================================
   ABOUT
   ================================================================= */
.about-pillars{ margin-top: 34px; display: flex; flex-direction: column; gap: 16px; }
.pillar-card{
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 20px 22px;
  border-radius: var(--radius-md);
  transition: var(--transition);
}
.pillar-card:hover{
  background: var(--surface-hover);
  transform: translateX(6px);
  border-color: rgba(255,45,141,0.3);
}
.pillar-icon{
  flex-shrink: 0;
  width: 46px; height: 46px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--gradient-main-diag);
  color: #fff;
  font-size: 1.1rem;
}
.pillar-card h6{ font-weight: 600; margin-bottom: 4px; font-size: 1.02rem; }
.pillar-card p{ color: var(--text-muted); font-size: .92rem; margin: 0; line-height: 1.6; }

.stats-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.stat-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 34px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: var(--transition);
}
.stat-card:hover{ transform: translateY(-6px); border-color: rgba(106,60,255,.35); }
.stat-card::before{
  content:"";
  position: absolute; top: -30%; left: -30%;
  width: 160%; height: 160%;
  background: var(--gradient-main-diag);
  opacity: 0;
  filter: blur(40px);
  transition: opacity .4s ease;
  z-index: 0;
}
.stat-card:hover::before{ opacity: .12; }
.stat-card h3{
  display: inline; font-size: 2.6rem; font-weight: 800;
  background: var(--gradient-main);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  position: relative; z-index: 1;
}
.stat-card > span{
  font-size: 2.6rem; font-weight: 800; color: var(--orange); position: relative; z-index: 1;
}
.stat-card p{ margin: 8px 0 0; color: var(--text-muted); font-size: .92rem; position: relative; z-index: 1; }

/* =================================================================
   SERVICES
   ================================================================= */
.service-card{
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 26px;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}
.service-card::before{
  content:"";
  position: absolute; inset: 0;
  border-radius: var(--radius-lg);
  padding: 1px;
  background: var(--gradient-main-diag);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .4s ease;
}
.service-card:hover{
  transform: translateY(-8px);
  background: var(--surface-hover);
  box-shadow: var(--shadow-soft);
}
.service-card:hover::before{ opacity: 1; }
.service-icon{
  width: 54px; height: 54px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 22px;
  color: #fff;
  transition: var(--transition);
}
.service-card:hover .service-icon{ transform: scale(1.08) rotate(-4deg); }
.icon-pink{ background: linear-gradient(135deg, var(--pink), #ff6fb3); }
.icon-orange{ background: linear-gradient(135deg, var(--orange), #ffc266); }
.icon-blue{ background: linear-gradient(135deg, var(--blue), #7fd1ff); }
.icon-purple{ background: linear-gradient(135deg, var(--purple), #a98bff); }
.service-card h5{ font-weight: 600; margin-bottom: 12px; font-size: 1.08rem; }
.service-card p{ color: var(--text-muted); font-size: .9rem; line-height: 1.7; margin-bottom: 20px; }
.read-more{
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .85rem; font-weight: 600; color: var(--text);
  border-bottom: 1px solid var(--border);
  padding-bottom: 3px;
  transition: var(--transition);
}
.read-more i{ font-size: .75rem; transition: transform .3s ease; }
.service-card:hover .read-more{ color: var(--orange); border-color: var(--orange); }
.service-card:hover .read-more i{ transform: translate(3px,-3px); }


/*==============================
    Service Buttons
==============================*/

.service-buttons{
    display:flex;
    gap:10px;
    margin-top:22px;
}

.service-btn-primary,
.service-btn-secondary{
    flex:1;
    height:45px;
    border-radius:12px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    text-decoration:none;
    font-size:14px;
    font-weight:600;
    transition:.3s;
}

/* WhatsApp Button */

.service-btn-primary{
    position: relative;
    z-index: 9999;
    pointer-events: auto;
}

.service-btn-primary:hover{
    background:#1ebe5d;
    color:#fff;
    transform:translateY(-3px);
}

/* Learn More */

.service-btn-secondary{
    border:2px solid #6C63FF;
    color:#6C63FF;
    background:transparent;
}

.service-btn-secondary:hover{
    background:#6C63FF;
    color:#fff;
    transform:translateY(-3px);
}

.btn-service{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:18px;
    padding:12px 22px;
    border-radius:50px;
    background:#111827;
    color:#fff;
    text-decoration:none;
    font-weight:600;
    transition:.3s;
    position: relative;
}

.btn-service:hover{
    background:#6C63FF;
    color:#fff;
    transform:translateY(-3px);
}

.btn-service i{
    transition:.3s;
}

.btn-service:hover i{
    transform:translateX(5px);
}

/* =================================================================
   WHY US
   ================================================================= */
.feature-card{
  height: 100%;
  text-align: center;
  padding: 40px 26px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: var(--transition);
}
.feature-card:hover{
  background: var(--surface-hover);
  transform: translateY(-8px);
  border-color: rgba(42,168,255,.35);
}
.feature-card i{
  font-size: 1.8rem;
  margin-bottom: 20px;
  background: var(--gradient-main);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.feature-card h5{ font-weight: 600; margin-bottom: 10px; }
.feature-card p{ color: var(--text-muted); font-size: .9rem; margin: 0; line-height: 1.7; }

/* =================================================================
   PROCESS TIMELINE
   ================================================================= */
.process-timeline{
  display: flex;
  justify-content: space-between;
  gap: 20px;
  position: relative;
  flex-wrap: wrap;
}
.process-timeline::before{
  content:"";
  position: absolute;
  top: 24px; left: 4%; right: 4%;
  height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,0.02), var(--border) 10%, var(--border) 90%, rgba(255,255,255,0.02));
  z-index: 0;
}
.process-step{
  flex: 1 1 0;
  min-width: 160px;
  text-align: center;
  position: relative;
  z-index: 1;
}
.process-num{
  width: 50px; height: 50px;
  margin: 0 auto 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: .95rem;
  background: var(--bg);
  border: 2px solid transparent;
  background-image: linear-gradient(var(--bg), var(--bg)), var(--gradient-main);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  color: var(--text);
  transition: var(--transition);
}
.process-step:hover .process-num{
  background-image: var(--gradient-main);
  color: #070B16;
  transform: scale(1.1);
}
.process-step h5{ font-weight: 600; margin-bottom: 8px; font-size: 1rem; }
.process-step p{ color: var(--text-muted); font-size: .85rem; padding: 0 8px; line-height: 1.6; }

/* =================================================================
   PORTFOLIO
   ================================================================= */
.portfolio-filters{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 46px;
}
.filter-btn{
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: .85rem;
  font-weight: 500;
  transition: var(--transition);
}
.filter-btn:hover{ color: var(--text); background: var(--surface-hover); }
.filter-btn.active{
  color: #070B16;
  background: var(--gradient-main);
  border-color: transparent;
}

.portfolio-grid{
  columns: 3 280px;
  column-gap: 20px;
}
.portfolio-item{
  break-inside: avoid;
  margin-bottom: 20px;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition: transform .3s ease;
}
.portfolio-item.filtered-out{ display: none; }
.portfolio-item:hover{ transform: translateY(-6px); }
.portfolio-thumb{
  position: relative;
  min-height: 220px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
.thumb-1{background-image: url("33.jpg")}
.thumb-2{ background-image: url("55.jpg") }
.thumb-3{ background-image: url("000.jpg") }
.thumb-4{ background-image: url("WhatsApp Image 2026-08-02 at 7.08.34 PM.jpeg") }
.thumb-5{ background-image: url("ChatGPT Image Jul 29, 2026, 03_39_57 AM.png") }
.thumb-6{ background-image: url("22.jpg") }
.thumb-7{ background-image: url("66.jpg") }
.thumb-8{ background-image: url("11.jpg") }
.thumb-9{ background-image: url("99.jpg") }

.portfolio-thumb::after{
  content:"";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.08), transparent 60%);
}
.portfolio-overlay{
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
  padding: 22px;
  background: linear-gradient(180deg, transparent 40%, rgba(7,11,22,0.92));
  opacity: 0;
  transform: translateY(10px);
  transition: var(--transition);
  z-index: 1;
}
.portfolio-item:hover .portfolio-overlay{ opacity: 1; transform: translateY(0); }
.portfolio-overlay h6{ font-weight: 600; margin-bottom: 4px; }
.portfolio-overlay span{
  font-size: .78rem;
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.lightbox{
  position: fixed; inset: 0;
  background: rgba(4,6,12,0.92);
  backdrop-filter: blur(10px);
  z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
}
.lightbox.active{ opacity: 1; visibility: visible; }
.lightbox-content{
  width: min(640px, 88vw);
  aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.lightbox-close{
  position: absolute; top: 30px; right: 30px;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 1.1rem;
}
.lightbox-close:hover{ background: var(--surface-hover); }

/* =================================================================
   TESTIMONIALS
   ================================================================= */
.testimonial-swiper{ padding-bottom: 56px; }
.testimonial-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  height: 100%;
  min-height: 260px;
  display: flex;
  flex-direction: column;
}
.stars{ color: var(--orange); font-size: .9rem; margin-bottom: 18px; letter-spacing: 3px; }
.testimonial-card p{
  color: var(--text);
  font-size: 1rem;
  line-height: 1.75;
  font-style: italic;
  flex-grow: 1;
  margin-bottom: 24px;
}
.testimonial-author{ display: flex; align-items: center; gap: 14px; }
.author-avatar{
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--gradient-main-diag);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .85rem; color: #fff;
  flex-shrink: 0;
}
.testimonial-author h6{ font-weight: 600; margin-bottom: 2px; font-size: .95rem; }
.testimonial-author span{ color: var(--text-muted); font-size: .8rem; }
.swiper-pagination-bullet{ background: var(--text-muted); opacity: .4; }
.swiper-pagination-bullet-active{
  background: var(--gradient-main);
  opacity: 1;
  width: 22px;
  border-radius: 6px;
}

/* =================================================================
   FAQ
   ================================================================= */
.faq-accordion{ max-width: 800px; margin: 0 auto; }
.accordion-item{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md) !important;
  margin-bottom: 16px;
  overflow: hidden;
}
.accordion-button{
  background: transparent;
  color: var(--text);
  font-weight: 600;
  font-size: 1rem;
  padding: 22px 26px;
  box-shadow: none !important;
}
.accordion-button:not(.collapsed){
  color: var(--pink);
  background: rgba(255,45,141,0.05);
}
.accordion-button::after{
  filter: invert(1) brightness(2);
  opacity: .8;
}
.accordion-body{
  color: var(--text-muted);
  padding: 4px 26px 24px;
  line-height: 1.75;
  font-size: .92rem;
}

/* =================================================================
   CONTACT
   ================================================================= */
.contact-info-list{ margin: 34px 0; display: flex; flex-direction: column; gap: 18px; }
.contact-info-item{
  display: flex; align-items: center; gap: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  transition: var(--transition);
}
.contact-info-item:hover{ background: var(--surface-hover); transform: translateX(6px); }
.contact-icon{
  width: 46px; height: 46px; flex-shrink: 0;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--gradient-main-diag);
  color: #fff;
}
.contact-info-item span{ display: block; font-size: .78rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 3px; }
.contact-info-item a{ font-weight: 600; font-size: 1rem; }

.social-icons-row{ display: flex; gap: 12px; }
.social-icons-row a{
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  transition: var(--transition);
}
.social-icons-row a:hover{
  color: #fff;
  background: var(--gradient-main-diag);
  border-color: transparent;
  transform: translateY(-4px);
}

.contact-form{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px;
  backdrop-filter: blur(20px);
}
.contact-form label{
  display: block;
  font-size: .82rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.contact-form input, .contact-form textarea{
  width: 100%;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  color: var(--text);
  font-family: inherit;
  font-size: .92rem;
  transition: var(--transition);
  resize: vertical;
}
.contact-form input::placeholder, .contact-form textarea::placeholder{ color: var(--text-faint); }
.contact-form input:focus, .contact-form textarea:focus{
  outline: none;
  border-color: var(--pink);
  background: rgba(255,45,141,0.04);
  box-shadow: 0 0 0 4px rgba(255,45,141,0.08);
}
.form-success{
  display: none;
  margin-top: 16px;
  color: var(--blue);
  font-size: .88rem;
  font-weight: 500;
}
.form-success.show{ display: block; }

.map-placeholder{
  margin-top: 60px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  min-height: 260px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px;
  color: var(--text-faint);
}
.map-placeholder i{ font-size: 2rem; background: var(--gradient-main); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* =================================================================
   FOOTER
   ================================================================= */
.footer{
  position: relative; z-index: 2;
  padding: 80px 0 0;
  border-top: 1px solid var(--border);
  background: var(--bg-soft);
}
.footer-logo{ height: 40px; margin-bottom: 18px; }
.footer p{ color: var(--text-muted); font-size: .9rem; line-height: 1.7; max-width: 320px; }
.footer h6{ font-weight: 600; margin-bottom: 20px; font-size: .95rem; }
.footer ul li{ margin-bottom: 12px; }
.footer ul li a{ color: var(--text-muted); font-size: .9rem; transition: var(--transition); }
.footer ul li a:hover{ color: var(--pink); padding-left: 4px; }
.footer-bottom{
  margin-top: 60px;
  padding: 26px 0;
  border-top: 1px solid var(--border);
  text-align: center;
}
.footer-bottom p{ color: var(--text-faint); font-size: .85rem; margin: 0; }

/* =================================================================
   BACK TO TOP
   ================================================================= */
#backToTop{
  position: fixed;
  bottom: 30px; right: 30px;
  width: 50px; height: 50px;
  border-radius: 50%;
  border: none;
  background: var(--gradient-main);
  color: #070B16;
  font-size: 1rem;
  z-index: 900;
  opacity: 0; visibility: hidden;
  transform: translateY(20px);
  transition: var(--transition);
  box-shadow: 0 10px 30px -8px rgba(255,45,141,0.5);
}
#backToTop.show{ opacity: 1; visibility: visible; transform: translateY(0); }
#backToTop:hover{ transform: translateY(-4px); }

/* =================================================================
   REDUCED MOTION
   ================================================================= */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Focus visibility for accessibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}


.form-success{
    display: none;
    color: #4CAF50;
    margin-top: 15px;
    font-weight: 600;
}



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

.pricing-section {
  padding: 100px 6%;
  background: #ffffff;
  position: relative;
  overflow: hidden;
}

.pricing-container {
  max-width: 1250px;
  margin: auto;
}


/* Header */

.pricing-header {
  text-align: center;
  margin-bottom: 55px;
}

.pricing-badge {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 30px;
  background: rgba(124, 58, 237, 0.1);
  color: #7c3aed;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 15px;
}

.pricing-header h2 {
  font-size: 48px;
  margin: 0 0 12px;
  font-weight: 800;
  color: #11152f;
}

.pricing-header h2 span {
  color: #7c3aed;
}

.pricing-header p {
  color: #777;
  font-size: 17px;
  margin: 0;
}


/* Grid */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
}


/* Card */

.pricing-card {
  background: #fff;
  border: 1px solid #eeeeF5;
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 10px 35px rgba(40, 30, 80, 0.08);
  transition: all 0.35s ease;
}

.pricing-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 45px rgba(100, 60, 180, 0.18);
}


/* Image */

.service-image {
  width: 100%;
  height: 210px;
  background: #f8f7ff;
  overflow: hidden;
}

.service-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.pricing-card:hover .service-image img {
  transform: scale(1.05);
}


/* Content */

.pricing-content {
  padding: 25px 22px 28px;
  text-align: center;
}

.pricing-content h3 {
  color: #11152f;
  font-size: 19px;
  font-weight: 800;
  margin: 0 0 15px;
  min-height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* Price */

.price {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 14px;
}

.old-price {
  color: #999;
  font-size: 15px;
  text-decoration: line-through;
  text-decoration-color: #e74c3c;
  margin-bottom: 3px;
}

.new-price {
  color: #7138d4;
  font-size: 30px;
  font-weight: 800;
}


/* Details */

.service-details {
  color: #666;
  font-size: 14px;
  line-height: 1.6;
  min-height: 45px;
  margin: 0 0 20px;
}


/* Features */

.features {
  list-style: none;
  padding: 0;
  margin: 10px 0 20px;
  text-align: left;
}

.features li {
  color: #555;
  font-size: 14px;
  margin: 9px 0;
}


/* Button */

.pricing-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 13px 20px;
  border-radius: 12px;
  background: #7138d4;
  color: white;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  transition: all 0.3s ease;
}

.pricing-btn:hover {
  background: #5825b5;
  transform: translateY(-2px);
}


/* Most Popular */

.featured-card {
  border: 2px solid #7138d4;
}

.popular-label {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 5;
  padding: 7px 12px;
  border-radius: 20px;
  background: #7138d4;
  color: white;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
}


/* =========================
   TABLET
========================= */

@media (max-width: 1100px) {

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

  .pricing-header h2 {
    font-size: 40px;
  }
}


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

@media (max-width: 650px) {

  .pricing-section {
    padding: 70px 20px;
  }

  .pricing-header {
    margin-bottom: 35px;
  }

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

  .pricing-header p {
    font-size: 15px;
  }

  .pricing-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .service-image {
    height: 230px;
  }

  .pricing-content {
    padding: 22px 20px 25px;
  }

  .new-price {
    font-size: 28px;
  }
}


/* Creative Pricing Button */

.pricing-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  width: 100%;
  padding: 14px 20px;

  border-radius: 50px;

  background: linear-gradient(
    135deg,
    #7c3aed,
    #a855f7,
    #ec4899
  );

  color: #ffffff;
  text-decoration: none;

  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.3px;

  overflow: hidden;

  box-shadow:
    0 8px 20px rgba(124, 58, 237, 0.25);

  transition: all 0.35s ease;
}


/* Shine Effect */

.pricing-btn::before {
  content: "";
  position: absolute;

  top: 0;
  left: -100%;

  width: 60%;
  height: 100%;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.45),
    transparent
  );

  transform: skewX(-20deg);

  transition: 0.6s;
}


/* Hover */

.pricing-btn:hover {
  transform: translateY(-4px) scale(1.02);

  box-shadow:
    0 12px 30px rgba(124, 58, 237, 0.4);
}

.pricing-btn:hover::before {
  left: 130%;
}


/* Arrow */

.pricing-btn::after {
  content: "↗";

  width: 24px;
  height: 24px;

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

  border-radius: 50%;

  background: rgba(255,255,255,0.2);

  font-size: 15px;

  transition: 0.3s;
}

.pricing-btn:hover::after {
  transform: rotate(45deg);
  background: rgba(255,255,255,0.3);
}


/* =========================================
   ROOT
========================================= */

:root {

    --bg: #070812;
    --panel: #101322;

    --muted: #a7adbf;

    --pink: #ff3b9d;
    --purple: #7c3aed;
    --blue: #22b8ff;

    --line: rgba(255, 255, 255, 0.11);

}


/* =========================================
   GLOBAL
========================================= */

* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    background: var(--bg);

    color: #fff;

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

    overflow-x: hidden;

}


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

.navbar {

    background: rgba(7, 8, 18, 0.72) !important;

    backdrop-filter: blur(18px);

    border-bottom:
        1px solid rgba(255, 255, 255, 0.07);

}


.navbar .container {
    position: relative;
}


.navbar-brand {
    position: relative;
    z-index: 3;
}


.navbar-brand img {
    height: 48px;
}


.navbar .nav-link {

    color: #d8dbe5 !important;

    font-weight: 500;

    margin: 0 7px;

    transition: 0.3s;

}


.navbar .nav-link:hover {
    color: #fff !important;
}


.talk-btn,
.cta-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 12px 19px;

    border-radius: 13px;

    color: #fff;

    text-decoration: none;

    font-weight: 700;

    background:
        linear-gradient(
            100deg,
            var(--pink),
            var(--purple)
        );

    box-shadow:
        0 10px 35px rgba(255, 59, 157, 0.2);

    transition: 0.3s;

}


.talk-btn:hover,
.cta-btn:hover {

    color: #fff;

    transform: translateY(-2px);

}


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

.hero {

    min-height: 780px;

    display: flex;

    align-items: center;

    padding: 150px 0 90px;

    position: relative;

    background:

        radial-gradient(
            circle at 8% 18%,
            rgba(255, 59, 157, 0.17),
            transparent 28%
        ),

        radial-gradient(
            circle at 88% 20%,
            rgba(34, 184, 255, 0.15),
            transparent 30%
        ),

        radial-gradient(
            circle at 55% 90%,
            rgba(124, 58, 237, 0.13),
            transparent 35%
        );

    overflow: hidden;

}


/* =========================================
   BLOBS
========================================= */

.blob {

    position: absolute;

    border-radius: 50%;

    filter: blur(2px);

    opacity: 0.55;

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

}


.b1 {

    width: 260px;
    height: 260px;

    background:
        rgba(255, 59, 157, 0.14);

    left: -90px;
    top: 160px;

}


.b2 {

    width: 320px;
    height: 320px;

    background:
        rgba(34, 184, 255, 0.1);

    right: -130px;
    top: 120px;

    animation-delay: -2s;

}


.b3 {

    width: 180px;
    height: 180px;

    background:
        rgba(124, 58, 237, 0.14);

    right: 32%;
    bottom: -80px;

    animation-delay: -4s;

}


@keyframes float {

    50% {

        transform:
            translateY(-22px)
            translateX(10px);

    }

}


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

.eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 9px;

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

    background:
        rgba(255, 255, 255, 0.045);

    padding: 9px 15px;

    border-radius: 999px;

    color: #d8dbea;

    font-size: 13px;

    letter-spacing: 0.4px;

}


.hero h1 {

    font-size:
        clamp(44px, 6vw, 78px);

    line-height: 1.02;

    font-weight: 800;

    max-width: 800px;

    margin: 22px 0;

}


.gradient {

    background:
        linear-gradient(
            90deg,
            var(--pink),
            #b05cff,
            var(--blue)
        );

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

}


.hero p {

    color: var(--muted);

    font-size: 17px;

    line-height: 1.85;

    max-width: 700px;

}


.hero-actions {

    display: flex;

    gap: 14px;

    flex-wrap: wrap;

    margin-top: 32px;

}


.ghost-btn {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 13px 20px;

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

    border-radius: 13px;

    color: #fff;

    text-decoration: none;

    background:
        rgba(255, 255, 255, 0.035);

    transition: 0.3s;

}


.ghost-btn:hover {

    color: #fff;

    background:
        rgba(255, 255, 255, 0.08);

    transform: translateY(-2px);

}


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

.visual {

    position: relative;

    height: 450px;

}


.orb {

    position: absolute;

    width: 320px;
    height: 320px;

    border-radius: 50%;

    right: 8%;
    top: 55px;

    background:

        radial-gradient(
            circle at 35% 30%,
            rgba(255,255,255,0.2),
            transparent 22%
        ),

        linear-gradient(
            135deg,
            rgba(255,59,157,0.55),
            rgba(124,58,237,0.42),
            rgba(34,184,255,0.35)
        );

    box-shadow:
        0 0 100px
        rgba(124,58,237,0.3);

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

}


@keyframes pulse {

    50% {

        transform:
            scale(1.06)
            rotate(4deg);

    }

}


/* =========================================
   FLOATING CARDS
========================================= */

.float-card {

    position: absolute;

    padding: 18px 20px;

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

    border-radius: 18px;

    background:
        rgba(12, 15, 29, 0.78);

    backdrop-filter: blur(15px);

    box-shadow:
        0 25px 70px rgba(0,0,0,0.35);

    display: flex;

    align-items: center;

    gap: 13px;

    animation:
        cardfloat 6s ease-in-out infinite;

}


.float-card i {
    font-size: 28px;
}


.float-card strong {

    display: block;

    font-size: 14px;

}


.float-card small {

    color: #9298aa;

}


.fc1 {

    right: 12%;
    top: 35px;

}


.fc2 {

    left: 8%;
    top: 190px;

    animation-delay: -2s;

}


.fc3 {

    right: 0;
    bottom: 45px;

    animation-delay: -4s;

}


@keyframes cardfloat {

    50% {

        transform:
            translateY(-14px);

    }

}


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

.section {
    padding: 100px 0;
}


.section-head {

    text-align: center;

    margin-bottom: 55px;

}


.section-head .mini {

    color: #c7cbd8;

    font-size: 13px;

    letter-spacing: 2px;

    text-transform: uppercase;

}


.section-head h2 {

    font-size:
        clamp(34px, 4vw, 54px);

    font-weight: 800;

    margin: 10px 0;

}


.section-head p {

    color: var(--muted);

    margin: auto;

    max-width: 620px;

}


/* =========================================
   OFFER CARDS
========================================= */

.offer-card {

    height: 100%;

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

    border-radius: 28px;

    background:
        rgba(255,255,255,0.035);

    overflow: hidden;

    position: relative;

    transition: 0.4s;

    box-shadow:
        0 25px 80px rgba(0,0,0,0.2);

}


.offer-card:hover {

    transform: translateY(-10px);

    border-color:
        rgba(255,255,255,0.2);

}


.offer-top {

    padding:
        30px 30px 22px;

    position: relative;

    min-height: 205px;

}


.offer-body {

    padding:
        25px 30px 30px;

}


.offer-icon {

    width: 66px;
    height: 66px;

    border-radius: 19px;

    display: grid;

    place-items: center;

    font-size: 28px;

    margin-bottom: 20px;

}


.fb .offer-icon {

    background:
        linear-gradient(
            135deg,
            #1877f2,
            #7c3aed
        );

    box-shadow:
        0 12px 35px
        rgba(24,119,242,0.25);

}


.pages .offer-icon {

    background:
        linear-gradient(
            135deg,
            #ff3b9d,
            #ff8a3d
        );

}


.meta .offer-icon {

    background:
        linear-gradient(
            135deg,
            #22b8ff,
            #7c3aed
        );

}


.tiktok .offer-icon {

    background:
        linear-gradient(
            135deg,
            #00f2ea,
            #ff0050
        );

}


.badge {

    display: inline-block;

    padding: 6px 10px;

    border-radius: 999px;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;

    background:
        rgba(255,255,255,0.1);

    color: #fff;

    margin-bottom: 15px;

}


.offer-card h3 {

    font-size: 25px;

    font-weight: 750;

    margin: 0;

}


.offer-card p,
.offer-card li {

    color: #b4b9ca;

    line-height: 1.8;

    font-size: 14px;

}


.offer-card ul {

    padding-left: 19px;

    margin:
        18px 0 25px;

}


/* =========================================
   PRICES
========================================= */

.price {

    display: flex;

    align-items: end;

    gap: 10px;

    margin: 20px 0;

}


.old {

    text-decoration: line-through;

    color: #72788b;

    font-size: 15px;

}


.new {

    font-size: 31px;

    font-weight: 800;

}


.save {

    display: inline-block;

    color: #9be7ff;

    font-size: 12px;

    font-weight: 700;

    margin-left: 7px;

}


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

.offer-btn {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 9px;

    width: 100%;

    padding: 14px;

    border-radius: 13px;

    color: #fff;

    text-decoration: none;

    font-weight: 700;

    transition: 0.3s;

}


.fb .offer-btn {

    background:
        linear-gradient(
            100deg,
            #1877f2,
            #7c3aed
        );

}


.pages .offer-btn {

    background:
        linear-gradient(
            100deg,
            #ff3b9d,
            #ff7a45
        );

}


.meta .offer-btn {

    background:
        linear-gradient(
            100deg,
            #22b8ff,
            #7c3aed
        );

}


.tiktok .offer-btn {

    background:
        linear-gradient(
            100deg,
            #00b8b2,
            #ff0050
        );

}


.offer-btn:hover {

    color: #fff;

    filter: brightness(1.1);

    transform: translateY(-2px);

}


/* =========================================
   FACEBOOK PAGES
========================================= */

.pages .follower-box {

    margin:
        15px 0 20px;

    padding: 22px;

    border-radius: 20px;

    background:

        linear-gradient(
            135deg,
            rgba(255,59,157,0.13),
            rgba(255,138,61,0.08)
        );

    border:
        1px solid rgba(255,59,157,0.18);

}


.follower-box strong {

    font-size: 28px;

    display: block;

}


.follower-box span {

    font-size: 12px;

    color: #aeb4c5;

}


/* =========================================
   META DASHBOARD
========================================= */

.meta .dashboard {

    margin:
        12px 0 22px;

    padding: 16px;

    border-radius: 18px;

    background: #0a0d19;

    border:
        1px solid rgba(34,184,255,0.2);

}


.dash-row {

    height: 8px;

    border-radius: 10px;

    background: #202536;

    margin: 9px 0;

}


.dash-row:nth-child(1) {

    width: 88%;

    background:
        linear-gradient(
            90deg,
            #22b8ff,
            #7c3aed
        );

}


.dash-row:nth-child(2) {

    width: 62%;

    background:
        linear-gradient(
            90deg,
            #7c3aed,
            #ff3b9d
        );

}


.dash-row:nth-child(3) {

    width: 74%;

    background:
        linear-gradient(
            90deg,
            #ff3b9d,
            #22b8ff
        );

}


/* =========================================
   TIKTOK
========================================= */

.tiktok .neon-line {

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #00f2ea,
            #ff0050,
            transparent
        );

    margin:
        0 0 22px;

    box-shadow:
        0 0 15px #00f2ea;

}


.tiktok .three {

    display: inline-flex;

    gap: 7px;

    padding: 7px 11px;

    border-radius: 10px;

    background:
        rgba(0,242,234,0.08);

    color: #aafefa;

    font-size: 11px;

    font-weight: 700;

    margin-bottom: 8px;

}


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

.cta-section {

    padding:
        40px 0 100px;

}


.cta-box {

    padding:
        65px 30px;

    text-align: center;

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

    border-radius: 30px;

    background:

        radial-gradient(
            circle at 50% 0,
            rgba(255,59,157,0.16),
            transparent 45%
        ),

        linear-gradient(
            135deg,
            rgba(124,58,237,0.1),
            rgba(34,184,255,0.06)
        );

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

}


.cta-box h2 {

    font-size:
        clamp(32px,4vw,52px);

    font-weight: 800;

}


.cta-box p {

    color: var(--muted);

    margin:
        12px auto 28px;

}


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

.features {

    padding:
        0 0 100px;

}


.feature {

    height: 100%;

    padding: 26px;

    border-radius: 21px;

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

    background:
        rgba(255,255,255,0.03);

    transition: 0.3s;

}


.feature:hover {

    transform:
        translateY(-6px);

    background:
        rgba(255,255,255,0.055);

}


.feature i {

    font-size: 22px;

    margin-bottom: 16px;

    background:
        linear-gradient(
            90deg,
            var(--pink),
            var(--blue)
        );

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

}


.feature h5 {

    font-weight: 700;

}


.feature p {

    margin: 0;

    color: var(--muted);

    font-size: 13px;

}


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

.footer {

    padding: 45px 0;

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

    background: #05060d;

}


.footer-brand {

    font-size: 21px;

    font-weight: 800;

}


.footer p,
.footer a {

    color: #9298aa;

    font-size: 13px;

    text-decoration: none;

}


.footer a:hover {

    color: #fff;

}


.links {

    display: flex;

    gap: 20px;

    flex-wrap: wrap;

}


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

.mobile-toggle {

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

}


.mobile-toggle span {

    background: #fff !important;

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .visual {

        height: 360px;

        margin-top: 35px;

    }


    .orb {

        width: 250px;

        height: 250px;

        right: 22%;

    }


    .fc1 {
        right: 15%;
    }


    .fc2 {
        left: 8%;
    }


    .fc3 {
        right: 5%;
    }


    .navbar-collapse {

        padding: 15px 0;

    }


    .talk-btn {

        margin-top: 10px;

        display: inline-flex;

    }

}


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

@media (max-width: 575px) {

    .hero {

        min-height: auto;

        padding-top: 125px;

    }


    .visual {

        height: 310px;

    }


    .orb {

        width: 220px;

        height: 220px;

        right: 12%;

        top: 35px;

    }


    .float-card {

        padding:
            12px 14px;

    }


    .float-card i {

        font-size: 22px;

    }


    .fc1 {

        right: 0;

    }


    .fc2 {

        left: 0;

        top: 150px;

    }


    .fc3 {

        right: 2%;

        bottom: 10px;

    }


    .section {

        padding: 75px 0;

    }


    .offer-top,
    .offer-body {

        padding-left: 22px;

        padding-right: 22px;

    }


    .cta-box {

        padding:
            45px 20px;

    }

}


/* =========================================
   NAVBAR CENTER LINKS + RIGHT CTA
========================================= */

.navbar .container {
    position: relative;
    display: flex;
    align-items: center;
}

/* Logo */
.navbar-brand {
    flex: 0 0 auto;
}

/* Navbar content */
.navbar-collapse {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
    flex: 1;
}

/* Center navigation */
.navbar-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);

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

    margin: 0;
    padding: 0;
}

/* Nav links */
.navbar-center .nav-link {
    white-space: nowrap;
}

/* Let's Talk */
.navbar-cta {
    margin-left: auto;
    flex: 0 0 auto;
}

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

@media (max-width: 991px) {

    .navbar-collapse {
        display: block !important;
        padding-top: 20px;
    }

    .navbar-center {
        position: static;
        transform: none;

        flex-direction: column;

        width: 100%;
    }

    .navbar-center .nav-item {
        width: 100%;
        text-align: center;
    }

    .navbar-center .nav-link {
        padding: 10px 0;
    }

    .navbar-cta {
        display: flex;
        justify-content: center;
        margin-top: 10px;
    }

}

.portfolio-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  margin-top: 50px;
  flex-wrap: wrap;
}

.portfolio-btn {
  width: 310px;
  min-height: 58px;

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

  padding: 0 14px 0 26px;

  text-decoration: none;
  color: white;

  background: linear-gradient(
    90deg,
    #7439d8 0%,
    #a942d4 55%,
    #e63375 100%
  );

  border-radius: 50px;

  font-size: 17px;
  font-weight: 600;

  transition: 0.3s ease;

  box-shadow: 0 10px 25px rgba(159, 59, 211, 0.25);
}

.portfolio-btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(230, 51, 117, 0.4);
}

.btn-text {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-icon {
  font-size: 20px;
}

.facebook-icon {
  width: 26px;
  height: 26px;

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

  background: white;
  color: #8b3fd1;

  border-radius: 50%;

  font-family: Arial, sans-serif;
  font-size: 22px;
  font-weight: bold;
}

.arrow-icon {
  width: 34px;
  height: 34px;

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

  background: rgba(255, 255, 255, 0.18);

  border-radius: 50%;

  font-size: 20px;

  transition: 0.3s ease;
}

.portfolio-btn:hover .arrow-icon {
  transform: rotate(45deg);
  background: rgba(255, 255, 255, 0.3);
}


/* Mobile */
@media (max-width: 768px) {

  .portfolio-buttons {
    flex-direction: column;
    gap: 16px;
  }

  .portfolio-btn {
    width: 100%;
    max-width: 310px;
  }

}

.arabic-card {
    font-family: 'Cairo', sans-serif;
    text-align: right;
}

.arabic-card h3,
.arabic-card h4,
.arabic-card h5,
.arabic-card p,
.arabic-card li,
.arabic-card .price,
.arabic-card .offer-btn {
    font-family: 'Cairo', sans-serif;
}

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

.features-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.features-list li i {
    font-size: 14px;
    flex-shrink: 0;
}

.special-offer {
    margin: 30px 0 20px;
    padding: 20px;
    position: relative;
    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;

    background: linear-gradient(
        135deg,
        rgba(116, 57, 216, 0.18),
        rgba(230, 51, 117, 0.18)
    );

    text-align: center;
}

.offer-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 8px 16px;
    margin-bottom: 15px;

    border-radius: 50px;

    background: linear-gradient(
        90deg,
        #7439d8,
        #e63375
    );

    color: #fff;

    font-family: 'Cairo', sans-serif;
    font-size: 13px;
    font-weight: 700;
}

.offer-label i {
    font-size: 12px;
}

.offer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.offer-title {
    color: #fff;
    font-family: 'Cairo', sans-serif;
    font-size: 17px;
    font-weight: 700;
}

.special-offer .price {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 5px;
}

.special-offer .old {
    color: #999;
    font-size: 15px;
    text-decoration: line-through;
}

.special-offer .new {
    color: #fff;
    font-family: 'Cairo', sans-serif;
    font-size: 28px;
    font-weight: 800;
}

.discount-badge {
    padding: 5px 10px;

    border-radius: 8px;

    background: rgba(255, 255, 255, 0.1);

    color: #ffcf4a;

    font-family: 'Cairo', sans-serif;
    font-size: 12px;
    font-weight: 700;
}



.service-note {
    margin: 18px 0;
    padding: 12px 15px;

    border-right: 3px solid #a942d4;

    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;

    color: #bdbdbd;

    font-family: 'Cairo', sans-serif;
    font-size: 13px;
    line-height: 1.8;
}

.service-note i {
    margin-left: 6px;
    color: #c45cff;
}


@media (max-width: 991.98px) {

    .mobile-toggle {
        width: 58px !important;
        height: 58px !important;

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

        padding: 0 !important;
        margin-left: auto !important;

        background: #171522 !important;

        border: 1px solid rgba(255, 255, 255, 0.16) !important;
        border-radius: 18px !important;

        outline: none !important;
        box-shadow: none !important;

        position: fixed !important;
        top: 18px !important;
        right: 20px !important;

        z-index: 10002 !important;
    }


    /* الثلاث خطوط */

    .hamburger {
        width: 26px;
        height: 20px;

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

        position: relative;
    }

    .hamburger span {
        width: 26px;
        height: 2px;

        display: block;

        background: #ffffff;
        border-radius: 10px;

        transition: 
            transform 0.3s ease,
            opacity 0.2s ease;
    }


    /* لما القائمة تفتح */

    .mobile-toggle[aria-expanded="true"] 
    .hamburger span:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }

    .mobile-toggle[aria-expanded="true"] 
    .hamburger span:nth-child(2) {
        opacity: 0;
    }

    .mobile-toggle[aria-expanded="true"] 
    .hamburger span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }

}



.hero-logo-image {
    width: 100%;
    max-width: 520px;
    height: auto;
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 0 25px rgba(139, 92, 246, 0.35));
}



/* =========================================
   VERIFICATION REQUIREMENTS CARDS
========================================= */

.verification-block {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 24px;
    padding: 35px;
    margin-top: 30px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

.business-verification {
    margin-top: 25px;
}

.verification-title {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 30px;
}

.verification-icon {
    width: 58px;
    height: 58px;
    min-width: 58px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #7b61ff, #4f46e5);
    color: #fff;
    font-size: 24px;
}

.verification-title h3 {
    margin: 0 0 6px;
    font-size: 25px;
    font-weight: 800;
}

.verification-title p {
    margin: 0;
    opacity: 0.65;
    font-size: 14px;
}

.requirements-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.requirement-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 20px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.07);
}

.requirement-number {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    background: rgba(123, 97, 255, 0.15);
    color: #9b8cff;
}

.requirement-content h5 {
    margin: 0 0 7px;
    font-size: 17px;
    font-weight: 700;
}

.requirement-content p {
    margin: 0;
    line-height: 1.8;
    opacity: 0.72;
    font-size: 14px;
}

.verification-duration {
    margin-top: 25px;
    padding: 18px 20px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(123, 97, 255, 0.08);
    border: 1px solid rgba(123, 97, 255, 0.18);
}

.verification-duration > i {
    font-size: 22px;
    color: #9b8cff;
}

.verification-duration span {
    display: block;
    font-size: 13px;
    opacity: 0.6;
    margin-bottom: 4px;
}

.verification-duration strong {
    display: block;
    font-size: 16px;
    font-weight: 800;
}

@media (max-width: 576px) {

    .verification-block {
        padding: 22px;
        border-radius: 18px;
    }

    .verification-title h3 {
        font-size: 20px;
    }

    .verification-title p {
        font-size: 12px;
    }

    .requirement-item {
        padding: 16px;
        gap: 12px;
    }

    .requirement-number {
        width: 36px;
        height: 36px;
        min-width: 36px;
    }

}



.pricing-buttons {
  display: flex;
  flex-direction: column;
  gap: 20px;
}


.pricing-card .pricing-content {
  padding-top: 25px;
  padding-bottom: 25px;
}

.pricing-card .pricing-content h3 {
  margin-bottom: 18px;
}

.pricing-card .pricing-content .service-details {
  margin: 10px 0;
  line-height: 1.6;
}

.pricing-card .pricing-content .price {
  margin: 18px 0;
}

.pricing-card .pricing-buttons {
  margin-top: 20px;
}



.details-btn {
  background: #ffffff !important;
  color: #7b3ff2 !important;
  border: 2px solid #7b3ff2 !important;
}

.details-btn:hover {
  background: #7b3ff2 !important;
  color: #ffffff !important;
}

.map-location {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  padding: 30px;
  text-align: center;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: 0.3s ease;
}

.map-location:hover {
  transform: translateY(-3px);
}

.map-icon {
  font-size: 40px;
  margin-bottom: 15px;
}

.map-location p {
  margin: 0 0 8px;
  color: #74788c;
  font-size: 18px;
}

.map-location span {
  color: #74788c;
  font-size: 16px;
}





.hero-btns {
  position: relative;
  z-index: 9999;
  pointer-events: auto;
}

.hero-btns a {
  position: relative;
  z-index: 10000;
  pointer-events: auto !important;
  cursor: pointer;
}

.hero-btns a {
  z-index: 99999 !important;
}





/* ===== FIX HERO BUTTONS DESKTOP ===== */

.hero-btns {
    position: relative !important;
    z-index: 999999 !important;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.hero-btns a {
    position: relative !important;
    z-index: 999999 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Don't let decorative hero layers block clicks */
.hero-skyline,
.hero-gradient-overlay,
.floating-shape,
.hero-orb,
.scroll-indicator {
    pointer-events: none !important;
}


/* ========================================
   ALL PRICING CARDS - BUTTON ALIGNMENT
   ======================================== */

.pricing-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

.pricing-content {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}

/* Push buttons to the bottom */
.pricing-buttons {
  margin-top: auto !important;
  padding-top: 25px !important;

  display: flex !important;
  flex-direction: column !important;
  gap: 15px !important;

  width: 100% !important;
}

/* Cards that don't have .pricing-buttons */
.pricing-content > .pricing-btn {
  margin-top: auto !important;
}

/* All pricing buttons */
.pricing-btn {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Second button */
.pricing-buttons .details-btn {
  margin-top: 0 !important;
}