/* Base */
*{box-sizing:border-box}
html,body{height:100%}

/* ✅ GLOBAL CANVAS BACKGROUND (fixed layer) */
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#f6f7ff;
  line-height:1.6;
  background:#05060f; /* fallback */
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;

  background:
    radial-gradient(1400px 900px at 12% 18%, rgba(236,72,153,0.18), transparent 60%),
    radial-gradient(1200px 800px at 88% 28%, rgba(99,102,241,0.22), transparent 65%),
    radial-gradient(1000px 700px at 50% 85%, rgba(56,189,248,0.12), transparent 70%),
    linear-gradient(180deg, #05060f 0%, #070814 45%, #090a1a 100%);
}

/* make all sections transparent so no “blocks” appear */
section{background:transparent !important}

a{color:inherit}
.container{width:min(1180px,92%);margin-inline:auto}

/* Header */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:rgba(7,8,20,.72);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo-brand{font-weight:900;letter-spacing:-.02em;font-size:1.12rem}
.logo-badge{
  font-size:.92rem;font-weight:750;opacity:.9;
  padding:7px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
}
.nav{display:flex;align-items:center;gap:18px}
.nav-link{
  text-decoration:none;
  color:rgba(246,247,255,.9);
  font-weight:750;font-size:.98rem;
  padding:10px 10px;border-radius:12px;
  border:1px solid transparent;
  transition:.15s ease;
}
.nav-link:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.10)}
.nav-toggle{
  display:none;
  width:44px;height:44px;border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  cursor:pointer;
}
.nav-toggle span{display:block;width:18px;height:2px;margin:5px auto;border-radius:2px;background:rgba(246,247,255,.9)}
.mobile-nav{background:rgba(7,8,20,.92);border-top:1px solid rgba(255,255,255,.08)}
.mobile-nav-inner{display:grid;gap:8px;padding:12px 0 16px}
.m-link{
  text-decoration:none;
  font-weight:800;
  padding:12px 12px;border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
}
.m-link:hover{background:rgba(255,255,255,.07)}
@media (max-width:860px){
  .nav{display:none}
  .nav-toggle{display:inline-block}
}

/* Hero */
.hero{
  position: relative;
  padding: clamp(40px, 6vw, 90px) 0;
  overflow: hidden;
  isolation: isolate;
  background: transparent;
}

.hero-bg{
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
}
.orb{position:absolute;border-radius:999px;filter: blur(28px);opacity:.65}
.o1{width:360px;height:360px;left:-90px;top:70px;background:rgba(99,102,241,.55)}
.o2{width:460px;height:460px;right:-140px;top:120px;background:rgba(236,72,153,.45)}

.hero-grid{
  display:grid;
  grid-template-columns: 1.2fr .9fr;
  gap: clamp(18px, 3vw, 44px);
  align-items:start;
}

.kicker{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:rgba(246,247,255,.92);
  font-weight:800;
  font-size:.95rem;
}
.pulse{
  width:10px;height:10px;border-radius:999px;
  background:rgba(236,72,153,.95);
  box-shadow: 0 0 0 6px rgba(236,72,153,.16);
}

.hero-title{
  margin: 14px 0 10px;
  font-weight: 950;
  letter-spacing: -0.03em;
  line-height: 1.07;
  font-size: clamp(30px, 3.9vw, 58px);
}
.grad{
  background: linear-gradient(90deg, rgba(99,102,241,1), rgba(236,72,153,1));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.hero-sub{margin:0 0 14px;max-width:62ch;color:rgba(246,247,255,.84);font-size:1.06rem}

.hero-badges{
  display:flex;flex-wrap:wrap;gap:10px;
  margin: 8px 0 18px;
}
.pill{
  display:inline-flex;align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(7,8,20,.22);
  color: rgba(246,247,255,.88);
  font-weight: 800;
  font-size: .92rem;
}

.hero-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin: 10px 0 14px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:10px;
  padding: 12px 16px;
  border-radius: 14px;
  text-decoration:none;
  font-weight: 900;
  border: 1px solid transparent;
  transition: transform .15s ease, opacity .15s ease, background .15s ease, border-color .15s ease;
  user-select:none;
}
.btn:active{transform: translateY(1px)}
.btn.primary{background:linear-gradient(90deg, rgba(99,102,241,1), rgba(236,72,153,1)); color:#070814}
.btn.primary:hover{opacity:.92}
.btn.ghost{background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.12)}
.btn.ghost:hover{border-color:rgba(236,72,153,.35)}
.btn.link{background:transparent;border-color:transparent;padding-inline:10px;color:rgba(246,247,255,.9)}
.btn.link:hover{text-decoration:underline}
.btn.full{width:100%}

