.elementor-30428 .elementor-element.elementor-element-ffad7d9{--display:flex;}.elementor-widget .tippy-tooltip .tippy-content{text-align:center;}/* Start custom CSS for html, class: .elementor-element-046e102 */<!-- UpSwing Hero Section — Elementor HTML Widget -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400&display=swap" rel="stylesheet">
<link href="https://fonts.bunny.net/css?family=cabinet-grotesk:400,500,600,700,800,900" rel="stylesheet">

<style>
/* ── Variables ── */
:root{
  --navy:#1A2240;
  --navy-deep:#0F1629;
  --navy-mid:#1E2A4A;
  --green:#2A6E3F;
  --green-mid:#318B4A;
  --green-bright:#3EA55A;
  --green-neon:#48C96A;
  --green-pale:#E5F5EB;
  --green-ultra:#F0FAF3;
  --ink:#0D1117;
  --white:#FFFFFF;
  --cream:#F7F9F7;
  --body-bg:#F5F7F5;
  --muted:#6B7688;
  --rule-light:rgba(26,34,64,0.09);
  --rule-dark:rgba(255,255,255,0.07);
  --g:'Cabinet Grotesk',sans-serif;
  --p:'Poppins',sans-serif;
}

/* ── Reset scoped ── */
.upswing-hero *,.upswing-hero *::before,.upswing-hero *::after{box-sizing:border-box;margin:0;padding:0}

/* ── Hero ── */
.upswing-hero .hero-index{
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:60px 72px 80px;position:relative;overflow:hidden;
  background:var(--navy-deep);
}
.upswing-hero .hero-mesh{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 70% 55% at 75% 20%, rgba(42,110,63,0.22) 0%, transparent 55%),
    radial-gradient(ellipse 55% 70% at 15% 85%, rgba(72,201,106,0.08) 0%, transparent 50%),
    radial-gradient(ellipse 40% 40% at 50% 50%, rgba(30,42,74,0.4) 0%, transparent 60%);
  animation:upswingMeshAnim 14s ease-in-out infinite alternate;
}
@keyframes upswingMeshAnim{
  0%{background:radial-gradient(ellipse 70% 55% at 75% 20%, rgba(42,110,63,0.22) 0%, transparent 55%),radial-gradient(ellipse 55% 70% at 15% 85%, rgba(72,201,106,0.08) 0%, transparent 50%)}
  50%{background:radial-gradient(ellipse 70% 55% at 35% 35%, rgba(42,110,63,0.26) 0%, transparent 55%),radial-gradient(ellipse 55% 70% at 65% 70%, rgba(72,201,106,0.10) 0%, transparent 50%)}
  100%{background:radial-gradient(ellipse 70% 55% at 60% 10%, rgba(42,110,63,0.18) 0%, transparent 55%),radial-gradient(ellipse 55% 70% at 25% 80%, rgba(72,201,106,0.07) 0%, transparent 50%)}
}
.upswing-hero .hero-dots{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(circle,rgba(72,201,106,0.10) 1px,transparent 1px),
    linear-gradient(rgba(72,201,106,0.02) 1px,transparent 1px),
    linear-gradient(90deg,rgba(72,201,106,0.02) 1px,transparent 1px);
  background-size:28px 28px,80px 80px,80px 80px;
  animation:upswingDotsShift 22s linear infinite;
}
@keyframes upswingDotsShift{0%{background-position:0 0,0 0,0 0}100%{background-position:56px 56px,80px 80px,80px 80px}}

