:root{
  --red:#d50000;
  --red-dark:#a90000;
  --red-hero:#c70000;
  --yellow:#ffd329;
  --green:#28c24a;
  --navy:#0b2148;
  --white:#fff;
  --muted:#5b6475;
  --line:#d9dde4;
  --ok:#127a35;
  --err:#b42318;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--navy);font-family:Montserrat,"Hind Siliguri",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
p{margin:0}
ul{list-style:none;margin:0;padding:0}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.icon{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:4px}
.notify-section :focus-visible{outline-color:var(--navy)}
.container{width:min(1440px,92%);margin-inline:auto}
.site-shell{min-height:100vh;overflow:hidden}

/* ---------- Hero ---------- */
.hero{min-height:735px;position:relative;background:var(--red-hero);color:#fff;isolation:isolate}
.hero-media{position:absolute;inset:0 0 0 36%;margin:0;z-index:-3;overflow:hidden;
  /* Soft left edge: removes the hard vertical seam where the photo starts. */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%);mask-image:linear-gradient(90deg,transparent 0,#000 22%)}
.hero-media picture,.hero-media img{width:100%;height:100%}
.hero-media img{object-fit:cover;filter:saturate(.92) contrast(1.02);transform-origin:70% 50%}
.hero-overlay{
  position:absolute;inset:0;z-index:-2;
  background:
    linear-gradient(90deg,rgba(199,0,0,1) 0%,rgba(207,0,0,.98) 29%,rgba(197,0,0,.78) 45%,rgba(177,0,0,.20) 63%,rgba(120,0,0,.08) 100%),
    linear-gradient(0deg,rgba(185,0,0,.2),transparent 55%);
}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:85px;background:linear-gradient(transparent,#fff);z-index:-1;pointer-events:none}

.topbar{padding-top:54px}
.logo{display:inline-flex;align-items:baseline;font:700 82px/.75 Georgia,"Times New Roman",serif;letter-spacing:-8px;color:#fff}
.logo span{display:inline-block}
.logo .green{color:var(--green)}
.logo .yellow{color:var(--yellow)}
.tagline{font-size:20px;letter-spacing:1.2px;margin:20px 0 0 5px}

.hero-content{min-height:560px;display:flex;align-items:center;position:relative}
.copy{width:55%;padding:50px 0 105px}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:14px;font-weight:800;letter-spacing:5px;margin-bottom:20px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--yellow);flex:none}
h1{font-family:"Hind Siliguri",sans-serif;font-size:clamp(48px,5.3vw,76px);line-height:1.02;margin:0 0 18px}
h1 span,h1 strong{display:block}
h1 span{font-weight:600}
h1 strong{color:var(--yellow);font-weight:700}
.intro{font-family:"Hind Siliguri",sans-serif;font-size:21px;line-height:1.55;max-width:640px;color:rgba(255,255,255,.97)}

.features{display:grid;grid-template-columns:repeat(4,1fr);max-width:760px;margin-top:42px;padding-top:19px;border-top:1px solid rgba(255,255,255,.3)}
.feature{display:flex;gap:11px;align-items:center;min-height:55px;padding:0 17px;border-right:1px solid rgba(255,255,255,.35)}
.feature:first-child{padding-left:0}
.feature:last-child{border-right:0}
.feature .icon{color:var(--yellow);font-size:30px;stroke-width:1.6;transition:transform .3s var(--ease)}
.feature:hover .icon{transform:translateY(-3px)}
.feature b,.feature small{display:block;font-size:12.5px}
.feature small{font-weight:600;margin-top:1px}

.cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.btn{display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 24px;border-radius:30px;font-weight:700;font-size:15px;transition:transform .2s var(--ease),background-color .2s,box-shadow .2s}
.btn .icon{font-size:19px;stroke-width:2}
.btn-primary{position:relative;overflow:hidden;background:var(--yellow);color:var(--navy);box-shadow:0 8px 24px rgba(0,0,0,.18)}
/* Light sweep every few seconds to draw the eye to the CTA (transform only). */
.btn-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%);transform:translateX(-120%);animation:shine 5s 3s ease-in-out infinite;pointer-events:none}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.24)}
.btn-ghost{border:1.5px solid rgba(255,255,255,.75);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.12)}

.visual-copy{position:absolute;right:3%;top:45px;text-align:right;font-size:17px;line-height:1.1;font-style:italic;font-weight:600;letter-spacing:2px;text-shadow:0 1px 14px rgba(0,0,0,.45),0 0 2px rgba(0,0,0,.3)}
.visual-copy span{display:block}

