:root {
  --ink: #0b1a14;
  --ink-2: #12281f;
  --cream: #fbf5e8;
  --paper: #fffaf0;
  --gold: #e3b24f;
  --gold-hi: #ffe2a0;
  --gold-deep: #a8781f;
  --emerald: #0f6b4e;
  --red: #d8413b;
  --text: #1d2a24;
  --muted: #5d6b64;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Manrope', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--text); font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.08; margin: 0 0 .4em; letter-spacing: -.01em; }
h2 { font-size: clamp(2rem, 4.6vw, 3.6rem); }
h3 { font-size: 1.45rem; }
em { font-style: italic; color: var(--gold); }

.eyebrow { font: 700 .74rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--emerald); margin: 0 0 1.1em; }
.eyebrow.gold { color: var(--gold); }

.btn { display: inline-flex; align-items: center; gap: .5em; padding: .85em 1.5em; border-radius: 999px; border: 0; cursor: pointer;
  background: linear-gradient(135deg, var(--gold-hi), var(--gold) 45%, var(--gold-deep)); color: #2a1d05;
  font: 700 .92rem var(--sans); text-decoration: none; box-shadow: 0 0 0 1px rgba(255,226,160,.35), 0 8px 30px -8px rgba(227,178,79,.7); transition: transform .2s, box-shadow .2s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255,226,160,.5), 0 12px 40px -6px rgba(227,178,79,.9); }

/* ---------- header ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; gap: 2rem; padding: calc(14px + env(safe-area-inset-top, 0px)) clamp(16px, 4vw, 48px) 14px;
  color: #fff; background: linear-gradient(rgba(5,14,10,.55), rgba(5,14,10,0)); }
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; margin-right: auto; }
.brand-mark { width: 46px; height: 46px; object-fit: contain; opacity: 0; filter: drop-shadow(0 0 10px rgba(255,210,120,.6)); }
.brand-name { font: 700 1.35rem/1 var(--serif); letter-spacing: .02em; }
.brand-name em { font-weight: 500; }
.nav-links { display: flex; gap: 1.6rem; }
.nav-links a { text-decoration: none; font-size: .9rem; font-weight: 600; opacity: .85; }
.nav-links a:hover { opacity: 1; color: var(--gold-hi); }
.btn-help { padding: .6em 1.2em; font-size: .85rem; }

/* ---------- film ---------- */
.film { position: relative; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #000; }
.scene { position: absolute; inset: 0; background: center / cover no-repeat; opacity: 0; will-change: transform, opacity; }
.scene::after { content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 45%, transparent 30%, rgba(4,12,8,.55) 100%), linear-gradient(transparent 55%, rgba(4,12,8,.7)); }

