/* =========================================================
   HOME PAGE
========================================================= */


/* ---------- Hero ---------- */
/* =========================================================
   HERO
========================================================= */
.hero{position:relative;height:100svh;min-height:620px;overflow:hidden;display:flex;align-items:flex-end}
.hero-sky{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(46% 38% at 80% 14%, rgba(190,206,242,.20) 0%, rgba(150,172,220,.06) 38%, transparent 64%),
    radial-gradient(120% 90% at 50% 6%, rgba(40,58,92,.5) 0%, transparent 52%),
    linear-gradient(180deg,#05070e 0%, #080e1a 24%, #0a1622 46%, #0b1b1a 66%, #0a1610 82%, #060d09 100%);
}
/* faint starfield */
.hero-sky::after{
  content:"";position:absolute;inset:0;opacity:.55;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 28% 9%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.4px 1.4px at 44% 22%, rgba(255,255,255,.65), transparent),
    radial-gradient(1px 1px at 61% 7%, rgba(255,255,255,.45), transparent),
    radial-gradient(1.3px 1.3px at 73% 26%, rgba(255,255,255,.6), transparent),
    radial-gradient(1px 1px at 88% 13%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.1px 1.1px at 35% 5%, rgba(255,255,255,.4), transparent),
    radial-gradient(1.2px 1.2px at 54% 30%, rgba(255,255,255,.5), transparent);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 38%,transparent 62%);
          mask-image:linear-gradient(180deg,#000 0%,#000 38%,transparent 62%);
  animation:twinkle 6s ease-in-out infinite;
}
@keyframes twinkle{0%,100%{opacity:.4}50%{opacity:.7}}
.hero-sun{
  position:absolute;left:80%;top:14%;width:88px;height:88px;border-radius:50%;z-index:1;
  background:radial-gradient(circle at 40% 38%,#f2f6ff 0%,#d4ddf2 46%,#a9b8d8 70%, rgba(169,184,216,0) 78%);
  filter:blur(.4px);transform:translate(-50%,-50%);
  box-shadow:0 0 70px 16px rgba(196,210,244,.22);
}
#hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2;display:block}
.hero-silhouette{position:absolute;left:0;right:0;bottom:0;z-index:3;width:100%;height:auto;pointer-events:none}
.hero-grain{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");}
.hero-vignette{position:absolute;inset:0;z-index:4;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 26%,transparent 42%,rgba(4,8,6,.72) 100%),
             linear-gradient(180deg,rgba(4,8,6,.45) 0%,transparent 24%,transparent 54%,rgba(4,8,6,.92) 100%)}

.hero-inner{position:relative;z-index:5;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gut) clamp(48px,8vh,96px)}
.hero-eyebrow{
  font-size:clamp(11px,1.2vw,13.5px);letter-spacing:.32em;text-transform:uppercase;
  color:var(--gold-soft);font-weight:500;margin-bottom:18px;display:flex;align-items:center;gap:12px;
}
.hero-eyebrow .pin{width:6px;height:6px;border-radius:50%;background:var(--sprout);box-shadow:0 0 10px var(--sprout)}
.hero-title{font-family:var(--bangla);font-weight:600;line-height:.92;
  font-size:clamp(64px,17vw,210px);letter-spacing:-.01em;
  text-shadow:0 8px 60px rgba(0,0,0,.45);}
.hero-roman{display:flex;align-items:center;gap:18px;margin-top:6px;flex-wrap:wrap}
.hero-roman .latin{font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(22px,3.6vw,46px);color:var(--gold-soft);letter-spacing:.01em}
.hero-roman .rule{height:1px;flex:1;min-width:40px;background:linear-gradient(90deg,var(--gold-soft),transparent);opacity:.6}
.hero-tag{margin-top:26px;max-width:46ch;font-size:clamp(15px,1.6vw,20px);color:rgba(233,239,230,.9);font-weight:300;line-height:1.55}
.hero-cta-row{margin-top:34px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}

.scroll-cue{position:absolute;left:50%;bottom:22px;z-index:6;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--mist-faint);font-size:10.5px;letter-spacing:.28em;text-transform:uppercase}
.scroll-cue .track{width:1px;height:42px;background:linear-gradient(180deg,var(--sprout),transparent);position:relative;overflow:hidden}
.scroll-cue .track::after{content:"";position:absolute;top:-12px;left:0;width:1px;height:12px;background:var(--mist);animation:cueRun 1.8s ease-in-out infinite}
@keyframes cueRun{0%{top:-14px}60%,100%{top:44px}}

