/* ============================================================
   BRANDLIFT SOLUTIONS — Premium Enhancement Layer
   Signature: the logo's wave, reused as a moving light-ribbon
   that threads through section dividers, card borders and the
   scroll progress bar — the one motif that ties the whole
   site back to the brand mark.
   ============================================================ */

/* ---------- Film grain (adds tactile, non-generic texture) ---------- */
body::before{
  content:'';
  position:fixed;inset:0;z-index:2;pointer-events:none;
  opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Scroll progress ribbon (signature gradient) ---------- */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0%;
  background:var(--grad-brand);z-index:1100;
  box-shadow:0 0 12px rgba(242,101,34,.55);
  transition:width .12s linear;
}

/* ---------- Cursor glow (desktop, ambient light following pointer) ---------- */
.cursor-glow{
  position:fixed;top:0;left:0;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle, rgba(242,101,34,.10) 0%, rgba(43,47,139,.06) 40%, transparent 72%);
  pointer-events:none;z-index:1;transform:translate(-50%,-50%);
  opacity:0;transition:opacity .4s ease;will-change:transform;
}
.cursor-glow.active{opacity:1;}
@media(max-width:960px){.cursor-glow{display:none;}}

/* ---------- Refined glass (adds saturation so glassmorphism reads premium, not milky) ---------- */
.glass{backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);}
.glass-dark{backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);}
.navbar.scrolled{backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);}

/* ---------- Signature gradient-ribbon border on featured elements ---------- */
.ribbon-border{
  position:relative;border-radius:var(--radius-md);
}
.ribbon-border::before{
  content:'';position:absolute;inset:-1.5px;border-radius:inherit;z-index:-1;
  background:var(--grad-brand);opacity:0;transition:opacity .4s var(--ease);
}
.ribbon-border:hover::before{opacity:1;}

/* ---------- Card: subtle 3D tilt + shine sweep on hover ---------- */
.card{
  transform-style:preserve-3d;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
  will-change:transform;
  overflow:hidden;
}
.card::after{
  content:'';position:absolute;top:0;left:-140%;width:60%;height:100%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,.35), transparent);
  transform:skewX(-20deg);transition:left .7s var(--ease);pointer-events:none;
}
.card:hover::after{left:140%;}
.price-card{transform-style:preserve-3d;will-change:transform;}

/* ---------- Magnetic buttons: shine sweep + soft magnetism handled via JS transform ---------- */
.btn-primary{position:relative;overflow:hidden;}
.btn-primary::before{
  content:'';position:absolute;top:0;left:-150%;width:60%;height:100%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,.4), transparent);
  transform:skewX(-20deg);transition:left .6s var(--ease);
}
.btn-primary:hover::before{left:150%;}

/* ---------- Signature wave rule — a hairline used as a divider echoing the logo swoosh ---------- */
.wave-rule{
  height:3px;width:120px;border-radius:3px;margin:22px auto;
  background:var(--grad-brand);background-size:200% 100%;
  animation:gradientShift 6s ease infinite;
}
.text-center .wave-rule{margin-left:auto;margin-right:auto;}

/* ---------- Refined type scale: tighter, more intentional rhythm ---------- */
h1{font-size:clamp(2.1rem, 1.2rem + 3.6vw, 3.75rem);font-weight:700;}
h2{font-size:clamp(1.6rem, 1rem + 2vw, 2.5rem);font-weight:700;}
h3{font-size:clamp(1.05rem, .95rem + .4vw, 1.2rem);font-weight:600;}
p{font-size:clamp(.95rem, .9rem + .2vw, 1.02rem);}

/* ---------- Focus states (accessibility, still on-brand) ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--orange);outline-offset:3px;border-radius:6px;
}

/* ---------- Custom scrollbar (subtle brand touch) ---------- */
::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:var(--bg-light);}
::-webkit-scrollbar-thumb{background:var(--grad-brand);border-radius:10px;border:2px solid var(--bg-light);}

/* ---------- Animated mesh backdrop for dark sections (adds depth without noise) ---------- */
.section-dark, .hero-dark{position:relative;}
.section-dark::before, .hero-dark::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:
    radial-gradient(600px circle at 10% 20%, rgba(242,101,34,.06), transparent 60%),
    radial-gradient(500px circle at 90% 80%, rgba(91,63,176,.10), transparent 60%);
}