/* The shared sun. Fixed, above the film and the page; main.js moves and sizes it. */
.sun { position: fixed; left: 0; top: 0; z-index: 40; width: 200px; height: 200px; pointer-events: none; will-change: transform; --glow: 0; }
.sun > div { position: absolute; border-radius: 50%; }
.sun-core { inset: 22%; background: radial-gradient(circle at 45% 40%, #ffffff 0 22%, #fff3c4 40%, #ffd166 68%, #f2a43a 100%);
  box-shadow: 0 0 24px 6px rgba(255,236,170,.95), 0 0 70px 24px rgba(255,190,80,.65), 0 0 160px 60px rgba(255,170,60,.35); }
.sun-ring { inset: 8%; border: 3px solid transparent;
  background: conic-gradient(from 20deg, transparent 0 60deg, #fff1bf 70deg, #e3b24f 200deg, #ffe7a6 330deg, transparent 345deg) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  filter: drop-shadow(0 0 6px rgba(255,214,120,.9)); animation: spin 24s linear infinite; }
.sun-rays { inset: -30%; background: repeating-conic-gradient(from 0deg, rgba(255,226,150,.85) 0 2deg, transparent 2deg 15deg);
  -webkit-mask: radial-gradient(circle, transparent 30%, #000 34%, transparent 66%); mask: radial-gradient(circle, transparent 30%, #000 34%, transparent 66%);
  animation: spin 50s linear infinite reverse; opacity: .9; }
.sun-halo { inset: -70%; background: radial-gradient(circle, rgba(255,214,120,calc(.35 + var(--glow) * .4)), transparent 60%); animation: breathe 4s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.12); opacity: .8; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* Places in the page where the sun comes to rest */
.sun-anchor { display: inline-block; width: var(--s); height: var(--s); vertical-align: middle; margin-left: .25em; }
.sun-anchor.behind { position: absolute; left: 50%; top: 42%; translate: -50% -50%; margin: 0; }
.sun-anchor.corner { float: right; margin: -.6rem -.6rem 1rem 1.5rem; }
.sun-anchor.home { position: absolute; left: 49%; top: 47%; translate: -50% -50%; margin: 0; }
.flash { position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, #fffdf3 0%, #ffe6a6 40%, #e9b552 100%) center / 300% 300% no-repeat; }

.intro { position: absolute; inset: 0; display: grid; align-content: end; justify-items: center; text-align: center; color: #fff; padding: 0 16px 9vh; z-index: 5; }
/* positioned on the scene's sun by main.js; the mark's own sun is ~60% from its top */
.intro-mark { position: absolute; width: min(280px, 46vw, 34vh); aspect-ratio: 1; object-fit: contain; translate: -50% -60%; transform-origin: center; will-change: transform;
  filter: drop-shadow(0 0 30px rgba(255,214,120,.55)); }
.intro-title { font-size: clamp(2.6rem, 7vw, 5.6rem); text-shadow: 0 4px 40px rgba(0,0,0,.45); }
.intro .eyebrow { color: var(--gold-hi); }
.scroll-hint { margin-top: 1.6rem; font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; opacity: .8; display: flex; gap: .8em; align-items: center; }
.scroll-hint span { width: 1px; height: 34px; background: linear-gradient(var(--gold-hi), transparent); animation: drip 1.8s ease-in-out infinite; }
@keyframes drip { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

.captions { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.caption { position: absolute; left: clamp(16px, 6vw, 96px); bottom: clamp(48px, 12vh, 140px); max-width: 560px; color: #fff;
  opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
.caption.right { left: auto; right: clamp(16px, 6vw, 96px); text-align: right; }
.caption.show { opacity: 1; transform: none; pointer-events: auto; }
.caption h2 { text-shadow: 0 4px 40px rgba(0,0,0,.6); }
.caption p { font-size: 1.06rem; color: rgba(255,255,255,.88); text-shadow: 0 2px 20px rgba(0,0,0,.7); }
.caption .btn { margin-top: .6rem; }

.progress { position: absolute; right: clamp(12px, 2vw, 28px); top: 50%; transform: translateY(-50%); list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; z-index: 6; }
.progress li { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.35); transition: all .4s; }
.progress li.on { background: var(--gold-hi); box-shadow: 0 0 12px var(--gold); transform: scale(1.5); }

/* ---------- content ---------- */
.content { position: relative; background: var(--cream); }
.wrap { width: min(1160px, 100% - 32px); margin: 0 auto; }
.wrap.narrow { width: min(720px, 100% - 32px); }
.section { padding: clamp(72px, 11vw, 140px) 0; }
.lede { font-size: 1.12rem; color: var(--muted); max-width: 640px; margin-bottom: 2.5rem; }

.countdown-band { background: radial-gradient(ellipse at 85% 50%, #2a3b1c 0%, var(--ink) 60%); color: #fff; padding: clamp(56px, 8vw, 96px) 0; }
.countdown { display: grid; grid-template-columns: 1.6fr 1fr; gap: 3rem; align-items: center; }
.countdown p { color: rgba(255,255,255,.78); }
.facts { display: flex; gap: 2.5rem; margin: 1.5rem 0 0; }
.facts dt { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.facts dd { margin: .2em 0 0; font-weight: 600; }
.days { position: relative; z-index: 45; justify-self: center; text-align: center; font: 600 clamp(6rem, 16vw, 11rem)/.9 var(--serif);
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, var(--gold-deep)); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 40px rgba(227,178,79,.35)); }
.days #days, .days small { position: relative; }
.days small { display: block; font: 700 .8rem var(--sans); letter-spacing: .25em; text-transform: uppercase; color: var(--gold); margin-top: .6rem; }

.events { list-style: none; padding: 0; margin: 0; border-top: 1px solid rgba(0,0,0,.12); }
.events li { display: grid; grid-template-columns: 210px 1fr; gap: 2rem; padding: 1.8rem 0; border-bottom: 1px solid rgba(0,0,0,.12); transition: background .3s; }
.events li:hover { background: rgba(227,178,79,.08); }
.events time { font: 600 1.6rem/1.1 var(--serif); color: var(--emerald); }
.events time small { display: block; font: 600 .8rem var(--sans); color: var(--muted); margin-top: .4rem; }
.events h3 { margin-bottom: .2em; }
.events p { margin: 0 0 .5rem; color: var(--muted); }
.events .place { font-size: .82rem; font-weight: 700; color: var(--gold-deep); }
.events li.feature { background: linear-gradient(90deg, rgba(227,178,79,.18), transparent); padding-left: 1rem; border-left: 3px solid var(--gold); }

.section.dark { background: var(--ink); color: #fff; }
.section.dark .lede { color: rgba(255,255,255,.7); }
.promises { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.1); }
.promises article { background: var(--ink); padding: 2rem 1.6rem; transition: background .3s; }
.promises article:hover { background: var(--ink-2); }
.promises h3 { color: var(--gold-hi); }
.promises p { color: rgba(255,255,255,.72); margin: 0; }

.help { background: var(--paper); }
.checked { display: inline-block; font-size: .78rem; font-weight: 700; color: var(--emerald); background: rgba(15,107,78,.1); padding: .15em .7em; border-radius: 999px; }
.lines { display: grid; gap: 14px; }
.line { display: grid; grid-template-columns: 1fr auto auto; gap: 1.5rem; align-items: center; background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 18px; padding: 1.4rem 1.6rem; }
.line h3 { margin: 0; font-size: 1.35rem; }
.line p { margin: .2rem 0 0; color: var(--muted); }
.line .when { font-size: .8rem; font-weight: 700; color: var(--emerald); }
.line.urgent { border-color: rgba(216,65,59,.4); background: #fff7f5; }
.line.urgent .num { color: var(--red); }
.num { font: 700 1.6rem var(--serif); text-decoration: none; color: var(--emerald); white-space: nowrap; }
.copy { border: 1px solid rgba(0,0,0,.15); background: transparent; border-radius: 999px; padding: .45em 1em; font: 600 .8rem var(--sans); cursor: pointer; min-width: 74px; }
.family { margin-top: 3rem; padding: 2.2rem; border-radius: 22px; color: #fff; background: radial-gradient(circle at 90% 20%, rgba(255,214,120,.3), transparent 50%), var(--emerald); }
.family p { color: rgba(255,255,255,.85); max-width: 620px; }

.form { display: grid; gap: 1.2rem; }
.form label { display: grid; gap: .4rem; font-weight: 700; font-size: .92rem; }
.form small { font-weight: 500; color: var(--muted); }
.form input, .form select, .form textarea { font: inherit; padding: .85em 1em; border-radius: 12px; border: 1px solid rgba(0,0,0,.18); background: #fff; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--gold); border-color: transparent; }
.form .btn { justify-self: start; }
.form-note { color: var(--emerald); font-weight: 600; min-height: 1.5em; margin: 0; }

.footer { background: var(--ink); color: #fff; text-align: center; padding: 64px 0; }
.footer-mark { position: relative; width: 200px; margin: 0 auto 1rem; }
.footer p { margin: .2rem 0; }
.muted { color: rgba(255,255,255,.55); }

@media (max-width: 860px) {
  .nav-links { display: none; }
  .countdown { grid-template-columns: 1fr; }
  .promises { grid-template-columns: 1fr 1fr; }
  .events li { grid-template-columns: 1fr; gap: .6rem; }
  .line { grid-template-columns: 1fr auto; }
  .line > div { grid-column: 1 / -1; }
  .caption, .caption.right { left: 16px; right: 16px; text-align: left; bottom: 56px; }
}
@media (max-width: 520px) {
  .promises { grid-template-columns: 1fr; }
  .brand-name { font-size: 1.1rem; }
  .facts { flex-direction: column; gap: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sun-halo, .sun-rays, .sun-ring, .scroll-hint span { animation: none; }
}
.footer .credit { font-size: .75rem; margin-top: 1rem; opacity: .7; }

/* ---- language switch + Bangla type ---- */
.lang-switch { margin-left: auto; background: none; border: 1px solid rgba(255,226,160,.45); color: inherit; border-radius: 999px;
  padding: .45em 1em; font: 600 .85rem var(--sans); cursor: pointer; transition: background .2s, color .2s; }
.lang-switch:hover { background: rgba(255,226,160,.15); color: var(--gold-hi); }
.lang-switch:lang(bn) { font-family: 'Hind Siliguri', var(--sans); }
.nav-links + .lang-switch { margin-left: 0; }
:root:lang(bn) { --serif: 'Noto Serif Bengali', 'Cormorant Garamond', serif; --sans: 'Hind Siliguri', 'Manrope', system-ui, sans-serif; }
:lang(bn) .eyebrow, :lang(bn) .days small, :lang(bn) .scroll-hint { letter-spacing: .04em; text-transform: none; }
:lang(bn) h1, :lang(bn) h2, :lang(bn) h3 { line-height: 1.3; letter-spacing: 0; }
:lang(bn) body, :lang(bn) p { line-height: 1.75; }