.trust{
  list-style:none; padding:0; margin: 0 0 14px;
  display:flex; flex-wrap:wrap; gap: 10px 12px;
  color: rgba(246,247,255,.84);
}
.trust li{
  display:inline-flex;align-items:center;gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  font-weight:800;
  font-size:.95rem;
}
.t{
  width:18px;height:18px;border-radius:7px;
  display:inline-grid;place-items:center;
  background:rgba(99,102,241,.18);
  border:1px solid rgba(99,102,241,.35);
  font-weight:900;
}

.notice{margin:0;color:rgba(246,247,255,.70);font-size:.95rem}

/* Card */
.hero-card{
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  overflow:hidden;
}
.card-top{padding:18px 18px 10px;border-bottom:1px solid rgba(255,255,255,.10)}
.card-top h2{margin:0 0 6px;font-size:1.15rem;letter-spacing:-.01em}
.card-top p{margin:0;color:rgba(246,247,255,.78)}
.card-form{padding:14px 18px 18px;display:flex;flex-direction:column;gap:10px}

@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr}
}
@media (max-width: 560px){
  .row{grid-template-columns:1fr}
}

/* placeholders */
.placeholder{
  padding:60px 0;
  position:relative;
}
.placeholder::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
}
.placeholder h2{margin:0}

/* =========================
   Hero right card: steps
   ========================= */
.steps{display:flex;flex-direction:column;gap:12px;margin-top:2px}
.step{
  display:flex;gap:12px;align-items:flex-start;
  padding:12px 12px;border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(7,8,20,.20);
}
.step-dot{
  width:28px;height:28px;border-radius:10px;
  display:grid;place-items:center;
  font-weight:950;
  background: rgba(236,72,153,.14);
  border:1px solid rgba(236,72,153,.30);
  color: rgba(246,247,255,.92);
  flex:0 0 auto;
}
.step-title{font-weight:950;letter-spacing:-.01em;margin:0 0 2px}
.step-text{color:rgba(246,247,255,.76);font-weight:700;font-size:.95rem;line-height:1.45}
.card-cta{margin-top:12px;display:flex;flex-direction:column;gap:10px}

/* =========================
   Reels – SIMPLE & STABLE
   (TOP PLAY / PAUSE BUTTON)
   ========================= */
.reels{
  padding: clamp(26px, 4vw, 54px) 0;
}

.reels .container{
  position:relative;
}

