/* ==========================================================================
   SOCIAL CAMPAIGN ENGINE (Lavender glass theme)
   ========================================================================== */

.engine-section{
  position:relative;
  width:100%;
  min-height:920px;
  padding:90px 0 60px;
  overflow:hidden;
  background:#060212;
}

/* Volumetric Diagonal Purple Light Beam & Deep Glow */
.engine-light-beam{
  position:absolute;
  left:-15%;
  top:-20%;
  width:130%;
  height:140%;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(ellipse 65% 55% at 32% 18%, rgba(168,85,247,0.24) 0%, rgba(107,33,168,0.08) 45%, transparent 70%),
    linear-gradient(135deg, rgba(168,85,247,0.18) 0%, rgba(147,51,234,0.07) 35%, transparent 62%);
  mix-blend-mode:screen;
}
.engine-glow-core{
  position:absolute;
  left:50%;
  top:58%;
  transform:translate(-50%,-50%);
  width:600px;
  height:600px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(147,51,234,0.22) 0%, rgba(88,28,135,0.08) 50%, transparent 70%);
  pointer-events:none;
  z-index:0;
}

.engine-wrap{
  position:relative;
  z-index:1;
  max-width:1240px;
  margin:0 auto;
  padding:0 24px;
}

/* Header */
.engine-header{
  text-align:center;
  max-width:920px;
  margin:0 auto 24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.engine-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:7px 20px;
  border-radius:999px;
  background:rgba(147,51,234,0.25);
  border:1px solid rgba(192,132,252,0.48);
  color:#f3e8ff;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:0.04em;
  margin:0 auto 22px auto;
  box-shadow:0 0 20px rgba(147,51,234,0.3);
  backdrop-filter:blur(10px);
}
.engine-pill-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#c084fc;
  box-shadow:0 0 8px #c084fc;
  animation:pillPulse 2s infinite ease-in-out;
}
@keyframes pillPulse{
  0%,100%{opacity:0.7}
  50%{opacity:0.95}
}

.engine-title{
  display:block!important;
  width:100%!important;
  max-width:920px!important;
  margin:0 auto 16px auto!important;
  text-align:center!important;
  font-family:inherit;
  font-size:clamp(32px, 4.2vw, 54px);
  font-weight:800;
  line-height:1.12;
  letter-spacing:-0.025em;
  color:#ffffff;
  text-shadow:0 2px 24px rgba(0,0,0,0.6);
}
.engine-title-grad{
  background:linear-gradient(135deg, #ffffff 30%, #e9d5ff 70%, #c084fc 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.engine-sub{
  font-size:clamp(14.5px, 1.25vw, 17px);
  line-height:1.62;
  color:rgba(255,255,255,0.78);
  max-width:62ch;
  margin:0 auto 26px;
}

.engine-actions{
  display:inline-flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  justify-content:center;
}
.btn-glow-purple{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:13px 30px;
  border-radius:999px;
  background:#9333ea;
  color:#ffffff;
  font-size:14px;
  font-weight:700;
  text-decoration:none;
  box-shadow:0 0 28px rgba(147,51,234,0.65), 0 4px 14px rgba(0,0,0,0.4);
  transition:all .28s ease;
}
.btn-glow-purple:hover{
  background:#a855f7;
  transform:translateY(-2px);
  box-shadow:0 0 38px rgba(168,85,247,0.85), 0 6px 20px rgba(0,0,0,0.5);
  color:#ffffff;
}
.btn-glass{
  display:inline-flex;
  align-items:center;
  padding:13px 26px;
  border-radius:999px;
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.18);
  color:#ffffff;
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  backdrop-filter:blur(10px);
  transition:all .25s ease;
}
.btn-glass:hover{
  background:rgba(255,255,255,0.14);
  border-color:rgba(192,132,252,0.5);
  color:#ffffff;
  transform:translateY(-2px);
}

/* -------------------------------------------------------------
   Interactive 3D Marketing Stage
------------------------------------------------------------- */
.engine-stage{
  position:relative;
  width:100%;
  height:620px;
  margin:25px auto 0;
  perspective:1200px;
  transform-style:preserve-3d;
  transition:transform 0.15s ease-out;
}
.engine-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:1;
}

/* -------------------------------------------------------------
   The 4 Digital Marketing Glass Cards (HUD widgets)
------------------------------------------------------------- */
.m-card{
  position:absolute;
  z-index:2;
  border-radius:20px;
  padding:16px 18px 14px;
  background:rgba(16, 9, 38, 0.78);
  border:1px solid rgba(168, 85, 247, 0.38);
  box-shadow:0 20px 42px -10px rgba(0,0,0,0.7), 0 0 22px rgba(147,51,234,0.18);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  transition:border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  user-select:none;
}
.m-card:hover{
  border-color:rgba(192, 132, 252, 0.85);
  box-shadow:0 24px 50px -8px rgba(0,0,0,0.85), 0 0 32px rgba(192,132,252,0.45);
  transform:translateY(-4px) scale(1.03);
}

.mc-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}
.mc-label{
  font-size:13px;
  font-weight:700;
  color:#ffffff;
  display:flex;
  align-items:center;
  gap:6px;
}
.mc-val{
  color:#d8b4fe;
  font-weight:700;
}
.mc-badge{
  font-size:11px;
  font-weight:600;
  color:#c084fc;
  background:rgba(168,85,247,0.2);
  border:1px solid rgba(168,85,247,0.35);
  padding:2px 8px;
  border-radius:999px;
}
.mc-tag{
  font-size:11px;
  font-weight:600;
  color:#d8b4fe;
  background:rgba(147,51,234,0.22);
  padding:2px 8px;
  border-radius:999px;
}
.mc-tag.up{
  color:#4ade80;
  background:rgba(34,197,94,0.16);
  border:1px solid rgba(34,197,94,0.3);
}
.mc-foot{
  font-size:11px;
  color:rgba(255,255,255,0.6);
  margin-top:10px;
  text-align:center;
  letter-spacing:0.02em;
}