/* =========================================================
   JOURNEY SPINE (signature)
========================================================= */
.journey{position:relative}
.spine{position:absolute;top:0;left:max(14px,calc(var(--gut) - 46px));width:90px;z-index:8;pointer-events:none;overflow:visible}
.spine path.bed{fill:none;stroke:rgba(143,209,79,.14);stroke-width:2}
.spine path.trail{fill:none;stroke:url(#spineGrad);stroke-width:3;stroke-linecap:round}
.spine .marker{filter:drop-shadow(0 4px 10px rgba(143,209,79,.6))}
.spine .stop{fill:var(--ink);stroke:rgba(143,209,79,.45);stroke-width:2;transition:all .4s}
.spine .stop.active{fill:var(--sprout);stroke:var(--sprout);r:7}
.spine .stoplabel{font-family:var(--bangla);font-size:11px;fill:var(--mist-faint);transition:fill .4s}
.spine .stoplabel.active{fill:var(--sprout)}
@media (max-width:1080px){.spine{display:none}}

/* =========================================================
   INSIGHTS
========================================================= */
.insights{background:linear-gradient(180deg,var(--ink) 0%,var(--ink-2) 100%);padding-block-end:clamp(50px,6vw,80px)}
.insights-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,6vw,90px);align-items:start;margin-top:14px}
.insights-copy p{margin-top:22px;color:var(--mist-dim);font-weight:300;font-size:clamp(15px,1.4vw,18px)}
.insights-copy .sig{margin-top:30px;font-family:var(--serif);font-style:italic;font-size:18px;color:var(--gold-soft)}
.heritage-img{margin-top:38px;border-radius:var(--r);overflow:hidden;position:relative;aspect-ratio:16/9;border:1px solid var(--line-soft)}
.heritage-img img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1.2s ease}
.heritage-img:hover img{transform:scale(1.1)}
.heritage-img figcaption{position:absolute;left:16px;bottom:14px;font-family:var(--bangla);font-size:14px;color:var(--mist);text-shadow:0 2px 12px rgba(0,0,0,.7)}
.heritage-img .frame{position:absolute;inset:0;box-shadow:inset 0 -70px 70px -40px rgba(8,14,10,.9)}

/* .stat-grid / .stat promoted to components.css (shared with history.html) */

/* =========================================================
   GALLERY / SIGHT & SOUND
========================================================= */
.gallery{background:var(--ink-2)}
.gallery-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.film{margin-top:46px;position:relative;border-radius:calc(var(--r) + 6px);overflow:hidden;aspect-ratio:21/9;border:1px solid var(--line-soft);background:#000}
.film .slide{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease}
.film .slide.on{opacity:1}
.film .slide img{width:100%;height:100%;object-fit:cover;animation:kenburns 9s ease-out forwards}
.film .slide.on img{animation:kenburns 9s ease-out forwards}
@keyframes kenburns{0%{transform:scale(1.02) translate(0,0)}100%{transform:scale(1.16) translate(-2%,-2%)}}
.film .veil{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(7,13,9,.78) 100%)}
.film .cap{position:absolute;left:clamp(20px,4vw,40px);bottom:clamp(20px,4vw,38px);z-index:3}
.film .cap .bn{font-family:var(--bangla);font-size:clamp(22px,3.4vw,40px);font-weight:600;line-height:1.1}
.film .cap .en{margin-top:4px;color:var(--mist-dim);font-size:14px;letter-spacing:.04em}
.film .progress{position:absolute;top:0;left:0;right:0;height:3px;display:flex;gap:5px;padding:14px clamp(20px,4vw,40px);z-index:3}
.film .progress i{flex:1;height:2.5px;background:rgba(233,239,230,.22);border-radius:2px;overflow:hidden;position:relative}
.film .progress i b{position:absolute;inset:0;width:0;background:var(--sprout);border-radius:2px}
.film .progress i.active b{animation:fill 9s linear forwards}
.film .progress i.done b{width:100%}
@keyframes fill{from{width:0}to{width:100%}}
.film .fcontrols{position:absolute;right:clamp(18px,3vw,30px);bottom:clamp(18px,3vw,30px);z-index:3;display:flex;gap:10px}
.fbtn{width:46px;height:46px;border-radius:50%;border:1px solid rgba(233,239,230,.28);background:rgba(8,14,10,.45);backdrop-filter:blur(6px);display:grid;place-items:center;transition:all .25s}
.fbtn:hover{border-color:var(--sprout);background:rgba(8,14,10,.7)}
.film-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3}
.film-prev{left:clamp(12px,2vw,20px)}
.film-next{right:clamp(12px,2vw,20px)}
.film-thumbs{display:flex;gap:6px;margin-top:10px;overflow-x:auto;scrollbar-width:none}
.film-thumbs::-webkit-scrollbar{display:none}
.th-btn{flex:0 0 calc(10% - 6px);min-width:60px;background:none;padding:0;border:2px solid transparent;border-radius:6px;overflow:hidden;cursor:pointer;opacity:.5;transition:opacity .25s,border-color .25s}
.th-btn.active{border-color:var(--sprout);opacity:1}
.th-btn:hover{opacity:.85}
.th-btn img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.th-cap{font-family:var(--bangla);font-size:11px;padding:3px 4px;color:var(--mist-dim);text-align:center;background:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.tiles{margin-top:18px;display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:130px;gap:14px}
.tile{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line-soft);cursor:pointer}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform 1s ease,filter .6s}
.tile:hover img{transform:scale(1.08)}
.tile .tcap{position:absolute;left:14px;bottom:12px;z-index:2;opacity:0;transform:translateY(8px);transition:all .4s}
.tile:hover .tcap{opacity:1;transform:translateY(0)}
.tile .tcap .bn{font-family:var(--bangla);font-size:16px;font-weight:600}
.tile .tcap .en{font-size:11.5px;color:var(--mist-dim);letter-spacing:.04em}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(7,13,9,.7) 100%);opacity:.8;transition:opacity .4s}
.tile:hover::after{opacity:1}
.t-a{grid-column:span 5;grid-row:span 2}
.t-b{grid-column:span 4;grid-row:span 2}
.t-c{grid-column:span 3;grid-row:span 2}
.t-d{grid-column:span 4;grid-row:span 2}
.t-e{grid-column:span 4;grid-row:span 2}
.t-f{grid-column:span 4;grid-row:span 2}