.section-head h2{
  margin: 0 0 14px;
  font-size: clamp(24px, 2.6vw, 36px);
  font-weight: 950;
  letter-spacing: -0.03em;
  line-height: 1.15;

  background: linear-gradient(
    90deg,
    rgba(236,72,153,1),
    rgba(99,102,241,1)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.section-head p{
  margin:0;
  color:rgba(246,247,255,.75);
  font-weight:650;
}

/* Scrollable strip (works on desktop + mobile) */
.reels-grid{
  margin-top:16px;
  display:flex;
  gap:14px;

  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;

  scroll-snap-type:x mandatory;
  scrollbar-width:none;

  padding: 6px 14px 14px; /* left spacing + shadow breathing room */
  margin-left: -14px;     /* align with container edge */
  margin-right: -14px;
}
.reels-grid::-webkit-scrollbar{ display:none; }

/* Desktop: show 3 cards */
.reel{
  flex: 0 0 calc((100% - 28px) / 3); /* 3 cards, 2 gaps */
  scroll-snap-align:start;

  position:relative; /* REQUIRED for top button */
  border-radius:20px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
}

/* Tablet/Mobile: 1 card + peek */
@media (max-width: 980px){
  .reel{ flex-basis: 82%; }
}
@media (max-width: 560px){
  .reel{ flex-basis: 88%; }
}

/* Video */
.reel-video{
  width:100%;
  height:auto;
  aspect-ratio: 500 / 850;
  display:block;
  object-fit: cover;
  background: rgba(7,8,20,.45);
}

/* =========================
   TOP PLAY / PAUSE BUTTON
   ========================= */
.reel-btn{
  position:absolute;
  top:10px;
  right:10px;
  z-index:5;

  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  cursor:pointer;

  background: rgba(7,8,20,.78);
  backdrop-filter: blur(8px);

  color: rgba(246,247,255,.95);
  font-weight: 900;
  font-size:.9rem;
  letter-spacing:-.01em;

  transition: background .15s ease, transform .15s ease;
}
.reel-btn:hover{
  background: linear-gradient(90deg, rgba(99,102,241,1), rgba(236,72,153,1));
  color:#070814;
}
.reel-btn:active{
  transform: scale(.96);
}

/* Meta (below video) */
.reel-meta{
  padding: 10px 12px 14px;
}
.reel-title{
  font-weight:950;
  letter-spacing:-.01em;
}
.reel-tags{
  margin-top:2px;
  color:rgba(246,247,255,.72);
  font-weight:700;
  font-size:.92rem;
}

/* ✅ Remove old overlay system so it cannot interfere */
.reel-center,
.reel-icon{
  display:none !important;
}

/* =========================
   Content Block (Reusable / SEO)
   ========================= */
.content-block{
  padding: clamp(28px, 4.5vw, 66px) 0;
}

.content-wrap{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius: 22px;
  box-shadow: 0 18px 60px rgba(0,0,0,.22);
  padding: clamp(18px, 2.6vw, 34px);
}

/* Headings */
.content-wrap h2{
  margin: 0 0 12px;
  font-size: clamp(22px, 2.4vw, 34px);
  letter-spacing: -.02em;
  line-height: 1.15;
  font-weight: 950;
}

.content-wrap h3{
  margin: 22px 0 10px;
  font-size: clamp(16px, 1.6vw, 21px);
  letter-spacing: -.01em;
  line-height: 1.25;
  color: rgba(246,247,255,.95);
  font-weight: 900;
}

/* Paragraphs */
.content-wrap p{
  margin: 0 0 14px;
  max-width: 78ch;
  color: rgba(246,247,255,.82);
  font-weight: 650;
  line-height: 1.7;
}

/* Strong emphasis */
.content-wrap strong{
  color: rgba(246,247,255,.95);
  font-weight: 900;
}

/* =========================
   Strong emphasis – Normal content sections
   ========================= */
.content-block .container strong{
  color: #3BEBC0;   /* accent color (different from content-wrap) */
  font-weight: 900;
  font-size: 1.04em;             /* slightly larger, SEO-safe */
  letter-spacing: -0.01em;
}

/* Inline links */
.content-wrap a{
  color: rgba(246,247,255,.92);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
.content-wrap a:hover{
  opacity: .92;
}

/* Divider (SEO scannability helper) */
.content-wrap .divider{
  margin: 28px 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.12),
    transparent
  );
}

/* Highlight / Callout */
.content-wrap .callout{
  margin: 16px 0 12px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(236,72,153,.22);
  background: rgba(236,72,153,.10);
  color: rgba(246,247,255,.86);
  font-weight: 700;
  line-height: 1.6;
}

/* Lists (if needed later) */
.content-wrap ul{
  margin: 10px 0 18px 18px;
  padding: 0;
}
.content-wrap li{
  margin-bottom: 8px;
  color: rgba(246,247,255,.82);
  font-weight: 650;
}

/* Internal link buttons */
.content-links{
  margin-top: 14px;
  display:flex;
  flex-wrap:wrap;
  gap: 10px 14px;
}

/* =========================
   H2 – Primary content headings
   ========================= */
.content-block .container h2{
  margin: 0 0 14px;
  font-size: clamp(24px, 2.6vw, 36px);
  font-weight: 950;
  letter-spacing: -0.03em;
  line-height: 1.15;

  background: linear-gradient(
    90deg,
    rgba(236,72,153,1),
    rgba(99,102,241,1)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* =========================
   H3 – Secondary content headings
   ========================= */
.content-block .container h3{
  margin: 18px 0 10px;
  font-size: clamp(17px, 1.7vw, 22px);
  font-weight: 900;
  letter-spacing: -0.015em;
  line-height: 1.25;

  color: #FCBC19;
}


.text-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(7,8,20,.22);
  text-decoration: none !important;
  font-weight: 900;
  color: rgba(246,247,255,.92);
}
.text-link:hover{
  border-color: rgba(236,72,153,.28);
}

/* =========================
   Internal Links – Content Block
   (No wrapper dependency)
   ========================= */

.content-block .container a{
  position: relative;
  color: rgba(236,72,153,.95);      /* highlighted but classy */
  font-weight: 800;
  font-size: 1.02em;                /* subtle emphasis */
  text-decoration: none;            /* remove default underline */
  padding-bottom: 2px;
  transition:
    color .18s ease,
    opacity .18s ease;
}

/* Custom animated underline */
.content-block .container a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:2px;
  background: linear-gradient(
    90deg,
    rgba(236,72,153,.85),
    rgba(99,102,241,.85)
  );
  transform: scaleX(.25);
  transform-origin: left;
  transition: transform .22s ease;
  border-radius: 2px;
}

/* Hover / focus */
.content-block .container a:hover,
.content-block .container a:focus-visible{
  color: rgba(99,102,241,.95);
}

.content-block .container a:hover::after,
.content-block .container a:focus-visible::after{
  transform: scaleX(1);
}

/* Active click feedback */
.content-block .container a:active{
  opacity: .85;
}


/* Mobile tuning */
@media (max-width: 560px){
  .content-wrap{
    padding: 16px;
    border-radius: 18px;
  }
  .content-links{
    flex-direction: column;
  }
  .text-link{
    width: 100%;
    justify-content: center;
  }
}

/* =========================
   Profiles (Phase 1)
   ========================= */
.profiles{
  padding: clamp(28px, 4.5vw, 70px) 0;
}

/* ✅ Support BOTH class names:
   - your old: .profiles-grid
   - my earlier HTML: .p-grid
*/
.profiles-grid,
.p-grid{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.p-card{
  border-radius: 22px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.p-card:hover{
  transform: translateY(-2px);
  border-color: rgba(236,72,153,.26);
  background: rgba(255,255,255,.06);
}

.p-media{
  width:100%;
  aspect-ratio: 9/16;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;

  /* 👇 THIS removes “black bars” perception */
  background:
    linear-gradient(180deg,
      rgba(7,8,20,.55),
      rgba(7,8,20,.35)
    );
}


.p-media img{
  max-width:100%;
  max-height:100%;
  object-fit: fill;
  display:block;
  z-index:1;
}

.p-media::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(60% 100% at 50% 50%,
      transparent 55%,
      rgba(0,0,0,.35) 100%
    );
  z-index:2;
  pointer-events:none;
}


.p-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.25),
      transparent 30%,
      rgba(0,0,0,.35)
    );
  pointer-events:none;
}


