/* ===================== CANDLE LAND FINALE: STYLES =====================
   Sab kuch .cln-root ke andar scoped hai taake theme par asar na pare.
   Design values original section jaise hi hain.
======================================================================= */
.cln-root{
  --cln-void:#07060C;
  --cln-paper:#F4EBE8;
  --cln-ink:#1A1522;
  --cln-wax:#C88FA1;
  --cln-ember:#FFB463;
  --cln-magenta:#F76FA6;
  --cln-orchid:#E58BE6;
  --cln-line:rgba(244,235,232,.14);
  --cln-display:"Fraunces",Georgia,serif;
  --cln-sans:"Jost",system-ui,-apple-system,"Segoe UI",sans-serif;
  --cln-gut:clamp(20px,5vw,72px);
  --cln-ease:cubic-bezier(.22,1,.36,1);
  width:100%;
  overflow-x:clip;
}
.cln-root *,.cln-root *::before,.cln-root *::after{box-sizing:border-box}
.cln-root h2,.cln-root p{margin:0;padding:0}
.cln-root canvas{display:block}
.cln-root a{text-decoration:none!important;box-shadow:none}

/* section */
.cln-root .cln-finale{position:relative;height:360vh;background:var(--cln-void);color:var(--cln-paper);
  font-family:var(--cln-sans);font-weight:300;line-height:1.6;-webkit-font-smoothing:antialiased}
.cln-root .cln-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  display:grid;place-items:center;background:var(--cln-void)}
/* JS pin chal raha ho to CSS sticky band */
.cln-root .cln-finale.is-pinned .cln-stage{position:relative;top:auto}

.cln-root .cln-canvas{position:absolute;inset:0;width:100%;height:100%}
.cln-root .cln-grade{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(to bottom,rgba(7,6,12,.9) 0%,rgba(7,6,12,.34) 26%,rgba(7,6,12,.5) 58%,rgba(7,6,12,.95) 92%,#07060C 100%),
  radial-gradient(72% 58% at 50% 52%,rgba(7,6,12,.66),transparent 78%)}

/* copy */
.cln-root .cln-copy{position:relative;z-index:2;text-align:center;display:grid;gap:clamp(20px,3vh,34px);
  justify-items:center;padding-inline:var(--cln-gut);max-width:900px}
.cln-root .cln-copy h2{font-family:var(--cln-display);font-weight:300;
  font-size:clamp(2.4rem,min(8vw,13vh),7rem);line-height:.9;
  font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 144;letter-spacing:-.035em;text-transform:none;
  text-shadow:0 2px 46px rgba(7,6,12,.8);color:var(--cln-paper)!important}
.cln-root .cln-copy h2 em{font-style:italic;font-weight:300;font-family:inherit;color:var(--cln-ember)!important}
.cln-root .cln-lede{font-family:var(--cln-sans);font-size:clamp(1.02rem,1.28vw,1.24rem);line-height:1.72;
  max-width:46ch;text-align:center;font-weight:300;color:rgba(244,235,232,.74)!important}
.cln-root .cln-offer{display:inline-flex;align-items:center;gap:10px;padding:.6em 1.2em;border-radius:100px;
  border:1px solid var(--cln-line);font-family:var(--cln-sans);font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;line-height:1.6;background:rgba(7,6,12,.4);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--cln-wax)!important}

/* button */
.cln-root .cln-btn{
  position:relative;display:inline-flex;align-items:center;gap:.85em;
  padding:1.05em 2.1em;border-radius:100px;border:1px solid transparent;
  font-family:var(--cln-sans);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;font-weight:400;line-height:1.6;
  background:var(--cln-paper);color:var(--cln-ink)!important;
  overflow:hidden;isolation:isolate;
  transition:color .45s var(--cln-ease)}
.cln-root .cln-btn::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,var(--cln-magenta),var(--cln-orchid));
  transform:translateY(101%);transition:transform .55s var(--cln-ease)}
.cln-root .cln-btn:hover,.cln-root .cln-btn:focus-visible{color:var(--cln-void)!important}
.cln-root .cln-btn:hover::before,.cln-root .cln-btn:focus-visible::before{transform:translateY(0)}
.cln-root .cln-dot{width:6px;height:6px;border-radius:50%;background:var(--cln-magenta);
  transition:transform .55s var(--cln-ease)}
.cln-root .cln-btn:hover .cln-dot{transform:scale(2.2);background:var(--cln-void)}
.cln-root :focus-visible{outline:2px solid var(--cln-ember);outline-offset:4px;border-radius:2px}

/* ---- static layout: reduced motion ya JS na chale ---- */
@media (prefers-reduced-motion:reduce){
  .cln-root *,.cln-root *::before,.cln-root *::after{animation-duration:.001ms!important;
    animation-iteration-count:1!important;transition-duration:.01ms!important}
}
.cln-root .cln-finale.is-static,
.cln-root .cln-finale:not(.is-js){height:auto!important}
.cln-root .cln-finale.is-static .cln-stage,
.cln-root .cln-finale:not(.is-js) .cln-stage{position:relative;top:auto;height:auto;min-height:0;overflow:visible;
  padding-block:clamp(104px,15vh,150px) clamp(44px,7vh,80px);gap:clamp(24px,4vh,40px)}
.cln-root .cln-finale.is-static .cln-canvas,
.cln-root .cln-finale:not(.is-js) .cln-canvas{position:relative;inset:auto;height:min(58vh,520px);border-radius:3px}
.cln-root .cln-finale.is-static .cln-grade,
.cln-root .cln-finale:not(.is-js) .cln-grade{display:none}
.cln-root .cln-finale.is-static .cln-copy h2,
.cln-root .cln-finale:not(.is-js) .cln-copy h2{text-shadow:none}

@media (max-width:820px){
  .cln-root .cln-finale{height:300vh}
}