/* ═══════════════════════════════════════════════════════════
   PREMIUM 3D — Commerce Studio (FLAT minimal version)
   ✨ ปุ่มเรียบ, Flow nodes 7 อันแถวเดียว, font ตาม design รูป 2
═══════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────
   1) ✨ "TikTok Showcase" — gradient ม่วงเด่น + shimmer
──────────────────────────────────────── */
.hero h1 .text-gradient{
  position:relative;
  display:inline-block;

  background-size:200% 100%!important;
  background-repeat:repeat!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  color:transparent!important;
  text-shadow:none!important;
  animation:shimmer 3.5s linear infinite;
  filter:drop-shadow(0 0 18px rgba(167,139,250,.40));
}

@keyframes shimmer{
  0%   { background-position:0% 0; }
  100% { background-position:200% 0; }
}

/* ────────────────────────────────────────
   🏷️ Label icons (SVG line) ใน form labels
──────────────────────────────────────── */
.cs-lbl-icon{
  width:16px;height:16px;
  vertical-align:-3px;margin-right:6px;
  color:#a78bfa;
  filter:drop-shadow(0 0 4px rgba(167,139,250,.3));
}

/* ────────────────────────────────────────
   📅 Schedule Picker (Calendar UI)
──────────────────────────────────────── */
.cs-schedule-wrap{
  background:linear-gradient(180deg,rgba(99,102,241,.08),rgba(99,102,241,.02));
  border:1px solid rgba(99,102,241,.22);
  border-radius:18px;
  padding:18px 20px;
}
.cs-schedule-head{
  display:flex;align-items:center;gap:12px;margin-bottom:16px;
}
.cs-schedule-ico{
  width:36px;height:36px;
  padding:7px;border-radius:11px;
  background:linear-gradient(135deg,#6D5EF7,#818cf8);
  color:#fff;flex-shrink:0;
  box-shadow:0 6px 14px rgba(99,102,241,.36);
}
.cs-schedule-head b{display:block;font-size:15px;color:#fff;font-weight:700}
.cs-schedule-head small{display:block;font-size:12px;color:rgba(255,255,255,.5);margin-top:2px}

/* Quick presets */
.cs-presets{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;margin-bottom:18px;
}
.cs-preset-btn{
  display:flex;align-items:center;gap:10px;
  background:rgba(15,17,28,.7);
  border:1px solid rgba(255,255,255,.08);
  border-radius:13px;padding:12px;
  cursor:pointer;font-family:inherit;
  text-align:left;color:#fff;
  transition:all .25s;
}
.cs-preset-btn:hover{
  border-color:rgba(167,139,250,.45);
  background:rgba(167,139,250,.08);
  transform:translateY(-2px);
}
.cs-preset-btn.active{
  border-color:rgba(99,102,241,.6);
  background:linear-gradient(135deg,rgba(99,102,241,.25),rgba(167,139,250,.15));
  box-shadow:0 6px 18px rgba(99,102,241,.32);
}
.cs-preset-btn svg{
  width:22px;height:22px;
  fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
  color:#a78bfa;flex-shrink:0;
}
.cs-preset-btn.active svg{color:#fff;filter:drop-shadow(0 0 6px rgba(167,139,250,.6))}
.cs-preset-btn b{display:block;font-size:13px;font-weight:700;line-height:1.2}
.cs-preset-btn small{display:block;font-size:11px;color:rgba(255,255,255,.5);margin-top:2px}
.cs-preset-btn.active small{color:rgba(255,255,255,.78)}

/* Schedule grid: date + time + tz */
.cs-schedule-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;margin-bottom:14px;
}
.cs-schedule-field label{
  display:block;font-size:12px;color:rgba(255,255,255,.55);
  margin-bottom:6px;font-weight:600;
}
.cs-schedule-field .input,
.cs-schedule-field .select{
  width:100%;
}

/* Result display */
.cs-schedule-result{
  display:flex;align-items:center;gap:10px;
  background:rgba(34,197,94,.10);
  border:1px solid rgba(34,197,94,.30);
  border-radius:12px;padding:11px 14px;
  font-size:13.5px;color:#fff;
}
.cs-schedule-result svg{
  width:18px;height:18px;color:#22c55e;flex-shrink:0;
}
.cs-schedule-result b{font-weight:700}
.cs-schedule-result:not(.active){
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.10);
  color:rgba(255,255,255,.55);
}
.cs-schedule-result:not(.active) svg{color:rgba(255,255,255,.40)}

/* Responsive */
@media(max-width:768px){
  .cs-presets{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cs-schedule-grid{grid-template-columns:1fr}
  .cs-preset-btn{padding:10px}
  .cs-preset-btn b{font-size:12px}
  .cs-preset-btn small{font-size:10px}
}

/* ────────────────────────────────────────
   📦 Upload zones (Product / Character / Style) — 3 cols
──────────────────────────────────────── */
.cs-upload-row{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:14px!important;
}
.cs-upload-box{
  border:2px dashed rgba(var(--ucolor),.30)!important;
  border-radius:16px!important;
  padding:16px!important;
  background:rgba(var(--ucolor),.04)!important;
  transition:border-color .25s,background .25s,transform .25s;
}
.cs-upload-box:hover{
  border-color:rgba(var(--ucolor),.55)!important;
  background:rgba(var(--ucolor),.07)!important;
  transform:translateY(-2px);
}
.cs-upload-head{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:10px;gap:8px;
}
.cs-upload-title{
  display:flex;align-items:center;gap:8px;
  font-size:13px;font-weight:700;
  color:rgb(var(--ucolor));
  min-width:0;
}
.cs-upload-title span{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cs-upload-icon{
  width:18px;height:18px;
  color:rgb(var(--ucolor));
  flex-shrink:0;
  filter:drop-shadow(0 0 6px rgba(var(--ucolor),.4));
}
.cs-upload-max{
  font-size:11px;
  color:rgba(255,255,255,.40);
  white-space:nowrap;
}
.cs-upload-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(70px,1fr));
  gap:8px;margin-bottom:10px;
  min-height:0;
}
.cs-upload-btn{
  width:100%!important;
  font-size:12px!important;
  padding:9px!important;
  min-height:38px!important;
}

/* Tablet — 2 cols */
@media(max-width:900px){
  .cs-upload-row{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .cs-upload-title{font-size:12.5px!important}
  .cs-upload-icon{width:16px;height:16px}
}

/* Mobile — 1 col */
@media(max-width:600px){
  .cs-upload-row{
    grid-template-columns:1fr!important;
  }
  .cs-upload-box{padding:14px!important}
}

/* ────────────────────────────────────────
   📝 Section titles (ข้อ 1-7) — 1 บรรทัดเสมอ
──────────────────────────────────────── */
.section .section-title{
  font-size:clamp(20px,2vw,30px)!important;
  line-height:1.2!important;
  font-weight:680!important;
  letter-spacing:-.02em!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
@media(max-width:1100px){
  .section .section-title{
    font-size:clamp(17px,1.9vw,24px)!important;
  }
}
@media(max-width:768px){
  .section .section-title{
    font-size:18px!important;
    white-space:nowrap!important;
  }
}
@media(max-width:480px){
  .section .section-title{font-size:16px!important}
}

/* ────────────────────────────────────────
   📱 iPad / Tablet — บังคับ headline เป็น 2 บรรทัด
   ให้ "TikTok Showcase" stand out
──────────────────────────────────────── */
@media(min-width:768px) and (max-width:1280px){
  .hero h1{
    font-size:clamp(32px,4.4vw,52px)!important;
    line-height:1.18!important;
    letter-spacing:-.03em!important;
  }
  /* TikTok Showcase = block ให้ตกบรรทัด */
  .hero h1 .text-gradient:not(.alt){
    display:inline-block!important;
    margin-top:.18em;
  }
}

/* ────────────────────────────────────────
   🚫 ซ่อนเส้น divider รุ้งระหว่าง section
──────────────────────────────────────── */
.data-divider{
  display:none!important;
}

/* ────────────────────────────────────────
   ✨ EXTRA PREMIUM EFFECTS (แนว shimmer)
──────────────────────────────────────── */

/* 1. Shimmer ลามบน eyebrow / labels */
.eyebrow,
.cm-easy-hero-text b{
  background:linear-gradient(115deg,
    #818cf8 0%,#a78bfa 30%,#ffffff 50%,#a78bfa 70%,#818cf8 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:shimmer 4s linear infinite;
}

/* 2. Glow pulse ring รอบ active flow-node (subtle 50%) */
.flow-node.active{
  position:relative;
}
.flow-node.active::before{
  content:'';position:absolute;inset:-1px;
  border-radius:inherit;
  background:linear-gradient(135deg,#a78bfa,#20c6ff,#a78bfa);
  background-size:200% 200%;
  z-index:-1;opacity:.25;
  animation:glowPulse 2.8s ease-in-out infinite, shimmer 4s linear infinite;
  filter:blur(4px);
}
@keyframes glowPulse{
  0%,100%{opacity:.18;transform:scale(1)}
  50%{opacity:.32;transform:scale(1.01)}
}

/* 3. Number count-up shimmer for metric values */
.metric b{
  background:linear-gradient(115deg,
    #ffffff 0%,#a78bfa 30%,#ffffff 50%,#20c6ff 70%,#ffffff 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:shimmer 5.5s linear infinite;
}

/* 4. Spotlight follow cursor บน section title */
.section-title{
  position:relative;
  --mx:50%; --my:50%;
}
.section-title::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle 200px at var(--mx) var(--my),
    rgba(167,139,250,.18),transparent 50%);
  opacity:0;transition:opacity .35s;
}
.section-title:hover::after{opacity:1}

/* 5. Animated gradient border on primary button */
.btn.primary{
  position:relative;
}
.btn.primary::before{
  content:'';position:absolute;inset:-1px;
  border-radius:inherit;
  background:conic-gradient(from 0deg,#a78bfa,#20c6ff,#ff79c6,#a78bfa);
  z-index:-2;opacity:0;
  animation:auraRotate 3s linear infinite;
  filter:blur(6px);
  transition:opacity .25s;
}
.btn.primary:hover::before{opacity:.7}
@keyframes auraRotate{to{filter:hue-rotate(360deg) blur(6px)}}

/* 6. Floating particles ใน hero (background) */
.hero{position:relative;overflow:hidden}
.hero::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(2px 2px at 20% 30%,rgba(167,139,250,.5),transparent),
    radial-gradient(1.5px 1.5px at 65% 70%,rgba(32,198,255,.4),transparent),
    radial-gradient(2px 2px at 80% 20%,rgba(192,132,252,.45),transparent),
    radial-gradient(1px 1px at 35% 80%,rgba(255,121,198,.4),transparent),
    radial-gradient(1.5px 1.5px at 50% 50%,rgba(167,139,250,.3),transparent);
  background-size:280px 280px,320px 320px,260px 260px,300px 300px,240px 240px;
  animation:floatParticles 22s linear infinite;
  opacity:.6;
}
@keyframes floatParticles{
  to{background-position:280px 280px,-320px -320px,260px -260px,-300px 300px,240px -240px}
}

/* 7. Liquid hover — ปุ่ม btn ที่กระเพื่อมตามเมาส์ */
.btn{
  --bx:50%;--by:50%;
}
.btn:hover{
  background-image:
    radial-gradient(circle 120px at var(--bx) var(--by),
      rgba(167,139,250,.18),transparent 60%),
    linear-gradient(180deg,#2b2f48 0%,#1c1f38 50%,#16192f 100%)!important;
}

/* 8. Active section title — neon underline glow */
.section.cm-active .section-title{
  position:relative;
}
.section.cm-active .section-title::before{
  content:'';position:absolute;left:0;bottom:-6px;
  width:60px;height:3px;border-radius:999px;
  background:linear-gradient(90deg,#a78bfa,#20c6ff,#a78bfa);
  background-size:200% 100%;
  box-shadow:0 0 16px rgba(167,139,250,.6);
  animation:shimmer 2.6s linear infinite;
}

/* "Workspace" สีขาว */
.hero h1 .text-gradient.alt{
  background:none!important;
  -webkit-background-clip:initial!important;
          background-clip:initial!important;
  -webkit-text-fill-color:#ffffff!important;
  color:#ffffff!important;
  text-shadow:none!important;
  animation:none!important;
  filter:none!important;
}

/* ────────────────────────────────────────
   2) 📦 Flow Step Row — บังคับ 7 nodes แถวเดียวเสมอ
──────────────────────────────────────── */

/* ✅ Easy mode ซ่อน 2 nodes (AI Script, Voice+Presenter) — Advanced แสดงครบ 7 */
body.cm-easy .flow-node[data-cm-flow="hidden"]{display:none!important}
body.cm-advanced .flow-node[data-cm-flow="hidden"]{display:flex!important}

/* Desktop: Easy → 5 cols, Advanced → 7 cols (แถวเดียว) */
.automation-flow{
  display:grid!important;
  gap:10px!important;
  max-width:100%!important;
}
body.cm-easy .automation-flow{
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
}
body.cm-advanced .automation-flow{
  grid-template-columns:repeat(7,minmax(0,1fr))!important;
}

/* Flow node — bevel นูนเบา */
.flow-node{
  background:linear-gradient(180deg,
    rgba(32,36,60,.85) 0%,
    rgba(18,22,38,.88) 50%,
    rgba(12,15,28,.88) 100%)!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:14px!important;
  padding:11px 10px!important;
  min-height:auto!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.50),
    inset 0 -10px 16px -10px rgba(0,0,0,.45),
    0 4px 12px rgba(0,0,0,.30)!important;
  transition:all .25s ease!important;
}
.flow-node strong{
  font-size:12px!important;
  line-height:1.2!important;
  font-weight:650!important;
}
.flow-node span{
  font-size:10px!important;
  line-height:1.3!important;
  color:rgba(180,190,210,.7)!important;
}
.flow-node .dot{
  width:7px!important;
  height:7px!important;
  margin-bottom:5px!important;
}
.flow-node.active{
  background:linear-gradient(180deg,
    rgba(60,80,160,.20) 0%,
    rgba(30,40,80,.30) 100%)!important;
  border-color:rgba(123,148,255,.30)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 1px rgba(123,148,255,.12),
    0 2px 8px rgba(83,131,255,.10)!important;
}
.flow-node:hover{
  border-color:rgba(167,139,250,.35)!important;
  background:linear-gradient(180deg,
    rgba(36,42,70,.7) 0%,
    rgba(20,24,42,.7) 100%)!important;
}

/* Mobile / Tablet → 2 บรรทัด (อ่านง่าย) */
@media(max-width:900px){
  .automation-flow{gap:8px!important}
  /* Easy = 5 nodes → 3 cols (3+2 = 2 rows) */
  body.cm-easy .automation-flow{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
  /* Advanced = 7 nodes → 4 cols (4+3 = 2 rows) */
  body.cm-advanced .automation-flow{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
  .flow-node{
    padding:11px 9px!important;
    border-radius:13px!important;
  }
  .flow-node strong{
    font-size:12px!important;
    line-height:1.2!important;
    font-weight:650!important;
  }
  .flow-node span{
    font-size:10px!important;
    line-height:1.3!important;
    display:block!important;
  }
  .flow-node .dot{width:6px!important;height:6px!important;margin-bottom:4px!important}
}

@media(max-width:600px){
  .automation-flow{gap:6px!important}
  /* Easy = 5 → 2 cols (2+2+1) */
  body.cm-easy .automation-flow{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  /* Advanced = 7 → 2 cols (2+2+2+1) */
  body.cm-advanced .automation-flow{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .flow-node{padding:10px 9px!important;border-radius:12px!important}
  .flow-node strong{font-size:12px!important}
  .flow-node span{font-size:10px!important}
}

/* ────────────────────────────────────────
   3) 🎨 Buttons — Flat/Minimal (เลิก inset bevel)
──────────────────────────────────────── */

.btn{
  background:linear-gradient(180deg,
    #21243a 0%,
    #181b30 50%,
    #12152a 100%)!important;
  border:1px solid rgba(255,255,255,.08)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),       /* top highlight (นูน) */
    inset 0 -1px 0 rgba(0,0,0,.55),            /* bottom rim ลึก */
    inset 0 -8px 14px -8px rgba(0,0,0,.45),    /* inner shadow ล่าง */
    0 4px 12px rgba(0,0,0,.32)!important;      /* drop subtle */
  transition:all .22s ease!important;
}
.btn:hover{
  background:linear-gradient(180deg,
    #2b2f48 0%,
    #1c1f38 50%,
    #16192f 100%)!important;
  border-color:rgba(167,139,250,.35)!important;
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.55),
    inset 0 -10px 16px -8px rgba(0,0,0,.45),
    0 6px 16px rgba(0,0,0,.38),
    0 0 18px rgba(167,139,250,.18)!important;
}
.btn:active{
  transform:translateY(1px);
  box-shadow:
    inset 0 2px 8px rgba(0,0,0,.55),
    inset 0 -1px 0 rgba(255,255,255,.06)!important;
}

/* Primary ปุ่ม "เริ่มสร้างแคมเปญ" — bevel ม่วง-ฟ้า */
.btn.primary{
  background:linear-gradient(180deg,
    #a89aff 0%,
    #7c6cff 30%,
    #5e4ad6 65%,
    #4a3bb8 100%)!important;
  border:1px solid rgba(199,164,255,.40)!important;
  color:#fff!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.40),       /* top shine */
    inset 0 -1px 0 rgba(35,20,90,.55),         /* bottom rim */
    inset 0 -10px 18px -8px rgba(35,20,90,.45),
    0 6px 16px rgba(109,94,247,.32),
    0 0 24px rgba(109,94,247,.20)!important;   /* aura */
}
.btn.primary:hover{
  filter:brightness(1.06);
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(35,20,90,.55),
    inset 0 -12px 20px -8px rgba(35,20,90,.45),
    0 10px 24px rgba(109,94,247,.42),
    0 0 32px rgba(109,94,247,.30)!important;
}
.btn.primary:active{
  transform:translateY(0);
  box-shadow:
    inset 0 2px 10px rgba(35,20,90,.55),
    inset 0 -1px 0 rgba(255,255,255,.18)!important;
}

/* ────────────────────────────────────────
   Mode Switch — เรียบ + active glow
──────────────────────────────────────── */
.cm-mode-switch{
  background:rgba(20,22,38,.85)!important;
  border:1px solid rgba(255,255,255,.08)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 3px 8px rgba(0,0,0,.25)!important;
}
.cm-mode-switch::before{
  background:linear-gradient(135deg,#6D5EF7,#818cf8)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 4px 12px rgba(99,102,241,.4)!important;
}

/* ────────────────────────────────────────
   📊 Metric cards (18 / 12 / 36 / 88%) — เรียบ
──────────────────────────────────────── */
.metric{
  background:linear-gradient(180deg,
    rgba(32,36,56,.85) 0%,
    rgba(16,19,32,.88) 50%,
    rgba(10,13,24,.88) 100%)!important;
  border:1px solid rgba(255,255,255,.07)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.50),
    inset 0 -12px 18px -10px rgba(0,0,0,.45),
    0 6px 16px rgba(0,0,0,.32)!important;
}
.metric:hover{
  border-color:rgba(167,139,250,.30)!important;
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -1px 0 rgba(0,0,0,.50),
    inset 0 -14px 20px -10px rgba(0,0,0,.45),
    0 10px 22px rgba(0,0,0,.42)!important;
}

/* ────────────────────────────────────────
   Sections (กล่องใหญ่)
──────────────────────────────────────── */
.section[data-cm-step]{
  background:linear-gradient(180deg,
    rgba(18,22,40,.85) 0%,
    rgba(10,13,24,.85) 100%)!important;
  border:1px solid rgba(255,255,255,.07)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 8px 22px rgba(0,0,0,.32)!important;
}

/* Easy hero box */
.cm-easy-hero{
  background:linear-gradient(135deg,
    rgba(99,102,241,.10),
    rgba(167,139,250,.04))!important;
  border:1px solid rgba(99,102,241,.20)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 3px 10px rgba(0,0,0,.22)!important;
}
.cm-easy-hero-icon,
.cm-collapsed-icon{
  background:linear-gradient(135deg,#6D5EF7,#818cf8)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    0 3px 10px rgba(99,102,241,.30)!important;
}

/* ────────────────────────────────────────
   Done & Skip buttons — flat
──────────────────────────────────────── */
.cm-done-btn{
  background:linear-gradient(135deg,#22c55e,#10b981)!important;
  border:1px solid rgba(255,255,255,.15)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 4px 12px rgba(16,185,129,.25)!important;
}
.cm-done-btn:hover{
  filter:brightness(1.06);
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 6px 16px rgba(16,185,129,.35)!important;
}
.cm-done-btn.is-final{
  background:linear-gradient(135deg,#6D5EF7,#818cf8)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    0 4px 12px rgba(99,102,241,.32)!important;
}

.cm-skip-btn{
  background:rgba(148,163,184,.10)!important;
  border:1px solid rgba(148,163,184,.20)!important;
  box-shadow:none!important;
}
.cm-skip-btn:hover{
  background:rgba(148,163,184,.18)!important;
  border-color:rgba(148,163,184,.35)!important;
}

/* Mode tabs */
.mode-tab.active{
  background:linear-gradient(135deg,#6D5EF7,#9333EA)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 3px 10px rgba(109,94,247,.30)!important;
}

/* ────────────────────────────────────────
   Mobile shimmer text simplify
──────────────────────────────────────── */
@media(max-width:768px){
  .hero h1 .text-gradient{
    filter:drop-shadow(0 0 12px rgba(167,139,250,.35));
  }
}