/* ---------- Number badges get a soft ring instead of flat block (premium tactile detail) ---------- */
.tag{box-shadow:inset 0 0 0 1px rgba(43,47,139,.08);}

/* ---------- Hero photo + floating badges (replaces abstract card with a real, human visual) ---------- */
.hero-photo-wrap{position:relative;}
.hero-photo-frame{
  border-radius:28px;overflow:hidden;box-shadow:var(--shadow-lg);
  border:6px solid #fff;position:relative;aspect-ratio:4/4.6;
}
.hero-photo-frame::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(43,47,139,0) 55%, rgba(15,23,42,.55) 100%);
}
.hero-photo-frame img{width:100%;height:100%;object-fit:cover;display:block;}
.hero-illustration::after{display:none;}
.hero-illustration{background:#fff;}
.hero-illustration svg{width:100%;height:100%;display:block;}
.hero-badge{
  position:absolute;border-radius:16px;padding:14px 18px;display:flex;align-items:center;gap:12px;
  background:rgba(255,255,255,.85);box-shadow:var(--shadow-md);
}
.hero-badge-roas{bottom:-22px;left:-26px;}
.hero-badge-roas i{color:var(--orange);font-size:1.4rem;}
.hero-badge-num{font-weight:700;color:var(--dark);font-size:1.02rem;font-family:'Poppins',sans-serif;}
.hero-badge-label{font-size:.74rem;color:var(--text-soft);font-weight:600;}
.hero-badge-team{top:-18px;right:-20px;}
.hero-badge-avatars{display:flex;}
.hero-badge-avatars span{
  width:30px;height:30px;border-radius:50%;background:var(--grad-brand);color:#fff;font-size:.68rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;border:2px solid #fff;margin-left:-10px;font-family:'Poppins',sans-serif;
}
.hero-badge-avatars span:first-child{margin-left:0;}
@media(max-width:960px){
  .hero-photo-frame{aspect-ratio:4/3.6;margin-top:10px;}
  .hero-badge-roas{left:10px;bottom:-18px;}
  .hero-badge-team{right:10px;top:-14px;}
  .hero-badge{padding:10px 14px;}
}
@media(max-width:480px){
  .hero-badge-label{display:none;}
}



/* Large desktop */
@media(min-width:1440px){
  .container{max-width:1320px;}
}

/* Small laptop / large tablet */
@media(max-width:1180px){
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .hero .grid-2{gap:36px;}
}

/* Tablet */
@media(max-width:1024px){
  .section{padding:90px 0;}
  .nav-links{gap:0;}
  .nav-links a{padding:9px 12px;font-size:.88rem;}
  .price-card.featured{transform:scale(1);}
}

/* Small tablet / large phone */
@media(max-width:768px){
  .grid-3{grid-template-columns:repeat(2,1fr);}
  .hero{padding:140px 0 80px;}
  .stat-num{font-size:clamp(1.7rem,7vw,2.3rem);}
  .cursor-glow{display:none;}
  .card:hover, .price-card:hover{transform:translateY(-4px);}
}

/* Phone */
@media(max-width:600px){
  .grid-4, .grid-3, .grid-2{grid-template-columns:1fr;}
  .section{padding:64px 0;}
  .container{padding:0 18px;}
  .btn{padding:14px 24px;font-size:.88rem;}
  .price-card.featured{order:-1;}
  table{font-size:.8rem;}
}

/* Small phone */
@media(max-width:380px){
  h1{font-size:1.9rem;}
  .hero{padding:130px 0 60px;}
  .checkbox-grid{grid-template-columns:1fr;}
}

/* Reduced motion accessibility (respect OS setting for premium *and* considerate design) */
@media (prefers-reduced-motion: reduce){
  .cursor-glow, .scroll-progress{display:none;}
  .card::after, .btn-primary::before{display:none;}
}

/* ============================================================
   HERO PHOTO — real image frame + chip badges + orbit pills
   ============================================================ */

/* Main photo frame — remove old illustration overrides */
.hero-photo-frame{
  border-radius:28px;overflow:hidden;box-shadow:var(--shadow-lg);
  border:5px solid #fff;position:relative;aspect-ratio:4/4.8;
  background:var(--grad-brand-soft);
}
.hero-photo-frame img{
  width:100%;height:100%;object-fit:cover;display:block;position:relative;z-index:1;
}
/* Gradient vignette over photo */
.hero-photo-overlay{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(
    180deg,
    rgba(43,47,139,0) 35%,
    rgba(15,23,42,.55) 100%
  ), linear-gradient(
    135deg,
    rgba(43,47,139,.18) 0%,
    transparent 60%
  );
}
/* Placeholder state when photo is missing */
.hero-photo-placeholder{
  background:linear-gradient(135deg,#eef0fb 0%,#dde1f7 100%);
  display:flex;align-items:center;justify-content:center;
}
.hero-photo-placeholder::after{
  content:'\f03e';font-family:"Font Awesome 6 Free";font-weight:900;
  font-size:4rem;color:rgba(43,47,139,.2);
}

/* Stat chips INSIDE the photo frame */
.hero-photo-chip{
  position:absolute;z-index:3;border-radius:16px;padding:12px 16px;
  display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.88);box-shadow:var(--shadow-md);
}
.hero-photo-chip--bl{bottom:20px;left:16px;}
.hero-photo-chip--tr{top:16px;right:16px;}

/* Orbit pill badges — float around the frame */
.hero-orbit-badge{
  position:absolute;display:flex;align-items:center;gap:8px;
  background:#fff;border:1px solid rgba(255,255,255,.8);
  border-radius:100px;padding:9px 14px 9px 9px;
  box-shadow:var(--shadow-md);white-space:nowrap;z-index:4;
}
.hero-orbit-icon{
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0;
}
.hero-orbit-text{font-family:'Manrope',sans-serif;font-size:.78rem;color:var(--dark);line-height:1.3;}
.hero-orbit-text strong{font-weight:700;}

/* Orbit positions */
.hero-orbit--tl{top:-22px;left:-30px;}
.hero-orbit--tr{top:-22px;right:-20px;}
.hero-orbit--br{bottom:60px;right:-24px;}
.hero-orbit--bl{bottom:-20px;left:-18px;}

@media(max-width:960px){
  .hero-photo-frame{aspect-ratio:4/3.5;margin-top:10px;}
  .hero-orbit--tl{left:10px;top:-16px;}
  .hero-orbit--tr{right:10px;top:-16px;}
  .hero-orbit--br{right:10px;bottom:50px;}
  .hero-orbit--bl{left:10px;bottom:-16px;}
  .hero-photo-chip--bl{bottom:14px;left:10px;}
  .hero-photo-chip--tr{top:10px;right:10px;}
}
@media(max-width:480px){
  .hero-orbit-text{display:none;}
  .hero-orbit-badge{padding:8px;}
  .hero-photo-chip .hero-badge-label{display:none;}
}

/* ============================================================
   SERVICES PAGE — Bento-style creative grid + filter tabs
   ============================================================ */

/* ---- Filter tabs ---- */
.svc-filter-wrap{
  display:flex;gap:10px;flex-wrap:wrap;
  border-bottom:2px solid var(--line);padding-bottom:0;
}
.svc-filter{
  font-family:'Manrope',sans-serif;font-weight:700;font-size:.85rem;
  padding:10px 20px;border-radius:100px 100px 0 0;border:none;
  background:transparent;color:var(--text-soft);cursor:pointer;
  border-bottom:2px solid transparent;margin-bottom:-2px;
  transition:all .25s var(--ease);
}
.svc-filter:hover{color:var(--indigo);}
.svc-filter.active{color:var(--indigo);border-bottom-color:var(--indigo);background:rgba(43,47,139,.06);}

/* ---- Bento grid ---- */
.svc-bento{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-auto-rows:auto;
  gap:24px;
}

/* ---- Base card ---- */
.svc-card{
  background:#fff;border-radius:var(--radius-md);padding:32px 28px;
  border:1.5px solid var(--line);position:relative;overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease), opacity .35s ease;
  display:flex;flex-direction:column;gap:10px;
  transform-style:preserve-3d;will-change:transform;
}
.svc-card::before{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:var(--grad-brand-soft);opacity:0;transition:opacity .4s var(--ease);pointer-events:none;
}
.svc-card:hover{transform:translateY(-7px);box-shadow:var(--shadow-lg);border-color:transparent;}
.svc-card:hover::before{opacity:1;}

