@import url("https://fonts.googleapis.com/css2?family=Rajdhani:wght@600;700&family=Teko:wght@500;600&display=swap");
/* Festival layer: toran bunting, twinkling sparkles, the Constitution book band, confetti. */

/* toran (triangular bunting) strung across the top of the hero and footer */
.toran{position:absolute;left:0;right:0;top:0;height:34px;z-index:2;pointer-events:none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='34' viewBox='0 0 96 34'%3E%3Cpath d='M0 3 Q48 9 96 3' fill='none' stroke='%23f2b632' stroke-width='1.5'/%3E%3Cpath d='M4 4 L16 4.9 L10 26 Z' fill='%23f2b632'/%3E%3Cpath d='M20 5.2 L32 5.9 L26 28 Z' fill='%23ffffff'/%3E%3Cpath d='M36 6 L48 6.2 L42 29 Z' fill='%231f4fd1'/%3E%3Cpath d='M52 6.1 L64 5.9 L58 29 Z' fill='%23f2b632'/%3E%3Cpath d='M68 5.8 L80 5.1 L74 28 Z' fill='%23ffffff'/%3E%3Cpath d='M84 4.8 L94 3.9 L89 25 Z' fill='%231f4fd1'/%3E%3C/svg%3E") repeat-x 0 0/96px 34px;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.25))}
footer{position:relative;padding-top:56px!important}
footer .toran{opacity:.9}

/* sparkles in the hero */
.sparkles{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.sparkles i{position:absolute;width:var(--s,6px);height:var(--s,6px);background:#f2b632;border-radius:50%;opacity:.0;box-shadow:0 0 10px 2px rgba(242,182,50,.6)}
.sparkles i.star{border-radius:0;background:none;box-shadow:none;width:14px;height:14px}
.sparkles i.star::before{content:"✦";position:absolute;inset:0;color:#ffe08a;font-size:14px;line-height:14px;text-shadow:0 0 8px rgba(242,182,50,.9)}
@media (prefers-reduced-motion:no-preference){
  .sparkles i{animation:twinkle var(--d,4s) ease-in-out var(--delay,0s) infinite}
  @keyframes twinkle{0%,100%{opacity:0;transform:scale(.6)}50%{opacity:var(--o,.8);transform:scale(1)}}
  .toran{transform-origin:top center;animation:sway 6s ease-in-out infinite}
  @keyframes sway{0%,100%{transform:rotate(0)}50%{transform:rotate(.25deg) translateY(1px)}}
}
@media (prefers-reduced-motion:reduce){.sparkles i{opacity:var(--o,.6)}}
.hero .wrap{padding-top:52px!important}
@media (min-width:900px){.hero .wrap{padding-top:78px!important}}

/* festival ribbon above the hero title */
.fest-chip{display:inline-flex;align-items:center;gap:8px;margin-bottom:12px;background:rgba(242,182,50,.14);border:1px solid rgba(242,182,50,.55);color:#ffe08a;border-radius:999px;padding:5px 14px 5px 8px;font-weight:700;font-size:14px}
.fest-chip b{background:#f2b632;color:#1b1300;border-radius:999px;padding:1px 9px;font-size:13px}

/* the Constitution book band */
.granth{position:relative;overflow:hidden;color:#fff;background:#081a4f}
.granth::before{content:"";position:absolute;left:50%;top:50%;width:1600px;height:1600px;transform:translate(-50%,-50%);
  background:repeating-conic-gradient(from 0deg,rgba(242,182,50,.10) 0deg 6deg,transparent 6deg 15deg);
  -webkit-mask:radial-gradient(circle,#000 0,transparent 62%);mask:radial-gradient(circle,#000 0,transparent 62%)}
@media (prefers-reduced-motion:no-preference){.granth::before{animation:rays 90s linear infinite}@keyframes rays{to{transform:translate(-50%,-50%) rotate(360deg)}}}
.granth .wrap{position:relative;display:grid;gap:30px;align-items:center;padding-block:56px}
@media (min-width:900px){.granth .wrap{grid-template-columns:.9fr 1.1fr;gap:56px;padding-block:88px}}
.book{position:relative;justify-self:center;width:min(300px,74vw)}
@media (min-width:900px){.book{width:340px}}
.book::after{content:"";position:absolute;left:8%;right:8%;bottom:-18px;height:30px;border-radius:50%;background:radial-gradient(rgba(0,0,0,.55),transparent 70%);filter:blur(4px);z-index:-1}
.book img{width:100%;height:auto;filter:drop-shadow(0 22px 40px rgba(0,0,0,.5)) drop-shadow(0 0 30px rgba(242,182,50,.25))}
@media (prefers-reduced-motion:no-preference){.book img{animation:float 6s ease-in-out infinite}@keyframes float{0%,100%{transform:translateY(0) rotate(-1.2deg)}50%{transform:translateY(-10px) rotate(1deg)}}}
.granth h2{font-family:var(--display);font-size:clamp(32px,8vw,52px);line-height:1.2;margin-top:6px}
.granth p.lead{color:#d3ddff;font-size:clamp(16.5px,4.2vw,19px);margin-top:12px;max-width:34em}
.granth .facts-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.granth .facts-row span{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:6px 12px;font-size:14px;color:#e6ecff}
.granth .facts-row b{color:#f2b632}
.granth .cta-row{display:grid;gap:12px;margin-top:24px}
@media (min-width:520px){.granth .cta-row{grid-template-columns:auto auto;justify-content:start}}
.granth .btn-ghost{color:#fff;border-color:rgba(255,255,255,.55)}

/* confetti canvas */
#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:80}

/* hero: the original Constitution volume beside Babasaheb's portrait (replaces the name tag) */
.photo-tag{display:none}
body .mini-granth{position:absolute;height:auto;max-width:none;right:-24%;bottom:-9%;width:36%;z-index:3;transform:rotate(8deg);transform-origin:50% 100%;
  border-radius:4px 6px 6px 4px;border:2px solid #f2b632;
  box-shadow:-4px 0 0 #1a1a2e inset,0 14px 30px rgba(0,0,0,.55),0 0 0 4px rgba(242,182,50,.18)}
@media (min-width:900px){body .mini-granth{width:32%;right:-16%;bottom:-8%}}
@media (prefers-reduced-motion:no-preference){.mini-granth{animation:granthIn .9s cubic-bezier(.2,1.2,.4,1) .3s both}
  @keyframes granthIn{from{opacity:0;transform:translateY(18px) rotate(4deg)}to{opacity:1;transform:rotate(8deg)}}}

/* typography: Rajdhani for headings, Teko for the festival title, Mukta for reading text */
html:root{--display:"Rajdhani","Mukta","Noto Sans Devanagari",system-ui,sans-serif}
html body h1,html body h2,html body h3,html body .brand b,html body .fact b,html body footer .jb,html body .preamble .h,html body .photo-tag{font-weight:700}
html body .hero h1{font-family:"Teko","Rajdhani","Mukta",sans-serif;font-weight:500;font-size:clamp(48px,12.6vw,96px);line-height:1.05;letter-spacing:.01em;margin-top:6px}
html body .sec-head h2,html body .granth h2{font-size:clamp(32px,8vw,50px);line-height:1.12}
html body .value h3{font-size:28px;line-height:1.15}
html body .quote p{font-family:"Rajdhani","Mukta",sans-serif;font-weight:700;font-size:clamp(23px,6vw,30px);line-height:1.3}
html body .step h3,html body .team h3,html body .done h3{line-height:1.2}
html body .share-card h3{line-height:1.15}
html body .brand b{font-size:21px}
html body .fact b{font-size:clamp(18px,4.8vw,23px);line-height:1.2}
html body .preamble .h{font-size:clamp(24px,6vw,32px)}
html body .preamble p{font-family:var(--body);font-weight:500;font-size:clamp(17.5px,4.4vw,20px);line-height:1.85}
html body footer .jb{font-family:"Teko","Rajdhani",sans-serif;font-weight:600;font-size:40px;line-height:1.1;letter-spacing:.01em}
html body .eyebrow,html body .kicker{letter-spacing:.03em}