/* ===== theme.css — ICT Hub নতুন ডিজাইন =====
   সাদা পরিষ্কার ব্যাকগ্রাউন্ড · কোরাল (প্রধান) + টিল (অ্যাকসেন্ট) · গোলাকার নরম কার্ড · হাতে আঁকা আন্ডারলাইন
   প্রতিটি পেজের <head> এর একদম শেষে লোড হয়, তাই আগের স্টাইল এখানে বদলে যায়। */
:root{
  --navy:#1b2333;--navy2:#26324a;--ink:#1b2333;--mut:#5d6778;
  --teal:#1f8f95;--teal-d:#177379;--mint:#e6f4f4;--mint2:#d3ebec;
  --coral:#f46a52;--coral-d:#e2553d;
  --royal:#f46a52;--royal-d:#e2553d;          /* পুরোনো নীল বাটন → কোরাল */
  --gold:#f46a52;--cyan-l:#f46a52;--cyan:#1f8f95;
  --alt:#f4f9f9;--tint:#f4f9f9;--line:#e6ebf1;--eb:#e6ebf1;
  --r:26px;--r-sm:16px;
  --sh:0 6px 24px rgba(27,35,51,.07);--cs:0 6px 24px rgba(27,35,51,.07);
  --sh1:0 6px 24px rgba(27,35,51,.07);--sh2:0 14px 38px rgba(27,35,51,.11);
}
body{background:#fff!important;color:var(--ink)}
h1,h2,h3{font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-weight:800;letter-spacing:-.02em}
:focus-visible{outline:3px solid var(--teal)}

/* সাদা পরিষ্কার সেকশন — আগের মিন্ট/ডটেড ব্যাকগ্রাউন্ড বাদ */
.alt,section.alt{background:#f7fbfb!important;background-image:none!important}
section{background-image:none}

/* হেডার */
.header{background:#fff!important;border-bottom:0;box-shadow:0 4px 22px rgba(27,35,51,.06)}
.nav a{border-radius:999px;color:var(--mut)}
.nav a:hover{color:var(--coral);background:none}
.nav a.active,.nav a[aria-current]{color:var(--coral);background:none}
.nav a.active::after{background:var(--coral)}

/* বাটন */
.btn{border-radius:999px}
.btn-primary,.btn-cyan,.find button{background:var(--coral)!important;color:#fff!important;box-shadow:0 8px 18px rgba(244,106,82,.28)}
.btn-primary:hover,.btn-cyan:hover,.find button:hover{background:var(--coral-d)!important}
.btn-ghost,.btn-outline{background:#fff;color:var(--ink);border-color:#c9d0da}
.btn-outline:hover,.btn-ghost:hover{background:#fff;color:var(--coral);border-color:var(--coral)}

/* হিরো */
.hero{background:linear-gradient(180deg,#fff 0%,#fff7f4 100%)!important}
.hero::before,.hero::after{display:none}
.panel{background:#fff!important;border:0!important;border-radius:36px;box-shadow:0 18px 50px rgba(27,35,51,.08)!important;-webkit-backdrop-filter:none;backdrop-filter:none}
.hero h1,.hero .sub,.hero p{color:var(--ink)}
.hero .sub{color:var(--mut)}
.hbadge{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px #e3e8ee;border-radius:999px}
.hbadge i{color:var(--coral)}
h1 em,h2 em{color:var(--coral);background:none}
.find{background:#fff;border-radius:999px;box-shadow:0 10px 30px rgba(27,35,51,.1)}
.find select,.find input{border-radius:999px}
/* ছবির মতো কোরাল ব্লবের ওপর ব্যক্তি */
.stage::before{display:block!important;content:"";position:absolute;inset:auto 0 0 0;margin-inline:auto;width:92%;height:82%;border-radius:48% 52% 46% 54%/55% 50% 50% 45%;background:#ffcfc4;z-index:0;box-shadow:none}
.ring{border-color:transparent;border-top-color:var(--teal);border-left-color:var(--teal);border-right-color:var(--teal);opacity:.9}
.ball{background:var(--teal)}
.fc{background:#fff;border-radius:18px;box-shadow:0 10px 28px rgba(27,35,51,.12)}
.fc i{color:var(--coral)}

/* কার্ড */
.card,.panel-card,.cat,.tile,.feature,.stat,.quiz,.res-card,.tcard,.step{border-radius:var(--r);box-shadow:var(--sh)}
.card{border:0;background:#fff}
.card img,.card .thumb,.thumb{border-radius:18px}
.eyebrow{background:var(--mint);color:var(--teal-d);border-radius:999px;border:0}
.stats li{background:var(--mint);border:0;color:var(--ink);border-radius:18px;backdrop-filter:none}
input,select,textarea{border-radius:14px}
.tag,.chip,.pill,.badge{border-radius:999px}

/* ফুটার */
footer,.footer{background:#12383d!important;border-top:0!important}
footer li a:hover,.foot-bot a:hover{color:#ffb4a6}

/* ===== গোলাকার আকার — পেজে *{border-radius:6px!important} আছে, তাই এখানেও !important ও বেশি স্পেসিফিসিটি ===== */
html *,html *::before,html *::after{border-radius:14px!important}
html body :is(.panel,.card,.promo,.step,.sec .grid>*,.quiz-card,.res-card,.article-card,.h-feats li,.polaroid,.stats li,.how-grid>*){border-radius:24px!important}
html body .panel{border-radius:36px!important}
html body :is(.btn,.pill,.find,.find button,.search-box,.search-box button,.hbadge,.eyebrow,.tag,.chip,.badge,.nav a,.slide-btn,.dots button,input[type=search]){border-radius:999px!important}
html body :is(.thumb,.cimg,.card img,.step .sc,.fc){border-radius:18px!important}
html body .stage::before{border-radius:48% 52% 46% 54% / 55% 50% 50% 45%!important}
html body :is(.person,.stage){border-radius:0!important}
html body .stage{background:none!important}

/* হিরোর ছবির পেছনের চৌকো ব্যাকগ্রাউন্ড বাদ, ব্লবই থাকবে */
html body .stage.v1,html body .stage.v2,html body .stage.v3,html body .stage[class]{background:none!important;background-image:none!important}
html body .stage::after{display:none!important}
html body .hero{background:linear-gradient(180deg,#fff 0%,#fff 55%,#fff 100%)!important}
/* প্রোমো কার্ড: ছবির টিল ও কোরাল ট্যান্ট */
html body .promo.p1{background:#e6f4f4!important;background-image:none!important}
html body .promo.p2{background:#fff0ec!important;background-image:none!important}
html body .promo{box-shadow:none!important}
html body .stage,html body .stage *:not(.fc):not(.ring):not(.ball){box-shadow:none!important}
html body .person{filter:none!important}

/* ===== হেডার: নিচে স্ক্রলে লুকানো, উপরে স্ক্রলে আবার খোলা (theme.js) ===== */
.header{transition:transform .32s ease,box-shadow .2s;will-change:transform}
.header.nav-hidden{transform:translateY(-115%);box-shadow:none}
.header.nav-hidden:focus-within{transform:none}
@media(prefers-reduced-motion:reduce){.header{transition:none}}

/* ===== WhatsApp ও টপে-ফেরার বাটন: ৫০px রেডিয়াস ===== */
html body :is(.wa,.to-top){border-radius:50px!important}
html body .wa{bottom:22px;right:16px}
html body .to-top{right:16px;bottom:88px}

/* ===== v-final: চওড়া container ===== */
html body .container,html body .narrow,html body .news-sec>.container{width:min(1320px,100% - 48px)!important;max-width:1320px!important}
html body .narrow{max-width:1320px!important}
html body .sec>.container.narrow .head{margin-bottom:40px}

/* ===== v-final: হিরোর নিচের অংশ (ফিচার সারি + স্লাইডার) নতুন ডিজাইন ===== */
html body .h-bottom{display:flex!important;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:20px;margin-top:30px;padding:0;border:0}
html body .h-feats{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none}
html body .h-feats li{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:22px!important;padding:14px 18px;box-shadow:0 10px 26px rgba(27,35,51,.07);transition:transform .25s,box-shadow .25s}
html body .h-feats li:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(27,35,51,.12)}
html body .h-feats li>i{width:46px;height:46px;flex:none;border-radius:14px!important;display:grid;place-items:center;font-size:1.05rem}
html body .h-feats b{font-size:.98rem;color:var(--ink)}
html body .h-feats span{display:block;margin-top:2px;font-size:.8rem;color:var(--mut)}
html body .s-ctl{display:flex!important;justify-content:center;align-items:center;gap:18px;margin:0;width:100%}
html body .s-dots{flex:0 1 auto;justify-content:center}
html body .s-btn{width:44px;height:44px;border-radius:50%!important}
@media (max-width:860px){html body .h-feats{display:none!important}}
@media (max-width:620px){html body .container,html body .narrow{width:min(1320px,100% - 28px)!important}}

/* ===== v-final: পেজ ট্রানজিশন (মেনু ক্লিকে পুরো পেজ অ্যানিমেশন সহ) ===== */
body{animation:pgIn .6s cubic-bezier(.2,.7,.2,1) both}
body.pg-out{animation:pgOut .32s ease-in forwards;pointer-events:none}
@keyframes pgIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes pgOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-16px)}}
@media (prefers-reduced-motion:reduce){body,body.pg-out{animation:none}}