.upswing-hero .hero-content{position:relative;z-index:2;max-width:1160px;margin:0 auto;width:100%}
.upswing-hero .hero-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--p);font-size:11px;font-weight:600;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--green-neon);margin-bottom:28px;animation:upswingFadeUp .8s ease both;
}
.upswing-hero .hero-eyebrow::before{content:'';width:32px;height:1px;background:var(--green-neon)}
.upswing-hero .hero-h1{
  font-family:var(--g);font-size:clamp(52px,7vw,100px);font-weight:900;
  line-height:0.93;letter-spacing:-0.04em;margin-bottom:32px;
  animation:upswingFadeUp .9s .1s ease both;color:#fff;
}
.upswing-hero .hero-h1 .l1{display:block}
.upswing-hero .hero-h1 .l2{display:block;color:var(--green-neon)}
.upswing-hero .hero-h1 .l3{display:block;color:rgba(255,255,255,0.18);font-size:0.45em;letter-spacing:-0.01em;margin-top:12px;font-family:var(--p);font-weight:300}
.upswing-hero .hero-sub{font-family:var(--p);font-size:17px;font-weight:300;color:rgba(255,255,255,0.45);max-width:540px;line-height:1.82;margin-bottom:72px;animation:upswingFadeUp .9s .2s ease both}
.upswing-hero .hero-stats{display:flex;gap:0;border-top:1px solid var(--rule-dark);padding-top:48px;animation:upswingFadeUp .9s .35s ease both}
.upswing-hero .hstat{padding-right:48px;border-right:1px solid var(--rule-dark);margin-right:48px}
.upswing-hero .hstat:last-child{border-right:none;padding-right:0;margin-right:0}
.upswing-hero .hstat-v{font-family:var(--g);font-size:42px;font-weight:900;line-height:1;margin-bottom:5px;color:var(--green-neon)}
.upswing-hero .hstat-l{font-family:var(--p);font-size:10px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:rgba(255,255,255,0.28)}
.upswing-hero .hero-index::after{content:'';position:absolute;bottom:0;left:0;right:0;height:4px;background:linear-gradient(90deg,transparent,var(--green),var(--green-neon),var(--green),transparent)}

@keyframes upswingFadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}

/* ── Responsive ── */
@media(max-width:960px){
  .upswing-hero .hero-index{padding:40px 24px 48px}
  .upswing-hero .hero-stats{flex-wrap:wrap;gap:20px}
  .upswing-hero .hstat{border-right:none;padding-right:0;margin-right:0}
  .upswing-hero .hero-h1{font-size:clamp(36px,8vw,52px)}
  .upswing-hero .hero-sub{font-size:15px;margin-bottom:40px}
  .upswing-hero .hstat-v{font-size:32px}
}
</style>

<div class="upswing-hero">
  <div class="hero-index">
    <div class="hero-mesh"></div>
    <div class="hero-dots"></div>
    <div class="hero-content">
      <div class="hero-eyebrow">UpSwing Digital — Influencer Marketing Department</div>
      <h1 class="hero-h1">
        <span class="l1">Creators at Scale.</span>
        <span class="l2">Results on Record.</span>
        <span class="l3">13.1M Views · 1,000 Creators · ₹0.05 CPV · 10 Documented Campaigns Across 6 Industries</span>
      </h1>
      <p class="hero-sub">We don't just run influencer campaigns — we engineer creator ecosystems that drive footfall, build brands, and crack new markets. From 40-creator concert activations in 3 hours to 1,000-influencer festive domination across Kerala.</p>
      <div class="hero-stats">
        <div class="hstat"><div class="hstat-v">13.1M<span style="font-size:0.6em;font-family:var(--p);font-weight:400">+</span></div><div class="hstat-l">Views — Single Campaign</div></div>
        <div class="hstat"><div class="hstat-v">1,000</div><div class="hstat-l">Creators Activated at Once</div></div>
        <div class="hstat"><div class="hstat-v">₹0.05</div><div class="hstat-l">Lowest CPV Achieved</div></div>
        <div class="hstat"><div class="hstat-v">3 hrs</div><div class="hstat-l">Fastest Campaign Live</div></div>
        <div class="hstat"><div class="hstat-v">14/14</div><div class="hstat-l">Kerala Districts — Zero Gaps</div></div>
      </div>
    </div>
  </div>
</div>/* End custom CSS */