/* =====================================================================
   CONCEPT PAGE (Case Type = Concept)
   শুধু concept কেস স্টাডি পেজে লোড হয়। সব ক্লাস .ck- দিয়ে শুরু, তাই বাকি সাইটে কোনো প্রভাব নেই।
   ===================================================================== */
/* ===== shared ===== */
.ck{--g:#00674f;--g2:#008566;--gd:#00503e;--gs:#e3f4ee;--ink:#0f172a;--mut:#4b5563;--line:#e3eeea;font-family:'Plus Jakarta Sans',sans-serif;color:#111827;background:#fff;overflow-x:hidden}
:where(.ck) *,:where(.ck) *::before,:where(.ck) *::after{box-sizing:border-box}
:where(.ck) :where(h1,h2,h3,p,ul,li,figure){margin:0;padding:0}
:where(.ck) img{max-width:100%;height:auto;display:block}
:where(.ck) a{text-decoration:none}
.ck-wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.ck-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--g);margin-bottom:12px}
.ck-eyebrow::before{content:"";width:22px;height:2px;background:currentColor;border-radius:2px}
.ck-title{font-size:clamp(1.8rem,3.1vw,2.5rem);font-weight:800;letter-spacing:-.025em;line-height:1.18;color:var(--ink);margin:0 0 16px}
.ck-lead{color:var(--mut);line-height:1.8;font-size:1.04rem}
.ck-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:15px 28px;border-radius:12px;font-weight:700;font-size:.95rem;transition:all .25s ease}
.ck-btn svg{width:18px;height:18px;transition:transform .25s}
.ck-btn:hover svg{transform:translateX(3px)}
.ck-btn--primary{background:var(--g);color:#fff;border:1.5px solid var(--g);box-shadow:0 4px 14px rgba(0,103,79,.22)}
.ck-btn--primary:hover{background:var(--g2);border-color:var(--g2);transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,103,79,.3)}
.ck-btn--outline{background:#fff;color:var(--g);border:1.5px solid #bfe3d6}
.ck-btn--outline:hover{border-color:var(--g);background:#f4fbf8;transform:translateY(-2px)}
.ck-sec{padding:96px 0}
.ck-tint{background:linear-gradient(180deg,#f5faf8 0%,#fbfdfc 100%)}
.ck-head{text-align:center;max-width:680px;margin:0 auto 48px}

/* ===== 1. HERO ===== */
.ck-hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#f1f8f5 0%,#f7fbf9 70%,#fff 100%);padding:64px 0 0}
.ck-hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(#cfe6dd 1.2px,transparent 1.2px);background-size:22px 22px;mask-image:radial-gradient(70% 60% at 80% 30%,#000,transparent);opacity:.7;pointer-events:none}
.ck-hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;align-items:center}
.ck-back{display:inline-flex;align-items:center;gap:6px;font-size:.88rem;font-weight:600;color:var(--g);margin-bottom:26px}
.ck-back:hover{text-decoration:underline}
.ck-pill{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:99px;padding:7px 14px 7px 8px;font-size:.82rem;font-weight:600;color:var(--ink);box-shadow:0 4px 14px rgba(15,23,42,.05);margin-bottom:22px}
.ck-pill b{background:var(--g);color:#fff;border-radius:99px;padding:3px 10px;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase}
.ck-hero h1{font-size:clamp(2.3rem,4.6vw,3.6rem);line-height:1.08;letter-spacing:-.035em;font-weight:800;color:var(--ink);margin-bottom:20px}
.ck-hero h1 span{color:var(--g);position:relative;white-space:nowrap}
.ck-hero h1 span svg{position:absolute;left:0;bottom:-10px;width:100%;height:14px;color:#9bd8c1}
.ck-hero .ck-lead{max-width:500px;margin-bottom:30px}
.ck-hero-btns{display:flex;flex-wrap:wrap;gap:12px}
.ck-honest{display:flex;gap:10px;align-items:flex-start;margin-top:26px;font-size:.86rem;color:var(--mut);max-width:480px;line-height:1.6}
.ck-honest svg{flex:none;width:18px;height:18px;color:var(--g);margin-top:2px}

.ck-stage{position:relative;padding:20px 0 40px}
.ck-blob{position:absolute;right:-4%;top:6%;width:88%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 40%,#d5efe5 0%,#e9f6f1 45%,transparent 70%)}
.ck-ring{position:absolute;right:6%;top:2%;width:72%;aspect-ratio:1;border-radius:50%;border:1.5px dashed #bfe3d6;animation:ckSpin 60s linear infinite}
@keyframes ckSpin{to{transform:rotate(360deg)}}
.ck-mock{position:relative;width:112%;max-width:none;margin-left:-2%;filter:drop-shadow(0 30px 40px rgba(15,23,42,.16));animation:ckFloat 7s ease-in-out infinite}
@keyframes ckFloat{50%{transform:translateY(-10px)}}
.ck-chip{position:absolute;display:flex;align-items:center;gap:10px;background:#fff;border-radius:14px;padding:10px 14px;box-shadow:0 14px 34px rgba(15,23,42,.12);font-size:.8rem;color:var(--mut);line-height:1.35}
.ck-chip strong{display:block;color:var(--ink);font-size:.92rem}
.ck-chip i{width:36px;height:36px;border-radius:10px;background:var(--gs);color:var(--g);display:grid;place-items:center}
.ck-chip i svg{width:18px;height:18px}
.ck-chip--a{left:-4%;bottom:22%;animation:ckFloat 6s 1s ease-in-out infinite}
.ck-chip--b{right:-2%;top:8%;animation:ckFloat 6s 2.5s ease-in-out infinite}

/* page strip */
.ck-strip{position:relative;margin-top:40px;padding:26px 0 30px;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ck-strip-track{display:flex;gap:22px;width:max-content;animation:ckMarq 40s linear infinite}
.ck-strip:hover .ck-strip-track{animation-play-state:paused}
@keyframes ckMarq{to{transform:translateX(-50%)}}
.ck-strip figure{width:260px;flex:none;background:#fff;border-radius:12px;padding:6px;box-shadow:0 8px 24px rgba(15,23,42,.08)}
.ck-strip figure div{height:170px;overflow:hidden;border-radius:8px}
.ck-strip figcaption{font-size:.8rem;font-weight:700;color:var(--ink);padding:8px 6px 2px}
.ck-scroll{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--g);padding:6px 0 30px}
.ck-mouse{width:24px;height:38px;border:2px solid var(--g);border-radius:14px;position:relative}
.ck-mouse::after{content:"";position:absolute;left:50%;top:7px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--g);animation:ckWheel 1.6s ease-in-out infinite}
@keyframes ckWheel{0%{opacity:1;transform:none}70%{opacity:0;transform:translateY(10px)}100%{opacity:0}}

/* ===== 2. ABOUT THE CONCEPT ===== */
.ck-about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start}
.ck-brief{display:grid;gap:14px;margin-top:6px}
.ck-brief div{display:flex;gap:16px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 22px;transition:.25s}
.ck-brief div:hover{border-color:#bfe3d6;box-shadow:0 12px 28px rgba(0,103,79,.08);transform:translateX(4px)}
.ck-brief em{flex:none;width:34px;height:34px;border-radius:10px;background:var(--gs);color:var(--g);font-style:normal;font-weight:800;font-size:.85rem;display:grid;place-items:center}
.ck-brief strong{display:block;color:var(--ink);margin-bottom:3px}
.ck-brief p{font-size:.93rem;color:var(--mut);line-height:1.6}

/* ===== 3. PAGE VIEWER ===== */
.ck-viewer{display:grid;grid-template-columns:340px minmax(0,1fr);gap:36px;align-items:start}
.ck-list{display:grid;gap:10px}
.ck-item{display:flex;gap:14px;align-items:flex-start;width:100%;text-align:left;font:inherit;background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:16px 18px;cursor:pointer;transition:.25s}
.ck-item:hover{border-color:#bfe3d6}
.ck-item em{flex:none;width:34px;height:34px;border-radius:10px;background:var(--gs);color:var(--g);font-style:normal;font-weight:800;font-size:.82rem;display:grid;place-items:center;transition:.25s}
.ck-item strong{display:block;color:var(--ink);font-size:1rem;margin-bottom:2px}
.ck-item span span{display:block;font-size:.88rem;color:var(--mut);line-height:1.55}
.ck-item[aria-selected=true]{border-color:var(--g);box-shadow:0 12px 28px rgba(0,103,79,.12)}
.ck-item[aria-selected=true] em{background:var(--g);color:#fff}
.ck-item .ck-more{display:none;margin-top:10px;list-style:none;gap:6px}
.ck-item[aria-selected=true] .ck-more{display:grid}
.ck-more li{display:flex;gap:8px;font-size:.85rem;color:#1f2937}
.ck-more li::before{content:"";flex:none;width:16px;height:16px;border-radius:50%;background:var(--g) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/9px no-repeat;margin-top:2px}
.ck-win{background:#fff;border-radius:16px;box-shadow:0 1px 2px rgba(15,23,42,.05),0 24px 60px rgba(15,23,42,.12);overflow:hidden;border:1px solid #e9efed}
.ck-win-bar{display:flex;align-items:center;gap:7px;padding:12px 16px;background:#f7faf9;border-bottom:1px solid #eef3f1}
.ck-win-bar span{width:10px;height:10px;border-radius:50%;background:#e1e7e5}
.ck-win-bar span:nth-child(1){background:#ff6058}.ck-win-bar span:nth-child(2){background:#ffbd2e}.ck-win-bar span:nth-child(3){background:#28c941}
.ck-url{flex:1;max-width:360px;margin:0 auto;background:#fff;border:1px solid #e9efed;border-radius:8px;font-size:.76rem;color:var(--mut);text-align:center;padding:5px 10px}
.ck-win-body{height:620px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#bfe3d6 transparent}
.ck-win-body img{width:100%}
.ck-hint{display:flex;align-items:center;justify-content:center;gap:8px;font-size:.84rem;color:var(--mut);margin-top:16px}
.ck-hint svg{width:16px;height:16px;color:var(--g)}

/* ===== 4. PHONES ===== */
.ck-mob{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center}
.ck-phones{position:relative;display:flex;justify-content:center;align-items:center;gap:18px;padding:20px 0 40px}
.ck-mobsec{position:relative;overflow:hidden;background:linear-gradient(135deg,#eef8f4 0%,#f8fcfa 45%,#eaf6f1 100%)}
.ck-mobsec::before{content:"";position:absolute;left:-160px;top:-160px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(0,133,102,.10),transparent 65%)}
.ck-mobsec::after{content:"";position:absolute;right:-120px;bottom:-200px;width:560px;height:560px;border-radius:50%;border:1.5px dashed #cfe8de}
.ck-mobsec .ck-wrap{position:relative;z-index:1}
.ck-phone{position:relative;width:180px;border-radius:30px;padding:8px;background:#111827;box-shadow:0 26px 50px rgba(15,23,42,.25)}
.ck-phone div{border-radius:23px;overflow:hidden;aspect-ratio:390/844;background:#fff}
.ck-phone:nth-child(2){width:206px;z-index:1}
.ck-phone:nth-child(1){transform:translateY(30px) rotate(-4deg)}
.ck-phone:nth-child(3){transform:translateY(30px) rotate(4deg)}
.ck-ticks{list-style:none;display:grid;gap:14px;margin-top:24px}
.ck-ticks li{display:flex;gap:14px;align-items:flex-start}
.ck-ticks i{flex:none;width:40px;height:40px;border-radius:12px;background:var(--gs);color:var(--g);display:grid;place-items:center}
.ck-ticks i svg{width:20px;height:20px}
.ck-ticks strong{display:block;color:var(--ink);font-size:.98rem}
.ck-ticks span{font-size:.9rem;color:var(--mut)}

/* ===== 5. WHAT YOU GET ===== */
.ck-get{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.ck-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px 24px;transition:.25s}
.ck-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,103,79,.1);border-color:#bfe3d6}
.ck-ico{width:52px;height:52px;border-radius:15px;background:linear-gradient(135deg,var(--g) 0%,#12a07c 100%);color:#fff;display:grid;place-items:center;box-shadow:0 8px 18px rgba(0,103,79,.25);margin-bottom:18px}
.ck-ico svg{width:24px;height:24px}
.ck-card h3{font-size:1.05rem;color:var(--ink);margin-bottom:8px}
.ck-card p{font-size:.92rem;color:var(--mut);line-height:1.65}

/* ===== 6. CTA ===== */
.ck-cta{position:relative;overflow:hidden;border-radius:26px;background:linear-gradient(135deg,var(--g) 0%,var(--gd) 100%);color:#fff;padding:64px 56px;display:grid;grid-template-columns:minmax(0,1.3fr) auto;gap:40px;align-items:center}
.ck-cta::before{content:"";position:absolute;right:-120px;top:-120px;width:380px;height:380px;border-radius:50%;border:50px solid rgba(255,255,255,.06)}
.ck-cta h2{font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.18;letter-spacing:-.025em;margin-bottom:12px}
.ck-cta p{color:rgba(255,255,255,.82);line-height:1.75;max-width:560px}
.ck-cta-btns{position:relative;display:flex;flex-direction:column;gap:12px}
.ck-btn--light{background:#fff;color:var(--g);border:1.5px solid #fff}
.ck-btn--light:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.25)}
.ck-btn--ghost{color:#fff;border:1.5px solid rgba(255,255,255,.35)}
.ck-btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}

/* reveal */
.ck.ck-js .ck-rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.ck.ck-js .ck-rv.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important}.ck.ck-js .ck-rv{opacity:1;transform:none}}

/* ===== responsive ===== */
@media (max-width:1024px){
 .ck-hero-grid,.ck-about,.ck-mob{grid-template-columns:1fr}
 .ck-mock{width:100%;margin:0}
 .ck-viewer{grid-template-columns:1fr}
 .ck-list{grid-auto-flow:column;grid-auto-columns:minmax(230px,1fr);overflow-x:auto;padding-bottom:6px}
 .ck-item .ck-more{display:none!important}
 .ck-get{grid-template-columns:1fr 1fr}
 .ck-cta{grid-template-columns:1fr}
 .ck-cta-btns{flex-direction:row;flex-wrap:wrap}
}
@media (max-width:640px){
 .ck-wrap{padding:0 16px}
 .ck-sec{padding:60px 0}
 .ck-hero{padding-top:36px}
 .ck-hero-btns .ck-btn,.ck-cta-btns .ck-btn{width:100%}
 .ck-chip{display:none}
 .ck-strip figure{width:190px}.ck-strip figure div{height:124px}
 .ck-list{grid-auto-columns:200px;margin:0 -16px;padding:0 16px 6px}
 .ck-item span span{display:none}
 .ck-win-body{height:460px}
 .ck-get{grid-template-columns:1fr}
 .ck-phone{width:30%!important;border-radius:20px;padding:5px}.ck-phone div{border-radius:16px}
 .ck-phones{gap:8px}
 .ck-cta{padding:44px 22px;border-radius:20px}
}