/* =========================================================
   BARBIE DIGITAL MARKETING SERVICES — THEME
   Design tokens + components. Works on top of Bootstrap 5.
   ========================================================= */

:root{
  /* Colors */
  --pink-hot:   #FF3D8F;
  --pink-deep:  #D6006F;
  --blush:      #FFEDF4;
  --blush-2:    #FFF6FA;
  --white:      #FFFFFF;
  --ink:        #3A1530;
  --ink-soft:   #7A5566;

  /* Radius */
  --radius-lg:  28px;
  --radius-md:  20px;
  --radius-pill: 999px;
}

body{
  font-family: 'Inter', sans-serif;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .font-display{
  font-family: 'Baloo 2', sans-serif;
}

a{ text-decoration:none; }

/* =========================================================
   LOADING SCREEN
   ========================================================= */
.loading-screen{
  position: fixed; inset: 0; z-index: 9999;
  background: radial-gradient(circle at 50% 40%, var(--blush) 0%, var(--blush-2) 55%, #fff 100%);
  display:flex; align-items:center; justify-content:center;
  transition: opacity .6s ease, visibility .6s ease;
  opacity: 1; visibility: visible;
}
.loading-screen--hidden{ opacity: 0; visibility: hidden; pointer-events: none; }

.loading-content{ text-align:center; }
.loading-logo{
  height: 64px; width:auto;
  animation: loadingPulse 1.4s ease-in-out infinite;
  filter: drop-shadow(0 10px 20px rgba(214,0,111,.25));
}
@keyframes loadingPulse{
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.loading-bar-track{
  width: 160px; height: 5px; border-radius: var(--radius-pill);
  background: var(--blush); overflow:hidden;
  margin: 26px auto 16px;
}
.loading-bar-fill{
  height:100%; width: 40%; border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--pink-hot), var(--pink-deep));
  animation: loadingBar 1.1s ease-in-out infinite;
}
@keyframes loadingBar{
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

.loading-text{
  font-family:'Baloo 2'; font-weight:700; font-size:.8rem;
  letter-spacing:.12em; text-transform:uppercase; color: var(--ink);
  margin:0;
}
.loading-dots span{
  animation: loadingDots 1.4s infinite;
  opacity:0;
}
.loading-dots span:nth-child(1){ animation-delay: 0s; }
.loading-dots span:nth-child(2){ animation-delay: .2s; }
.loading-dots span:nth-child(3){ animation-delay: .4s; }
@keyframes loadingDots{
  0%, 100% { opacity:0; }
  50% { opacity:1; }
}

/* =========================================================
   SCROLL-REVEAL ANIMATIONS
   ========================================================= */
[data-reveal]{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
}
[data-reveal].in-view{
  opacity: 1;
  transform: translateY(0);
}
[data-reveal="fade"]{ transform: none; }
[data-reveal="zoom"]{ transform: scale(.92); }
[data-reveal="zoom"].in-view{ transform: scale(1); }
[data-reveal="left"]{ transform: translateX(-32px); }
[data-reveal="left"].in-view{ transform: translateX(0); }
[data-reveal="right"]{ transform: translateX(32px); }
[data-reveal="right"].in-view{ transform: translateX(0); }

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1; transform:none; transition:none; }
  .loading-logo, .loading-bar-fill, .loading-dots span{ animation:none; }
  .hero-card{ animation:none; transform: rotate(-3deg); }
  .float-badge, .blob-1, .blob-2{ animation:none; }
}

/* =========================================================
   BUBBLE / GLOSSY SIGNATURE ELEMENT
   Used on primary buttons, badges, icon circles.
   ========================================================= */
