:root{
  --bg:#edf5fb;
  --card:#ffffff;
  --text:#16324a;
  --muted:#60768c;
  --line:#dbe6ef;
  --primary:#ff484f;
  --primary-dark:#f73b42;
  --green:#0f9f53;
  --green-dark:#0b8b47;
  --chip:#eff5fb;
  --shadow:0 10px 30px rgba(14,37,64,.08);
  --shadow-soft:0 6px 18px rgba(14,37,64,.08);
  --radius:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Noto Sans Bengali","Inter",system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button,input{font:inherit}
.container{width:min(1240px,calc(100% - 40px));margin-inline:auto}
.topbar{
  position:sticky;top:0;z-index:1000;
  background:rgba(244,249,253,.88);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(210,224,236,.6)
}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px;min-width:max-content}
.brand-logo{width:54px;height:54px;object-fit:contain}
.brand-title{font-size:1.8rem;font-weight:800;line-height:1;color:#10243b}
.brand-title.white{color:#fff}
.brand-subtitle{font-size:.95rem;color:#304b61;font-weight:600}
.brand-subtitle.light{color:#c6d3df}
.main-nav{display:flex;align-items:center;gap:10px;flex:1;justify-content:center}
.nav-link{padding:12px 16px;border-radius:999px;font-weight:700;color:#1e3448;font-size:.97rem;transition:.2s}
.nav-link:hover,.nav-link.active{background:#fff;box-shadow:var(--shadow-soft);color:#ef3945}
.nav-actions{display:flex;align-items:center;gap:12px;min-width:max-content}
.icon-btn{
  width:38px;height:38px;border-radius:50%;border:none;background:transparent;cursor:pointer;
  color:#17334a;font-size:1.2rem
}
.theme-switch{position:relative;display:inline-flex;align-items:center}
.theme-switch input{display:none}
.theme-slider{
  width:66px;height:36px;border-radius:999px;background:#0b2240;padding:4px;display:flex;align-items:center;justify-content:space-between;
  gap:8px;position:relative;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.08)
}
.theme-slider::after{
  content:"";position:absolute;left:4px;top:4px;width:28px;height:28px;border-radius:50%;background:#ffefb0;transition:.25s ease
}
.theme-switch input:checked + .theme-slider::after{transform:translateX(30px)}
.theme-switch input:checked + .theme-slider{background:#183248}
.theme-slider span{font-size:.9rem;z-index:1;width:28px;text-align:center}
.theme-text{font-weight:700;color:#1a3347}
.menu-toggle{display:none;border:none;background:#fff;border-radius:12px;padding:10px 12px;box-shadow:var(--shadow-soft)}
.hero{position:relative;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:url('../images/hero-bg.png') center/cover no-repeat}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,33,56,.72) 0%,rgba(8,56,69,.42) 40%,rgba(18,52,75,.16) 100%)}
.hero-content{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:30px;min-height:430px;padding:28px 0 24px}
.hero-left h1{font-size:3.4rem;line-height:1.1;color:#fff;font-weight:900;margin:0 0 18px;letter-spacing:-.02em}
.hero-left h1 span{color:#b7ef77}
.hero-left p{max-width:620px;font-size:1.35rem;line-height:1.6;color:#f3f8fb;margin:0 0 28px}
.hero-buttons{display:flex;gap:18px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:999px;padding:15px 28px;font-weight:800;box-shadow:var(--shadow-soft);transition:.2s ease;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn-red{background:linear-gradient(180deg,#ff5d61,#ff2f3c);color:#fff}
.btn-green{background:linear-gradient(180deg,#12b660,#099348);color:#fff}
.btn-muted{background:#e8eef4;color:#73879a;box-shadow:none}
.btn.full{width:100%;border-radius:12px;padding:13px 18px}
.btn.static{cursor:default}
.hero-right{position:relative;display:flex;align-items:center;justify-content:center;min-height:360px}
.hero-card{width:min(430px,100%);filter:drop-shadow(0 22px 36px rgba(10,25,45,.28));transform:rotate(-6deg)}
.hero-note{
  position:absolute;right:6px;top:86px;color:#1b1b1b;font-size:1.3rem;font-weight:700;line-height:1.35;
  transform:rotate(-4deg);text-shadow:0 2px 14px rgba(255,255,255,.38)
}
.section{padding:28px 0 32px}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:18px;flex-wrap:wrap;margin-bottom:18px}
.section-title-row{display:flex;align-items:center;gap:12px}
.section-icon{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:#113659;color:#fff;box-shadow:var(--shadow-soft);font-size:1.1rem
}
.section-head h2,.how-section h2{margin:0;font-size:2rem;line-height:1.1}
.section-head p,.how-sub{margin:.4rem 0 0;color:var(--muted);font-size:1rem}
.filters-wrap{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end}
.search-box{display:flex;align-items:center;background:#fff;border:1px solid var(--line);border-radius:999px;padding:0 8px 0 18px;box-shadow:var(--shadow-soft)}
.search-box input{width:260px;border:none;outline:none;background:transparent;padding:14px 6px;color:#234}
.search-box button{border:none;background:transparent;padding:10px 12px;font-size:1.2rem;color:#345;cursor:pointer}
.chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{border:1px solid #d6e0e9;background:#fff;color:#496175;border-radius:999px;padding:10px 16px;font-weight:700;cursor:pointer;transition:.2s}
.chip.active{background:#0f9f53;color:#fff;border-color:#0f9f53}
.chip[data-filter="live"].active{background:#fff;color:#ff3d45;border-color:#ffd4d6}
.chip[data-filter="popular"]{color:#ff5532;border-color:#ffc9bc}
.chip[data-filter="popular"].active{background:#fff1eb;color:#ff5532;border-color:#ffc9bc}
.tools-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.tool-card{background:var(--card);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.tool-thumb-wrap{position:relative;padding:12px 12px 0}
.tool-thumb{width:100%;height:210px;object-fit:cover;border-radius:18px}
.badge{position:absolute;left:20px;top:18px;padding:7px 12px;border-radius:999px;font-size:.78rem;font-weight:800;color:#fff;box-shadow:0 8px 16px rgba(0,0,0,.12)}
.badge-live{background:linear-gradient(180deg,#17c560,#0ca74e)}
.badge-soon{background:linear-gradient(180deg,#ffa31d,#ff8a00)}
.tool-body{padding:16px 18px 12px}
.tool-body h3{margin:0 0 10px;font-size:1.95rem;line-height:1.1;font-weight:800;color:#19324c}
.tool-body p{margin:0;color:#607286;line-height:1.55;min-height:74px}
.meta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px;color:#51687e;font-size:.92rem;font-weight:600}
.tool-footer{padding:0 18px 18px;margin-top:auto}
.how-section{padding-top:22px}
.how-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:20px}
.how-card{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px 18px;box-shadow:var(--shadow-soft)}
.how-card h4{margin:0 0 6px;font-size:1.08rem}
.how-card p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.45}
.how-badge{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:1.3rem;font-weight:800;flex:0 0 auto}
.blue{background:#3a81ff}.purple{background:#b14cff}.green{background:#16b14f}.orange{background:#ff7b2f}
.footer{margin-top:18px;background:linear-gradient(180deg,#04253f,#001a31);color:#dfeaf3;padding-top:28px;padding-bottom:85px}
.footer-top{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.footer-brand p{max-width:500px;color:#9cb3c6}
.footer-links{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;font-weight:600}
.footer-links a{color:#f0f6fb}
.footer-socials{display:flex;gap:12px}
.footer-socials a{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);color:#fff;font-weight:800}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:18px;padding-top:14px;text-align:center;color:#b4c6d4}
.mobile-bottom-nav{display:none}
.hidden{display:none !important}
body.dark{
  --bg:#0d1722;--card:#132131;--text:#e4eef7;--muted:#a8bbcb;--line:#23384c;--chip:#162536;
}
body.dark .topbar{background:rgba(7,17,27,.88);border-bottom-color:rgba(35,56,76,.65)}
body.dark .brand-title,body.dark .theme-text,body.dark .icon-btn,body.dark .nav-link{color:#e8eff6}
body.dark .nav-link:hover,body.dark .nav-link.active{background:#132131;color:#ff7c84}
body.dark .search-box,body.dark .chip,body.dark .how-card,body.dark .tool-card{background:#132131}
body.dark .section-icon{background:#0c2944}
body.dark .btn-muted{background:#1b2d40;color:#b0c1cf}
body.dark .menu-toggle{background:#132131;color:#fff}
body.dark .footer{background:linear-gradient(180deg,#05101d,#030c16)}
@media (max-width: 1120px){
  .hero-left h1{font-size:2.8rem}
  .tool-body h3{font-size:1.55rem}
  .tools-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .how-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 860px){
  .container{width:min(100% - 24px,1240px)}
  .menu-toggle{display:block}
  .main-nav{display:none;position:absolute;left:12px;right:12px;top:84px;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);padding:12px;flex-direction:column;align-items:stretch}
  body.dark .main-nav{background:#132131}
  .main-nav.open{display:flex}
  .nav-actions .theme-text{display:none}
  .hero-content{grid-template-columns:1fr;min-height:auto;padding:18px 0 24px}
  .hero-left{padding-top:20px}
  .hero-left h1{font-size:2.35rem}
  .hero-left p{font-size:1.08rem;max-width:none}
  .hero-right{min-height:auto;padding-bottom:4px}
  .hero-card{width:min(340px,85vw)}
  .hero-note{right:4px;top:40px;font-size:1rem}
  .section-head{align-items:start}
  .filters-wrap{justify-content:flex-start}
  .search-box{width:100%}
  .search-box input{width:100%}
}
@media (max-width: 640px){
  .nav-wrap{padding:12px 0}
  .brand-logo{width:44px;height:44px}
  .brand-title{font-size:1.45rem}
  .brand-subtitle{font-size:.78rem}
  .hero{border-bottom-left-radius:18px;border-bottom-right-radius:18px}
  .hero-content{padding-bottom:18px}
  .hero-left h1{font-size:2rem}
  .hero-buttons{gap:12px}
  .btn{padding:13px 20px;font-size:.96rem}
  .tools-grid,.how-grid{grid-template-columns:1fr}
  .tool-thumb{height:176px}
  .tool-body h3{font-size:1.35rem}
  .tool-body p{min-height:auto}
  .section{padding:20px 0 24px}
  .footer{padding-bottom:94px}
  .mobile-bottom-nav{
    position:fixed;left:12px;right:12px;bottom:10px;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border:1px solid var(--line);
    border-radius:20px;display:grid;grid-template-columns:repeat(3,1fr);box-shadow:0 18px 36px rgba(0,0,0,.16);z-index:1000;overflow:hidden
  }
  body.dark .mobile-bottom-nav{background:rgba(19,33,49,.98)}
  .mobile-bottom-nav a{padding:12px 6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:.9rem;font-weight:700;color:#4d6377}
  .mobile-bottom-nav a.active{color:#ff4249}
}