/* =====================================================================
   360 HOTEL SOLUTIONS — influencer-marketing.css
   Page-specific styles for the Influencer Marketing solution page.
   Reuses the global theme (tokens, header, footer, .flow-step,
   .flow-steps, .why, .results, .final-cta). Responsive at the bottom.
   ===================================================================== */

/* ===== GENERIC SUB-PAGE SECTION ===== */
.im-section{padding:90px 0;background:var(--white);}
.im-section.tint-cyan{background:var(--tint-cyan);}
.im-section.tint-purple{background:var(--tint-purple);}

/* ===== HERO — Instagram reel mock ===== */
.im-hero .hero-sub{max-width:510px;}
.im-hero .hero-pills{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:460px;}

.im-visual{position:relative;display:flex;align-items:center;justify-content:center;min-height:548px;padding:0 44px;}
.im-reel{width:100%;max-width:300px;aspect-ratio:9/16;border-radius:24px;overflow:hidden;position:relative;z-index:2;background:#111;box-shadow:0 44px 90px -30px rgba(2,15,77,0.5);border:1px solid rgba(2,15,77,0.15);}
.im-reel-img{position:absolute;inset:0;background:url('../images/stock/property-management-system-service.webp') center/cover;}
.im-reel-grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.45) 0%,rgba(0,0,0,0) 26%,rgba(0,0,0,0) 52%,rgba(0,0,0,0.78) 100%);}
.im-reel-top{position:absolute;top:0;left:0;right:0;padding:14px;display:flex;align-items:center;gap:9px;z-index:2;}
.im-reel-av{width:32px;height:32px;border-radius:50%;background:var(--grad);border:2px solid #fff;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:800;}
.im-reel-id{line-height:1.25;}
.im-reel-handle{font-size:12px;font-weight:700;color:#fff;}
.im-reel-paid{font-size:9px;color:rgba(255,255,255,0.85);}
.im-reel-follow{margin-left:auto;border:1px solid rgba(255,255,255,0.75);color:#fff;font-size:10px;font-weight:700;padding:4px 13px;border-radius:8px;flex-shrink:0;}
.im-reel-rail{position:absolute;right:10px;bottom:96px;display:flex;flex-direction:column;gap:17px;align-items:center;z-index:2;}
.im-reel-act{display:flex;flex-direction:column;align-items:center;gap:3px;color:#fff;}
.im-reel-act svg{width:25px;height:25px;filter:drop-shadow(0 1px 2px rgba(0,0,0,0.4));}
.im-reel-act span{font-size:10px;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,0.4);}
.im-reel-bottom{position:absolute;left:0;right:0;bottom:0;padding:14px 14px 16px;z-index:2;}
.im-reel-cap{font-size:11.5px;color:#fff;line-height:1.45;margin-bottom:11px;max-width:82%;text-shadow:0 1px 2px rgba(0,0,0,0.4);}
.im-reel-cap b{font-weight:700;}
.im-reel-book{display:inline-flex;align-items:center;gap:7px;background:#fff;color:var(--navy);font-size:11.5px;font-weight:800;padding:9px 15px;border-radius:100px;}
.im-reel-book svg{width:13px;height:13px;}

/* floating stat badges over the reel */
.im-badge{position:absolute;z-index:3;background:#fff;border-radius:14px;padding:10px 14px;box-shadow:0 16px 36px -12px rgba(2,15,77,0.26);display:flex;align-items:center;gap:9px;white-space:nowrap;opacity:0;animation:float-in .6s ease forwards;}
.im-badge .i{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.im-badge .i svg{width:15px;height:15px;}
.im-badge .num{font-size:15px;font-weight:800;line-height:1;}
.im-badge .lbl{font-size:10px;color:var(--muted);font-weight:600;margin-top:2px;}
.im-badge.b1{top:9%;left:-10px;animation-delay:.5s;} .im-badge.b1 .i{background:rgba(219,39,119,0.1);color:#db2777;}
.im-badge.b2{bottom:10%;right:-10px;animation-delay:.9s;} .im-badge.b2 .i{background:rgba(37,211,102,0.12);color:#16a34a;}

/* ===== NAVY BAND — reach → direct channels funnel (reuses .why) ===== */
.im-funnel{display:flex;flex-direction:column;align-items:center;gap:12px;}
.im-fn-top{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);border-radius:14px;padding:15px 18px;text-align:center;width:100%;}
.im-fn-top .v{font-size:23px;font-weight:800;color:#fff;line-height:1;}
.im-fn-top .l{font-size:11px;color:var(--muted-light);margin-top:5px;}
.im-fn-arrow{color:var(--cyan);display:flex;}
.im-fn-arrow svg{width:22px;height:22px;}
.im-fn-channels{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px;width:100%;}
.im-fn-ch{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:12px;padding:13px 6px;text-align:center;}
.im-fn-ch svg{width:19px;height:19px;color:var(--cyan);}
.im-fn-ch .n{font-size:10px;color:#fff;font-weight:600;margin-top:6px;line-height:1.2;}
.im-fn-result{background:var(--grad);border-radius:12px;padding:13px;text-align:center;width:100%;color:#fff;font-weight:800;font-size:13px;}

/* ===== FEATURE GRID (reuses .flow-step card styling) ===== */
.im-feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media(max-width:920px){
  .im-section{padding:56px 0;}
  .im-visual{min-height:auto;padding:8px 0 0;}
  .im-feature-grid{grid-template-columns:1fr 1fr;}
  .im-badge.b1{left:-2px;} .im-badge.b2{right:-2px;}
}

@media(max-width:640px){
  .im-feature-grid{grid-template-columns:1fr;}
  .im-badge{display:none;}
}