/* Ain Uddin Al Azad — Portfolio (dark poster edition)
   Flat black + crimson red. No gradients. */
:root{
  --bg:#0a0a0b;
  --bg-2:#101012;
  --panel:#151517;
  --line:#26262a;
  --red:#e0231c;
  --red-dark:#8f100c;
  --white:#f5f3ee;
  --mut:#a7a49c;
  --r:14px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter','Hind Siliguri',sans-serif;background:var(--bg);color:var(--white);line-height:1.7;font-size:16.5px;overflow-x:hidden}
h1,h2,h3,.bn{font-family:'Hind Siliguri','Inter',sans-serif}
img{max-width:100%;display:block}
a{color:var(--white);text-decoration:none}
a:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.en{font-family:'Inter',sans-serif}

/* ---------- top strip + header ---------- */
.topstrip{border-bottom:1px solid var(--line);font-size:.72rem;font-weight:700;letter-spacing:.22em;color:var(--mut)}
.topstrip .wrap{display:flex;justify-content:space-between;padding-top:10px;padding-bottom:10px}
.topstrip .free{color:var(--white)}
.topstrip .free i{color:var(--red);font-style:normal}
header{position:sticky;top:0;z-index:30;background:rgba(10,10,11,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);transition:box-shadow .3s}
header.scrolled{box-shadow:0 12px 30px -18px rgba(0,0,0,.9)}
.header-in{display:flex;justify-content:space-between;align-items:center;padding:14px 0}
.logo{font-weight:700;font-size:1.15rem;font-family:'Hind Siliguri',sans-serif}
.logo b{color:var(--red)}
nav{display:flex;gap:26px;font-family:'Hind Siliguri',sans-serif;font-weight:500}
nav a{color:var(--mut)}
nav a:hover{color:var(--red)}
@media(max-width:640px){nav{display:none}}

/* ---------- hero ---------- */
.hero{position:relative;border-bottom:1px solid var(--line);overflow:hidden;background:var(--bg)}
.giant{position:absolute;top:8px;left:50%;transform:translateX(-50%);font-family:'Inter',sans-serif;font-weight:900;font-size:clamp(4.2rem,15.5vw,12.5rem);letter-spacing:.01em;color:var(--red);opacity:.92;line-height:1;white-space:nowrap;z-index:0;animation:giantIn 1.1s ease both}
@keyframes giantIn{from{opacity:0;transform:translateX(-50%) translateY(26px)}to{opacity:.92;transform:translateX(-50%) translateY(0)}}
.hero-in{position:relative;z-index:1;display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:end;padding:120px 0 0}
@media(max-width:900px){.hero-in{grid-template-columns:1fr;padding-top:96px}}
.hero-fig{display:flex;justify-content:center}
.hero-fig img{width:min(430px,88vw);border-radius:18px 18px 0 0}
.hero-left{padding-bottom:56px}
@media(max-width:900px){.hero-left{order:2;padding-bottom:8px}.hero-fig{order:1}.hero-stats{order:3}}
.hello{font-family:'Hind Siliguri',sans-serif;font-size:1.3rem;color:var(--mut)}
.hero h1{font-size:clamp(2.4rem,5.6vw,3.9rem);line-height:1.18;font-weight:700;color:var(--white);margin:4px 0 10px}
.hero-role{color:var(--red);font-weight:800;letter-spacing:.06em;font-size:1rem;font-family:'Inter',sans-serif}
.hero p.lead{color:var(--mut);font-family:'Hind Siliguri',sans-serif;max-width:400px;margin-top:12px}
.hero-loc{margin-top:26px;font-family:'Hind Siliguri',sans-serif;color:var(--mut);display:flex;align-items:center;gap:9px;font-size:.95rem}
.hero-loc::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--red);flex:none;animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.hero-stats{padding-bottom:56px;display:flex;flex-direction:column;gap:26px;justify-self:end}
@media(max-width:900px){.hero-stats{flex-direction:row;justify-self:start;padding-bottom:40px;flex-wrap:wrap}}
.stat b{font-size:2rem;font-weight:900;color:var(--white);line-height:1}
.stat b i{color:var(--red);font-style:normal}
.stat span{display:block;font-size:.68rem;font-weight:700;letter-spacing:.18em;color:var(--mut);margin-top:5px;font-family:'Inter',sans-serif}

/* ---------- sections ---------- */
section{padding:64px 0}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:34px}
h2{font-size:clamp(1.5rem,3.4vw,2.1rem);font-weight:700;letter-spacing:.01em}
h2 .en{font-weight:900}
.sec-head a{font-family:'Hind Siliguri',sans-serif;color:var(--mut);white-space:nowrap}
.sec-head a:hover{color:var(--red)}