/* ---------- Fund section ---------- */
.fund{background:linear-gradient(180deg,var(--ink-2) 0%,var(--ink) 100%)}
.fund-top{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,4vw,56px);align-items:stretch}
.fund-note{max-width:46ch;color:var(--mist-dim);font-weight:300;margin-top:10px}
.fund-note strong{color:var(--mist);font-weight:500}
.ft-funds{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px}
.ft-chip{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;color:var(--mist-dim);
  border:1px solid var(--line-soft);border-radius:100px;padding:9px 16px}
.ft-chip .bn{font-family:var(--bangla);color:var(--mist-faint)}
.ft-chip i{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.ft-chip .d1{background:var(--gold)}
.ft-chip .d2{background:var(--sprout)}
.fund-stats{grid-template-columns:1fr;grid-auto-rows:1fr}

.fund-grid{margin-top:50px;display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(20px,3vw,32px)}
.fund-cta{margin-top:34px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  background:linear-gradient(110deg,rgba(143,209,79,.10),rgba(231,178,76,.06));
  border:1px solid var(--line);border-radius:var(--r);padding:22px clamp(20px,3vw,30px)}
.fund-cta .txt{flex:1;min-width:220px}
.fund-cta .txt strong{font-family:var(--serif);font-weight:400;font-size:20px;display:block}
.fund-cta .txt span{font-size:13px;color:var(--mist-dim)}

.mapsec{background:var(--ink)}
/* map / leaflet / pin / chip styles live in components.css (shared with people.html) */

.blogs{background:linear-gradient(180deg,var(--ink) 0%,var(--ink-2) 100%)}
.blog-grid{margin-top:46px;display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,28px)}
.post{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .4s}
.post:hover{transform:translateY(-6px);border-color:var(--line)}
.post .ph{aspect-ratio:16/10;overflow:hidden;position:relative}
.post .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s ease}
.post:hover .ph img{transform:scale(1.07)}
.post .ph .season{position:absolute;top:14px;left:14px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  background:rgba(8,14,10,.7);backdrop-filter:blur(6px);border:1px solid var(--line-soft);
  padding:6px 12px;border-radius:100px;color:var(--gold-soft)}
.post .body{padding:clamp(20px,2.6vw,28px);display:flex;flex-direction:column;flex:1}
.post .meta{font-size:11.5px;letter-spacing:.06em;color:var(--mist-faint);text-transform:uppercase}
.post h3{font-family:var(--serif);font-weight:400;font-size:clamp(20px,2.2vw,26px);line-height:1.18;margin:12px 0 10px}
.post .bn-sub{font-family:var(--bangla);font-size:14px;color:var(--mist-dim);margin-bottom:12px}
.post .ex{font-size:14px;color:var(--mist-dim);font-weight:300;flex:1}
.post .more{margin-top:18px;font-size:13px;color:var(--sprout);display:inline-flex;align-items:center;gap:8px;letter-spacing:.03em}
.post .more svg{transition:transform .3s}
.post:hover .more svg{transform:translateX(5px)}

/* ---------- Home responsive ---------- */
@media (max-width:980px){
  .insights-grid{grid-template-columns:1fr}
  .fund-grid{grid-template-columns:1fr}
  .blog-grid{grid-template-columns:1fr}
  .fund-top{grid-template-columns:1fr}
}
@media (max-width:720px){
  .stat-grid{grid-template-columns:1fr 1fr}
  .tiles{grid-auto-rows:88px;gap:10px}
  .film{aspect-ratio:4/3}
  .donut{margin:0 auto}
}
@media (max-width:430px){
  .hero-roman .latin{font-size:20px}
  .stat .val{font-size:38px}
}