/* === v18 Fancy Timer === */
:root{
  --accent:#ff477e;
  --accent2:#46e2ff;
  --glass:rgba(255,255,255,.06);
}
#hero.theme-elegant-dark{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.0)), var(--card,#101318);}
.fancy-timer{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap}
.fancy-timer .unit{min-width:88px;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:10px 12px;border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.01));
  border:1px solid var(--glass);box-shadow:0 12px 30px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.04);position:relative;isolation:isolate}
.fancy-timer .unit::after{content:"";position:absolute;inset:0;border-radius:16px;pointer-events:none;
  background:radial-gradient(120px 60px at 50% -10%, rgba(255,255,255,.08), transparent 60%)}
.fancy-timer .num{font-size:clamp(32px,11vw,64px);font-weight:900;letter-spacing:.02em;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 18px rgba(255,71,126,.35), 0 0 22px rgba(70,226,255,.25)}
.fancy-timer .label{font-variant:all-small-caps;letter-spacing:.08em;opacity:.85;margin-top:6px}
.fancy-timer .sep{align-self:center;font-size:clamp(24px,8vw,40px);opacity:.6;padding:0 2px}
/* subtle flip tick on change */
.tick{animation:tick .45s ease}
@keyframes tick{0%{transform:translateY(-6px);filter:brightness(1.2)}100%{transform:none;filter:none}}
@media (max-width:900px){
  .fancy-timer{gap:8px}
  .fancy-timer .unit{min-width:74px;padding:8px 10px;border-radius:14px}
  .fancy-timer .num{font-size:clamp(28px,10vw,52px)}
  .fancy-timer .label{font-size:.9rem}
}
@media (max-width:480px){
  .fancy-timer .unit{min-width:68px}
  .fancy-timer .num{font-size:clamp(26px,10vw,46px)}
}