/* featured projects */
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media(max-width:900px){.feat{grid-template-columns:1fr}}
.fcard figure{aspect-ratio:16/10;overflow:hidden;border-radius:var(--r);background:var(--panel)}
.fcard figure img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.fcard:hover figure img{transform:scale(1.06)}
.fcard .meta{display:flex;gap:14px;align-items:baseline;margin-top:14px}
.fcard .num{font-size:1.9rem;font-weight:900;color:var(--red);line-height:1}
.fcard h3{font-size:1.12rem;font-weight:600;line-height:1.35}
.fcard h3 .en{display:block;font-size:.68rem;font-weight:700;letter-spacing:.16em;color:var(--mut);font-family:'Inter',sans-serif}
.fcard .arr{margin-left:auto;color:var(--mut);font-size:1.2rem;transition:transform .25s,color .25s}
.fcard:hover .arr{transform:translateX(5px);color:var(--red)}

/* all projects grid */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:40px}
@media(max-width:900px){.grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.grid{grid-template-columns:1fr}}
.pcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .3s,border-color .3s;display:flex;flex-direction:column}
.pcard:hover{transform:translateY(-5px);border-color:var(--red-dark)}
.pcard figure{aspect-ratio:16/9;overflow:hidden}
.pcard figure img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.pcard:hover figure img{transform:scale(1.06)}
.pcard .body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:6px;flex:1}
.pcard .top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.pcard h3{font-size:1.08rem;font-weight:600;line-height:1.35}
.pcard p{color:var(--mut);font-family:'Hind Siliguri',sans-serif;font-size:.96rem;flex:1}
.tag{font-family:'Hind Siliguri',sans-serif;font-size:.76rem;font-weight:600;padding:2px 11px;border-radius:999px;white-space:nowrap;border:1px solid var(--line);color:var(--mut)}
.tag-live{background:var(--red);border-color:var(--red);color:#fff}
.tag-done{color:#e8c96a;border-color:#5c4d1e}
.plink{font-family:'Hind Siliguri',sans-serif;font-weight:600;color:var(--red)}

/* skills + process */
.cols{display:grid;grid-template-columns:1.1fr 1fr .9fr;gap:44px}
@media(max-width:980px){.cols{grid-template-columns:1fr}}
.cols h2{font-size:1.45rem;margin-bottom:20px}
.edu-item{margin-bottom:18px}
.edu-item .yr{color:var(--red);font-weight:700;font-size:.85rem;font-family:'Inter',sans-serif}
.edu-item h3{font-size:1.05rem;font-weight:600}
.edu-item p{color:var(--mut);font-family:'Hind Siliguri',sans-serif;font-size:.95rem}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:8px}
.chip{border:1px solid var(--line);border-radius:8px;padding:7px 14px;font-size:.74rem;font-weight:700;letter-spacing:.1em;color:var(--white);font-family:'Inter',sans-serif;transition:border-color .25s,color .25s}
.chip:hover{border-color:var(--red);color:var(--red)}
.step{display:flex;gap:16px;padding:13px 0;border-bottom:1px solid var(--line)}
.step:last-child{border-bottom:none}
.step .n{font-weight:900;color:var(--red);font-size:1.05rem;min-width:30px}
.step .ic{width:40px;height:40px;flex:none;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem}
.step h3{font-size:.8rem;font-weight:800;letter-spacing:.14em;font-family:'Inter',sans-serif}
.step p{color:var(--mut);font-family:'Hind Siliguri',sans-serif;font-size:.93rem}
.quote{background:var(--red);border-radius:var(--r);padding:30px 28px;color:#fff;display:flex;flex-direction:column;gap:14px}
.quote .mark{font-size:3rem;font-weight:900;line-height:.6;font-family:'Inter',sans-serif}
.quote p{font-family:'Hind Siliguri',sans-serif;font-size:1.25rem;font-weight:600;line-height:1.55}
.quote .sign{font-family:'Hind Siliguri',sans-serif;font-size:1.05rem;opacity:.9}
.quote .cta{margin-top:auto;font-size:.7rem;font-weight:800;letter-spacing:.2em;font-family:'Inter',sans-serif}

/* ---------- contact ---------- */
.contact{border-top:1px solid var(--line)}
.contact h2{font-size:clamp(1.9rem,5vw,3rem);font-weight:700;line-height:1.25}
.contact h2 .en{font-weight:900}
.contact p{color:var(--mut);font-family:'Hind Siliguri',sans-serif;max-width:520px;margin:12px 0 28px}
.contact-links{display:flex;gap:13px;flex-wrap:wrap}
.btn{display:inline-block;padding:13px 30px;border-radius:999px;font-family:'Hind Siliguri',sans-serif;font-weight:600;border:2px solid var(--red);transition:transform .25s,background .25s,color .25s}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{transform:translateY(-3px);color:#fff;background:var(--red-dark);border-color:var(--red-dark)}
.btn-line{color:var(--white);border-color:var(--line)}
.btn-line:hover{border-color:var(--red);color:var(--red);transform:translateY(-3px)}
footer{border-top:1px solid var(--line);padding:26px 0 40px;color:var(--mut);font-family:'Hind Siliguri',sans-serif;font-size:.93rem;text-align:center}

/* ---------- reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
[data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
  .giant{animation:none}
  html{scroll-behavior:auto}
}