.bubble{
  background: linear-gradient(180deg, #FF6BAA 0%, var(--pink-hot) 55%, var(--pink-deep) 100%);
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,.55),
    inset 0 -6px 10px rgba(0,0,0,.12),
    0 10px 24px rgba(255,61,143,.35);
  color:#fff !important;
  border:none;
}
.bubble:hover{
  filter: brightness(1.05);
  color:#fff !important;
}
.bubble-outline{
  background:#fff;
  border:2px solid var(--pink-hot);
  color: var(--pink-deep) !important;
}
.bubble-outline:hover{
  background: var(--blush);
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn-barbie{
  padding: 12px 26px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: .95rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-barbie-sm{
  padding: 8px 18px;
  font-size: .85rem;
}

/* =========================================================
   NAVBAR — text wordmark + brand pink bubble CTA, hover/active states
   ========================================================= */
.navbar-barbie{
  padding: 18px 0;
  background: transparent;
  transition: background .3s ease, box-shadow .3s ease, padding .3s ease;
  position: sticky;
  top: 0;
  z-index: 100;
}
.navbar-barbie--scrolled{
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 20px rgba(58,21,48,.08);
  padding: 12px 0;
}
.brand-wordmark{
  font-family:'Baloo 2'; font-weight:800; font-size: 19px; color: var(--ink);
  letter-spacing: -.2px;
}
.brand-wordmark span{ color: var(--pink-hot); }

.navbar-barbie .nav-link{
  font-weight: 600;
  font-size: .9rem;
  color: var(--ink);
  opacity: .7;
  margin: 0 4px;
  padding: 8px 16px !important;
  border-radius: var(--radius-pill);
  transition: all .2s ease;
}
.navbar-barbie .nav-link:hover{
  opacity: 1;
  background: var(--blush);
  color: var(--pink-deep);
}
.navbar-barbie .nav-link.active{
  opacity: 1;
  background: var(--blush);
  color: var(--pink-deep);
  font-weight: 700;
}

/* Footer wordmark */
.footer-brand-text{
  font-family:'Baloo 2'; font-weight:700; font-size:17px; color: var(--ink);
}
.footer-brand-text span{ color: var(--pink-hot); }

/* Mobile: nav links stack vertically inside the collapse menu */
@media (max-width: 991.98px){
  .navbar-barbie .nav-link{
    display: block;
    text-align: center;
    margin-bottom: 6px;
    background: var(--blush-2);
  }
  .navbar-barbie .nav-link.active{ background: var(--blush); }
}

/* =========================================================
   HERO
   ========================================================= */
.hero-barbie{
  background: radial-gradient(circle at 85% 15%, var(--blush) 0%, var(--blush-2) 45%, #fff 75%);
  border-radius: 0 0 40px 40px;
  padding: 56px 0 40px;
  overflow: hidden;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.8rem; font-weight:700; padding:8px 18px;
  border-radius: var(--radius-pill); margin-bottom: 20px;
}
.hero-barbie h1{
  font-weight: 800;
  letter-spacing: -.5px;
  line-height: 1.1;
  color: var(--ink);
  font-size: 3.6rem;
}
.hero-barbie h1 em{ font-style:normal; color: var(--pink-hot); }
.hero-barbie p.lead{
  color: var(--ink-soft);
  font-size: 1.12rem;
  line-height: 1.65;
}
.stat-chip{
  background:#fff; border-radius: var(--radius-md);
  padding: 12px 16px; box-shadow: 0 8px 20px rgba(214,0,111,.08);
  min-width: 100px; text-align:left;
}
.stat-chip strong{
  display:block; font-family:'Baloo 2'; font-size: 1.4rem; color: var(--pink-deep);
}
.stat-chip span{ font-size:.78rem; color: var(--ink-soft); font-weight:600; }

.hero-visual{ position:relative; min-height: 360px; display:flex; align-items:center; justify-content:center; }
.blob{ position:absolute; border-radius:50%; }
.blob-1{
  width:280px; height:280px; background:linear-gradient(160deg,#FFC1DD,#FF7FB4); top:0; right:10px; opacity:.9;
  animation: blobDrift 7s ease-in-out infinite;
}
.blob-2{
  width:120px; height:120px; background: var(--pink-hot); bottom:0; left:0; opacity:.18;
  animation: blobDrift 8s ease-in-out infinite; animation-delay: 1s;
}
.hero-card{
  position:relative; width: 250px; background:#fff; border-radius:26px;
  box-shadow: 0 20px 45px rgba(214,0,111,.18); padding:20px; text-align:center;
  animation: cardFloat 4.5s ease-in-out infinite;
}
.hero-card .avatar{
  width:100%; height:150px; border-radius:18px;
  background: var(--blush-2);
  border: 1px solid rgba(255,61,143,.10);
  display:flex; align-items:center; justify-content:center;
  padding: 20px;
}
.hero-card .avatar img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.hero-card h4{ margin-top:14px; font-size:15.5px; }
.hero-card p{ font-size:12.5px; color: var(--ink-soft); margin:2px 0 0; font-weight:600; }
.float-badge{
  position:absolute; background:#fff; border-radius: var(--radius-pill);
  padding:10px 18px; font-size:.82rem; font-weight:600; color: var(--ink);
  box-shadow: 0 4px 18px rgba(58,21,48,.10);
  border: 1px solid rgba(255,61,143,.10);
  display:flex; align-items:center; gap:7px;
  backdrop-filter: blur(4px);
}
.float-badge i{ color: var(--pink-hot); font-size:.9rem; }
.float-badge.b1{ top:10px; left:-6px; animation: badgeFloat 3s ease-in-out infinite; }
.float-badge.b2{ bottom:24px; right:-8px; animation: badgeFloat 3.6s ease-in-out infinite; animation-delay:.7s; }

@keyframes cardFloat{
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50%      { transform: rotate(-1.5deg) translateY(-14px); }
}
@keyframes badgeFloat{
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
@keyframes blobDrift{
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-12px) scale(1.04); }
}

/* =========================================================
   SECTIONS
   ========================================================= */
.section-barbie{ padding: 72px 0; }
.section-head{ text-align:center; max-width:560px; margin:0 auto 44px; }
.section-eyebrow{
  font-size:.78rem; font-weight:700; color: var(--pink-deep);
  letter-spacing:.06em; text-transform:uppercase;
  background: var(--blush); display:inline-block; padding:6px 16px;
  border-radius: var(--radius-pill); margin-bottom:14px;
}
.section-head h2{ font-weight:800; color: var(--ink); }
.section-head p{ color: var(--ink-soft); margin-top:10px; }

/* =========================================================
   SERVICE CARDS — bento-style grid with featured variants
   ========================================================= */
.service-card{
  position: relative;
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1px solid rgba(255,61,143,.12);
  box-shadow: 0 8px 24px rgba(214,0,111,.09);
  transition: transform .25s ease, box-shadow .25s ease;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
}
.service-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 34px rgba(214,0,111,.16);
}
.service-tag{
  position: absolute;
  top: 24px; right: 28px;
  font-family: 'Baloo 2'; font-weight: 700; font-size: .95rem;
  color: var(--pink-hot); opacity: .55;
}
.service-icon{
  width: 56px; height: 56px; border-radius: 16px;
  display:flex; align-items:center; justify-content:center;
  font-size: 1.35rem; color:#fff; margin-bottom: 20px;
  box-shadow: 0 8px 18px rgba(214,0,111,.18);
}
.service-card h3{
  font-size: 1.15rem; font-weight: 700; color: var(--ink); margin-bottom: 8px;
}
.service-card .service-sub{
  font-size: .78rem; font-weight: 700; color: var(--pink-deep);
  text-transform: uppercase; letter-spacing: .04em; margin: -4px 0 10px;
}
.service-card p{
  color: var(--ink-soft); font-size: .92rem; line-height: 1.6; margin-bottom: 20px; flex-grow: 1;
}
.service-link{
  font-weight: 700; font-size: .85rem; color: var(--pink-deep);
  display: inline-flex; align-items: center; gap: 6px; width: fit-content;
}
.service-link i{ transition: transform .2s ease; }
.service-card:hover .service-link i{ transform: translate(2px,-2px); }

/* Featured (large) card — row 1, left */
.service-card--featured{
  background: var(--blush-2);
  border: 1px solid rgba(255,61,143,.14);
  padding: 40px;
}
.service-card--featured .service-icon{ width:64px; height:64px; font-size:1.6rem; }
.service-card--featured h3{ font-size: 1.5rem; }
.service-card--featured p{ font-size: 1rem; max-width: 460px; }

/* Accent card — row 1, right (solid brand color to stand out) */
.service-card--accent{
  background: linear-gradient(160deg, #FF4F97, var(--pink-deep));
}
.service-card--accent .service-tag{ color:#fff; opacity:.4; }
.service-card--accent .service-icon{
  background: rgba(255,255,255,.2) !important;
  box-shadow:none;
}
.service-card--accent h3,
.service-card--accent .service-sub{ color:#fff; }
.service-card--accent p{ color: rgba(255,255,255,.85); }
.service-card--accent .service-link{ color:#fff; }

/* =========================================================
   TRUST BAR
   ========================================================= */
.trust-bar{
  background: var(--ink);
  border-radius: 32px;
  padding: 40px 32px;
}
.trust-item{ color:#fff; text-align:center; }
.trust-item strong{ display:block; font-family:'Baloo 2'; font-size:1.95rem; color: var(--pink-hot); }
.trust-item span{ font-size:.78rem; color:#e7cdd9; font-weight:600; letter-spacing:.03em; }

/* =========================================================
   BRANDS WE WORK WITH
   ========================================================= */

/* Gradient stats strip — replaces plain white stat chips for more visual pop */
.stats-strip{
  background: #fff;
  border: 1px solid rgba(255,61,143,.12);
  border-radius: var(--radius-lg);
  padding: 30px 20px;
  box-shadow: 0 10px 26px rgba(214,0,111,.08);
}
.stats-strip-item{ text-align:center; color: var(--ink); }
.stats-strip-item strong{ display:block; font-family:'Baloo 2'; font-size:1.9rem; font-weight:800; color: var(--pink-hot); }
.stats-strip-item span{ font-size:.74rem; font-weight:600; color: var(--ink-soft); text-transform:uppercase; letter-spacing:.03em; }

.brand-card{
  position: relative;
  background:#fff; border:1px solid rgba(255,61,143,.10); border-radius: var(--radius-md);
  padding: 30px 20px 24px; text-align:center;
  box-shadow: 0 6px 18px rgba(214,0,111,.06);
  transition: transform .25s ease, box-shadow .25s ease;
  height:100%;
  overflow: hidden;
}
.brand-card::before{
  content:'';
  position:absolute; top:0; left:0; right:0; height:4px;
  background: linear-gradient(90deg, var(--pink-hot), var(--pink-deep));
}
.brand-card:hover{
  transform: translateY(-6px) rotate(-1deg);
  box-shadow: 0 16px 30px rgba(214,0,111,.15);
}
.brand-avatar{
  width:64px; height:64px; border-radius:50%; margin:0 auto 16px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.55rem; color:#fff;
  background: linear-gradient(160deg,#FF9FC7,#D6006F);
  box-shadow: 0 0 0 6px var(--blush), 0 8px 18px rgba(214,0,111,.25);
}
.brand-card h4{ font-family:'Baloo 2'; font-size:.98rem; font-weight:700; color:var(--ink); margin-bottom:8px; }
.brand-card .brand-badge{
  display:inline-block; font-size:.7rem; font-weight:700; color:var(--pink-deep);
  background: var(--blush); padding:4px 12px; border-radius: var(--radius-pill);
  text-transform:uppercase; letter-spacing:.02em;
}

/* =========================================================
   TESTIMONIALS
   ========================================================= */
.testimonial-card{
  background:#fff; border:1px solid rgba(255,61,143,.10); border-radius: var(--radius-lg);
  padding: 32px; height:100%;
  box-shadow: 0 8px 24px rgba(214,0,111,.07);
}
.testimonial-quote-icon{
  color: var(--pink-hot);
  opacity: .8;
  font-size:2.4rem;
  line-height:1;
  margin-bottom:8px;
  display:block;
}
.testimonial-card p.quote{ color:var(--ink); font-size:1rem; line-height:1.65; margin-bottom:22px; }
.testimonial-person{ display:flex; align-items:center; gap:12px; }
.testimonial-avatar{
  width:46px; height:46px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:'Baloo 2'; font-weight:700; font-size:.9rem; color:#fff;
  background: linear-gradient(160deg,#FF6BAA,var(--pink-deep));
}
.testimonial-person h5{ font-size:.92rem; font-weight:700; color:var(--ink); margin:0; }
.testimonial-person span{ font-size:.78rem; color:var(--ink-soft); font-weight:600; }

/* =========================================================
   PRICING
   ========================================================= */
.pricing-card{
  background:#fff; border:1px solid rgba(255,61,143,.10); border-radius: var(--radius-lg);
  padding: 34px 28px; height:100%; position:relative;
  box-shadow: 0 8px 24px rgba(214,0,111,.06);
  transition: transform .25s ease, box-shadow .25s ease;
}
.pricing-card:hover{ transform: translateY(-6px); }
.pricing-card--popular{
  background: linear-gradient(165deg,#FF4F97,var(--pink-deep));
  box-shadow: 0 16px 34px rgba(214,0,111,.24);
  transform: scale(1.03);
}
.pricing-badge{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background: var(--ink); color:#fff; font-size:.7rem; font-weight:700;
  padding:6px 16px; border-radius: var(--radius-pill); letter-spacing:.03em; text-transform:uppercase;
}
.pricing-range{ font-size:.85rem; font-weight:700; color:var(--pink-deep); margin-bottom:6px; }
.pricing-card--popular .pricing-range{ color:#ffe3f0; }
.pricing-price{ font-family:'Baloo 2'; font-size:2.1rem; font-weight:800; color:var(--ink); margin-bottom:18px; }
.pricing-price sup{ font-size:1rem; font-weight:700; }
.pricing-card--popular .pricing-price{ color:#fff; }
.pricing-features{ list-style:none; padding:0; margin:0 0 26px; }
.pricing-features li{
  font-size:.88rem; color:var(--ink-soft); padding:7px 0; display:flex; align-items:flex-start; gap:8px;
}
.pricing-features li i{ color: var(--pink-hot); margin-top:3px; flex-shrink:0; }
.pricing-card--popular .pricing-features li{ color: rgba(255,255,255,.9); }
.pricing-card--popular .pricing-features li i{ color:#fff; }
.pricing-card .btn-barbie{ width:100%; justify-content:center; }
.pricing-card--popular .btn-barbie{ background:#fff; color:var(--pink-deep) !important; }

/* =========================================================
   WHY CHOOSE US
   ========================================================= */
.why-card{
  background:#fff; border:1px solid rgba(255,61,143,.10); border-radius: var(--radius-lg);
  padding: 28px 26px; height:100%;
  box-shadow: 0 8px 22px rgba(214,0,111,.07);
  transition: transform .25s ease, box-shadow .25s ease;
}
.why-card:hover{
  transform: translateY(-5px);
  box-shadow: 0 16px 30px rgba(214,0,111,.14);
}
.why-icon{
  width:52px; height:52px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.25rem; color:#fff; margin-bottom:18px;
  background: linear-gradient(160deg,#FF9FC7,#FF3D8F);
  box-shadow: 0 8px 18px rgba(214,0,111,.18);
}
.why-card h4{ font-size:1.02rem; font-weight:700; color:var(--ink); margin-bottom:4px; }
.why-card .why-sub{ font-size:.82rem; font-weight:700; color:var(--pink-deep); margin-bottom:10px; }
.why-card p{ font-size:.88rem; color:var(--ink-soft); line-height:1.6; margin:0; }

/* =========================================================
   FAQ
   ========================================================= */
.faq-item{
  background: var(--blush-2); border-radius:16px; padding:16px 20px; margin-bottom:12px;
  display:flex; align-items:center; justify-content:space-between; cursor:pointer;
  font-weight:700; font-size:.95rem;
}
.faq-item i{ color: var(--pink-hot); }

/* =========================================================
   FOOTER
   ========================================================= */
.footer-barbie{
  background: var(--blush-2);
  padding: 40px 0 24px;
  text-align:center;
  color: var(--ink-soft);
  font-size:.85rem;
}

/* =========================================================
   RESPONSIVE — Mobile & Tablet adjustments
   Bootstrap breakpoints: sm 576 / md 768 / lg 992 / xl 1200
   ========================================================= */

/* ---------- TABLET (≤991.98px) ---------- */
@media (max-width: 991.98px){
  /* Vertical rhythm: tighten section spacing so the page doesn't feel
     like an endless scroll of huge gaps on smaller screens */
  .section-barbie{ padding: 52px 0; }
  .section-head{ margin-bottom: 34px; }
  .section-head p{ font-size: .92rem; }

  /* Hero */
  .hero-barbie{ padding-bottom: 36px; }
  .hero-barbie h1{ font-size: 2.5rem; }
  .hero-visual{ min-height: 280px; margin-top: 28px; }
  .stat-row{ row-gap: 12px !important; }

  /* Trust bar & stats strip: at md+ these show 4-across in one row (no
     wrap fix needed); padding trim applies at all sub-lg widths */
  .trust-bar{ padding: 32px 24px; }
  .stats-strip{ padding: 26px 20px; }

  /* Services bento: row1 cards stack full-width below lg, trim padding */
  .service-card--featured{ padding: 32px 28px; }
  .service-card--featured h3{ font-size: 1.3rem; }
  .service-card--accent{ padding: 32px 28px; }

  /* Pricing: stacks to 1 column below lg — the "popular" scale-up
     causes horizontal overflow when full-width, so neutralize it here
     (not just on phones) and use a badge instead to show emphasis */
  .pricing-card--popular{ transform: none; }
  .pricing-card{ margin-bottom: 4px; }

  /* Why Choose Us: 2-column on tablet, make sure cards don't feel squeezed */
  .why-card{ padding: 24px 22px; }
}

/* ---------- MOBILE (≤575.98px) ---------- */
@media (max-width: 575.98px){
  /* ----- Global section rhythm ----- */
  .section-barbie{ padding: 40px 0; }
  .section-head{ margin-bottom: 28px; }
  .section-head h2{ font-size: 1.7rem; }
  .section-eyebrow{ font-size: .7rem; padding: 5px 14px; }

  /* ----- Navbar ----- */
  .brand-wordmark{ font-size: 16px; }
  .navbar-collapse{ padding-top: 6px; }
  .navbar-barbie .nav-link{ margin-bottom: 4px; }

  /* ----- Buttons (site-wide) — slimmer on mobile, not just the hero ----- */
  .btn-barbie{
    padding: 12px 22px;
    font-size: .85rem;
    border-radius: 14px;
  }

  /* ----- Hero ----- */
  .hero-barbie{ padding: 32px 0 26px; border-radius: 0 0 24px 24px; }
  .hero-barbie h1{ font-size: 1.85rem; line-height: 1.18; }
  .hero-barbie p.lead{ font-size: .9rem; margin: 14px 0 20px; line-height: 1.55; }
  .eyebrow{ font-size: .68rem; padding: 6px 13px; }

  /* Buttons: side-by-side in one row on mobile, evenly sized */
  .hero-ctas{
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px !important;
    margin-bottom: 24px !important;
  }
  .hero-ctas .btn-barbie{
    width: auto;
    flex: 1 1 0;
    justify-content: center;
    padding: 12px 10px;
    font-size: .78rem;
    border-radius: 14px;
    white-space: nowrap;
  }
  .hero-ctas .bubble-outline{
    border-width: 1.5px;
    background: transparent;
  }

  /* Stat chips: 2x2 grid instead of a squeezed 4-in-a-row */
  .stat-row{
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px !important;
  }
  .stat-chip{ min-width: 0; padding: 12px 14px; text-align: left; }
  .stat-chip strong{ font-size: 1.15rem; }
  .stat-chip span{ font-size: .7rem; }

  .hero-card{ width: 190px; padding: 16px; }
  .float-badge{ font-size: .62rem; padding: 6px 10px; }
  .float-badge.b1{ top: 4px; left: -4px; }
  .float-badge.b2{ bottom: 16px; right: -4px; }

  /* ----- Service cards ----- */
  .service-card{ padding: 24px 20px; }
  .service-card--featured{ padding: 26px 22px; }
  .service-card--featured h3{ font-size: 1.2rem; }
  .service-card--featured p{ font-size: .9rem; }
  .service-icon{ width: 48px; height: 48px; font-size: 1.15rem; margin-bottom: 16px; }
  .service-card--featured .service-icon{ width: 54px; height: 54px; font-size: 1.3rem; }
  .service-tag{ top: 18px; right: 20px; font-size: .8rem; }
  .row.mt-1{ margin-top: 1rem !important; } /* breathing room between bento rows */

  /* ----- Trust bar & stats strip ----- */
  .trust-bar{ padding: 26px 16px; border-radius: 20px; }
  .trust-item strong{ font-size: 1.55rem; }
  .trust-item span{ font-size: .66rem; }
  .stats-strip{ padding: 22px 14px; border-radius: 20px; }
  .stats-strip-item strong{ font-size: 1.5rem; }
  .stats-strip-item span{ font-size: .66rem; }

  /* ----- Brand cards ----- */
  .brand-card{ padding: 22px 14px 18px; }
  .brand-avatar{ width: 52px; height: 52px; font-size: 1.2rem; margin-bottom: 12px; box-shadow: 0 0 0 4px var(--blush), 0 6px 14px rgba(214,0,111,.22); }
  .brand-card h4{ font-size: .85rem; margin-bottom: 6px; }
  .brand-card .brand-badge{ font-size: .62rem; padding: 3px 9px; }

  /* ----- Testimonials ----- */
  .testimonial-card{ padding: 24px 20px; }
  .testimonial-quote-icon{ font-size: 2rem; }
  .testimonial-card p.quote{ font-size: .92rem; }

  /* ----- Pricing ----- */
  .pricing-card{ padding: 26px 20px; }
  .pricing-price{ font-size: 1.75rem; margin-bottom: 14px; }
  .pricing-features li{ font-size: .84rem; padding: 6px 0; }
  .pricing-badge{ font-size: .64rem; padding: 5px 14px; }

  /* ----- Why Choose Us ----- */
  .why-card{ padding: 22px 20px; }
  .why-icon{ width: 46px; height: 46px; font-size: 1.1rem; margin-bottom: 14px; }
  .why-card h4{ font-size: .96rem; }
  .why-card .why-sub{ font-size: .78rem; }
  .why-card p{ font-size: .85rem; }

  /* ----- FAQ ----- */
  .faq-item{ padding: 14px 16px; font-size: .87rem; }

  /* ----- Footer ----- */
  .footer-barbie{ padding: 32px 0 20px; }
  .footer-barbie p{ font-size: .8rem; }
}

/* =========================================================
   ABOUT PAGE — reuses design tokens from barbie-theme.css
   (--pink-hot, --pink-deep, --blush, --ink, --radius-*, etc.)
   ========================================================= */

/* ---------- ABOUT HERO ---------- */
.about-hero{
  background: radial-gradient(circle at 85% 15%, var(--blush) 0%, var(--blush-2) 45%, #fff 75%);
  border-radius: 0 0 40px 40px;
  padding: 56px 0 44px;
  position: relative;
  overflow: hidden;
}
.about-hero-bg-1{
  position:absolute; top:-100px; right:-100px; width:360px; height:360px;
  background: radial-gradient(circle, rgba(255,61,143,.08) 0%, transparent 70%);
  border-radius:50%;
}
.about-hero-bg-2{
  position:absolute; bottom:-80px; left:-80px; width:280px; height:280px;
  background: radial-gradient(circle, rgba(255,61,143,.06) 0%, transparent 70%);
  border-radius:50%;
}
.about-hero h1{ font-weight:800; letter-spacing:-.5px; line-height:1.12; color:var(--ink); font-size:3.1rem; }
.about-hero h1 span{ color: var(--pink-hot); }
.about-hero p.lead{ color:var(--ink-soft); font-size:1.08rem; line-height:1.75; max-width:520px; }

/* Logo showcase */
.logo-wrapper{ position:relative; display:inline-block; }
.logo-float{ animation: logoFloat 3s ease-in-out infinite; position:relative; z-index:2; }
.logo-shadow{ filter: drop-shadow(0 20px 40px rgba(214,0,111,.2)); max-width:260px; width:100%; height:auto; }

.logo-blob{ position:absolute; border-radius:50%; animation: floatBlob 6s ease-in-out infinite; }
.logo-blob--1{
  width:260px; height:260px; top:50%; left:50%; transform:translate(-50%,-50%);
  background: linear-gradient(160deg, rgba(255,193,221,.3), rgba(255,61,143,.15));
}
.logo-blob--2{
  width:160px; height:160px; top:18%; right:-18%; animation-delay:1s;
  background: linear-gradient(160deg, rgba(255,61,143,.1), rgba(214,0,111,.08));
}
.logo-blob--3{
  width:110px; height:110px; bottom:8%; left:-14%; animation-delay:2s;
  background: linear-gradient(160deg, rgba(255,179,209,.2), rgba(255,61,143,.1));
}
.logo-ring{ position:absolute; top:50%; left:50%; border-radius:50%; transform:translate(-50%,-50%); z-index:1; }
.logo-ring--1{ width:300px; height:300px; border:2px solid rgba(255,61,143,.08); animation: spinRing 20s linear infinite; }
.logo-ring--2{ width:320px; height:320px; border:1px dashed rgba(255,61,143,.06); animation: spinRing 30s linear infinite reverse; }

@keyframes logoFloat{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }
@keyframes floatBlob{ 0%,100%{ transform:translate(-50%,-50%) scale(1);} 50%{ transform:translate(-50%,-50%) scale(1.05);} }
@keyframes spinRing{ 0%{ transform:translate(-50%,-50%) rotate(0);} 100%{ transform:translate(-50%,-50%) rotate(360deg);} }

/* ---------- OUR STORY ---------- */
.story-stat strong{ display:block; font-family:'Baloo 2'; font-size:1.8rem; font-weight:800; color:var(--pink-hot); }
.story-stat span{ font-size:.78rem; color:var(--ink-soft); font-weight:600; }

/* ---------- FOUNDER SPOTLIGHT (Our Story) ---------- */
.founder-spotlight-card{
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(160deg, var(--blush), var(--blush-2));
  border: 1px solid rgba(255,61,143,.10);
  padding: 44px 34px;
  min-height: 280px;
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  text-align:center;
}
.founder-spotlight-card::before{
  content:''; position:absolute; top:-50px; right:-50px; width:200px; height:200px;
  background: radial-gradient(circle, rgba(255,61,143,.08) 0%, transparent 70%); border-radius:50%;
}
.founder-photo-frame{
  width: 170px;
  aspect-ratio: 4 / 5;
  border-radius: 22px;
  overflow: hidden;
  margin: 0 auto 22px;
  background: #fff;
  border: 4px solid #fff;
  box-shadow: 0 16px 34px rgba(214,0,111,.22);
  position: relative;
  z-index: 2;
}
.founder-photo-frame img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.founder-spotlight-card p.quote{
  font-size:1.08rem; color:var(--ink); font-style:italic; line-height:1.75;
  max-width:400px; margin:0 auto; position:relative; z-index:2;
}
.founder-spotlight-card .quote-author{ font-weight:700; color:var(--pink-hot); margin-top:16px; font-size:.95rem; position:relative; z-index:2; }

/* ---------- MISSION & VISION (minimal icon-badge style) ---------- */
.mission-card{
  border-radius: var(--radius-lg);
  background:#fff;
  border: 1px solid rgba(255,61,143,.10);
  box-shadow: 0 10px 26px rgba(214,0,111,.07);
  transition: transform .25s ease, box-shadow .25s ease;
  height:100%;
  padding: 36px;
}
.mission-card:hover{ transform: translateY(-6px); box-shadow: 0 18px 34px rgba(214,0,111,.14); }

.mission-icon{
  width:54px; height:54px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem; color:#fff; margin-bottom:20px;
  box-shadow: 0 8px 18px rgba(214,0,111,.2);
}
.mission-icon--vision{ background: linear-gradient(160deg,#FF9FC7,#FF3D8F); }
.mission-icon--mission{ background: linear-gradient(160deg,#FF6BAA,var(--pink-deep)); }

.mission-card h3{ font-size:1.3rem; color:var(--ink); margin-bottom:14px; }
.mission-divider{ width:44px; height:3px; border-radius:2px; background: linear-gradient(90deg,var(--pink-hot),var(--pink-deep)); margin-bottom:20px; }

.mission-card > p{ color:var(--ink-soft); font-size:1rem; line-height:1.8; }
.mission-note{
  margin-top:18px; padding-top:18px; border-top:1px solid var(--blush);
  font-size:.92rem; color:var(--ink-soft); line-height:1.7; display:flex; gap:10px;
}
.mission-note i{ color:var(--pink-hot); flex-shrink:0; margin-top:2px; }

.mission-item{ display:flex; gap:16px; margin-bottom:20px; align-items:flex-start; }
.mission-item:last-child{ margin-bottom:0; }
.mission-num{
  font-family:'Baloo 2'; font-weight:800; font-size:1.15rem; color:var(--pink-hot);
  opacity:.45; flex-shrink:0; width:28px; line-height:1.6;
}
.mission-item p{ color:var(--ink-soft); font-size:.94rem; line-height:1.7; margin:0; }

/* ---------- MEET THE TEAM ---------- */
.team-card{
  border-radius: var(--radius-lg);
  padding: 30px 24px;
  background:#fff;
  border: 1px solid rgba(255,61,143,.10);
  box-shadow: 0 10px 26px rgba(214,0,111,.07);
  transition: transform .25s ease, box-shadow .25s ease;
  position:relative; overflow:hidden; text-align:center; height:100%;
}
.team-card:hover{ transform: translateY(-6px); box-shadow: 0 18px 34px rgba(214,0,111,.14); }
.team-card-topbar{ position:absolute; top:0; left:0; right:0; height:4px; }
.team-card-topbar--founder{ background: linear-gradient(90deg,#FF9FC7,#FF3D8F,var(--pink-deep)); }
.team-card-topbar--1{ background: linear-gradient(90deg,#FFB3D1,#FF3D8F); }
.team-card-topbar--2{ background: linear-gradient(90deg,#FFC1DD,var(--pink-deep)); }
.team-card-topbar--3{ background: linear-gradient(90deg,#FF7FB4,#FF3D8F); }

.team-founder-badge{
  position:absolute; top:18px; right:18px;
  background: linear-gradient(160deg,#FFD700,#FFA500); color:#fff;
  font-size:.62rem; font-weight:700; padding:4px 12px; border-radius: var(--radius-pill);
  text-transform:uppercase; letter-spacing:.04em;
}

.team-avatar-wrapper{
  width:120px; height:120px; border-radius:50%; margin:0 auto 18px; padding:4px;
  background: linear-gradient(135deg,#FF9FC7,#FF3D8F,var(--pink-deep));
  box-shadow: 0 10px 26px rgba(214,0,111,.2);
}
.team-avatar-inner{
  width:100%; height:100%; border-radius:50%; background:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:2.8rem; color:var(--pink-hot); overflow:hidden;
}
.team-avatar-inner img{ width:100%; height:100%; object-fit:cover; }

.team-card h4{ font-size:1.12rem; margin-bottom:2px; }
.team-role{ color:var(--pink-hot); font-weight:700; font-size:.85rem; margin-bottom:10px; display:block; }
.team-card p.bio{ color:var(--ink-soft); font-size:.88rem; line-height:1.65; margin:0; }

.team-social-link{
  width:34px; height:34px; border-radius:50%; background:var(--blush);
  display:flex; align-items:center; justify-content:center; color:var(--pink-deep);
  transition: all .2s ease;
}
.team-social-link:hover{ background: var(--pink-hot); color:#fff; transform: scale(1.08); }

/* ---------- CTA SECTION ---------- */
.about-cta{
  background: linear-gradient(160deg, #FF4F97, var(--pink-deep));
  border-radius: 36px;
  padding: 56px 40px;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.about-cta::before{
  content:''; position:absolute; top:-80px; right:-80px; width:280px; height:280px;
  background: rgba(255,255,255,.05); border-radius:50%;
}
.about-cta::after{
  content:''; position:absolute; bottom:-60px; left:-60px; width:200px; height:200px;
  background: rgba(255,255,255,.04); border-radius:50%;
}
.about-cta-content{ position:relative; z-index:2; }
.about-cta h2{ color:#fff; font-size:2.3rem; margin-bottom:10px; }
.about-cta p{ color:rgba(255,255,255,.88); font-size:1.02rem; max-width:480px; margin:0 auto 26px; }

/* =========================================================
   RESPONSIVE — About Page
   ========================================================= */
@media (max-width: 991.98px){
  .about-hero{ padding:44px 0 32px; border-radius:0 0 28px 28px; }
  .about-hero h1{ font-size:2.4rem; }
  .logo-wrapper{ margin-top:32px; }
  .logo-shadow{ max-width:190px !important; }
  .logo-blob--1{ width:200px; height:200px; }
  .logo-ring--1{ width:230px; height:230px; }
  .logo-ring--2{ width:250px; height:250px; }
  .founder-spotlight-card{ padding:34px 26px; min-height:240px; margin-top:8px; }
  .mission-card{ padding:26px; }
  .about-cta{ padding:44px 28px; border-radius:28px; }
}

@media (max-width: 575.98px){
  .about-hero{ padding:32px 0 26px; border-radius:0 0 22px 22px; }
  .about-hero h1{ font-size:1.85rem; }
  .about-hero p.lead{ font-size:.9rem; }
  .about-hero .d-flex.gap-3{ flex-direction:row; gap:8px !important; }
  .about-hero .btn-barbie{ flex:1 1 0; padding:12px 10px; font-size:.78rem; white-space:nowrap; }

  .logo-shadow{ max-width:140px !important; }
  .logo-blob--1{ width:150px; height:150px; }
  .logo-blob--2{ width:100px; height:100px; }
  .logo-blob--3{ width:80px; height:80px; }
  .logo-ring--1{ width:170px; height:170px; }
  .logo-ring--2{ width:190px; height:190px; }

  .founder-spotlight-card{ padding:28px 20px; min-height:200px; }
  .founder-spotlight-card p.quote{ font-size:1rem; }
  .founder-photo-frame{ width: 130px; }
  .story-stat strong{ font-size:1.4rem; }

  .mission-card{ padding:22px; }
  .mission-icon{ width:46px; height:46px; font-size:1.1rem; margin-bottom:16px; }
  .team-card{ padding:26px 18px; }
  .team-avatar-wrapper{ width:96px; height:96px; }
  .team-avatar-inner{ font-size:2.2rem; }

  .about-cta{ padding:36px 22px; border-radius:22px; }
  .about-cta h2{ font-size:1.6rem; }
  .about-cta p{ font-size:.9rem; }
}




/* =========================================================
   SERVICES PAGE — reuses design tokens + .pricing-card/.eyebrow/
   .section-head/.btn-barbie etc. already defined in barbie-theme.css.
   Only page-specific components live here.
   ========================================================= */

/* ---------- SERVICE DETAIL CARDS ---------- */
.service-detail-card{
  position: relative;
  border-radius: var(--radius-lg);
  padding: 34px 28px;
  background: #fff;
  border: 1px solid rgba(255,61,143,.10);
  box-shadow: 0 8px 22px rgba(214,0,111,.07);
  transition: transform .25s ease, box-shadow .25s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.service-detail-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 34px rgba(214,0,111,.14);
}
.service-detail-tag{
  position: absolute; top: 26px; right: 28px;
  font-family: 'Baloo 2'; font-weight: 700; font-size: .9rem;
  color: var(--pink-hot); opacity: .5;
}
.service-icon-wrapper{
  width: 60px; height: 60px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; color: #fff; margin-bottom: 20px;
  box-shadow: 0 8px 18px rgba(214,0,111,.18);
}
.service-detail-card h4{ font-size: 1.15rem; font-weight: 800; color: var(--ink); margin-bottom: 8px; }
.service-detail-card .service-desc{ color: var(--ink-soft); font-size: .92rem; line-height: 1.7; margin-bottom: 18px; }

.service-features{ list-style: none; padding: 0; margin: 0 0 22px; flex-grow: 1; }
.service-features li{
  font-size: .87rem; color: var(--ink-soft); padding: 6px 0;
  display: flex; align-items: center; gap: 10px;
}
.service-features li i{ color: var(--pink-hot); font-size: .85rem; flex-shrink: 0; }

.service-link{
  font-weight: 700; font-size: .85rem; color: var(--pink-deep);
  display: inline-flex; align-items: center; gap: 6px; width: fit-content;
  margin-top: auto;
}
.service-link i{ transition: transform .2s ease; }
.service-detail-card:hover .service-link i{ transform: translate(2px,-2px); }

/* ---------- CAMPAIGN TYPE CARDS (bento pair, matches home's featured/accent pattern) ---------- */
.campaign-card{
  border-radius: var(--radius-lg);
  padding: 30px 28px;
  background: var(--blush-2);
  border: 1px solid rgba(255,61,143,.10);
  box-shadow: 0 8px 22px rgba(214,0,111,.07);
  transition: transform .25s ease, box-shadow .25s ease;
  height: 100%;
  text-align: center;
}
.campaign-card:hover{ transform: translateY(-6px); box-shadow: 0 16px 30px rgba(214,0,111,.14); }

.campaign-icon{
  width: 54px; height: 54px; border-radius: 15px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; color: #fff; margin: 0 auto 14px;
  box-shadow: 0 8px 18px rgba(214,0,111,.2);
}
.campaign-card h4{ font-size: 1.15rem; font-weight: 800; color: var(--ink); margin-bottom: 6px; }
.campaign-card .campaign-desc{ color: var(--ink-soft); font-size: .88rem; line-height: 1.6; margin-bottom: 14px; max-width: 300px; margin-left: auto; margin-right: auto; }

.campaign-features{ list-style: none; padding: 0; margin: 0 0 18px; text-align: left; max-width: 280px; margin-left: auto; margin-right: auto; }
.campaign-features li{
  font-size: .85rem; color: var(--ink-soft); padding: 5px 0;
  display: flex; align-items: center; gap: 9px;
}
.campaign-features li i{ color: var(--pink-hot); font-size: .8rem; flex-shrink: 0; }

.campaign-card .btn-barbie{ padding: 11px 20px; font-size: .85rem; }

/* Accent variant — placed AFTER the base rules above so these color
   overrides always win regardless of source order */
.campaign-card--accent{
  background: linear-gradient(165deg, #FF4F97, var(--pink-deep));
  border: none;
}
.campaign-card--accent h4{ color: #fff; }
.campaign-card--accent .campaign-desc{ color: rgba(255,255,255,.92); }
.campaign-card--accent .campaign-features li{ color: rgba(255,255,255,.9); }
.campaign-card--accent .campaign-features li i{ color: #fff; }
.campaign-card--accent .campaign-icon{ background: rgba(255,255,255,.2) !important; box-shadow: none; }

/* =========================================================
   RESPONSIVE — Services Page
   ========================================================= */
@media (max-width: 991.98px){
  .campaign-card{ padding: 26px 22px; }
}

@media (max-width: 575.98px){
  .service-detail-card{ padding: 26px 22px; }
  .service-icon-wrapper{ width: 52px; height: 52px; font-size: 1.2rem; }
  .service-detail-tag{ top: 20px; right: 22px; font-size: .8rem; }

  .campaign-card{ padding: 24px 18px; }
  .campaign-icon{ width: 48px; height: 48px; font-size: 1.2rem; }
  .campaign-card h4{ font-size: 1.05rem; }
  .campaign-card .btn-barbie{ padding: 10px 16px; font-size: .8rem; }
}


/* =========================================================
   PORTFOLIO HERO — asymmetric layout, distinct from Services'
   centered hero. Text left-aligned, brand-collage visual right.
   ========================================================= */
.portfolio-hero{ position:relative; overflow:hidden; }
.portfolio-hero h1{ font-size: 2.9rem; }

/* Gradient text treatment for the accent line in the heading */
.text-gradient{
  background: linear-gradient(90deg, var(--pink-hot), var(--pink-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Inline quick stats (text-only — keeps the hero light, no extra cards) */
.portfolio-hero-stats{
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.portfolio-hero-stats > div:not(.dot){ display:flex; align-items:baseline; gap:6px; }
.portfolio-hero-stats strong{ font-family:'Baloo 2'; font-size:1.3rem; font-weight:800; color: var(--pink-deep); }
.portfolio-hero-stats span{ font-size:.78rem; color: var(--ink-soft); font-weight:600; }
.portfolio-hero-stats .dot{ width:4px; height:4px; border-radius:50%; background: var(--pink-hot); opacity:.5; }

/* Brand-avatar collage — a cluster of overlapping chips, distinct
   from Home's single "Creator Spotlight" card */
.brand-collage{
  position: relative;
  width: 260px; height: 260px;
}
.collage-chip{
  position: absolute;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #fff;
  box-shadow: 0 12px 26px rgba(214,0,111,.18);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Baloo 2'; font-weight: 800; color: #fff;
  animation: badgeFloat 3.6s ease-in-out infinite;
}
.collage-chip.cc-1{ width:84px; height:84px; font-size:1.5rem; top:0; left:60px; background:linear-gradient(160deg,#FF9FC7,#FF3D8F); animation-delay:0s; z-index:3; }
.collage-chip.cc-2{ width:64px; height:64px; font-size:1.2rem; top:30px; left:0; background:linear-gradient(160deg,#FFB3D1,var(--pink-deep)); animation-delay:.5s; z-index:2; }
.collage-chip.cc-3{ width:70px; height:70px; font-size:1.3rem; top:120px; left:10px; background:linear-gradient(160deg,#FF7FB4,#FF3D8F); animation-delay:1s; z-index:2; }
.collage-chip.cc-4{ width:60px; height:60px; font-size:1.15rem; top:150px; left:100px; background:linear-gradient(160deg,#FFC1DD,var(--pink-deep)); animation-delay:1.5s; z-index:1; }
.collage-chip.cc-5{ width:76px; height:76px; font-size:1.4rem;   top:60px; left:150px; background:linear-gradient(160deg,#FF9FC7,var(--pink-deep)); animation-delay:.8s; z-index:2; }
.collage-chip.cc-6{ width:54px; height:54px; font-size:1.05rem;  top:10px; left:190px; background:linear-gradient(160deg,#FFB3D1,#FF3D8F); animation-delay:1.3s; z-index:1; }

@media (prefers-reduced-motion: reduce){
  .collage-chip{ animation: none; }
}

/* Tablet: shrink the collage a bit, keep two-column layout */
@media (max-width: 991.98px){
  .portfolio-hero h1{ font-size: 2.3rem; }
  .brand-collage{ width: 220px; height: 220px; margin: 32px auto 0; }
}

/* Mobile: stack — collage becomes a smaller centered cluster above the fold */
@media (max-width: 575.98px){
  .portfolio-hero h1{ font-size: 1.9rem; }
  .portfolio-hero-stats{ gap: 10px; }
  .portfolio-hero-stats strong{ font-size: 1.1rem; }
  .brand-collage{ width: 190px; height: 190px; transform: scale(.85); margin: 20px auto 0; }
}

/* =========================================================
   PORTFOLIO PAGE — only truly NEW classes go here.
   .brand-card, .stats-strip, .testimonial-card, .why-card are
   already fully defined earlier in this file (Brands/Testimonials/
   Why Choose Us sections) — do NOT redeclare them here, or you'll
   silently override their styling on the Home/About/Services pages
   too, since it's all one shared stylesheet now.
   ========================================================= */

.success-story-card{
  background:#fff; border:1px solid rgba(255,61,143,.10); border-radius: var(--radius-lg);
  padding: 30px 26px; text-align:center; height:100%;
  box-shadow: 0 8px 22px rgba(214,0,111,.07);
  transition: transform .25s ease, box-shadow .25s ease;
}
.success-story-card:hover{
  transform: translateY(-5px);
  box-shadow: 0 16px 30px rgba(214,0,111,.14);
}
.success-story-card .success-number{
  font-family:'Baloo 2'; font-size:2.4rem; font-weight:800; color: var(--pink-hot);
}
.success-story-card .success-label{
  font-size:.78rem; font-weight:700; color: var(--ink-soft);
  text-transform:uppercase; letter-spacing:.03em; margin-bottom:14px; display:block;
}
.success-story-card .success-quote{
  font-size:.9rem; color: var(--ink-soft); font-style:italic; line-height:1.65; margin:0 0 12px;
}
.success-story-card .success-author{ font-size:.8rem; font-weight:700; color: var(--pink-hot); }

/* Mobile */
@media (max-width: 575.98px){
  .success-story-card{ padding: 24px 20px; }
  .success-story-card .success-number{ font-size: 2rem; }
}



/* =========================================================
   CONTACT PAGE CUSTOM STYLES
   ========================================================= */

/* Contact info cards */
.contact-info-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 24px;
    background: white;
    border-radius: 16px;
    border: 1px solid rgba(255,61,143,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-info-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(214,0,111,0.10);
}

.contact-info-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: white;
    flex-shrink: 0;
}

.contact-info-card h6 {
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 2px;
}

.contact-info-card p {
    color: var(--ink-soft);
    margin: 0;
    font-size: 0.9rem;
}

/* Social buttons */
.social-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: white;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
}

.social-btn:hover {
    transform: scale(1.1) translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    color: white;
}

.social-btn--facebook {
    background: #1877F2;
}

.social-btn--instagram {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

.social-btn--tiktok {
    background: #000000;
}

.social-btn--group {
    background: linear-gradient(160deg, #FF9FC7, #FF3D8F);
}

/* Contact form */
.contact-form-card {
    border-radius: 24px;
    padding: 40px;
    background: white;
    border: 1px solid rgba(255,61,143,0.08);
    box-shadow: 0 10px 30px rgba(214,0,111,0.06);
}

.contact-form-card .form-control {
    border-radius: 12px;
    padding: 12px 16px;
    border: 1px solid rgba(214,0,111,0.12);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    font-size: 0.95rem;
}

.contact-form-card .form-control:focus {
    border-color: var(--pink-hot);
    box-shadow: 0 0 0 3px rgba(255,61,143,0.1);
}

.contact-form-card .form-label {
    font-weight: 600;
    color: var(--ink);
    font-size: 0.9rem;
}

.contact-form-card .form-label .required {
    color: #dc3545;
    margin-left: 2px;
}

/* Book a meeting section */
.book-meeting-card {
    border-radius: 28px;
    padding: 50px 40px;
    background: linear-gradient(160deg, var(--blush), var(--blush-2));
    border: 1px solid rgba(255,61,143,0.10);
    position: relative;
    overflow: hidden;
}

.book-meeting-card .deco-circle {
    position: absolute;
    border-radius: 50%;
}

.book-meeting-card .deco-circle--1 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,61,143,0.06) 0%, transparent 70%);
    top: -100px;
    right: -80px;
}

.book-meeting-card .deco-circle--2 {
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255,61,143,0.04) 0%, transparent 70%);
    bottom: -60px;
    left: -60px;
}

/* Quick response badge */
.quick-response-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(40, 167, 69, 0.10);
    color: #28a745;
    padding: 8px 18px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
}

.quick-response-badge i {
    font-size: 1rem;
}

/* Responsive */
@media (max-width: 991.98px) {
    .contact-form-card {
        padding: 28px 24px;
    }
    .book-meeting-card {
        padding: 36px 24px;
    }
}

@media (max-width: 575.98px) {
    .contact-info-card {
        padding: 16px;
    }
    .contact-form-card {
        padding: 20px 16px;
    }
    .book-meeting-card {
        padding: 28px 20px;
        border-radius: 20px;
    }
    .social-btn {
        width: 44px;
        height: 44px;
        font-size: 1rem;
    }
}

/* =========================================================
   LOADING OVERLAY - Full Page
   ========================================================= */
.inquiry-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.inquiry-loading-overlay--active {
    opacity: 1;
    visibility: visible;
}

.inquiry-loading-content {
    text-align: center;
    padding: 40px;
}

.inquiry-loading-content .loading-logo {
    height: 64px;
    width: auto;
    animation: loadingPulse 1.4s ease-in-out infinite;
    filter: drop-shadow(0 10px 20px rgba(214,0,111,.25));
    margin-bottom: 24px;
}

.inquiry-loading-content .loading-text {
    font-family: 'Baloo 2';
    font-weight: 700;
    font-size: 1rem;
    color: var(--ink);
    letter-spacing: 0.06em;
    margin: 0;
}

.inquiry-loading-content .loading-sub {
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    color: var(--ink-soft);
    margin-top: 4px;
}

.inquiry-loading-content .loading-dots span {
    animation: loadingDots 1.4s infinite;
    opacity: 0;
}
.inquiry-loading-content .loading-dots span:nth-child(1) { animation-delay: 0s; }
.inquiry-loading-content .loading-dots span:nth-child(2) { animation-delay: .2s; }
.inquiry-loading-content .loading-dots span:nth-child(3) { animation-delay: .4s; }

/* Spinner ring */
.inquiry-loading-spinner {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 3px solid var(--blush);
    border-top-color: var(--pink-hot);
    animation: spin 0.8s linear infinite;
    margin: 0 auto 20px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* =========================================================
   SUCCESS MODAL - Enhanced
   ========================================================= */
.success-modal-icon {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00C853, #00E676);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow: 0 16px 40px rgba(0, 200, 83, 0.35);
    animation: successPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.success-modal-icon i {
    font-size: 3rem;
    color: white;
    animation: successCheck 0.6s ease 0.25s both;
}

.success-modal-title {
    font-family: 'Baloo 2';
    font-weight: 700;
    color: var(--ink);
    font-size: 1.6rem;
    margin-bottom: 4px;
}

.success-modal-sub {
    color: var(--ink-soft);
    font-size: 0.95rem;
    line-height: 1.6;
}

.success-modal-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--blush);
    padding: 6px 18px;
    border-radius: 50px;
    font-size: 0.78rem;
    color: var(--pink-deep);
    font-weight: 600;
}

/* =========================================================
   ERROR MODAL - Enhanced
   ========================================================= */
.error-modal-icon {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF1744, #D50000);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    box-shadow: 0 16px 40px rgba(255, 23, 68, 0.25);
    animation: errorPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.error-modal-icon i {
    font-size: 2.6rem;
    color: white;
}

/* =========================================================
   PHONE INPUT - Country Code Selector
   ========================================================= */
.phone-input-group {
    display: flex;
    gap: 0;
    border-radius: 10px;
    border: 1.5px solid rgba(214,0,111,0.10);
    background: #FAFAFA;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.phone-input-group:focus-within {
    border-color: var(--pink-hot);
    box-shadow: 0 0 0 3px rgba(255,61,143,0.08);
}

.phone-input-group .country-select {
    border: none;
    background: #F0F0F0;
    padding: 10px 8px 10px 12px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    flex-shrink: 0;
    min-width: 85px;
    border-radius: 0;
    outline: none;
    font-family: 'Inter', sans-serif;
}

.phone-input-group .country-select option {
    font-weight: 400;
    padding: 4px;
}

.phone-input-group .phone-input {
    border: none;
    padding: 10px 14px;
    font-size: 0.9rem;
    background: transparent;
    outline: none;
    width: 100%;
    font-family: 'Inter', sans-serif;
    color: var(--ink);
}

.phone-input-group .phone-input::placeholder {
    color: #B0A0A8;
}

/* =========================================================
   SUCCESS & ERROR ANIMATIONS
   ========================================================= */
@keyframes successPop {
    0% { transform: scale(0) rotate(-8deg); opacity: 0; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes successCheck {
    0% { opacity: 0; transform: scale(0.3) rotate(-20deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes errorPop {
    0% { transform: scale(0) rotate(8deg); opacity: 0; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* =========================================================
   PHONE INPUT - Enhanced with Flag Emojis
   ========================================================= */
.phone-input-group {
    display: flex;
    gap: 0;
    border-radius: 10px;
    border: 1.5px solid rgba(214,0,111,0.10);
    background: #FAFAFA;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.phone-input-group:focus-within {
    border-color: var(--pink-hot);
    box-shadow: 0 0 0 3px rgba(255,61,143,0.08);
}

.phone-input-group .country-select {
    border: none;
    background: #F0F0F0;
    padding: 9px 6px 9px 10px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    flex-shrink: 0;
    min-width: 80px;
    border-radius: 0;
    outline: none;
    font-family: 'Inter', sans-serif;
    appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" stroke="%23D6006F" stroke-width="1.5" fill="none" stroke-linecap="round"/></svg>');
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 10px 6px;
    padding-right: 18px;
}

.phone-input-group .country-select option {
    font-weight: 400;
    padding: 4px 8px;
    font-size: 0.85rem;
}

.phone-input-group .phone-input {
    border: none;
    padding: 9px 12px;
    font-size: 0.88rem;
    background: transparent;
    outline: none;
    width: 100%;
    font-family: 'Inter', sans-serif;
    color: var(--ink);
    letter-spacing: 0.3px;
}

.phone-input-group .phone-input::placeholder {
    color: #B0A0A8;
}

.phone-input-group .phone-input:focus {
    background: transparent;
}

/* Phone input error state */
.phone-input-group--error {
    border-color: #FF1744 !important;
    box-shadow: 0 0 0 3px rgba(255, 23, 68, 0.08) !important;
}

.phone-error-text {
    font-size: 0.65rem;
    color: #FF1744;
    font-family: 'Inter', sans-serif;
    margin-top: 3px;
    display: none;
}

.phone-error-text--visible {
    display: block;
}

#phoneHint {
    font-size: 0.65rem;
    color: var(--ink-soft);
    margin-top: 3px;
    font-family: 'Inter', sans-serif;
    transition: color 0.2s ease;
}

#phoneHint--valid {
    color: #00C853;
}

#phoneHint--invalid {
    color: #FF1744;
}



/* =========================================================
   MODAL BACKDROP BLUR EFFECT - COMPLETE
   ========================================================= */

/* Base backdrop for ALL modals */
.modal-backdrop {
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    transition: all 0.3s ease;
    position: fixed !important;
}

.modal-backdrop.show {
    opacity: 1 !important;
}

/* When multiple modals are open (stacked), blur the background more */
.modal-backdrop ~ .modal-backdrop {
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
}

/* Smooth modal animations */
.modal.fade .modal-dialog {
    transform: scale(0.95);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.modal.show .modal-dialog {
    transform: scale(1);
}

/* Z-index layering */
.modal {
    z-index: 1055;
}

.modal-backdrop {
    z-index: 1050;
}

/* When second modal opens, first modal backdrop gets darker and more blurred */
.modal-backdrop.show + .modal-backdrop.show {
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    background: rgba(0, 0, 0, 0.7) !important;
}

/* OR - Alternative approach using backdrop */
body:has(.modal-backdrop:last-child) .modal:not(.show) + .modal.show {
    /* This targets when a second modal is open */
}

/* =========================================================
   BLUR INQUIRY MODAL WHEN SECOND MODAL IS OPEN
   ========================================================= */

/* Class that gets added to blur the inquiry modal */
.inquiry-modal-blurred .modal-content {
    filter: blur(6px) !important;
    opacity: 0.6 !important;
    transition: all 0.3s ease;
}

/* Make sure error/success modal stays clear */
#errorModal .modal-content,
#successModal .modal-content {
    filter: none !important;
    opacity: 1 !important;
}

/* Darker backdrop when second modal is open */
.backdrop-dark {
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    background: rgba(0, 0, 0, 0.8) !important;
}

/* =========================================================
   FIX: BLUR INQUIRY MODAL WHEN SECOND MODAL OPENS
   ========================================================= */

/* When error or success modal is open, blur the inquiry modal */
body:has(#errorModal.show) #inquiryModal .modal-content,
body:has(#successModal.show) #inquiryModal .modal-content {
    filter: blur(6px) !important;
    opacity: 0.6 !important;
    transition: all 0.3s ease !important;
}

/* Keep error and success modals clear */
#errorModal .modal-content,
#successModal .modal-content {
    filter: none !important;
    opacity: 1 !important;
}

/* Darker backdrop when second modal is open */
body:has(#errorModal.show) .modal-backdrop,
body:has(#successModal.show) .modal-backdrop {
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    background: rgba(0, 0, 0, 0.8) !important;
}