/* Shine sweep on hover */
.svc-card::after{
  content:'';position:absolute;top:0;left:-140%;width:60%;height:100%;
  background:linear-gradient(115deg,transparent,rgba(255,255,255,.4),transparent);
  transform:skewX(-20deg);transition:left .65s var(--ease);pointer-events:none;
}
.svc-card:hover::after{left:150%;}

/* Wide card — spans 2 cols */
.svc-card--wide{grid-column:span 2;}
.svc-card--wide .svc-card-inner{display:flex;align-items:flex-start;gap:24px;}
.svc-card--wide .svc-card-body{flex:1;}
.svc-card--wide .svc-card-stat{
  flex-shrink:0;text-align:center;min-width:110px;
  background:var(--grad-brand);border-radius:var(--radius-sm);padding:20px 16px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.svc-card--wide .svc-card-stat .svc-stat-num{color:#fff;}
.svc-card--wide .svc-card-stat .svc-stat-lbl{color:rgba(255,255,255,.75);}

/* Tall card — spans 2 rows */
.svc-card--tall{grid-row:span 2;}

/* Dark card */
.svc-card--dark{background:var(--dark);}
.svc-card--dark:hover::before{opacity:0;}
.svc-card--dark .svc-label{color:rgba(255,255,255,.45);}
.svc-card--dark h3{color:#fff;}
.svc-card--dark p{color:#94a3b8;}

/* ---- Card elements ---- */
.svc-card-icon{
  width:54px;height:54px;border-radius:16px;display:flex;align-items:center;
  justify-content:center;font-size:1.35rem;flex-shrink:0;margin-bottom:4px;
  transition:transform .4s var(--ease);
}
.svc-card:hover .svc-card-icon{transform:rotate(-6deg) scale(1.08);}
.svc-icon--indigo{background:rgba(43,47,139,.10);color:var(--indigo);}
.svc-icon--orange{background:rgba(242,101,34,.12);color:var(--orange);}
.svc-icon--gradient{background:var(--grad-brand);color:#fff;}
.svc-icon--dark{background:var(--dark);color:#fff;}
.svc-icon--light{background:rgba(255,255,255,.1);color:#fff;}

.svc-label{
  font-family:'Manrope',sans-serif;font-size:.7rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;color:var(--orange);
}

.svc-card h3{
  font-family:'Poppins',sans-serif;font-size:1.1rem;font-weight:700;
  color:var(--dark);margin:0;line-height:1.25;
}
.svc-card p{font-size:.9rem;line-height:1.65;color:var(--text-soft);margin:0;flex:1;}

.svc-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px;}
.svc-tags .tag{font-size:.71rem;padding:4px 10px;}

.svc-mini-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px;}
.svc-stat-num{
  font-family:'Poppins',sans-serif;font-weight:700;font-size:1.9rem;
  background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;
  line-height:1.1;
}
.svc-stat-lbl{font-family:'Manrope',sans-serif;font-size:.72rem;color:var(--text-soft);font-weight:600;margin-top:2px;}

/* CTA link at bottom of card */
.svc-card-cta{
  display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:14px;
  font-family:'Manrope',sans-serif;font-weight:700;font-size:.82rem;
  color:var(--indigo);border-top:1px solid var(--line);
  transition:gap .25s var(--ease),color .25s var(--ease);
}
.svc-card-cta:hover{gap:12px;color:var(--orange);}
.svc-card-cta--light{color:rgba(255,255,255,.7);border-color:rgba(255,255,255,.1);}
.svc-card-cta--light:hover{color:#fff;}

.svc-partner-list{
  display:grid;gap:10px;margin:4px 0;padding:0;list-style:none;
}
.svc-partner-list li{
  display:flex;align-items:center;gap:10px;
  font-size:.88rem;color:#94a3b8;font-family:'Inter',sans-serif;
}

/* ---- Hidden state for filter ---- */
.svc-card.svc-hidden{
  opacity:0;pointer-events:none;transform:scale(.92) translateY(10px);
}

/* ---- Responsive ---- */
@media(max-width:1024px){
  .svc-bento{grid-template-columns:repeat(2,1fr);}
  .svc-card--wide{grid-column:span 2;}
  .svc-card--tall{grid-row:auto;}
}
@media(max-width:640px){
  .svc-bento{grid-template-columns:1fr;}
  .svc-card--wide{grid-column:span 1;}
  .svc-card--wide .svc-card-inner{flex-direction:column;}
  .svc-card--wide .svc-card-stat{width:100%;}
}