.p-card:hover .p-media img{ transform: scale(1.04); }

/* subtle top sheen */
.p-media::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.35), transparent 40%, rgba(0,0,0,.35));
  pointer-events:none;
  opacity:.9;
}

.p-body{
  padding: 14px 14px 16px;
}

/* Optional header row (if you ever use it) */
.p-top{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.p-name{
  font-weight: 950;
  letter-spacing: -0.02em;
  font-size: 1.05rem;
  color: rgba(246,247,255,.95);
}
.p-age{
  font-weight: 900;
  opacity: .82;
  margin-left: 6px;
  font-size: .95rem;
}

.p-area{
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  font-weight: 900;
  font-size: .92rem;
  color: rgba(246,247,255,.90);
  padding: 8px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(7,8,20,.22);
  white-space:nowrap;
}
.p-area:hover{ border-color: rgba(236,72,153,.26); }

.p-desc{
  margin: 10px 0 12px;
  color: rgba(246,247,255,.82);
  font-weight: 650;
  line-height: 1.65;
  font-size: .95rem;
}

/* ✅ NEW: CTA buttons row (Call + WhatsApp) */
.p-cta{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}

/* If you're using the global .btn styles already, this will just “fit in”.
   If not, this ensures the buttons still look good inside cards. */
.p-cta .btn{
  width:100%;
  justify-content:center;
  padding: 12px 12px;
  border-radius: 14px;
}

/* Optional tags (if you use them later) */
.p-tags{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  margin-top: 10px;
}
.tag{
  display:inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(246,247,255,.86);
  font-weight: 850;
  font-size: .86rem;
}

/* Responsive */
@media (max-width: 1100px){
  .profiles-grid,
  .p-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px){
  .profiles-grid,
  .p-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .profiles-grid,
  .p-grid{ grid-template-columns: 1fr; }
  .p-body{ padding: 14px; }
  .p-cta{ grid-template-columns: 1fr; }
}

/* =========================
   Testimonials
   ========================= */
.testimonials{
  padding: clamp(28px, 4.5vw, 70px) 0;
}

.testimonials-grid{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.t-card{
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  box-shadow: 0 18px 60px rgba(0,0,0,.22);
  padding: 18px 18px 20px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.t-text{
  margin:0 0 14px;
  color: rgba(246,247,255,.84);
  font-weight: 650;
  line-height: 1.7;
  font-size: .96rem;
}

.t-text strong{
  color: rgba(246,247,255,.96);
  font-weight: 900;
}

.t-meta{
  font-size: .9rem;
  font-weight: 850;
  color: rgba(246,247,255,.65);
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.08);
}

/* Responsive */
@media (max-width: 1100px){
  .testimonials-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .testimonials-grid{ grid-template-columns: 1fr; }
  .t-card{ padding: 16px; }
}

/* =========================
   Keyword Tags Section
   ========================= */
.tags-section{
  padding: clamp(28px, 4.5vw, 70px) 0;
}

.tags-cloud{
  margin-top: 16px;
  display:flex;
  flex-wrap:wrap;
  gap: 10px 12px;
}

/* Base tag style */
.tag-item{
  display:inline-flex;
  align-items:center;
  padding: 5px 5px;
  border-radius: 10px;

  color:#ffffff;
  font-weight: 900;
  font-size: .92rem;
  letter-spacing: -.01em;
  text-decoration: none;

  border: none;
  white-space: nowrap;

  transition:
    transform .15s ease,
    box-shadow .15s ease,
    opacity .15s ease;
}

/* Hover (shared) */
.tag-item:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  opacity: .95;
}

/* =========================
   COLOR LOOP – 5 COLORS
   ========================= */

/* 1️⃣ RED */
.tag-item:nth-child(5n+1){
  background: linear-gradient(135deg, #ef4444, #dc2626);
}

/* 2️⃣ GREEN */
.tag-item:nth-child(5n+2){
  background: linear-gradient(135deg, #22c55e, #16a34a);
}

/* 3️⃣ ORANGE */
.tag-item:nth-child(5n+3){
  background: linear-gradient(135deg, #f97316, #ea580c);
}

/* 4️⃣ PURPLE */
.tag-item:nth-child(5n+4){
  background: linear-gradient(135deg, #a855f7, #7c3aed);
}

/* 5️⃣ BLUE */
.tag-item:nth-child(5n+5){
  background: linear-gradient(135deg, #3b82f6, #2563eb);
}


/* =========================
   Mobile optimization
   ========================= */
@media (max-width: 560px){
  .tag-item{
    font-size:.9rem;
    padding: 9px 12px;
  }
}


/* =========================
   Other Cities / Locations
   ========================= */
.cities-section{
  padding: clamp(28px, 4.5vw, 70px) 0;
}

.cities-grid{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}

/* Base button */
.city-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;

  padding: 5px 5px;
  border-radius: 10px;

  color:#ffffff;
  font-weight: 900;
  font-size: .92rem;
  letter-spacing: -.01em;
  text-decoration: none;
  white-space: nowrap;

  border: none;

  transition:
    transform .15s ease,
    box-shadow .15s ease,
    opacity .15s ease;
}

/* Hover (shared) */
.city-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  opacity: .95;
}

/* =========================
   COLOR LOOP (5 COLORS)
   Same system as tags
   ========================= */

/* 1️⃣ RED */
.city-btn:nth-child(5n+1){
  background: linear-gradient(135deg, #ef4444, #dc2626);
}

/* 2️⃣ GREEN */
.city-btn:nth-child(5n+2){
  background: linear-gradient(135deg, #22c55e, #16a34a);
}

/* 3️⃣ ORANGE */
.city-btn:nth-child(5n+3){
  background: linear-gradient(135deg, #f97316, #ea580c);
}

/* 4️⃣ PURPLE */
.city-btn:nth-child(5n+4){
  background: linear-gradient(135deg, #a855f7, #7c3aed);
}

/* 5️⃣ BLUE */
.city-btn:nth-child(5n+5){
  background: linear-gradient(135deg, #3b82f6, #2563eb);
}

/* =========================
   Responsive layout
   ========================= */
@media (max-width: 1100px){
  .cities-grid{ grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 860px){
  .cities-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px){
  .cities-grid{ grid-template-columns: repeat(2, 1fr); }
  .city-btn{ font-size:.9rem; padding: 11px 12px; }
}

/* =========================
   Footer – SEO Optimized
   ========================= */
.site-footer{
  padding: clamp(36px, 5vw, 80px) 0 26px;
  border-top: 1px solid rgba(255,255,255,.10);
}

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

.footer-col h4{
  margin: 0 0 10px;
  font-size: 1.05rem;
  font-weight: 950;
  letter-spacing: -.02em;
   background: linear-gradient(
    90deg,
    rgba(236,72,153,1),
    rgba(99,102,241,1)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.footer-col p{
  margin:0;
  font-size: .92rem;
  line-height: 1.65;
  color: rgba(246,247,255,.78);
  font-weight: 650;
}

.footer-links{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.footer-links a{
  text-decoration:none;
  font-size:.92rem;
  font-weight: 800;
  color: rgba(246,247,255,.85);
  transition: color .15s ease, transform .15s ease;
}

.footer-links a:hover{
  color: rgba(236,72,153,.95);
  transform: translateX(2px);
}

.footer-bottom{
  margin-top: 36px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.08);
  text-align:center;
}

.footer-bottom p{
  margin:0;
  font-size:.88rem;
  color: rgba(246,247,255,.70);
  font-weight: 650;
}

/* Responsive */
@media (max-width: 1100px){
  .footer-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .footer-grid{ grid-template-columns: 1fr; }
  .footer-bottom{ text-align:left; }
}

/* =========================
   Floating Icon Buttons
   ========================= */
.float-icon{
  position: fixed;
  bottom: 22px;
  z-index: 9999;

  width: 58px;
  height: 58px;
  border-radius: 50%;

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

  font-size: 26px;
  line-height: 1;
  text-decoration:none;

  color:#fff;
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.float-icon:hover{
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 18px 55px rgba(0,0,0,.55);
  opacity:.95;
}

/* Call – LEFT */
.float-call{
  left: 18px;
  background: linear-gradient(135deg, #ef4444, #dc2626);
}

/* WhatsApp – RIGHT */
.float-whatsapp{
  right: 18px;
  background: linear-gradient(135deg, #22c55e, #16a34a);
}

/* Mobile tweak */
@media (max-width: 560px){
  .float-icon{
    width: 52px;
    height: 52px;
    font-size: 24px;
  }
}

.section-divider{
  width: 100%;
  height: 1px;
  margin: clamp(10px, 6vw, 10px) 0;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(236,72,153,.35),
    rgba(99,102,241,.35),
    transparent
  );

  box-shadow: 0 0 22px rgba(236,72,153,.12);
}