/* Card 1: Creative & Hook Rate (Top-Left) */
.card-targeting{
  top:8%;
  left:4%;
  width:290px;
}
.creative-box{
  width:100%;
  min-height:124px;
  height:auto;
  border-radius:14px;
  background:rgba(14, 6, 32, 0.75);
  border:1px solid rgba(236,72,153,0.3);
  padding:10px 12px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  box-sizing:border-box;
}
.creative-video-thumb{
  position:relative;
  width:100%;
  height:54px;
  border-radius:8px;
  background:linear-gradient(135deg, rgba(236,72,153,0.35), rgba(147,51,234,0.45));
  border:1px solid rgba(244,114,182,0.35);
  display:flex;
  align-items:center;
  justify-content:center;
}
.play-btn-glow{
  width:24px;
  height:24px;
  border-radius:50%;
  background:rgba(255,255,255,0.9);
  color:#9333ea;
  font-size:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 0 12px rgba(255,255,255,0.8);
}
.creative-tag{
  position:absolute;
  left:8px;
  bottom:6px;
  font-size:8.5px;
  font-weight:700;
  letter-spacing:0.06em;
  color:#fbcfe8;
  background:rgba(0,0,0,0.55);
  padding:2px 6px;
  border-radius:4px;
}
.creative-stats{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.cs-row{
  display:flex;
  justify-content:space-between;
  font-size:10.5px;
  color:rgba(255,255,255,0.7);
}
.cs-row b{color:#ffffff;font-weight:700}
.cs-bar{
  width:100%;
  height:4px;
  border-radius:2px;
  background:rgba(255,255,255,0.1);
  overflow:hidden;
}
.cs-bar span{
  display:block;
  height:100%;
  border-radius:2px;
  background:linear-gradient(90deg, #ec4899, #c084fc);
  box-shadow:0 0 8px #ec4899;
}

/* Card 2: Campaign ROAS & Revenue (Bottom-Left) */
.card-revenue{
  bottom:10%;
  left:10%;
  width:350px;
}
.chart-box{
  width:100%;
  height:95px;
  border-radius:14px;
  background:rgba(14, 6, 32, 0.75);
  border:1px solid rgba(236,72,153,0.3);
  padding:8px 6px 0;
  display:flex;
  align-items:flex-end;
}
.rev-chart{
  width:100%;
  height:100%;
  overflow:visible;
}
.chart-dot{
  filter:drop-shadow(0 0 3px rgba(90,31,214,.22));
  animation:dotPulse 2s infinite ease-in-out;
}
@keyframes dotPulse{
  0%,100%{opacity:0.7}
  50%{opacity:0.9}
}
.chart-dot{animation-duration:4s}

/* Card 3: Audience Funnel (Top-Right) */
.card-install{
  top:8%;
  right:4%;
  width:300px;
}
.funnel-box{
  width:100%;
  min-height:124px;
  height:auto;
  border-radius:14px;
  background:rgba(14, 6, 32, 0.75);
  border:1px solid rgba(236,72,153,0.3);
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:10px;
  box-sizing:border-box;
}
.funnel-tier{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:7px 12px;
  border-radius:9px;
  border:1px solid rgba(244,114,182,0.25);
  box-sizing:border-box;
  gap:8px;
}
.funnel-tier.t1{background:rgba(236,72,153,0.18)}
.funnel-tier.t2{background:rgba(168,85,247,0.16)}
.funnel-tier.t3{background:rgba(59,130,246,0.14)}
.ft-label{
  font-size:11px;
  font-weight:600;
  color:#ffffff;
  white-space:nowrap;
}
.ft-val{
  font-size:10px;
  font-weight:700;
  color:#fbcfe8;
  white-space:nowrap;
}

/* Card 4: Viral Social Engagement (Bottom-Right) */
.card-engagement{
  bottom:10%;
  right:10%;
  width:350px;
}
.social-engage-box{
  width:100%;
  height:95px;
  border-radius:14px;
  background:rgba(14, 6, 32, 0.75);
  border:1px solid rgba(236,72,153,0.3);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  padding:10px;
  align-content:center;
}
.engage-pill{
  display:flex;
  align-items:center;
  gap:6px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(244,114,182,0.3);
  border-radius:8px;
  padding:5px 8px;
  transition:all .2s ease;
}
.engage-pill:hover{
  background:rgba(236,72,153,0.2);
  border-color:#f472b6;
  transform:scale(1.04);
}
.ep-icon{font-size:12px}
.ep-txt{
  font-size:9.5px;
  color:rgba(255,255,255,0.85);
}
.ep-txt b{
  color:#ffffff;
  font-weight:700;
  display:block;
  line-height:1.1;
}

/* -------------------------------------------------------------
   Responsive Breakpoints
------------------------------------------------------------- */
@media (max-width:1080px){
  .card-targeting{left:2%;top:5%}
  .card-install{right:2%;top:5%}
  .card-revenue{left:3%;bottom:6%;width:330px}
  .card-engagement{right:3%;bottom:6%;width:330px}
}

@media (max-width:880px){
  .engine-stage{
    height:auto;
    min-height:760px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    padding-top:280px; /* Space for the central core canvas above */
  }
  .m-card{
    position:relative;
    inset:auto!important;
    width:100%!important;
    max-width:280px;
    margin:0 auto;
  }
}

@media (max-width:600px){
  .engine-section{padding:60px 0 40px}
  .engine-stage{
    grid-template-columns:1fr;
    padding-top:240px;
    gap:14px;
  }
  .m-card{max-width:100%}
  .engine-actions{flex-direction:column;width:100%}
  .btn-glow-purple, .btn-glass{width:100%;justify-content:center}
}

/* Soft lavender treatment to blend the campaign visual into the page */
.engine-section{
  background:
    radial-gradient(ellipse 70% 48% at 50% 52%,rgba(112,151,216,.34),transparent 76%),
    linear-gradient(180deg,#f5f4fb 0%,#e7eef9 18%,#9db5dc 50%,#e4ecf9 83%,#f5f4fb 100%);
}
.engine-light-beam{
  background:
    radial-gradient(ellipse 56% 44% at 50% 42%,rgba(239,246,255,.24) 0%,rgba(156,187,235,.08) 48%,transparent 76%),
    radial-gradient(circle at 8% 62%,rgba(233,241,255,.18) 0%,transparent 15%),
    radial-gradient(circle at 94% 52%,rgba(229,239,255,.16) 0%,transparent 17%),
    linear-gradient(135deg,rgba(180,205,245,.1) 0%,rgba(143,171,221,.05) 42%,transparent 72%);
  mix-blend-mode:normal;
}
.engine-glow-core{
  background:radial-gradient(circle,rgba(139,145,244,.18) 0%,rgba(115,142,221,.07) 48%,transparent 72%);
}
.engine-pill{
  background:rgba(255,255,255,.68);
  border-color:rgba(90,31,214,.16);
  color:#50466e;
  box-shadow:0 6px 18px -12px rgba(48,34,90,.28);
}
.engine-pill-dot{
  background:#8d72c6;
  box-shadow:0 0 5px rgba(141,114,198,.45);
  animation-duration:4s;
}
.engine-title{
  color:#211c3a;
  text-shadow:none;
}
.engine-title-grad{
  background:linear-gradient(110deg,#5a1fd6 5%,#8c62c6 100%);
  -webkit-background-clip:text;
  background-clip:text;
}
.engine-sub{color:#5d5872;text-align:center}
.btn-glow-purple{
  background:linear-gradient(90deg,#3700c0 0%,#8302ce 52%,#dd08dc 100%);
  border:1px solid rgba(255,255,255,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38),0 12px 28px -6px rgba(131,2,206,.55),0 4px 14px -2px rgba(221,8,220,.35);
  transition:transform .25s,box-shadow .25s,background .25s,border-color .25s;
}
.btn-glow-purple:hover{
  background:linear-gradient(90deg,#4400db 0%,#9804eb 50%,#f016ee 100%);
  border-color:rgba(255,255,255,.38);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.48),0 16px 36px -6px rgba(131,2,206,.75),0 0 24px -2px rgba(221,8,220,.55);
  transform:translateY(-2px);
}
.btn-glass{
  background:rgba(255,255,255,.58);
  border-color:rgba(90,31,214,.16);
  color:#453c62;
}
.btn-glass:hover{
  background:rgba(255,255,255,.86);
  border-color:rgba(90,31,214,.28);
  color:#332552;
}
.engine-stage{transform-style:flat}
.m-card{
  background:rgba(255,255,255,.72);
  border-color:rgba(90,31,214,.15);
  box-shadow:0 12px 30px -20px rgba(48,34,90,.38),0 0 18px rgba(90,31,214,.035);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.m-card:hover{
  border-color:rgba(90,31,214,.28);
  box-shadow:0 16px 34px -20px rgba(48,34,90,.42),0 0 20px rgba(90,31,214,.06);
  transform:translateY(-2px);
}
.mc-label,.cs-row b{color:#30284a}
.mc-val{color:#5a1fd6}
.mc-badge{
  color:#654b9c;
  background:rgba(90,31,214,.07);
  border-color:rgba(90,31,214,.14);
}
.mc-tag{
  color:#654b9c;
  background:rgba(90,31,214,.07);
}
.mc-tag.up{
  color:#38745c;
  background:rgba(73,145,108,.08);
  border-color:rgba(73,145,108,.16);
}
.mc-foot{color:#706a82}
.creative-box,.chart-box,.funnel-box,.social-engage-box{
  background:rgba(247,245,252,.8);
  border-color:rgba(90,31,214,.12);
}
.creative-video-thumb{
  background:linear-gradient(135deg,rgba(168,145,224,.18),rgba(90,31,214,.1));
  border-color:rgba(90,31,214,.14);
}
.play-btn-glow{color:#5a1fd6;box-shadow:0 2px 8px rgba(48,34,90,.12)}
.creative-tag{
  color:#51466e;
  background:rgba(255,255,255,.82);
}
.cs-row{color:#726d81}
.cs-bar{background:rgba(90,31,214,.1)}
.cs-bar span{
  background:linear-gradient(90deg,#8b70c3,#5a1fd6);
  box-shadow:none;
}
.funnel-tier{border-color:rgba(90,31,214,.12)}
.funnel-tier.t1{background:rgba(168,145,224,.12)}
.funnel-tier.t2{background:rgba(90,31,214,.07)}
.funnel-tier.t3{background:rgba(105,135,174,.08)}
.ft-label{color:#514a65}
.ft-val{color:#654b9c}
.engage-pill{
  background:rgba(255,255,255,.7);
  border-color:rgba(90,31,214,.1);
}
.engage-pill:hover{
  background:rgba(90,31,214,.07);
  border-color:rgba(90,31,214,.2);
}
.ep-txt{color:#706a82}
.ep-txt b{color:#30284a}
.engine-header{
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:center!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  max-width:920px!important;
}
.engine-title{
  display:block!important;
  width:100%!important;
  max-width:920px!important;
  margin:0 auto 16px auto!important;
  text-align:center!important;
}
.engine-sub{
  display:block!important;
  width:100%!important;
  max-width:680px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:center!important;
}
.engine-actions{
  margin-left:auto!important;
  margin-right:auto!important;
  justify-content:center!important;
}
.engine-stage{transform-origin:center center}
.engine-stage::before{
  content:"";
  position:absolute;
  inset:8% 10%;
  z-index:0;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(245,248,255,.32) 0%,rgba(121,142,220,.12) 42%,transparent 72%);
  pointer-events:none;
}
.m-card{
  color:#f5f3ff;
  background:linear-gradient(145deg,rgba(54,75,132,.78),rgba(24,34,77,.86));
  border-color:rgba(218,231,255,.42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 18px 38px -24px rgba(28,38,78,.52),0 0 22px rgba(140,173,239,.12);
}
.m-card:hover{
  border-color:rgba(229,239,255,.62);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38),0 20px 40px -24px rgba(28,38,78,.58),0 0 24px rgba(137,168,240,.2);
}
.mc-head{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%}
.mc-label{justify-content:flex-start;color:#f8f7ff}
.mc-val{color:#d8d2ff}
.mc-badge,.mc-tag{
  color:#e0dcff;
  background:rgba(149,139,255,.16);
  border-color:rgba(193,187,255,.22);
}
.mc-tag.up{
  color:#c8eedc;
  background:rgba(104,174,145,.14);
  border-color:rgba(157,220,192,.25);
}
.mc-foot{color:rgba(244,242,255,.72)}
.creative-box,.chart-box,.funnel-box,.social-engage-box{
  background:rgba(12,19,49,.46);
  border-color:rgba(207,221,255,.24);
}
.creative-video-thumb{
  background:linear-gradient(135deg,rgba(119,119,231,.46),rgba(90,157,223,.3));
  border-color:rgba(209,225,255,.4);
}
.play-btn-glow{
  color:#6252d8;
  box-shadow:0 0 14px rgba(193,218,255,.34);
}
.creative-tag{color:#f5f3ff;background:rgba(12,10,35,.72)}
.cs-row{color:rgba(244,242,255,.74)}
.cs-row b{color:#fff}
.cs-bar{background:rgba(255,255,255,.14)}
.cs-bar span{
  background:linear-gradient(90deg,#8b85ff,#a6d7ff);
  box-shadow:0 0 6px rgba(139,133,255,.35);
}
.funnel-tier{border-color:rgba(193,187,255,.2)}
.funnel-tier.t1{background:rgba(119,109,219,.2)}
.funnel-tier.t2{background:rgba(100,141,220,.15)}
.funnel-tier.t3{background:rgba(143,131,222,.12)}
.ft-label{color:#f5f3ff}
.ft-val{color:#d9d6ff}
.engage-pill{
  background:rgba(210,211,255,.08);
  border-color:rgba(193,187,255,.18);
}
.engage-pill:hover{
  background:rgba(139,133,255,.18);
  border-color:rgba(193,207,255,.34);
}
.ep-txt{color:rgba(244,242,255,.78)}
.ep-txt b{color:#fff}
@media (prefers-reduced-motion:reduce){
  .engine-pill-dot{animation:none}
  .engine-stage,.m-card,.engage-pill{transition:none}
}

/* ==========================================================================
   SCROLLYTELLING (KAY 3D Neural Map Simulation)
   ========================================================================== */
#amb{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}

/* specular edge on cinema screen */
.cine::before{content:"";position:absolute;left:14%;right:14%;top:-1px;height:2px;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,transparent,#fff,transparent);box-shadow:0 0 18px 2px rgba(255,255,255,.5);animation:glint 5s ease-in-out infinite}
.cine::after{content:"";position:absolute;right:10%;bottom:-1px;width:36%;height:2px;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,transparent,#fff,transparent);box-shadow:0 0 40px 10px rgba(190,150,255,.4)}
@keyframes glint{0%,100%{opacity:.55}50%{opacity:1}}

/* ---- neural scrollytelling ---- */
.story{padding:100px 0 30px}
.cine{
  position:relative;
  width:min(1160px,calc(100% - 48px));
  height:calc(100svh - 130px);
  min-height:520px;
  max-height:780px;
  margin:0 auto;
  border-radius:40px;
  overflow:hidden;
  background:radial-gradient(60% 70% at 70% 45%,#2b1170 0%,#140a3a 55%,#0a0524 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.3),0 50px 100px -30px rgba(40,20,120,.6);
}
#neural{position:absolute;inset:0;width:100%;height:100%;display:block}
.scrim{position:absolute;left:0;right:0;bottom:0;height:60%;z-index:1;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(8,4,28,.78))}
.cine-ui{position:absolute;left:28px;top:22px;z-index:3;display:flex;gap:10px;align-items:center}
.cine-ui .dot{width:9px;height:9px;border-radius:50%;background:#c084fc;box-shadow:0 0 10px #c084fc}
.cine-ui .pill{width:46px;height:16px;border-radius:99px;background:rgba(168,85,247,.22);border:1px solid rgba(168,85,247,.4)}
.hud{font-size:11px;letter-spacing:.18em;color:rgba(255,255,255,.8);font-weight:700}
.chap-wrap{position:absolute;left:clamp(24px,5vw,64px);bottom:clamp(24px,8vh,70px);width:min(520px,calc(100% - 48px));height:auto;min-height:240px;z-index:2}
.chap{position:absolute;left:0;bottom:0;width:100%;opacity:0;transform:translateY(28px);filter:blur(8px);pointer-events:none;
  transition:opacity .7s,transform .8s cubic-bezier(.2,.8,.2,1),filter .7s}
.chap.on{opacity:1;transform:none;filter:none;pointer-events:auto}
.chap .eyebrow{
  display:inline-flex!important;
  align-items:center!important;
  padding:6px 16px!important;
  border-radius:999px!important;
  background:rgba(147,51,234,0.28)!important;
  border:1px solid rgba(192,132,252,0.55)!important;
  color:#ffffff!important;
  font-size:12px!important;
  font-weight:700!important;
  letter-spacing:0.08em!important;
  text-transform:uppercase!important;
  box-shadow:0 4px 14px rgba(0,0,0,0.4)!important;
  backdrop-filter:blur(10px)!important;
}
.chap h2{
  color:#ffffff!important;
  font-size:clamp(28px,3.8vw,48px)!important;
  font-weight:700!important;
  letter-spacing:-0.03em!important;
  line-height:1.15!important;
  margin:12px 0 14px!important;
  max-width:18ch!important;
  text-shadow:0 2px 20px rgba(0,0,0,0.5)!important;
}
.chap p{
  color:rgba(255,255,255,0.92)!important;
  font-size:clamp(14.5px,1.3vw,17px)!important;
  line-height:1.65!important;
  margin:0!important;
  max-width:44ch!important;
  text-shadow:0 1px 12px rgba(0,0,0,0.5)!important;
}
.sdots{position:absolute;right:22px;top:50%;transform:translateY(-50%);z-index:3;display:grid;gap:10px}
.sdots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.3);transition:all .4s}
.sdots i.on{background:#fff;height:26px;border-radius:6px}
/* Clear high-contrast glass chips */
.sc{position:absolute;z-index:2;padding:10px 18px;font-size:13px;font-weight:600;color:#fff!important;--r:999px;animation:hover 6s ease-in-out infinite alternate;
  transform:translate(calc(var(--nx,0)*var(--d,10)*-1px),calc(var(--ny,0)*var(--d,10)*-1px))}
.cine .sc{background:rgba(20,14,46,.75)!important;border:1px solid rgba(192,132,252,.4)!important;color:#fff!important;box-shadow:0 10px 24px -8px rgba(0,0,0,.6),0 0 14px rgba(168,85,247,.2)!important;backdrop-filter:blur(12px)!important}
.sc:nth-of-type(1){right:30%;top:14%}.sc:nth-of-type(2){right:8%;top:26%}.sc:nth-of-type(3){right:20%;top:52%}
.sc:nth-of-type(4){right:6%;top:64%}.sc:nth-of-type(5){right:36%;top:74%}.sc:nth-of-type(6){right:14%;top:84%}
@media (max-width:900px){.sc:nth-of-type(n+4){display:none}.sc:nth-of-type(1){right:10%;top:10%}.sc:nth-of-type(2){right:48%;top:22%}.sc:nth-of-type(3){right:6%;top:30%}.cine{border-radius:30px}}
@media (max-width:768px){
  .story{padding:50px 0 20px}
  .cine{width:calc(100% - 24px);height:520px;min-height:480px;max-height:560px;border-radius:24px;margin:0 auto}
  .cine-ui{left:18px;top:16px}
  .sc{display:none!important}
  .scrim{height:75%;background:linear-gradient(180deg,transparent 0%,rgba(8,4,28,.45) 25%,rgba(8,4,28,.92) 65%,#08041c 100%)}
  .chap-wrap{left:18px;right:18px;bottom:22px;width:auto;height:auto;min-height:190px}
  .chap h2{font-size:clamp(22px,5.8vw,28px);line-height:1.18;margin:8px 0 8px;max-width:100%}
  .chap p{font-size:clamp(13px,3.6vw,14.5px);line-height:1.52;max-width:100%;color:rgba(255,255,255,0.85)}
  .sdots{right:12px}
}
@media (max-width:480px){
  .cine{width:calc(100% - 18px);height:500px;border-radius:20px}
  .chap-wrap{left:14px;right:14px;bottom:18px}
  .chap h2{font-size:22px;line-height:1.2}
  .chap p{font-size:13px}
}
/* reduced motion / no WebGL: stacked, static */
.story-static .story,.story-static.story{padding-top:90px}
.story-static .cine{height:auto;max-height:none;min-height:0}
.story-static #neural{position:relative;height:min(60vh,420px)}
.story-static .chap-wrap{position:relative;left:auto;bottom:auto;width:auto;height:auto;padding:8px 28px 34px}
.story-static .chap{position:relative;opacity:1;transform:none;filter:none;margin-bottom:26px}
.story-static .sc,.story-static .sdots,.story-static .scrim{display:none}
@media (prefers-reduced-motion:reduce){#amb{display:none!important}.cine::before{animation:none}}


/* ==========================================================================
   EXPERTISE 2x2 BENTO GRID (Replit-style Dark Glass Cards)
   ========================================================================== */
.expertise-bento-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:26px;
  margin-top:36px;
}

.bento-exp-card{
  position:relative;
  border-radius:28px;
  overflow:hidden;
  padding:32px 30px 26px;
  background:linear-gradient(145deg, rgba(32, 16, 72, 0.82) 0%, rgba(18, 8, 44, 0.94) 100%);
  border:1px solid rgba(192, 132, 252, 0.38);
  box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 24px 50px -10px rgba(0, 0, 0, 0.55), 0 0 22px rgba(147, 51, 234, 0.14);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  text-decoration:none;
  display:flex;
  flex-direction:column;
  transition:transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease;
  min-height:450px;
}
.bento-exp-card:hover{
  transform:translateY(-6px);
  border-color:rgba(192, 132, 252, 0.85);
  box-shadow:inset 0 1px 0 #ffffff, 0 32px 64px -12px rgba(0, 0, 0, 0.75), 0 0 35px rgba(192, 132, 252, 0.45);
}
.bento-exp-card::before{
  content:"";
  position:absolute;
  top:0;
  left:15%;
  right:15%;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
  pointer-events:none;
}

.bec-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}
.bec-badge{
  font-size:11.5px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#f3e8ff;
  padding:4px 12px;
  border-radius:999px;
  background:rgba(168, 85, 247, 0.22);
  border:1px solid rgba(192, 132, 252, 0.4);
}
.bec-arrow{
  width:32px;
  height:32px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255, 255, 255, 0.08);
  border:1px solid rgba(255, 255, 255, 0.18);
  color:#ffffff;
  transition:all .3s ease;
}
.bento-exp-card:hover .bec-arrow{
  background:#9333ea;
  border-color:#c084fc;
  box-shadow:0 0 14px #c084fc;
  transform:translate(2px, -2px);
}

.bec-title{
  font-size:clamp(21px, 1.8vw, 25px);
  font-weight:700;
  color:#ffffff;
  margin:4px 0 8px;
  line-height:1.2;
  letter-spacing:-0.02em;
}
.bec-desc{
  font-size:13.5px;
  color:rgba(255, 255, 255, 0.74);
  line-height:1.55;
  margin:0 0 20px;
  max-width:44ch;
}

/* Dog-Ear Folded Corner Peel Effect matching reference */
.exp-peel{
  position:absolute;
  right:0;
  bottom:0;
  width:46px;
  height:46px;
  pointer-events:none;
  z-index:3;
}
.exp-peel::before{
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  width:46px;
  height:46px;
  background:linear-gradient(135deg, transparent 50%, #060212 50%);
}
.exp-peel::after{
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  width:42px;
  height:42px;
  background:linear-gradient(135deg, rgba(88, 28, 135, 0.6) 0%, rgba(192, 132, 252, 0.85) 50%, rgba(30, 10, 60, 0.95) 100%);
  clip-path:polygon(0 100%, 100% 0, 100% 100%);
  box-shadow:-4px -4px 14px rgba(0, 0, 0, 0.75);
  border-radius:0 0 28px 0;
  transition:transform 0.3s ease;
}
.bento-exp-card:hover .exp-peel::after{
  transform:scale(1.12);
}

/* -------------------------------------------------------------
   Bento Card Custom Graphic Containers
------------------------------------------------------------- */
.bento-graphic{
  position:relative;
  width:100%;
  height:200px;
  margin-top:auto;
  border-radius:20px;
  background:rgba(11, 5, 26, 0.75);
  border:1px solid rgba(168, 85, 247, 0.25);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Card 1: Waveform (Healthcare) */
.bento-wave{
  flex-direction:column;
  padding:16px 20px;
  justify-content:space-between;
}
.bento-wave-svg{
  width:100%;
  height:120px;
  overflow:visible;
}
.bento-wave-path{
  filter:drop-shadow(0 0 8px rgba(192, 132, 252, 0.7));
}
.bento-hud-pill{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:5px 14px;
  border-radius:999px;
  background:rgba(20, 10, 48, 0.85);
  border:1px solid rgba(192, 132, 252, 0.35);
  font-size:11px;
  color:#f3e8ff;
  box-shadow:0 0 12px rgba(147, 51, 234, 0.25);
}
.bhp-status{
  display:flex;
  align-items:center;
  gap:6px;
}
.bhp-dot{
  width:6px;
  height:6px;
  border-radius:50%;
}
.bhp-dot.open{background:#c084fc;box-shadow:0 0 6px #c084fc}
.bhp-dot.booked{background:#38bdf8;box-shadow:0 0 6px #38bdf8}
.bhp-plus{
  width:16px;
  height:16px;
  border-radius:50%;
  background:rgba(255,255,255,0.15);
  border:1px solid rgba(255,255,255,0.3);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  font-weight:700;
}

/* Card 2: 3D Cylinder Stack (E-Commerce) */
.bento-stack{
  background:radial-gradient(circle at 50% 50%, rgba(147, 51, 234, 0.18), rgba(11, 5, 26, 0.85));
}
.bento-cylinder-wrap{
  position:relative;
  width:140px;
  height:140px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.bento-circuit-lines{
  position:absolute;
  inset:-20px;
  background-image:linear-gradient(45deg, transparent 48%, rgba(168,85,247,0.15) 50%, transparent 52%);
  background-size:24px 24px;
  pointer-events:none;
}
.bento-cylinder{
  width:96px;
  height:30px;
  border-radius:50%;
  background:linear-gradient(180deg, #d8b4fe 0%, #a855f7 40%, #7e22ce 100%);
  border:1.5px solid rgba(255, 255, 255, 0.5);
  box-shadow:0 4px 14px rgba(0,0,0,0.5), inset 0 2px 4px rgba(255,255,255,0.6);
  margin-top:-14px;
}
.cyl-top{
  margin-top:0;
  background:linear-gradient(180deg, #ffffff 0%, #e9d5ff 40%, #c084fc 100%);
}
.bento-lightning-pill{
  position:absolute;
  right:-10px;
  bottom:10px;
  width:44px;
  height:44px;
  border-radius:14px;
  background:#9333ea;
  border:1.5px solid rgba(255, 255, 255, 0.6);
  color:#ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 0 20px rgba(168, 85, 247, 0.85), 0 6px 14px rgba(0,0,0,0.5);
  animation:lightningPulse 2.5s infinite ease-in-out;
}
@keyframes lightningPulse{
  0%,100%{transform:scale(1);box-shadow:0 0 20px rgba(168, 85, 247, 0.85)}
  50%{transform:scale(1.1);box-shadow:0 0 32px rgba(192, 132, 252, 1)}
}

/* Card 3: Keycaps & Avatars (Education) */
.bento-keys-wrap{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.bento-radar-arc{
  position:absolute;
  border-radius:50%;
  border:1px dashed rgba(192, 132, 252, 0.25);
  bottom:-50px;
}
.ba-1{width:160px;height:160px}
.ba-2{width:240px;height:240px}
.ba-3{width:320px;height:320px}

.bkey{
  position:absolute;
  width:32px;
  height:32px;
  border-radius:8px;
  background:rgba(28, 14, 60, 0.9);
  border:1px solid rgba(192, 132, 252, 0.4);
  box-shadow:0 4px 10px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.4);
  color:#ffffff;
  font-size:12px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
}
.bk-a{top:22px;left:42px}
.bk-s{top:22px;left:82px}
.bk-7{top:62px;left:62px}
.bk-check{top:62px;right:48%;color:#4ade80}

.bento-avatars-row{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:20px;
}
.bav{
  width:30px;
  height:30px;
  border-radius:50%;
  background:rgba(20, 10, 48, 0.9);
  border:1.5px solid rgba(192, 132, 252, 0.7);
  box-shadow:0 0 10px rgba(168, 85, 247, 0.4);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
}
.bento-feedback-btn{
  position:relative;
  z-index:2;
  margin-top:16px;
  padding:5px 14px;
  border-radius:999px;
  background:rgba(147, 51, 234, 0.35);
  border:1px solid rgba(192, 132, 252, 0.5);
  color:#ffffff;
  font-size:11px;
  font-weight:700;
  box-shadow:0 0 12px rgba(147, 51, 234, 0.3);
}

/* Card 4: Tachometer Gauge (Real Estate) */
.bento-gauge-wrap{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.bento-gauge-pill{
  margin-bottom:8px;
  padding:4px 12px;
  border-radius:999px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.2);
  color:#f3e8ff;
  font-size:10.5px;
  font-weight:600;
}
.bento-speedo-box{
  position:relative;
  width:130px;
  height:130px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.speedo-glow-back{
  position:absolute;
  width:110px;
  height:110px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(168, 85, 247, 0.4) 0%, transparent 70%);
}
.speedo-dial-svg{
  width:100%;
  height:100%;
  transform:rotate(-90deg);
}
.speedo-needle-arm{
  position:absolute;
  top:50%;
  left:50%;
  width:42px;
  height:2.5px;
  background:linear-gradient(90deg, #c084fc, #ffffff);
  box-shadow:0 0 8px #c084fc;
  transform-origin:0% 50%;
  transform:rotate(45deg);
  border-radius:2px;
}
.speedo-needle-core{
  position:absolute;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#ffffff;
  border:2px solid #9333ea;
  box-shadow:0 0 10px #c084fc;
}

/* Responsive Breakpoints */
@media (max-width:980px){
  .expertise-bento-grid{
    grid-template-columns:1fr;
    gap:20px;
  }
  .bento-exp-card{
    min-height:auto;
    padding:26px 22px 20px;
  }
}

/* ==========================================================================
   ALL-IN-ONE DIGITAL GROWTH ENGINE (Borderless & Immersive Stage)
   Matches reference media_1794557153861_003e205b.jpg
   3D Tech Vault on Pedestal with Beam & 5 Glowing Squircle Cards
   ========================================================================== */
.growth-immersive-section{
  position:relative;
  padding:100px 0 120px;
  background:radial-gradient(circle at 25% 45%, rgba(68, 18, 110, 0.45) 0%, rgba(18, 8, 42, 0.5) 40%, rgba(6, 2, 18, 0.98) 75%), #060212;
  overflow:hidden;
}

.growth-ambient-beam{
  position:absolute;
  top:15%;
  left:10%;
  width:650px;
  height:520px;
  background:radial-gradient(ellipse at center, rgba(168, 85, 247, 0.28) 0%, rgba(147, 51, 234, 0.1) 45%, transparent 70%);
  filter:blur(65px);
  pointer-events:none;
  z-index:1;
}

.growth-ambient-stardust{
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(1.5px 1.5px at 15% 30%, rgba(243, 232, 255, 0.8) 50%, transparent),
    radial-gradient(2px 2px at 35% 65%, rgba(192, 132, 252, 0.7) 50%, transparent),
    radial-gradient(1.5px 1.5px at 70% 20%, rgba(255, 255, 255, 0.9) 50%, transparent),
    radial-gradient(2px 2px at 85% 55%, rgba(216, 180, 254, 0.65) 50%, transparent);
  background-size:100% 100%;
  opacity:0.6;
  pointer-events:none;
  z-index:1;
}

.growth-stage-container{
  position:relative;
  z-index:3;
  max-width:1380px;
  margin:0 auto;
  padding:0 30px;
  display:grid;
  grid-template-columns:460px 1fr;
  gap:52px;
  align-items:center;
}

/* LEFT: 3D Vault Stage (No box enclosure, completely borderless) */
.growth-vault-stage{
  position:relative;
  perspective:1000px;
  display:flex;
  justify-content:center;
}

.vault-stage-inner{
  position:relative;
  width:100%;
  max-width:460px;
}

.vault-visual-render{
  position:relative;
  width:100%;
  /* Seamless blend into background - no box border */
  -webkit-mask-image:radial-gradient(ellipse at 50% 55%, black 68%, transparent 100%);
  mask-image:radial-gradient(ellipse at 50% 55%, black 68%, transparent 100%);
}

.vault-img-blend{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  filter:contrast(1.08) brightness(1.04);
}

.vault-light-cone{
  position:absolute;
  bottom:22%;
  left:22%;
  right:22%;
  height:42%;
  background:radial-gradient(ellipse at bottom center, rgba(217, 70, 239, 0.55) 0%, rgba(168, 85, 247, 0.25) 45%, transparent 70%);
  filter:blur(20px);
  pointer-events:none;
  animation:conePulse 4s ease-in-out infinite;
}
@keyframes conePulse{
  0%, 100%{ opacity:0.6; transform:scale(0.95); }
  50%{ opacity:1; transform:scale(1.08); }
}

/* Floating 3D Interactive Hologram Tiles */
.vault-floating-holograms{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:4;
}

.vault-tile{
  position:absolute;
  width:46px;
  height:46px;
  border-radius:14px;
  background:linear-gradient(145deg, rgba(45, 18, 90, 0.85) 0%, rgba(18, 6, 44, 0.92) 100%);
  border:1.5px solid rgba(192, 132, 252, 0.45);
  box-shadow:
    0 10px 24px -4px rgba(0, 0, 0, 0.7),
    0 0 16px rgba(168, 85, 247, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#ffffff;
  transition:all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.vault-tile.vt-growth{
  top:16%;
  left:14%;
  animation:vFloat1 5.2s ease-in-out infinite 0s;
}
.vault-tile.vt-megaphone{
  top:22%;
  right:16%;
  animation:vFloat2 5.8s ease-in-out infinite 0.7s;
}
.vault-tile.vt-ads{
  top:42%;
  left:10%;
  animation:vFloat3 4.9s ease-in-out infinite 1.4s;
}
.vault-tile.vt-seo{
  top:44%;
  left:50%;
  transform:translateX(-50%);
  animation:vFloat4 5.4s ease-in-out infinite 0.3s;
}
.vault-tile.vt-social{
  bottom:30%;
  right:14%;
  animation:vFloat5 5.1s ease-in-out infinite 1.8s;
}

@keyframes vFloat1{
  0%, 100%{ transform:translateY(0px) rotate(-6deg); }
  50%{ transform:translateY(-10px) rotate(-2deg); }
}
@keyframes vFloat2{
  0%, 100%{ transform:translateY(0px) rotate(8deg); }
  50%{ transform:translateY(-12px) rotate(4deg); }
}
@keyframes vFloat3{
  0%, 100%{ transform:translateY(0px) rotate(-10deg); }
  50%{ transform:translateY(-9px) rotate(-5deg); }
}
@keyframes vFloat4{
  0%, 100%{ transform:translateX(-50%) translateY(0px) rotate(0deg); }
  50%{ transform:translateX(-50%) translateY(-14px) rotate(3deg); }
}
@keyframes vFloat5{
  0%, 100%{ transform:translateY(0px) rotate(6deg); }
  50%{ transform:translateY(-11px) rotate(2deg); }
}

.vault-tile.active-tile{
  border-color:#f0abfc;
  background:linear-gradient(145deg, rgba(147, 51, 234, 0.9) 0%, rgba(59, 13, 94, 0.95) 100%);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.8),
    0 0 28px rgba(217, 70, 239, 0.85),
    inset 0 1px 0 #ffffff;
}

/* RIGHT: Minimalist Header & 5 Squircle Cards */
.growth-meta-stage{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.growth-eyebrow-row{
  display:inline-flex;
  align-items:center;
  gap:12px;
  color:#f3e8ff;
  font-size:12px;
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  margin-bottom:8px;
}
.ge-line{
  width:44px;
  height:2.5px;
  border-radius:2px;
  background:linear-gradient(90deg, #c084fc, transparent);
}

.growth-title{
  font-size:clamp(30px, 4vw, 50px);
  font-weight:800;
  letter-spacing:-0.03em;
  line-height:1.15;
  color:#ffffff;
  margin:10px 0 12px;
}
.growth-title-gradient{
  font-style:italic;
  background:linear-gradient(135deg, #ffffff 0%, #fae8ff 25%, #c084fc 60%, #f472b6 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.growth-desc{
  font-size:16px;
  color:#cbd5e1;
  line-height:1.6;
  margin-bottom:32px;
  max-width:580px;
}

/* 5 Glowing Squircle Cards Row */
.growth-cards-strip{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:14px;
  width:100%;
  margin-bottom:28px;
}

.growth-card-item{
  background:rgba(20, 10, 44, 0.65);
  border:1px solid rgba(192, 132, 252, 0.24);
  border-radius:18px;
  padding:22px 10px 18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:12px;
  text-decoration:none;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  color:#94a3b8;
  transition:all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  outline:none;
}

.growth-card-item:hover{
  transform:translateY(-4px);
  border-color:rgba(192, 132, 252, 0.55);
  background:rgba(35, 14, 72, 0.8);
  color:#f3e8ff;
}

/* Active Glowing Neon Purple Squircle Card (Matching Reference) */
.growth-card-item.active{
  transform:translateY(-6px);
  border:2px solid #d946ef;
  background:linear-gradient(145deg, rgba(88, 28, 135, 0.75) 0%, rgba(32, 10, 64, 0.92) 100%);
  box-shadow:
    0 14px 32px -6px rgba(0, 0, 0, 0.65),
    0 0 28px rgba(217, 70, 239, 0.8),
    inset 0 0 16px rgba(168, 85, 247, 0.35);
  color:#ffffff;
}

.gci-icon-box{
  display:flex;
  align-items:center;
  justify-content:center;
  color:inherit;
  transition:transform 0.3s ease;
}
.growth-card-item:hover .gci-icon-box{
  transform:scale(1.08);
}
.growth-card-item.active .gci-icon-box{
  filter:drop-shadow(0 0 8px #ffffff) drop-shadow(0 0 16px #d946ef);
}

.gci-label{
  font-size:12.5px;
  font-weight:700;
  line-height:1.3;
  letter-spacing:-0.01em;
}

/* Status Ticker */
.growth-status-ticker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 18px;
  border-radius:999px;
  background:rgba(22, 10, 48, 0.5);
  border:1px solid rgba(192, 132, 252, 0.2);
}
.gst-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#38bdf8;
  box-shadow:0 0 8px #38bdf8;
  flex-shrink:0;
}
.gst-text{
  font-size:12.5px;
  color:#cbd5e1;
  font-weight:500;
}

/* Responsive */
@media (max-width:1150px){
  .growth-stage-container{
    grid-template-columns:1fr;
    gap:40px;
  }
  .growth-vault-stage{
    max-width:440px;
    margin:0 auto;
  }
  .growth-meta-stage{
    align-items:center;
    text-align:center;
  }
  .growth-desc{
    margin-left:auto;
    margin-right:auto;
  }
}

@media (max-width:768px){
  .growth-cards-strip{
    grid-template-columns:repeat(3, 1fr);
    gap:10px;
  }
  .growth-card-item{
    padding:16px 6px 14px;
  }
  .gci-label{
    font-size:11px;
  }
}

@media (max-width:480px){
  .growth-cards-strip{
    grid-template-columns:repeat(2, 1fr);
  }
  .growth-title{
    font-size:26px;
  }
}