/* ---------- Notify ---------- */
.notify-section{position:relative;background:#fff;padding:22px 0 24px;z-index:4}
.notify-grid{display:grid;grid-template-columns:1fr 1.8fr 1fr;align-items:center;gap:40px}
.social-block{display:flex;align-items:center;gap:16px}
.socials{display:flex;gap:10px}
.socials a{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:#fff;transition:transform .2s var(--ease),background-color .2s}
.socials a:hover{transform:translateY(-2px);background:var(--red)}
.socials .icon{font-size:17px}
.follow{font-size:12px;line-height:1.45;color:var(--muted)}
.follow strong{color:var(--navy);font-size:13px}

.signup{text-align:center}
.signup h2{margin:0;font-size:28px;line-height:1.1}
.signup p{margin:4px 0 14px;color:var(--muted);font-size:14px}
form{position:relative}
.email-control{height:54px;border:1px solid var(--line);border-radius:30px;display:flex;align-items:center;overflow:hidden;box-shadow:0 6px 18px rgba(10,33,72,.07);background:#fff;transition:border-color .2s,box-shadow .2s}
.email-control:focus-within{border-color:#9aa3b2;box-shadow:0 0 0 4px rgba(213,0,0,.12),0 6px 18px rgba(10,33,72,.07)}
.email-control.is-error{border-color:var(--err);animation:shake .42s}
.mail{margin-left:18px;color:#667085;font-size:20px}
.email-control input{flex:1;border:0;outline:0;height:100%;padding:0 13px;font-family:inherit;font-size:15px;min-width:0;background:transparent;color:var(--navy)}
.email-control button{height:100%;border:0;background:var(--red);color:#fff;font-family:inherit;font-size:15px;font-weight:800;padding:0 28px;min-width:185px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:background-color .2s}
.email-control button:hover{background:var(--red-dark)}
.email-control button .icon{font-size:18px;stroke-width:2.4;transition:transform .2s var(--ease)}
.email-control button:hover .icon{transform:translateX(4px)}
.email-control button:disabled{opacity:.7;cursor:progress}
.email-control button:focus-visible{outline-offset:-4px;outline-color:#fff}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-message{min-height:20px;font-size:13px;margin-top:8px;display:flex;align-items:center;justify-content:center;gap:6px;color:var(--muted)}
.form-message.is-success{color:var(--ok);font-weight:600}
.form-message.is-error{color:var(--err);font-weight:600}
.form-message .check{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;animation:draw .5s .1s var(--ease) forwards}

.contact-block{border-left:1px solid var(--line);padding-left:30px;font-size:13.5px;color:#24304a;display:grid;gap:12px}
.contact-block > *{display:flex;align-items:center;gap:9px}
.contact-block a:hover span{text-decoration:underline}
.contact-block .icon{font-size:17px;color:var(--red)}

.footer{margin-top:20px;text-align:center}
.tagline-line{display:flex;align-items:center;justify-content:center;gap:25px;color:#5f6b7d;font-size:11px;letter-spacing:4px}
.rule{height:1px;width:42px;background:#9ba3b0;flex:none}
.copyright{margin-top:8px;font-size:11.5px;color:#6b7485}

/* ---------- Motion ----------
   Only transform/opacity are animated (GPU-friendly, smooth on low-end phones).
   Everything is switched off for prefers-reduced-motion at the bottom. */
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes drop{0%{opacity:0;transform:translateY(-44px)}55%{opacity:1;transform:translateY(7px)}75%{transform:translateY(-3px)}100%{opacity:1;transform:none}}
@keyframes kenburns{from{transform:scale(1.1)}to{transform:scale(1)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,211,41,.75)}70%{box-shadow:0 0 0 11px rgba(255,211,41,0)}100%{box-shadow:0 0 0 0 rgba(255,211,41,0)}}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes shine{0%{transform:translateX(-120%)}22%,100%{transform:translateX(120%)}}

.reveal{animation:rise .8s var(--ease) both;animation-delay:calc(var(--d,0) * 100ms + 250ms)}
.logo span{animation:fade .6s var(--ease) both;animation-delay:calc(var(--i,0) * 60ms)}
.logo .green,.logo .yellow{animation:drop .9s var(--ease) both;animation-delay:calc(var(--i,0) * 90ms + 300ms)}
.hero-media img{animation:kenburns 16s ease-out both}
.dot{animation:pulse 2.2s ease-out infinite}

html.js .notify-grid > *{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
html.js .notify-grid.in-view > *{opacity:1;transform:none}
html.js .notify-grid.in-view > :nth-child(2){transition-delay:.1s}
html.js .notify-grid.in-view > :nth-child(3){transition-delay:.2s}

/* ---------- Responsive ---------- */
@media (max-width:1050px){
  .hero{min-height:760px}
  .hero-media{left:48%}
  .copy{width:65%}
  .visual-copy{display:none}
  .notify-grid{grid-template-columns:1fr;gap:26px}
  .social-block,.contact-block{justify-content:center;border:0;padding:0}
  .social-block:empty{display:none}
  .contact-block{justify-items:center}
}
@media (max-width:700px){
  .hero{min-height:0;display:flex;flex-direction:column}
  .hero-overlay{display:none}
  /* Photo sits below the text instead of behind it: no fixed heights or
     padding hacks, so long Bengali lines can wrap freely. */
  .hero-media{position:relative;inset:auto;height:300px;margin-top:-30px;-webkit-mask-image:none;mask-image:none}
  .hero-media::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,var(--red-hero) 0%,rgba(199,0,0,.6) 22%,rgba(199,0,0,0) 60%)}
  .topbar{padding-top:35px}
  .logo{font-size:65px;letter-spacing:-6px}
  .tagline{font-size:16px;margin-top:17px}
  .hero-content{min-height:0;display:block}
  .copy{width:100%;padding:48px 0 30px}
  .eyebrow{font-size:11px;letter-spacing:3px}
  h1{font-size:44px}
  .intro{font-size:18px}
  .features{grid-template-columns:1fr 1fr;gap:16px 13px;margin-top:28px}
  .feature{border:0;padding:0;min-height:0}
  .feature .icon{font-size:26px}
  .feature b,.feature small{font-size:12px}
  .cta .btn{flex:1 1 auto;justify-content:center}
  .notify-section{padding-top:8px}
  .email-control input{font-size:16px} /* 16px+ stops iOS zooming into the field */
  .email-control button{min-width:0;padding:0 18px}
  .tagline-line{letter-spacing:2px;gap:12px;font-size:10.5px}
}
@media (max-width:430px){
  .container{width:90%}
  h1{font-size:39px}
  .intro{font-size:17px}
  .hero-media{height:250px}
  .email-control button{font-size:13px;padding:0 14px}
  .mail{margin-left:14px}
  .rule{width:24px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  html.js .notify-grid > *{opacity:1;transform:none}
}