/* ==========================================================================
   CodeHypes — Phase 2: graphic placeholders + foundation page components
   ========================================================================== */

/* ---------- Reusable graphic placeholder ---------- */
.ch-graphic {
  position: relative;
  width: 100%;
  margin: 0;
  border-radius: var(--ch-radius);
  background:
    radial-gradient(60% 60% at 75% 20%, rgba(101,254,128,.14), transparent 60%),
    radial-gradient(60% 60% at 20% 80%, rgba(10,84,248,.12), transparent 60%),
    var(--ch-light);
  border: 1px solid var(--ch-border);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--ch-shadow-soft);
}
.ch-graphic__tag {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  font-size: .66rem; font-weight: 700; letter-spacing: .04em;
  padding: .25rem .6rem; border-radius: 999px;
  background: rgba(255,255,255,.8); color: var(--ch-muted);
  border: 1px solid var(--ch-border); backdrop-filter: blur(4px);
  display: inline-flex; align-items: center; gap: .35rem;
}
.ch-graphic__tag i { color: var(--ch-blue); font-size: .7rem; }
.ch-graphic__glow {
  position: absolute; width: 55%; height: 55%; border-radius: 50%;
  background: var(--ch-gradient); filter: blur(70px); opacity: .22; z-index: 0;
}
.ch-graphic__label {
  position: absolute; bottom: 14px; left: 0; right: 0; z-index: 3; text-align: center;
  font-size: .82rem; font-weight: 600; color: var(--ch-muted);
}
.ch-graphic__icon {
  position: relative; z-index: 2;
  width: 84px; height: 84px; border-radius: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ch-gradient); color: #fff; font-size: 2.4rem;
  box-shadow: 0 16px 40px rgba(10,84,248,.3);
}
.ch-graphic--ready { background: var(--ch-light); }

/* orb variant */
.ch-orb { position: relative; z-index: 2; width: 64%; aspect-ratio: 1; display: grid; place-items: center; }
.ch-orb__ring, .ch-orb__core { position: absolute; border-radius: 50%; }
.ch-orb__ring { border: 1.5px solid rgba(10,84,248,.25); }
.ch-orb__ring:nth-child(1) { inset: 0; }
.ch-orb__ring:nth-child(2) { inset: 14%; border-color: rgba(101,254,128,.35); }
.ch-orb__ring:nth-child(3) { inset: 28%; border-color: rgba(10,84,248,.22); }
.ch-orb__core { inset: 40%; background: var(--ch-gradient); box-shadow: 0 12px 40px rgba(10,84,248,.4); }

/* dashboard mock */
.ch-mock {
  position: relative; z-index: 2; width: 80%; background: #fff;
  border: 1px solid var(--ch-border); border-radius: 16px; padding: 14px;
  box-shadow: 0 18px 50px rgba(17,24,39,.10);
}
.ch-mock__bar { display: flex; gap: 6px; margin-bottom: 12px; }
.ch-mock__bar .d { width: 9px; height: 9px; border-radius: 50%; }
.ch-mock__bar .d.r { background: #ff6b6b; } .ch-mock__bar .d.y { background: #ffd93d; } .ch-mock__bar .d.g { background: var(--ch-green); }
.ch-mock__row { display: flex; gap: 8px; margin-bottom: 12px; }
.ch-mock__stat { flex: 1; background: var(--ch-light); border-radius: 10px; padding: 8px; text-align: center; }
.ch-mock__stat b { display: block; font-size: .9rem; color: var(--ch-dark); }
.ch-mock__stat i { font-style: normal; font-size: .62rem; color: var(--ch-muted); }
.ch-mock__chart { display: flex; align-items: flex-end; gap: 6px; height: 70px; }
.ch-mock__chart span { flex: 1; background: var(--ch-gradient); border-radius: 4px 4px 0 0; opacity: .85; }

/* diagram nodes */
.ch-diagram { position: relative; z-index: 2; display: flex; align-items: center; gap: 0; }
.ch-diagram .n { width: 26px; height: 26px; border-radius: 50%; background: var(--ch-gradient); box-shadow: 0 6px 16px rgba(10,84,248,.3); }
.ch-diagram .l { width: 34px; height: 3px; background: linear-gradient(90deg, rgba(10,84,248,.4), rgba(101,254,128,.4)); }

/* tech cloud */
.ch-cloud { position: relative; z-index: 2; width: 86%; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ch-cloud__chip {
  font-size: .8rem; font-weight: 700; color: var(--ch-dark);
  background: #fff; border: 1px solid var(--ch-border); border-radius: 999px; padding: .4rem .9rem;
  box-shadow: 0 6px 16px rgba(17,24,39,.06);
}
.ch-cloud__chip:nth-child(odd) { color: var(--ch-blue); }

/* mini grid */
.ch-minigrid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 70%; }
.ch-minigrid__cell { aspect-ratio: 1; border-radius: 14px; background: #fff; border: 1px solid var(--ch-border);
  display: grid; place-items: center; color: var(--ch-blue); font-size: 1.3rem; box-shadow: 0 6px 16px rgba(17,24,39,.05); }

/* ---------- Long-form content typography ---------- */
.prose h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 2.5rem 0 1rem; }
.prose h3 { font-size: 1.3rem; margin: 2rem 0 .75rem; }
.prose p { margin-bottom: 1.1rem; max-width: 72ch; }
.prose ul { color: var(--ch-body); }
.prose ul li { margin-bottom: .5rem; }
.lead-quote {
  border-left: 4px solid; border-image: var(--ch-gradient) 1;
  padding: 1.25rem 1.5rem; background: var(--ch-gradient-soft);
  border-radius: 0 16px 16px 0; font-size: 1.08rem; color: var(--ch-dark); font-weight: 500;
}

/* ---------- Gradient-top-border card ---------- */
.gradient-border { position: relative; }
.gradient-border::before {
  content: ''; position: absolute; top: 0; left: 24px; right: 24px; height: 3px;
  background: var(--ch-gradient); border-radius: 3px;
}

/* ---------- Comparison table ---------- */
.compare-table { border-radius: var(--ch-radius); overflow: hidden; border: 1px solid var(--ch-border); }
.compare-table th, .compare-table td { padding: 1rem 1.25rem; vertical-align: middle; }
.compare-table thead th { background: var(--ch-light); font-family: 'Plus Jakarta Sans'; }
.compare-table .col-ch { background: var(--ch-gradient-soft); font-weight: 600; color: var(--ch-dark); }
.compare-table .yes { color: #16a34a; } .compare-table .no { color: #cbd5e1; }
.compare-table tbody tr + tr td { border-top: 1px solid var(--ch-border); }

/* ---------- Pricing cards ---------- */
.price-card { padding: 2rem; height: 100%; position: relative; }
.price-card.featured { border-color: rgba(10,84,248,.4); box-shadow: var(--ch-shadow); }
.price-card .price-amt { font-family: 'Plus Jakarta Sans'; font-weight: 800; font-size: 2rem; color: var(--ch-dark); }
.price-card ul { list-style: none; padding: 0; margin: 1.25rem 0; }
.price-card ul li { padding: .4rem 0; display: flex; gap: .5rem; align-items: flex-start; font-size: .94rem; }
.price-card ul li i { color: var(--ch-green); margin-top: .2rem; }
.ribbon {
  position: absolute; top: 1.25rem; right: 1.25rem;
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  padding: .3rem .7rem; border-radius: 999px; background: var(--ch-gradient); color: #fff;
}

/* ---------- Vertical process timeline (mobile) + progress line ---------- */
.vtimeline { position: relative; }
.vtimeline__line {
  position: absolute; left: 35px; top: 0; bottom: 0; width: 3px; background: var(--ch-border); border-radius: 3px;
}
.vtimeline__line::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: var(--draw-v, 0%); background: var(--ch-gradient); border-radius: 3px; }
.vstep { position: relative; padding-left: 90px; padding-bottom: 2.5rem; }
.vstep:last-child { padding-bottom: 0; }
.vstep__num {
  position: absolute; left: 0; top: 0; width: 72px; height: 72px; border-radius: 50%;
  background: var(--ch-gradient); color: #fff; display: grid; place-items: center;
  font-family: 'Plus Jakarta Sans'; font-weight: 800; font-size: 1.3rem; z-index: 2;
  box-shadow: 0 12px 30px rgba(10,84,248,.28);
}
.vstep h3 { font-size: 1.2rem; margin-bottom: .4rem; }

/* ---------- Role / value icon cards ---------- */
.role-card { padding: 1.5rem; height: 100%; }
.role-card .icon-circle-soft { margin-bottom: 1rem; }
.value-card { padding: 1.75rem; height: 100%; }

@media (max-width: 575.98px) {
  .ch-mock, .ch-cloud { width: 92%; }
  .vstep { padding-left: 76px; }
  .vstep__num { width: 60px; height: 60px; font-size: 1.1rem; }
  .vtimeline__line { left: 29px; }
}

/* ==========================================================================
   Phase 3.1 — Service page (Custom Software Development)
   ========================================================================== */

/* hover gradient border for "what we build" cards */
.hover-gb { position: relative; }
.hover-gb::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: var(--ch-gradient);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .3s ease; pointer-events: none;
}
.hover-gb:hover::after { opacity: 1; }

.build-card { padding: 1.6rem; height: 100%; }
.build-card .icon-circle-soft { margin-bottom: .9rem; }
.build-card h3 { font-size: 1.05rem; margin-bottom: .4rem; }

/* client logo slider */
.logo-swiper { padding: .5rem 0; }
.logo-swiper .swiper-slide {
  display: flex; align-items: center; justify-content: center; height: 64px;
}
.logo-chip {
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.15rem;
  color: var(--ch-muted); filter: grayscale(1); opacity: .7;
  transition: color .3s ease, filter .3s ease, opacity .3s ease;
  white-space: nowrap; letter-spacing: -.02em;
}
.logo-swiper .swiper-slide:hover .logo-chip { color: var(--ch-blue); filter: none; opacity: 1; }

/* portfolio masonry */
.portfolio-masonry { column-gap: 1.5rem; }
.portfolio-masonry { column-count: 3; }
@media (max-width: 991.98px) { .portfolio-masonry { column-count: 2; } }
@media (max-width: 575.98px) { .portfolio-masonry { column-count: 1; } }
.portfolio-card {
  break-inside: avoid; margin-bottom: 1.5rem; border-radius: var(--ch-radius);
  border: 1px solid var(--ch-border); background: #fff; overflow: hidden;
  box-shadow: var(--ch-shadow-soft); transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.portfolio-card:hover { transform: translateY(-6px); border-color: rgba(10,84,248,.3); box-shadow: var(--ch-shadow); }
.portfolio-media { overflow: hidden; aspect-ratio: 4 / 3; }
.portfolio-media .ch-graphic { height: 100%; border: 0; border-radius: 0; transition: transform .5s ease; }
.portfolio-card:hover .portfolio-media .ch-graphic { transform: scale(1.06); }
.portfolio-body { padding: 1.5rem; }
.portfolio-body .pf-industry { font-size: .72rem; font-weight: 700; color: var(--ch-blue); text-transform: uppercase; letter-spacing: .08em; }
.portfolio-body h3 { font-size: 1.2rem; margin: .25rem 0 .6rem; }
.pf-tech { display: flex; flex-wrap: wrap; gap: .35rem; margin: .9rem 0; }
.pf-tech span { font-size: .7rem; font-weight: 600; padding: .2rem .6rem; border-radius: 999px; background: var(--ch-light); border: 1px solid var(--ch-border); color: var(--ch-body); }
.pf-result { font-size: .85rem; font-weight: 700; color: var(--ch-dark); display: flex; align-items: center; gap: .4rem; }
.pf-links { display: flex; gap: 1rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--ch-border); }
.pf-links a { font-weight: 700; font-size: .85rem; color: var(--ch-blue); display: inline-flex; align-items: center; gap: .3rem; }

/* success metric cards */
.metric-card { padding: 1.75rem; height: 100%; text-align: center; }
.metric-card .metric-num { font-family: 'Plus Jakarta Sans'; font-weight: 800; font-size: 2.4rem; line-height: 1; }

/* ==========================================================================
   Phase 3.2 — Web Development page (browser mockups, portfolio filter)
   ========================================================================== */

/* Three.js hero background layer */
.hero-bg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .55; pointer-events: none; }
.hero .container-xl { position: relative; z-index: 1; }

/* browser mockup */
.browser-mock {
  position: relative; border-radius: 16px; overflow: hidden; background: #fff;
  border: 1px solid var(--ch-border); box-shadow: 0 26px 70px rgba(17,24,39,.14);
  transition: transform .4s ease, box-shadow .4s ease;
}
.browser-mock:hover { transform: translateY(-6px); box-shadow: 0 34px 90px rgba(10,84,248,.18); }
.browser-bar {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: var(--ch-light); border-bottom: 1px solid var(--ch-border);
}
.browser-bar .dots { display: flex; gap: 6px; }
.browser-bar .dots span { width: 10px; height: 10px; border-radius: 50%; }
.browser-bar .dots span:nth-child(1){ background:#ff6b6b; } .browser-bar .dots span:nth-child(2){ background:#ffd93d; } .browser-bar .dots span:nth-child(3){ background:var(--ch-green); }
.browser-url {
  flex: 1; background: #fff; border: 1px solid var(--ch-border); border-radius: 999px;
  font-size: .76rem; color: var(--ch-muted); padding: .25rem .8rem; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.browser-screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.browser-screen .ch-graphic { height: 100%; border: 0; border-radius: 0; }
.browser-screen .scroll-shot { transition: transform 3s ease; }
.browser-mock:hover .browser-screen .scroll-shot { transform: translateY(-22%); }
.browser-preview {
  position: absolute; left: 50%; bottom: 18px; transform: translate(-50%, 14px);
  opacity: 0; transition: opacity .3s ease, transform .3s ease; z-index: 4;
}
.browser-mock:hover .browser-preview { opacity: 1; transform: translate(-50%, 0); }

/* device combo: desktop + phone overlay (portfolio) */
.device-combo { position: relative; }
.device-combo .phone {
  position: absolute; right: 10px; bottom: -10px; width: 26%; aspect-ratio: 9 / 19;
  border-radius: 16px; border: 3px solid #fff; overflow: hidden;
  box-shadow: 0 16px 36px rgba(17,24,39,.22); z-index: 3; background: var(--ch-light);
}
.device-combo .phone .ch-graphic { height: 100%; border: 0; border-radius: 0; }
.device-combo .phone .ch-graphic__tag, .device-combo .phone .ch-graphic__label { display: none; }

/* portfolio filter */
.pf-filter { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.pf-filter .nav-link {
  border-radius: 999px; font-weight: 600; font-size: .9rem; color: var(--ch-dark);
  border: 1px solid var(--ch-border); padding: .5rem 1.15rem; background: #fff; cursor: pointer;
  transition: all .25s ease;
}
.pf-filter .nav-link.active { background: var(--ch-gradient); color: #fff; border-color: transparent; }
.pf-item { transition: opacity .35s ease, transform .35s ease; }
.pf-item.is-hidden { display: none; }

/* perform-better comparison emphasis */
.compare-table .col-generic { color: var(--ch-muted); }

/* ==========================================================================
   Phase 3.3 — Mobile App Development (phone mockups, case-study highlight)
   ========================================================================== */
.phone-mock {
  position: relative; width: 100%; max-width: 260px; margin: 0 auto;
  border: 10px solid #0d1424; border-radius: 38px; background: #0d1424;
  box-shadow: 0 30px 70px rgba(17,24,39,.22); overflow: hidden;
}
.phone-mock::before { /* notch */
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 38%; height: 20px; background: #0d1424; border-radius: 0 0 14px 14px; z-index: 4;
}
.phone-screen { position: relative; aspect-ratio: 9 / 19; overflow: hidden; border-radius: 28px; }
.phone-screen .ch-graphic { height: 100%; border: 0; border-radius: 0; }
.phone-tilt { transition: transform .5s ease; }
.phone-card:hover .phone-tilt { transform: translateY(-8px) rotate(-1.5deg); }
.phone-duo { position: relative; min-height: 460px; display: flex; align-items: center; justify-content: center; }
.phone-duo .phone-mock { position: absolute; }
.phone-duo .phone-mock:nth-child(1) { transform: translateX(-32%) rotate(-6deg) scale(.92); z-index: 1; opacity: .92; }
.phone-duo .phone-mock:nth-child(2) { transform: translateX(22%) rotate(5deg); z-index: 2; }

/* case study highlight */
.case-highlight { border-radius: var(--ch-radius); overflow: hidden; border: 1px solid var(--ch-border); background: #fff; }
.case-highlight .ch-meta { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.case-highlight .ch-meta div { min-width: 120px; }
.case-highlight .ch-meta .lbl { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ch-muted); }
.case-highlight .ch-meta .val { font-weight: 700; color: var(--ch-dark); }
@media (max-width: 575.98px){ .phone-duo .phone-mock{ position:relative; transform:none !important; opacity:1 !important; } .phone-duo{ min-height:auto; gap:1rem; flex-wrap:wrap; } }

/* ==========================================================================
   Phase 3.4 — UI/UX page + Premium UI patterns (global)
   ========================================================================== */

/* Animated gradient cursor (desktop, pointer:fine only) */
.ch-cursor, .ch-cursor-dot { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; border-radius: 50%; }
.ch-cursor {
  width: 38px; height: 38px; margin: -19px 0 0 -19px;
  border: 1.5px solid rgba(10,84,248,.5);
  transition: width .25s ease, height .25s ease, margin .25s ease, background .25s ease, opacity .3s ease;
  mix-blend-mode: multiply;
}
.ch-cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--ch-gradient); }
.ch-cursor.is-hover { width: 60px; height: 60px; margin: -30px 0 0 -30px; background: rgba(10,84,248,.08); border-color: transparent; }
@media (hover: none), (pointer: coarse) { .ch-cursor, .ch-cursor-dot { display: none !important; } }

/* Glass cards */
.glass-card {
  background: rgba(255,255,255,.55); backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255,255,255,.6); border-radius: var(--ch-radius);
  box-shadow: 0 20px 60px rgba(17,24,39,.10); position: relative;
}
.glass-card.gb-border::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: var(--ch-gradient);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}

/* Floating badges */
.float-badge {
  position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: .4rem;
  background: #fff; border: 1px solid var(--ch-border); border-radius: 999px;
  padding: .5rem .9rem; font-size: .8rem; font-weight: 700; color: var(--ch-dark);
  box-shadow: 0 14px 34px rgba(17,24,39,.12);
  animation: floaty 4s ease-in-out infinite;
}
.float-badge i { color: var(--ch-blue); }
.float-badge.fb-1 { top: 8%; left: -4%; animation-delay: 0s; }
.float-badge.fb-2 { top: 42%; right: -6%; animation-delay: .8s; }
.float-badge.fb-3 { bottom: 6%; left: 6%; animation-delay: 1.5s; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .float-badge { animation: none; } }

/* Before vs After compare slider */
.ba-compare {
  position: relative; border-radius: var(--ch-radius); overflow: hidden;
  border: 1px solid var(--ch-border); box-shadow: var(--ch-shadow-soft);
  user-select: none; touch-action: pan-y;
}
.ba-compare .ba-pane .ch-graphic { border: 0; border-radius: 0; }
.ba-after { position: relative; }
.ba-before { position: absolute; inset: 0; z-index: 2; clip-path: inset(0 calc(100% - var(--ba-pos, 50%)) 0 0); }
.ba-before .ch-graphic { position: absolute; inset: 0; height: 100%; }
.ba-tag {
  position: absolute; top: 14px; z-index: 4; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; padding: .3rem .7rem; border-radius: 999px;
  background: rgba(13,20,36,.78); color: #fff; backdrop-filter: blur(4px);
}
.ba-tag.before { left: 14px; } .ba-tag.after { right: 14px; background: var(--ch-gradient); }
.ba-handle {
  position: absolute; top: 0; bottom: 0; left: var(--ba-pos, 50%); width: 3px; z-index: 5;
  background: #fff; transform: translateX(-50%); cursor: ew-resize; box-shadow: 0 0 0 1px rgba(10,84,248,.3);
}
.ba-handle::after {
  content: '\e9cb'; font-family: 'boxicons'; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%); width: 44px; height: 44px; border-radius: 50%;
  background: var(--ch-gradient); color: #fff; display: grid; place-items: center; font-size: 1.4rem;
  box-shadow: 0 10px 26px rgba(10,84,248,.4);
}

/* Laptop / device showcase */
.laptop-mock { max-width: 640px; margin: 0 auto; }
.laptop-screen {
  border: 12px solid #0d1424; border-radius: 16px 16px 0 0; overflow: hidden; background: #0d1424;
}
.laptop-screen .ch-graphic { border: 0; border-radius: 0; }
.laptop-base { height: 16px; background: linear-gradient(#c7ccd6,#9aa1ae); border-radius: 0 0 14px 14px; position: relative; }
.laptop-base::after { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 16%; height: 6px; background: #7c8392; border-radius: 0 0 8px 8px; }
.showcase-stage { display: flex; align-items: flex-end; justify-content: center; gap: -2rem; flex-wrap: wrap; }

/* design principles */
.principle-card { padding: 1.75rem; height: 100%; }
.principle-card .num { font-family: 'Plus Jakarta Sans'; font-weight: 800; font-size: 1.6rem; }

/* ==========================================================================
   Phase 3.5 — AI Development (interactive chat demo, roadmap)
   ========================================================================== */
.ai-chat {
  max-width: 540px; margin: 0 auto; background: #fff; border-radius: var(--ch-radius);
  border: 1px solid var(--ch-border); box-shadow: var(--ch-shadow); overflow: hidden;
}
.ai-chat__head { display: flex; align-items: center; gap: .6rem; padding: 1rem 1.25rem; background: var(--ch-gradient); color: #fff; }
.ai-chat__head .avatar { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.2); display: grid; place-items: center; font-size: 1.2rem; }
.ai-chat__head .stat { margin-left: auto; font-size: .72rem; display: inline-flex; align-items: center; gap: .35rem; opacity: .9; }
.ai-chat__head .stat::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(255,255,255,.6); animation: livepulse 1.8s infinite; }
@keyframes livepulse { 0%{box-shadow:0 0 0 0 rgba(255,255,255,.5);} 70%{box-shadow:0 0 0 7px rgba(255,255,255,0);} 100%{box-shadow:0 0 0 0 rgba(255,255,255,0);} }
.ai-chat__body { padding: 1.25rem; height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: .75rem; background: var(--ch-light); }
.ai-msg { max-width: 82%; padding: .7rem 1rem; border-radius: 16px; font-size: .92rem; line-height: 1.5; animation: msgIn .3s ease; }
@keyframes msgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ai-msg.bot { background: #fff; border: 1px solid var(--ch-border); color: var(--ch-body); align-self: flex-start; border-bottom-left-radius: 4px; }
.ai-msg.user { background: var(--ch-gradient); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.ai-typing { display: inline-flex; gap: 4px; align-self: flex-start; background: #fff; border: 1px solid var(--ch-border); padding: .8rem 1rem; border-radius: 16px; }
.ai-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--ch-muted); animation: typedot 1.2s infinite; }
.ai-typing span:nth-child(2){ animation-delay: .2s; } .ai-typing span:nth-child(3){ animation-delay: .4s; }
@keyframes typedot { 0%,60%,100%{ transform: translateY(0); opacity:.4; } 30%{ transform: translateY(-5px); opacity:1; } }
.ai-chat__prompts { display: flex; flex-wrap: wrap; gap: .5rem; padding: .75rem 1.25rem 0; }
.ai-prompt { font-size: .8rem; font-weight: 600; padding: .35rem .8rem; border-radius: 999px; border: 1px solid var(--ch-border); background: #fff; color: var(--ch-blue); cursor: pointer; transition: all .2s ease; }
.ai-prompt:hover { background: var(--ch-gradient-soft); }
.ai-chat__foot { display: flex; gap: .5rem; padding: 1rem 1.25rem; border-top: 1px solid var(--ch-border); }
.ai-chat__foot input { flex: 1; border: 1px solid var(--ch-border); border-radius: 999px; padding: .6rem 1rem; font-size: .9rem; }
.ai-chat__foot input:focus { outline: none; border-color: rgba(10,84,248,.45); }
.ai-chat__foot button { border: 0; width: 42px; height: 42px; border-radius: 50%; background: var(--ch-gradient); color: #fff; font-size: 1.2rem; flex-shrink: 0; }

/* ==========================================================================
   Phase 3.6 — Tech Stack Showcase + Success Metrics (global sections)
   ========================================================================== */
.tech-rail { display: flex; align-items: stretch; gap: .5rem; overflow-x: auto; padding: .5rem .25rem 1.25rem; scroll-snap-type: x proximity; }
.tech-rail::-webkit-scrollbar { height: 8px; }
.tech-rail::-webkit-scrollbar-thumb { background: var(--ch-border); border-radius: 999px; }
.tech-rail__group { flex: 0 0 auto; min-width: 200px; scroll-snap-align: start; }
.tech-rail__group h6 { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ch-muted); margin-bottom: .75rem; }
.tech-rail__chips { display: flex; flex-direction: column; gap: .5rem; }
.tech-chip-lg {
  display: flex; align-items: center; gap: .7rem; background: #fff; border: 1px solid var(--ch-border);
  border-radius: 14px; padding: .7rem .9rem; font-weight: 600; color: var(--ch-dark);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.tech-chip-lg:hover { transform: translateY(-4px); border-color: rgba(10,84,248,.35); box-shadow: var(--ch-shadow-soft); }
.tech-chip-lg .tc-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--ch-gradient-soft); color: var(--ch-blue); font-size: 1.2rem; flex-shrink: 0; }
.tech-rail__arrow { flex: 0 0 auto; align-self: center; color: var(--ch-border); font-size: 1.6rem; }

/* Success metrics band */
.success-band { background: var(--ch-darker); border-radius: var(--ch-radius); padding: 2.5rem 1rem; position: relative; overflow: hidden; }
.success-band::before { content: ''; position: absolute; width: 320px; height: 320px; border-radius: 50%; background: var(--ch-gradient); filter: blur(130px); opacity: .25; top: -120px; left: -60px; }
.success-metric { text-align: center; position: relative; z-index: 1; }
.success-metric .sm-num { font-family: 'Plus Jakarta Sans'; font-weight: 800; font-size: clamp(1.8rem,4vw,2.8rem); line-height: 1; color: #fff; }
.success-metric .sm-num .gradient-text, .success-metric .sm-num.gradient-text { background: var(--ch-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.success-metric .sm-label { color: rgba(255,255,255,.7); font-size: .85rem; margin-top: .4rem; }

/* SaaS interactive demo (dashboard module shell) */
.saas-demo { border-radius: var(--ch-radius); border: 1px solid var(--ch-border); overflow: hidden; box-shadow: var(--ch-shadow); background: #fff; }
.saas-demo__tabs { display: flex; flex-wrap: wrap; gap: .4rem; padding: 1rem; border-bottom: 1px solid var(--ch-border); background: var(--ch-light); }
.saas-demo__tabs .nav-link { font-size: .82rem; }
.saas-demo__panel { padding: 1.5rem; }

/* ==========================================================================
   Phase 3.7 — ROI Calculator / Business Impact (global)
   ========================================================================== */
.roi-calc { border-radius: var(--ch-radius); border: 1px solid var(--ch-border); overflow: hidden; box-shadow: var(--ch-shadow); background: #fff; }
.roi-calc__grid { display: grid; grid-template-columns: 1fr 1fr; }
.roi-inputs { padding: 2rem; }
.roi-field { margin-bottom: 1.25rem; }
.roi-field label { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; color: var(--ch-dark); font-size: .9rem; margin-bottom: .4rem; }
.roi-field label .val { font-family: 'Plus Jakarta Sans'; font-weight: 800; color: var(--ch-blue); }
.roi-field input[type=range] { width: 100%; accent-color: var(--ch-blue); }
.roi-field .num { width: 100%; border: 1px solid var(--ch-border); border-radius: 10px; padding: .55rem .8rem; font-weight: 600; }
.roi-field .num:focus { outline: none; border-color: rgba(10,84,248,.45); }
.roi-results { padding: 2rem; background: var(--ch-darker); color: #fff; display: flex; flex-direction: column; gap: 1.25rem; justify-content: center; position: relative; overflow: hidden; }
.roi-results::before { content: ''; position: absolute; width: 280px; height: 280px; border-radius: 50%; background: var(--ch-gradient); filter: blur(120px); opacity: .28; top: -100px; right: -60px; }
.roi-out { position: relative; z-index: 1; }
.roi-out .roi-out__label { font-size: .8rem; color: rgba(255,255,255,.65); text-transform: uppercase; letter-spacing: .08em; }
.roi-out .roi-out__num { font-family: 'Plus Jakarta Sans'; font-weight: 800; font-size: clamp(1.6rem,3.5vw,2.4rem); line-height: 1.1; }
.roi-out .roi-out__num.gradient-text { background: var(--ch-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.roi-disclaimer { font-size: .75rem; color: rgba(255,255,255,.5); position: relative; z-index: 1; }
@media (max-width: 767.98px){ .roi-calc__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Phase 3.8 — Enterprise dashboard mockup (ERP / CRM / SaaS)
   ========================================================================== */
.ent-dash {
  position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden;
  background: radial-gradient(120% 120% at 80% 0%, #142036 0%, #0b1220 60%);
  color: #fff; padding: clamp(.8rem, 2vw, 1.4rem); display: flex; flex-direction: column; gap: .8rem;
}
.ent-dash__bar { display: flex; align-items: center; gap: .6rem; }
.ent-dash__brand { width: 22px; height: 22px; border-radius: 7px; background: var(--ch-gradient); display: grid; place-items: center; font-size: .9rem; flex-shrink: 0; }
.ent-dash__title { font-family: 'Plus Jakarta Sans'; font-weight: 700; font-size: .92rem; }
.ent-dash__live { margin-left: auto; font-size: .66rem; display: inline-flex; align-items: center; gap: .35rem; color: rgba(255,255,255,.7); }
.ent-dash__live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ch-green); animation: livepulse 1.8s infinite; }
.ent-dash__nav { display: flex; gap: .35rem; flex-wrap: wrap; }
.ent-dash__nav span { font-size: .64rem; font-weight: 600; padding: .2rem .6rem; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.75); }
.ent-dash__nav span.on { background: var(--ch-gradient); border-color: transparent; color: #fff; }
.ent-dash__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: .8rem; flex: 1; min-height: 0; }
.ent-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.ent-kpi { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: .6rem .7rem; backdrop-filter: blur(6px); }
.ent-kpi .k-label { font-size: .58rem; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.55); }
.ent-kpi .k-num { font-family: 'Plus Jakarta Sans'; font-weight: 800; font-size: clamp(.95rem, 2vw, 1.3rem); }
.ent-kpi .k-trend { font-size: .58rem; color: var(--ch-green); }
.ent-left { display: flex; flex-direction: column; gap: .6rem; min-height: 0; }
.ent-chart { flex: 1; display: flex; align-items: flex-end; gap: .35rem; background: rgba(255,255,255,.04); border-radius: 12px; padding: .6rem; min-height: 60px; }
.ent-chart span { flex: 1; background: var(--ch-gradient); border-radius: 3px 3px 0 0; height: var(--h, 40%); transform-origin: bottom; animation: barGrow .9s ease both; }
@keyframes barGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.ent-feed { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: .6rem .7rem; display: flex; flex-direction: column; gap: .5rem; overflow: hidden; }
.ent-feed h6 { font-size: .6rem; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.5); margin: 0; }
.ent-feed .f-row { display: flex; align-items: center; gap: .45rem; font-size: .66rem; color: rgba(255,255,255,.8); }
.ent-feed .f-row i { color: var(--ch-green); font-size: .8rem; }
.ent-feed .f-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ch-blue); flex-shrink: 0; }
.ent-noti {
  position: absolute; top: 14px; right: 14px; z-index: 4;
  background: rgba(255,255,255,.95); color: var(--ch-dark); border-radius: 12px; padding: .5rem .7rem;
  display: flex; align-items: center; gap: .5rem; box-shadow: 0 14px 34px rgba(0,0,0,.3);
  font-size: .66rem; font-weight: 600; max-width: 200px;
  animation: notiPop 5s ease-in-out infinite;
}
.ent-noti i { color: var(--ch-blue); font-size: 1rem; }
@keyframes notiPop { 0%,12%,100% { opacity: 0; transform: translateY(-8px); } 4%,10% { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce){ .ent-noti, .ent-chart span { animation: none; } .ent-noti { opacity: 1; } }
@media (max-width: 575.98px){ .ent-dash__grid { grid-template-columns: 1fr; } .ent-feed { display: none; } }

/* ==========================================================================
   Phase 3.9 — Infrastructure Health Dashboard (technical pages)
   ========================================================================== */
.health-card { padding: 1.4rem; height: 100%; position: relative; }
.health-card .h-top { display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem; }
.health-card .h-ico { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--ch-gradient-soft); color: var(--ch-blue); font-size: 1.2rem; }
.health-card .h-live { margin-left: auto; font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #16a34a; display: inline-flex; align-items: center; gap: .3rem; }
.health-card .h-live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #16a34a; animation: livepulse 1.8s infinite; }
.health-card .h-val { font-family: 'Plus Jakarta Sans'; font-weight: 800; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1; }
.health-card .h-label { font-size: .82rem; color: var(--ch-muted); margin-top: .3rem; }
.health-card .h-spark { display: flex; align-items: flex-end; gap: 3px; height: 28px; margin-top: .9rem; }
.health-card .h-spark span { flex: 1; background: var(--ch-gradient); border-radius: 2px; height: var(--h, 40%); opacity: .8; transform-origin: bottom; animation: barGrow .8s ease both; }
.health-card.is-status .h-val { font-size: 1.2rem; color: #16a34a; display: inline-flex; align-items: center; gap: .4rem; }
.health-card.is-status .h-val i { font-size: 1.3rem; }

/* ==========================================================================
   Phase 4.0 — Global trust & conversion system
   ========================================================================== */

/* ----- Loading screen ----- */
#ch-loader {
  position: fixed; inset: 0; z-index: 99999; display: grid; place-items: center;
  background: radial-gradient(120% 120% at 50% 0%, #142036 0%, #050B18 70%);
  transition: opacity .6s ease, visibility .6s ease;
}
#ch-loader.is-done { opacity: 0; visibility: hidden; }
.ch-loader__img { width: auto; height: 100px; display: block; margin: 0 auto; filter: drop-shadow(0 14px 44px rgba(10,84,248,.55)); animation: loaderIn .6s cubic-bezier(.2,.8,.2,1) both, loaderPulse 2s ease-in-out .6s infinite; }
@media (max-width: 575.98px) { .ch-loader__img { height: 78px; } }
.ch-loader__bar { width: 180px; height: 4px; border-radius: 999px; background: rgba(255,255,255,.12); margin-top: 1.5rem; overflow: hidden; }
.ch-loader__bar i { display: block; height: 100%; width: 0; background: var(--ch-gradient); border-radius: 999px; transition: width .3s ease; }
.ch-loader__txt { color: rgba(255,255,255,.6); font-size: .8rem; margin-top: .8rem; letter-spacing: .1em; text-transform: uppercase; }
@keyframes loaderIn { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
@keyframes loaderPulse { 0%,100%{ transform: scale(1); } 50%{ transform: scale(.94); } }
@media (prefers-reduced-motion: reduce){ .ch-loader__img { animation: none; opacity: 1; } }

/* ----- Reading progress bar ----- */
#ch-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 2000; background: var(--ch-gradient); transition: width .1s linear; }

/* ----- Reading time chip ----- */
.reading-time { color: var(--ch-muted); }
.reading-time::before { content: '·'; margin: 0 .5rem; color: var(--ch-border); }

/* ----- Nav animated underline ----- */
.navbar-ch .nav-link { position: relative; }
.navbar-ch .nav-link::after { content: ''; position: absolute; left: 1rem; right: 1rem; bottom: .2rem; height: 2px; background: var(--ch-gradient); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; border-radius: 2px; }
.navbar-ch .nav-link:hover::after, .navbar-ch .nav-link.active::after { transform: scaleX(1); }
.navbar-ch .dropdown-toggle::after, .navbar-ch .has-mega .nav-link::after { display: none; }

/* ----- Floating action cluster ----- */
.ch-fab { position: fixed; right: 18px; bottom: 18px; z-index: 1500; display: flex; flex-direction: column; gap: .6rem; align-items: flex-end; }
.ch-fab a, .ch-fab button { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem; border: 0; box-shadow: 0 12px 30px rgba(17,24,39,.2); cursor: pointer; transition: transform .25s ease; color: #fff; position: relative; }
.ch-fab a:hover, .ch-fab button:hover { transform: translateY(-3px) scale(1.05); }
.ch-fab .fab-wa { background: #25D366; }
.ch-fab .fab-cal { background: var(--ch-gradient); }
.ch-fab .fab-top { background: #fff; color: var(--ch-blue); border: 1px solid var(--ch-border); opacity: 0; pointer-events: none; }
.ch-fab .fab-top.show { opacity: 1; pointer-events: auto; }
.ch-fab .fab-label { position: absolute; right: 60px; white-space: nowrap; background: var(--ch-dark); color: #fff; font-size: .72rem; font-weight: 600; padding: .35rem .65rem; border-radius: 8px; opacity: 0; transform: translateX(6px); transition: all .2s ease; pointer-events: none; }
.ch-fab a:hover .fab-label { opacity: 1; transform: translateX(0); }

/* ----- Sticky CTA bar ----- */
#ch-sticky-cta {
  position: fixed; left: 50%; bottom: 18px; transform: translate(-50%, 120%);
  z-index: 1400; background: rgba(255,255,255,.92); backdrop-filter: blur(12px);
  border: 1px solid var(--ch-border); border-radius: 999px; box-shadow: var(--ch-shadow);
  padding: .55rem .65rem .55rem 1.25rem; display: flex; align-items: center; gap: 1rem;
  transition: transform .4s cubic-bezier(.2,.7,.3,1); max-width: calc(100vw - 36px);
}
#ch-sticky-cta.show { transform: translate(-50%, 0); }
#ch-sticky-cta .sc-txt { font-weight: 600; font-size: .9rem; color: var(--ch-dark); }
#ch-sticky-cta .sc-close { background: none; border: 0; color: var(--ch-muted); font-size: 1.2rem; line-height: 1; padding: 0 .25rem; cursor: pointer; }
@media (max-width: 575.98px){ #ch-sticky-cta .sc-txt { display: none; } .ch-fab { right: 12px; bottom: 12px; } }

/* ----- Interactive portfolio laptop ----- */
.lap-card { position: relative; }
.lap-frame { perspective: 1200px; }
.lap-screen { position: relative; border: 8px solid #0d1424; border-bottom: 0; border-radius: 12px 12px 0 0; background: #0d1424; overflow: hidden; transform: rotateX(8deg); transform-origin: bottom; transition: transform .5s ease; }
.lap-card:hover .lap-screen { transform: rotateX(0deg); }
.lap-screen .scroll-shot { transition: transform 2.6s ease; }
.lap-card:hover .lap-screen .scroll-shot { transform: translateY(-30%); }
.lap-screen .ch-graphic { border: 0; border-radius: 0; }
.lap-base { height: 14px; background: linear-gradient(#c7ccd6,#9aa1ae); border-radius: 0 0 12px 12px; position: relative; }
.lap-base::after { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 18%; height: 5px; background: #7c8392; border-radius: 0 0 7px 7px; }
.lap-visit { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(.85); opacity: 0; z-index: 5; transition: all .35s ease; }
.lap-card:hover .lap-visit { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.lap-screen::after { content: ''; position: absolute; inset: 0; background: rgba(5,11,24,.35); opacity: 0; transition: opacity .35s ease; }
.lap-card:hover .lap-screen::after { opacity: 1; }

/* ----- Footer map + blog column ----- */
.footer-blog__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem 2rem; }
@media (max-width: 767.98px) { .footer-blog__grid { grid-template-columns: 1fr; } }
.footer-blog a { display: flex; gap: .6rem; align-items: flex-start; padding: .4rem 0; }
.footer-blog a span.fb-ic { width: 34px; height: 34px; border-radius: 9px; background: rgba(255,255,255,.06); display: grid; place-items: center; color: var(--ch-green); flex-shrink: 0; }

/* ----- Experience page modules ----- */
.xp-hero { padding: 8rem 0 3rem; text-align: center; }
.xp-module { border-radius: var(--ch-radius); border: 1px solid var(--ch-border); overflow: hidden; background: #fff; box-shadow: var(--ch-shadow-soft); height: 100%; }
.xp-module__head { padding: 1rem 1.25rem; border-bottom: 1px solid var(--ch-border); display: flex; align-items: center; gap: .6rem; font-weight: 700; }
.xp-module__head .num { width: 26px; height: 26px; border-radius: 8px; background: var(--ch-gradient); color: #fff; display: grid; place-items: center; font-size: .8rem; }
.xp-module__body { padding: 1.25rem; }
.speed-bar { height: 26px; border-radius: 999px; background: var(--ch-light); overflow: hidden; position: relative; margin-bottom: .8rem; }
.speed-bar i { display: block; height: 100%; border-radius: 999px; width: 0; transition: width 1.4s ease; }
.speed-bar .lbl { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: .76rem; font-weight: 700; color: #fff; z-index: 2; }
.speed-bar.slow i { background: #ef4444; } .speed-bar.fast i { background: var(--ch-gradient); }
.code-anim { background: #0d1424; border-radius: 12px; padding: 1rem; font-family: ui-monospace, Menlo, monospace; font-size: .8rem; color: #c8d3e6; min-height: 160px; }
.code-anim .ln { display: block; white-space: pre; opacity: 0; animation: codeIn .4s ease forwards; }
.code-anim .k { color: #65FE80; } .code-anim .s { color: #8ab4ff; }
@keyframes codeIn { to { opacity: 1; } }

/* ==========================================================================
   Phase 5.0 — Portfolio & Case Studies ecosystem
   ========================================================================== */

/* Interactive tech stack explorer */
.tech-explorer { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1.5rem; align-items: start; }
.tech-explorer__list { display: flex; flex-direction: column; gap: .5rem; }
.tech-node {
  display: flex; align-items: center; gap: .8rem; padding: .9rem 1.1rem; border-radius: 14px;
  border: 1px solid var(--ch-border); background: #fff; cursor: pointer; transition: all .25s ease; text-align: left; width: 100%;
}
.tech-node:hover, .tech-node.active { border-color: rgba(10,84,248,.4); box-shadow: var(--ch-shadow-soft); transform: translateX(4px); }
.tech-node.active { background: var(--ch-gradient-soft); }
.tech-node .tn-ic { width: 40px; height: 40px; border-radius: 11px; background: var(--ch-gradient); color: #fff; display: grid; place-items: center; font-size: 1.3rem; flex-shrink: 0; }
.tech-node .tn-name { font-weight: 700; color: var(--ch-dark); }
.tech-node .tn-layer { font-size: .72rem; color: var(--ch-muted); }
.tech-node .tn-arrow { margin-left: auto; color: var(--ch-border); }
.tech-explorer__panel { position: sticky; top: 110px; padding: 2rem; border-radius: var(--ch-radius); background: radial-gradient(120% 120% at 80% 0%,#142036,#0b1220); color: #fff; min-height: 220px; }
.tech-explorer__panel .tp-layer { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ch-green); }
.tech-explorer__panel .tp-name { font-family: 'Plus Jakarta Sans'; font-weight: 800; font-size: 1.6rem; margin: .3rem 0 .8rem; }
.tech-explorer__panel .tp-desc { color: rgba(255,255,255,.75); }
@media (max-width: 767.98px){ .tech-explorer { grid-template-columns: 1fr; } .tech-explorer__panel { position: static; } }

/* Results dashboard */
.result-kpi { padding: 1.5rem; height: 100%; text-align: center; }
.result-kpi .rk-num { font-family: 'Plus Jakarta Sans'; font-weight: 800; font-size: clamp(1.8rem,4vw,2.6rem); line-height: 1; }
.result-kpi .rk-sub { font-size: .82rem; color: var(--ch-muted); margin-top: .3rem; }
.result-chart { display: flex; align-items: flex-end; gap: 10px; height: 180px; padding: 1rem; }
.result-chart .rc-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: .5rem; height: 100%; }
.result-chart .rc-bar { width: 60%; border-radius: 8px 8px 0 0; background: var(--ch-border); height: var(--h,30%); transform-origin: bottom; animation: barGrow 1s ease both; }
.result-chart .rc-col.after .rc-bar { background: var(--ch-gradient); }
.result-chart .rc-lbl { font-size: .72rem; font-weight: 700; color: var(--ch-muted); }

/* Case study layout: TOC + sticky sidebar + share */
.cs-toc { position: sticky; top: 110px; }
.cs-toc h6 { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ch-muted); margin-bottom: 1rem; }
.cs-toc a { display: block; padding: .4rem 0 .4rem .8rem; color: var(--ch-muted); font-size: .9rem; border-left: 2px solid var(--ch-border); transition: all .2s ease; }
.cs-toc a:hover, .cs-toc a.active { color: var(--ch-blue); border-color: var(--ch-blue); }
.cs-share { display: flex; gap: .5rem; margin-top: 1.5rem; }
.cs-share a { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--ch-light); border: 1px solid var(--ch-border); color: var(--ch-dark); transition: all .2s ease; }
.cs-share a:hover { background: var(--ch-gradient); color: #fff; border-color: transparent; }
.cs-section { scroll-margin-top: 100px; }
.cs-section h2 { font-size: clamp(1.5rem,3vw,2rem); margin-bottom: 1rem; }
.cs-stat-dark { background: var(--ch-darker); color: #fff; border-radius: var(--ch-radius-sm); padding: 1.5rem; height: 100%; }
.cs-stat-dark .csd-num { font-family: 'Plus Jakarta Sans'; font-weight: 800; font-size: 2rem; }
.cs-stat-dark .csd-lbl { color: rgba(255,255,255,.6); font-size: .82rem; }

/* Project detail hero meta */
.proj-meta { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.proj-meta div .pm-l { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ch-muted); }
.proj-meta div .pm-v { font-weight: 700; color: var(--ch-dark); }

/* ==========================================================================
   Phase 6.1 — SEO page (Google search simulation, audit demo, keyword table)
   ========================================================================== */

/* Live Google Search simulation */
.serp { max-width: 640px; margin: 0 auto; }
.serp__bar { display: flex; align-items: center; gap: .6rem; background: #fff; border: 1px solid var(--ch-border); border-radius: 999px; padding: .7rem 1.2rem; box-shadow: 0 8px 26px rgba(17,24,39,.08); }
.serp__bar i.lead-ic { color: var(--ch-blue); font-size: 1.2rem; }
.serp__bar input { flex: 1; border: 0; outline: 0; font-size: 1rem; background: transparent; }
.serp__bar button { border: 0; background: var(--ch-gradient); color: #fff; border-radius: 999px; padding: .45rem 1.1rem; font-weight: 700; }
.serp__suggest { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: 1rem; }
.serp__suggest button { font-size: .82rem; border: 1px solid var(--ch-border); background: #fff; border-radius: 999px; padding: .35rem .8rem; color: var(--ch-blue); cursor: pointer; }
.serp__results { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.serp__result { opacity: 0; transform: translateY(10px); transition: opacity .4s ease, transform .4s ease; padding: .9rem 1.1rem; border-radius: 14px; border: 1px solid transparent; }
.serp__result.show { opacity: 1; transform: none; }
.serp__result.top { background: var(--ch-gradient-soft); border-color: rgba(10,84,248,.3); }
.serp__result .r-badge { font-size: .68rem; font-weight: 800; color: #fff; background: var(--ch-gradient); padding: .15rem .5rem; border-radius: 999px; }
.serp__result .r-url { font-size: .78rem; color: #15803d; }
.serp__result .r-title { color: #1a0dab; font-weight: 700; font-size: 1.05rem; }
.serp__result.top .r-title { color: var(--ch-blue); }
.serp__result .r-desc { font-size: .85rem; color: var(--ch-muted); }
.serp__counter { text-align: center; margin-top: 1.5rem; font-weight: 700; color: var(--ch-dark); opacity: 0; transition: opacity .4s ease; }
.serp__counter.show { opacity: 1; }
.serp__counter .num { font-family: 'Plus Jakarta Sans'; font-size: 1.8rem; }

/* SEO audit demo */
.audit { max-width: 720px; margin: 0 auto; border-radius: var(--ch-radius); border: 1px solid var(--ch-border); overflow: hidden; box-shadow: var(--ch-shadow); background: #fff; }
.audit__head { padding: 1.5rem; border-bottom: 1px solid var(--ch-border); }
.audit__form { display: flex; gap: .5rem; }
.audit__form input { flex: 1; border: 1px solid var(--ch-border); border-radius: 999px; padding: .7rem 1.1rem; }
.audit__form button { border: 0; background: var(--ch-gradient); color: #fff; border-radius: 999px; padding: .7rem 1.5rem; font-weight: 700; white-space: nowrap; }
.audit__body { padding: 1.5rem; }
.audit__score { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 1.25rem; }
.audit__ring { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  background: conic-gradient(var(--ch-blue) calc(var(--score,0)*1%), var(--ch-border) 0); position: relative; }
.audit__ring::after { content: ''; position: absolute; inset: 8px; background: #fff; border-radius: 50%; }
.audit__ring span { position: relative; z-index: 1; font-family: 'Plus Jakarta Sans'; font-weight: 800; font-size: 1.5rem; }
.audit__checks { display: flex; flex-direction: column; gap: .6rem; }
.audit__check { display: flex; align-items: center; gap: .6rem; font-size: .9rem; opacity: 0; transform: translateX(-8px); transition: all .4s ease; }
.audit__check.show { opacity: 1; transform: none; }
.audit__check i { font-size: 1.2rem; }
.audit__check .pass { color: #16a34a; } .audit__check .warn { color: #f59e0b; } .audit__check .fail { color: #ef4444; }

/* Keyword research table */
.kw-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.kw-table th, .kw-table td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--ch-border); }
.kw-table thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ch-muted); background: var(--ch-light); }
.kw-table tbody tr { transition: background .2s ease; }
.kw-table tbody tr:hover { background: var(--ch-gradient-soft); }
.kw-badge { font-size: .72rem; font-weight: 700; padding: .2rem .6rem; border-radius: 999px; }
.kw-badge.low { background: #dcfce7; color: #166534; } .kw-badge.med { background: #fef9c3; color: #854d0e; } .kw-badge.high { background: #fee2e2; color: #991b1b; }
.kw-badge.intent { background: var(--ch-gradient-soft); color: var(--ch-blue); }
.kw-opp { display: inline-block; height: 8px; border-radius: 999px; background: var(--ch-gradient); }

/* ==========================================================================
   Phase 6.2 — Local SEO (GBP health checker, heatmap, lead magnet)
   ========================================================================== */

/* Google Business Profile health checker */
.gbp { max-width: 760px; margin: 0 auto; border-radius: var(--ch-radius); border: 1px solid var(--ch-border); overflow: hidden; box-shadow: var(--ch-shadow); background: #fff; }
.gbp__head { padding: 1.5rem; border-bottom: 1px solid var(--ch-border); display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: .5rem; }
.gbp__head input { border: 1px solid var(--ch-border); border-radius: 999px; padding: .65rem 1rem; font-size: .9rem; }
.gbp__head button { border: 0; background: var(--ch-gradient); color: #fff; border-radius: 999px; padding: .65rem 1.3rem; font-weight: 700; white-space: nowrap; }
.gbp__body { padding: 1.5rem; }
.gbp__rings { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; }
.gbp__ring { text-align: center; }
.gbp__ring .ring { width: 84px; height: 84px; border-radius: 50%; margin: 0 auto .5rem; display: grid; place-items: center; position: relative;
  background: conic-gradient(var(--ch-blue) calc(var(--v,0)*1%), var(--ch-border) 0); }
.gbp__ring .ring::after { content: ''; position: absolute; inset: 7px; background: #fff; border-radius: 50%; }
.gbp__ring .ring span { position: relative; z-index: 1; font-family: 'Plus Jakarta Sans'; font-weight: 800; }
.gbp__ring .lbl { font-size: .78rem; color: var(--ch-muted); }
.gbp__suggest { margin-top: 1.5rem; display: flex; flex-direction: column; gap: .5rem; }
.gbp__suggest .s { display: flex; gap: .6rem; align-items: center; font-size: .9rem; opacity: 0; transform: translateX(-8px); transition: all .4s ease; }
.gbp__suggest .s.show { opacity: 1; transform: none; }
.gbp__suggest .s i { color: var(--ch-blue); font-size: 1.2rem; }
@media (max-width: 575.98px){ .gbp__head { grid-template-columns: 1fr; } .gbp__rings { grid-template-columns: repeat(2,1fr); } }

/* Local ranking heatmap */
.geo-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; max-width: 560px; margin: 0 auto; aspect-ratio: 4/3; }
.geo-cell { border-radius: 6px; position: relative; }
.geo-cell.h1 { background: rgba(101,254,128,.85); } .geo-cell.h2 { background: rgba(101,254,128,.5); }
.geo-cell.h3 { background: rgba(255,211,61,.55); } .geo-cell.h4 { background: rgba(255,107,107,.45); }
.geo-cell.h0 { background: var(--ch-light); }
.geo-cell .pin { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 20px; height: 20px; border-radius: 50%; background: #fff; color: var(--ch-blue); display: grid; place-items: center; font-size: .68rem; font-weight: 800; box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.geo-legend { display: flex; gap: 1rem; justify-content: center; margin-top: 1.5rem; flex-wrap: wrap; font-size: .8rem; color: var(--ch-muted); }
.geo-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.geo-legend i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }

/* Lead magnet */
.lead-magnet { border-radius: var(--ch-radius); overflow: hidden; border: 1px solid var(--ch-border); background: var(--ch-darker); color: #fff; }
.lead-magnet .lm-left { padding: 2.5rem; position: relative; }
.lead-magnet .lm-left::before { content: ''; position: absolute; width: 280px; height: 280px; border-radius: 50%; background: var(--ch-gradient); filter: blur(120px); opacity: .3; bottom: -120px; left: -60px; }
.lead-magnet h2 { color: #fff; position: relative; z-index: 1; }
.lead-magnet .lm-list { list-style: none; padding: 0; margin: 1.25rem 0 0; position: relative; z-index: 1; }
.lead-magnet .lm-list li { display: flex; gap: .6rem; padding: .35rem 0; color: rgba(255,255,255,.8); font-size: .92rem; }
.lead-magnet .lm-list li i { color: var(--ch-green); }
.lead-magnet .lm-form { background: #fff; padding: 2.5rem; color: var(--ch-body); }
.lead-magnet .lm-form .form-control { border-radius: 12px; padding: .7rem 1rem; margin-bottom: .75rem; }
.lm-badge { display:inline-flex; align-items:center; gap:.5rem; background: rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:.4rem .9rem; font-size:.78rem; font-weight:700; position:relative; z-index:1; }

/* ==========================================================================
   Phase 6.3 — Performance Marketing (campaign cards)
   ========================================================================== */
.campaign-card { break-inside: avoid; margin-bottom: 1.5rem; border-radius: var(--ch-radius); border: 1px solid var(--ch-border); background: #fff; overflow: hidden; box-shadow: var(--ch-shadow-soft); transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.campaign-card:hover { transform: translateY(-6px); border-color: rgba(10,84,248,.3); box-shadow: var(--ch-shadow); }
.campaign-card .cc-media { aspect-ratio: 16/9; overflow: hidden; }
.campaign-card .cc-media .ch-graphic { border: 0; border-radius: 0; height: 100%; }
.campaign-card .cc-body { padding: 1.4rem; }
.campaign-card .cc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
.campaign-card .cc-platform { font-size: .68rem; font-weight: 800; padding: .2rem .6rem; border-radius: 999px; background: var(--ch-gradient-soft); color: var(--ch-blue); white-space: nowrap; }
.campaign-card .cc-industry { font-size: .72rem; font-weight: 700; color: var(--ch-blue); text-transform: uppercase; letter-spacing: .06em; }
.campaign-card h3 { font-size: 1.15rem; margin: .15rem 0 .9rem; }
.cc-metrics { display: grid; grid-template-columns: repeat(2,1fr); gap: .6rem; }
.cc-metric { background: var(--ch-light); border: 1px solid var(--ch-border); border-radius: 12px; padding: .6rem .7rem; }
.cc-metric .m-l { font-size: .64rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ch-muted); }
.cc-metric .m-v { font-family: 'Plus Jakarta Sans'; font-weight: 800; color: var(--ch-dark); font-size: 1.05rem; }
.cc-metric.hl .m-v { background: var(--ch-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cc-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--ch-border); }
.cc-foot .cc-dur { font-size: .8rem; color: var(--ch-muted); }
.cc-foot a { font-weight: 700; font-size: .85rem; color: var(--ch-blue); display: inline-flex; align-items: center; gap: .3rem; }

/* ==========================================================================
   Phase 6.4 — Live SEO Command Center + SEO case cards
   ========================================================================== */
.seo-cc { border-radius: var(--ch-radius); overflow: hidden; background: radial-gradient(120% 120% at 85% 0%, #142036 0%, #070d1a 65%); color: #fff; padding: clamp(1rem,2.5vw,1.8rem); position: relative; }
.seo-cc__bar { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.seo-cc__bar .b { width: 26px; height: 26px; border-radius: 8px; background: var(--ch-gradient); display: grid; place-items: center; }
.seo-cc__bar .t { font-family: 'Plus Jakarta Sans'; font-weight: 700; }
.seo-cc__bar .live { margin-left: auto; font-size: .68rem; color: rgba(255,255,255,.7); display: inline-flex; align-items: center; gap: .35rem; }
.seo-cc__bar .live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ch-green); animation: livepulse 1.8s infinite; }
.seo-cc__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: .8rem; }
.cc-w { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 1rem; backdrop-filter: blur(6px); }
.cc-w .w-l { font-size: .64rem; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.55); }
.cc-w .w-v { font-family: 'Plus Jakarta Sans'; font-weight: 800; font-size: 1.5rem; line-height: 1.1; }
.cc-w .w-v.grad { background: var(--ch-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cc-w .w-trend { font-size: .66rem; color: var(--ch-green); }
.cc-span-3 { grid-column: span 3; } .cc-span-4 { grid-column: span 4; } .cc-span-5 { grid-column: span 5; } .cc-span-6 { grid-column: span 6; } .cc-span-7 { grid-column: span 7; }
.cc-spark { display: flex; align-items: flex-end; gap: 3px; height: 36px; margin-top: .6rem; }
.cc-spark span { flex: 1; background: var(--ch-gradient); border-radius: 2px; height: var(--h,40%); transform-origin: bottom; animation: barGrow .9s ease both; }
.cc-cwv { display: flex; gap: .8rem; }
.cc-cwv div { flex: 1; } .cc-cwv .g { color: var(--ch-green); } .cc-cwv .w-v { font-size: 1.1rem; }
.cc-vs { display: flex; flex-direction: column; gap: .6rem; }
.cc-vs .row2 { display: flex; align-items: center; gap: .6rem; font-size: .72rem; }
.cc-vs .track { flex: 1; height: 8px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.cc-vs .track i { display: block; height: 100%; border-radius: 999px; }
.cc-vs .you i { background: var(--ch-gradient); } .cc-vs .comp i { background: rgba(255,255,255,.35); }
.cc-ai { display: flex; flex-direction: column; gap: .5rem; }
.cc-ai .a { display: flex; gap: .5rem; align-items: flex-start; font-size: .76rem; color: rgba(255,255,255,.82); }
.cc-ai .a i { color: var(--ch-green); margin-top: .1rem; }
.cc-kw { display: flex; flex-direction: column; gap: .45rem; }
.cc-kw .k { display: flex; justify-content: space-between; align-items: center; font-size: .74rem; }
.cc-kw .k .pos { font-weight: 800; color: var(--ch-green); }
.cc-kw .k .up { color: var(--ch-green); font-size: .66rem; }
@media (max-width: 991.98px){ .cc-span-3,.cc-span-4,.cc-span-5,.cc-span-6,.cc-span-7 { grid-column: span 6; } }
@media (max-width: 575.98px){ .seo-cc__grid { grid-template-columns: 1fr; } [class*="cc-span"] { grid-column: 1 / -1 !important; } }

/* SEO case card (Industry, Challenge, Solution, Growth, Keywords, Traffic) */
.seo-case .pf-stats { display: flex; gap: 1.25rem; margin: .8rem 0; }
.seo-case .pf-stats div .s-v { font-family: 'Plus Jakarta Sans'; font-weight: 800; color: var(--ch-dark); }
.seo-case .pf-stats div .s-l { font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ch-muted); }

/* ==========================================================================
   Phase 6.5 — Creative cluster (featured carousel, logo grid, IG feed)
   ========================================================================== */
.featured-creative .swiper-slide { height: auto; }
.fc-card { border-radius: var(--ch-radius); overflow: hidden; border: 1px solid var(--ch-border); background: #fff; box-shadow: var(--ch-shadow-soft); height: 100%; transition: transform .35s ease, box-shadow .35s ease; }
.fc-card:hover { transform: translateY(-6px); box-shadow: var(--ch-shadow); }
.fc-card .fc-media { aspect-ratio: 4/3; overflow: hidden; }
.fc-card .fc-media .ch-graphic { border: 0; border-radius: 0; height: 100%; transition: transform .5s ease; }
.fc-card:hover .fc-media .ch-graphic { transform: scale(1.05); }
.fc-card .fc-body { padding: 1.25rem; }
.fc-card .fc-tag { font-size: .7rem; font-weight: 700; color: var(--ch-blue); text-transform: uppercase; letter-spacing: .06em; }

/* creative portfolio card */
.creative-card { break-inside: avoid; }
.creative-card .cr-cover { aspect-ratio: 4/3; overflow: hidden; }
.creative-card .cr-cover .ch-graphic { border: 0; border-radius: 0; height: 100%; transition: transform .5s ease; }
.creative-card:hover .cr-cover .ch-graphic { transform: scale(1.06); }

/* logo showcase grid (hover reveals story) */
.logo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.logo-tile { position: relative; aspect-ratio: 1; border-radius: var(--ch-radius-sm); border: 1px solid var(--ch-border); background: var(--ch-light); display: grid; place-items: center; overflow: hidden; }
.logo-tile .lt-mark { width: 56px; height: 56px; border-radius: 16px; background: var(--ch-gradient); display: grid; place-items: center; color: #fff; font-family: 'Plus Jakarta Sans'; font-weight: 800; font-size: 1.5rem; }
.logo-tile .lt-story { position: absolute; inset: 0; background: var(--ch-darker); color: #fff; padding: 1.1rem; display: flex; flex-direction: column; justify-content: center; opacity: 0; transition: opacity .3s ease; }
.logo-tile:hover .lt-story { opacity: 1; }
.logo-tile .lt-story h4 { color: #fff; font-size: .95rem; margin-bottom: .3rem; }
.logo-tile .lt-story p { font-size: .76rem; color: rgba(255,255,255,.7); margin: 0; }
@media (max-width: 767.98px){ .logo-grid { grid-template-columns: repeat(2, 1fr); } }

/* instagram feed preview */
.ig-feed { max-width: 420px; margin: 0 auto; border: 1px solid var(--ch-border); border-radius: var(--ch-radius); overflow: hidden; background: #fff; box-shadow: var(--ch-shadow-soft); }
.ig-head { display: flex; align-items: center; gap: .6rem; padding: .9rem 1rem; border-bottom: 1px solid var(--ch-border); }
.ig-head .av { width: 36px; height: 36px; border-radius: 50%; background: var(--ch-gradient); }
.ig-head .nm { font-weight: 700; font-size: .9rem; }
.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.ig-cell { aspect-ratio: 1; background: var(--ch-gradient-soft); position: relative; }
.ig-cell:nth-child(3n) { background: var(--ch-gradient); }
.ig-cell:nth-child(4) { background: var(--ch-darker); }
.ig-cell i { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: rgba(10,84,248,.4); font-size: 1.4rem; }
.ig-cell:nth-child(3n) i, .ig-cell:nth-child(4) i { color: rgba(255,255,255,.7); }

/* video play overlay */
.video-tile { position: relative; cursor: pointer; }
.video-tile .play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 60px; height: 60px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--ch-blue); display: grid; place-items: center; font-size: 1.8rem; box-shadow: 0 12px 30px rgba(0,0,0,.25); transition: transform .25s ease; z-index: 3; }
.video-tile:hover .play { transform: translate(-50%,-50%) scale(1.1); }

/* deliverable chips */
.deliverable { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1rem; border-radius: 12px; background: var(--ch-light); border: 1px solid var(--ch-border); font-weight: 600; font-size: .88rem; color: var(--ch-dark); }
.deliverable i { color: var(--ch-blue); }

/* ==========================================================================
   Phase 7 — Sticky right sidebar (desktop) + multi-step form + resource pages
   ========================================================================== */

/* Sticky right sidebar (desktop) — consolidates Phase 4.0 sticky CTA + WhatsApp */
.ch-sidebar { position: fixed; right: 16px; top: 50%; transform: translate(120%, -50%); z-index: 1500; display: flex; flex-direction: column; gap: .55rem; transition: transform .4s cubic-bezier(.2,.7,.3,1); }
.ch-sidebar.show { transform: translate(0, -50%); }
.ch-sidebar a, .ch-sidebar button { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; font-size: 1.4rem; border: 1px solid var(--ch-border); background: #fff; color: var(--ch-dark); box-shadow: 0 10px 26px rgba(17,24,39,.12); cursor: pointer; position: relative; transition: transform .2s ease, background .2s ease, color .2s ease; }
.ch-sidebar a:hover, .ch-sidebar button:hover { transform: translateX(-4px); background: var(--ch-gradient); color: #fff; border-color: transparent; }
.ch-sidebar .sb-wa:hover { background: #25D366; }
.ch-sidebar .sb-label { position: absolute; right: 58px; top: 50%; transform: translateY(-50%) translateX(6px); white-space: nowrap; background: var(--ch-dark); color: #fff; font-size: .74rem; font-weight: 600; padding: .35rem .7rem; border-radius: 8px; opacity: 0; pointer-events: none; transition: all .2s ease; }
.ch-sidebar a:hover .sb-label, .ch-sidebar button:hover .sb-label { opacity: 1; transform: translateY(-50%) translateX(0); }
.ch-sidebar .sb-top { display: none; }
.ch-sidebar.at-bottom .sb-top { display: grid; }
/* mobile: hide full sidebar, show single floating WhatsApp */
.ch-mobile-wa { position: fixed; right: 14px; bottom: 14px; z-index: 1500; width: 52px; height: 52px; border-radius: 50%; display: none; place-items: center; background: #25D366; color: #fff; font-size: 1.6rem; box-shadow: 0 12px 30px rgba(0,0,0,.2); }
@media (max-width: 991.98px){ .ch-sidebar { display: none !important; } .ch-mobile-wa { display: grid; } }

/* Multi-step contact form */
.msf-steps { display: flex; gap: .5rem; margin-bottom: 2rem; }
.msf-steps .st { flex: 1; text-align: center; position: relative; }
.msf-steps .st .dot { width: 34px; height: 34px; border-radius: 50%; background: var(--ch-light); border: 2px solid var(--ch-border); color: var(--ch-muted); display: grid; place-items: center; margin: 0 auto .4rem; font-weight: 800; font-size: .85rem; transition: all .3s ease; }
.msf-steps .st.active .dot, .msf-steps .st.done .dot { background: var(--ch-gradient); border-color: transparent; color: #fff; }
.msf-steps .st .lbl { font-size: .72rem; font-weight: 600; color: var(--ch-muted); }
.msf-steps .st.active .lbl { color: var(--ch-blue); }
.msf-steps .st::after { content: ''; position: absolute; top: 17px; left: 50%; width: 100%; height: 2px; background: var(--ch-border); z-index: -1; }
.msf-steps .st:last-child::after { display: none; }
.msf-steps .st.done::after { background: var(--ch-gradient); }
.msf-panel { display: none; }
.msf-panel.active { display: block; animation: msgIn .35s ease; }
.msf-choices { display: grid; grid-template-columns: repeat(2,1fr); gap: .75rem; }
.msf-choice { border: 1.5px solid var(--ch-border); border-radius: 14px; padding: 1rem; cursor: pointer; transition: all .2s ease; display: flex; align-items: center; gap: .7rem; font-weight: 600; }
.msf-choice:hover { border-color: rgba(10,84,248,.4); }
.msf-choice.sel { border-color: var(--ch-blue); background: var(--ch-gradient-soft); }
.msf-choice i { color: var(--ch-blue); font-size: 1.3rem; }
.msf-nav { display: flex; justify-content: space-between; margin-top: 1.5rem; }
@media (max-width: 575.98px){ .msf-choices { grid-template-columns: 1fr; } .msf-steps .st .lbl { display: none; } }

/* Resource landing page */
.res-benefits li { display: flex; gap: .6rem; align-items: flex-start; padding: .4rem 0; color: var(--ch-body); }
.res-benefits li i { color: var(--ch-green); margin-top: .15rem; font-size: 1.2rem; }
.res-cover { aspect-ratio: 3/4; border-radius: var(--ch-radius); overflow: hidden; box-shadow: var(--ch-shadow); }

/* Pricing engagement cards */
.eng-card { padding: 2rem; height: 100%; position: relative; }
.eng-card .icon-circle { margin-bottom: 1rem; }
.eng-card .eng-best { font-size: .78rem; color: var(--ch-blue); font-weight: 700; }
.eng-card ul { list-style: none; padding: 0; margin: 1rem 0 0; }
.eng-card ul li { padding: .3rem 0; font-size: .9rem; display: flex; gap: .5rem; }
.eng-card ul li i { color: var(--ch-green); }

/* team showcase */
.team-card { text-align: center; padding: 1.5rem; }
.team-card .t-av { width: 92px; height: 92px; border-radius: 50%; margin: 0 auto 1rem; background: var(--ch-gradient); display: grid; place-items: center; color: #fff; font-family: 'Plus Jakarta Sans'; font-weight: 800; font-size: 1.8rem; }

/* ==========================================================================
   Phase 8.0 — Business KPI Dashboard (industry pages) + industry solutions
   ========================================================================== */
.kpi-dash { border-radius: var(--ch-radius); border: 1px solid var(--ch-border); background: linear-gradient(180deg,#fff, var(--ch-light)); box-shadow: var(--ch-shadow); overflow: hidden; }
.kpi-dash__head { display: flex; align-items: center; gap: .6rem; padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--ch-border); }
.kpi-dash__head .b { width: 30px; height: 30px; border-radius: 9px; background: var(--ch-gradient); color: #fff; display: grid; place-items: center; }
.kpi-dash__head .t { font-family: 'Plus Jakarta Sans'; font-weight: 700; }
.kpi-dash__head .live { margin-left: auto; font-size: .68rem; color: var(--ch-muted); display: inline-flex; align-items: center; gap: .35rem; }
.kpi-dash__head .live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ch-green); animation: livepulse 1.8s infinite; }
.kpi-dash__body { padding: 1.5rem; }
.kpi-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; margin-bottom: 1.25rem; }
.kpi-cell { background: rgba(255,255,255,.7); border: 1px solid var(--ch-border); border-radius: 14px; padding: 1.1rem; backdrop-filter: blur(8px); }
.kpi-cell .k-ico { width: 36px; height: 36px; border-radius: 10px; background: var(--ch-gradient-soft); color: var(--ch-blue); display: grid; place-items: center; font-size: 1.2rem; margin-bottom: .6rem; }
.kpi-cell .k-num { font-family: 'Plus Jakarta Sans'; font-weight: 800; font-size: clamp(1.3rem,2.6vw,1.8rem); line-height: 1; }
.kpi-cell .k-lbl { font-size: .78rem; color: var(--ch-muted); margin-top: .25rem; }
.kpi-cell .k-trend { font-size: .68rem; font-weight: 700; color: #16a34a; margin-top: .3rem; }
.kpi-chart { display: flex; align-items: flex-end; gap: 8px; height: 130px; padding: 1rem; background: rgba(255,255,255,.6); border: 1px solid var(--ch-border); border-radius: 14px; }
.kpi-chart .c { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .4rem; height: 100%; }
.kpi-chart .c i { width: 70%; border-radius: 6px 6px 0 0; background: var(--ch-gradient); height: var(--h,40%); transform-origin: bottom; animation: barGrow 1s ease both; opacity: .9; }
.kpi-chart .c span { font-size: .64rem; color: var(--ch-muted); font-weight: 600; }
@media (max-width: 767.98px){ .kpi-row { grid-template-columns: repeat(2,1fr); } }

/* industry solution group cards */
.sol-group { padding: 1.75rem; height: 100%; }
.sol-group h3 { font-size: 1.1rem; }
.sol-group .sol-list { list-style: none; padding: 0; margin: .75rem 0 0; }
.sol-group .sol-list li { padding: .3rem 0; font-size: .9rem; display: flex; gap: .5rem; align-items: center; }
.sol-group .sol-list li i { color: var(--ch-green); }
.sol-group .sol-list li a { color: var(--ch-blue); font-weight: 600; }

/* Recommended Industry Package (Phase 8.1) */
.ind-pkg { display: grid; grid-template-columns: 5fr 7fr; border-radius: var(--ch-radius); border: 1px solid var(--ch-border); background: linear-gradient(180deg,#fff,var(--ch-light)); box-shadow: var(--ch-shadow); overflow: hidden; }
.ind-pkg__aside { padding: 2.25rem; background: linear-gradient(150deg, rgba(10,84,248,.06), rgba(101,254,128,.08)); border-right: 1px solid var(--ch-border); }
.ind-pkg__aside .pkg-badge { display: inline-flex; align-items: center; gap: .4rem; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ch-blue); background: rgba(10,84,248,.08); border: 1px solid var(--ch-border); padding: .3rem .7rem; border-radius: 999px; }
.ind-pkg__aside .pkg-name { font-family: 'Plus Jakarta Sans'; font-weight: 800; font-size: 1.7rem; margin: .9rem 0 .5rem; }
.ind-pkg__aside .pkg-tag { color: var(--ch-muted); font-size: .92rem; margin-bottom: 1.4rem; }
.ind-pkg__items { padding: 2.25rem; }
.ind-pkg .pkg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem 1.5rem; }
.ind-pkg .pkg-item { display: flex; gap: .55rem; align-items: center; font-size: .95rem; font-weight: 600; color: var(--ch-dark); }
.ind-pkg .pkg-item i { color: var(--ch-green); font-size: 1.15rem; flex-shrink: 0; }
.ind-pkg .pkg-item a { color: var(--ch-dark); }
.ind-pkg .pkg-item a:hover { color: var(--ch-blue); }
@media (max-width: 767.98px) { .ind-pkg { grid-template-columns: 1fr; } .ind-pkg__aside { border-right: none; border-bottom: 1px solid var(--ch-border); } .ind-pkg .pkg-grid { grid-template-columns: 1fr; } }

/* ===== Phase 9.0 — Solutions cluster ===== */
/* Business Problems → Costs → Risks */
.prob-col { padding: 1.75rem; height: 100%; border-radius: var(--ch-radius); border: 1px solid var(--ch-border); background: #fff; box-shadow: var(--ch-shadow); }
.prob-col h3 { font-size: 1.05rem; display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.prob-col h3 i { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: #fff; flex-shrink: 0; }
.prob-col.is-prob h3 i { background: #ef4444; }
.prob-col.is-cost h3 i { background: #f59e0b; }
.prob-col.is-risk h3 i { background: #6366f1; }
.prob-col ul { list-style: none; padding: 0; margin: 0; }
.prob-col ul li { padding: .4rem 0; font-size: .92rem; color: var(--ch-muted); display: flex; gap: .5rem; align-items: flex-start; }
.prob-col ul li i { color: var(--ch-blue); margin-top: .15rem; flex-shrink: 0; }

/* Capabilities groups (Services / Modules / Features / etc.) */
.cap-group { padding: 1.75rem; height: 100%; }
.cap-group h3 { font-size: 1.1rem; }
.cap-group .cap-list { list-style: none; padding: 0; margin: .75rem 0 0; }
.cap-group .cap-list li { padding: .3rem 0; font-size: .9rem; display: flex; gap: .5rem; align-items: center; }
.cap-group .cap-list li i { color: var(--ch-green); }
.cap-group .cap-list li a { color: var(--ch-blue); font-weight: 600; }

/* Industries-served chips */
.ind-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem 1rem; border-radius: 999px; border: 1px solid var(--ch-border); background: #fff; font-weight: 600; font-size: .9rem; color: var(--ch-dark); box-shadow: var(--ch-shadow); }
.ind-chip i { color: var(--ch-blue); }
.ind-chip:hover { color: var(--ch-blue); }

/* Success Stories */
.success-story { padding: 1.75rem; display: flex; flex-direction: column; }
.success-story .ss-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.success-story .ss-name { font-family: 'Plus Jakarta Sans'; font-weight: 700; font-size: 1.05rem; }
.success-story .ss-dur { font-size: .72rem; color: var(--ch-muted); display: inline-flex; align-items: center; gap: .3rem; }
.success-story .ss-row { margin-bottom: .75rem; }
.success-story .ss-lbl { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--ch-blue); }
.success-story .ss-row p { margin: .2rem 0 0; font-size: .9rem; color: var(--ch-muted); }
.success-story .ss-result { color: var(--ch-dark) !important; font-weight: 600; }
.success-story .ss-tech { margin-top: auto; padding-top: .75rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.success-story .ss-tech span { font-size: .72rem; padding: .25rem .6rem; border-radius: 6px; background: var(--ch-light); border: 1px solid var(--ch-border); color: var(--ch-dark); }

/* Estimated Timeline */
.est-tl { display: flex; align-items: stretch; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.est-tl__step { flex: 1 1 0; min-width: 140px; text-align: center; padding: 1.5rem 1rem; border-radius: var(--ch-radius); border: 1px solid var(--ch-border); background: linear-gradient(180deg,#fff,var(--ch-light)); box-shadow: var(--ch-shadow); }
.est-tl__step .est-num { width: 34px; height: 34px; border-radius: 50%; background: var(--ch-gradient); color: #fff; display: inline-grid; place-items: center; font-weight: 700; margin-bottom: .6rem; }
.est-tl__step .est-phase { font-weight: 700; font-size: .92rem; }
.est-tl__step .est-dur { font-size: .8rem; color: var(--ch-blue); font-weight: 600; margin-top: .25rem; }
.est-tl__arrow { display: flex; align-items: center; color: var(--ch-muted); font-size: 1.3rem; }
@media (max-width: 575.98px) { .est-tl__arrow { transform: rotate(90deg); } }

/* Solution cross-link note */
.sol-xnote { border-left: 3px solid var(--ch-blue); background: rgba(10,84,248,.05); border-radius: 0 var(--ch-radius) var(--ch-radius) 0; padding: 1rem 1.25rem; font-size: .92rem; color: var(--ch-muted); }
.sol-xnote a { color: var(--ch-blue); font-weight: 600; }

/* Implementation Package tiers (Phase 9.1) */
.impl-pkg { display: flex; flex-direction: column; padding: 2rem 1.75rem; position: relative; }
.impl-pkg.is-popular { border-color: transparent; box-shadow: 0 0 0 2px var(--ch-blue), var(--ch-shadow); }
.impl-pkg .impl-badge { position: absolute; top: -.8rem; left: 50%; transform: translateX(-50%); background: var(--ch-gradient); color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .03em; padding: .3rem .85rem; border-radius: 999px; text-transform: uppercase; }
.impl-pkg .impl-name { font-family: 'Plus Jakarta Sans'; font-weight: 800; font-size: 1.35rem; margin-bottom: .15rem; }
.impl-pkg .impl-tag { color: var(--ch-muted); font-size: .85rem; margin-bottom: 1.1rem; }
.impl-pkg .impl-list { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.impl-pkg .impl-list li { padding: .4rem 0; font-size: .92rem; display: flex; gap: .55rem; align-items: center; color: var(--ch-dark); }
.impl-pkg .impl-list li i { color: var(--ch-green); font-size: 1.05rem; }

/* ===== Phase 10.0 — Lead Generation & Conversion ===== */
/* Multi-step calculator */
.calc-tool { border-radius: var(--ch-radius); border: 1px solid var(--ch-border); background: linear-gradient(180deg,#fff,var(--ch-light)); box-shadow: var(--ch-shadow); overflow: hidden; }
.calc-tool__head { padding: 1.25rem 1.5rem .5rem; }
.calc-progress { height: 6px; background: var(--ch-border); border-radius: 999px; overflow: hidden; margin: .75rem 0; }
.calc-progress i { display: block; height: 100%; width: 0; background: var(--ch-gradient); transition: width .35s ease; }
.calc-dots { display: flex; flex-wrap: wrap; gap: .4rem; font-size: .72rem; color: var(--ch-muted); }
.calc-dots .d { display: inline-flex; align-items: center; gap: .3rem; }
.calc-dots .d::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--ch-border); }
.calc-dots .d.active::before { background: var(--ch-blue); }
.calc-dots .d.done::before { background: var(--ch-green); }
.calc-body { padding: 1.5rem; }
.calc-step { display: none; }
.calc-step.active { display: block; animation: fadeUp .4s ease; }
.calc-step h3 { font-size: 1.1rem; margin-bottom: 1rem; }
.calc-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: .75rem; }
.calc-grid.shake { animation: shake .4s; }
.calc-choice, .calc-feat { border: 1px solid var(--ch-border); border-radius: var(--ch-radius); padding: 1rem; background: #fff; cursor: pointer; transition: .2s; display: flex; align-items: center; gap: .6rem; font-weight: 600; font-size: .9rem; }
.calc-choice i, .calc-feat i { font-size: 1.3rem; color: var(--ch-blue); }
.calc-choice:hover, .calc-feat:hover { border-color: rgba(10,84,248,.4); transform: translateY(-2px); }
.calc-choice.sel, .calc-feat.sel { border-color: var(--ch-blue); box-shadow: 0 0 0 2px rgba(10,84,248,.15); background: rgba(10,84,248,.04); }
.calc-feat.sel::after { content: '\\2713'; margin-left: auto; color: var(--ch-green); font-weight: 800; }
.calc-nav { display: flex; justify-content: space-between; gap: .75rem; margin-top: 1.5rem; }
.calc-result { display: none; margin-top: 1.5rem; padding: 1.5rem; border-radius: var(--ch-radius); background: var(--ch-dark); color: #fff; }
.calc-result.show { display: block; animation: fadeUp .4s ease; }
.calc-result .row > div { text-align: center; }
.calc-result .cr-num { font-family: 'Plus Jakarta Sans'; font-weight: 800; font-size: 1.4rem; }
.calc-result .cr-lbl { font-size: .72rem; opacity: .7; text-transform: uppercase; letter-spacing: .04em; }

/* SEO audit tool */
.seo-tool { border-radius: var(--ch-radius); border: 1px solid var(--ch-border); background: #fff; box-shadow: var(--ch-shadow); padding: 1.75rem; }
.seo-tool__bar { display: flex; gap: .6rem; flex-wrap: wrap; }
.seo-tool__bar input { flex: 1; min-width: 220px; border: 1px solid var(--ch-border); border-radius: 999px; padding: .8rem 1.2rem; font-size: .95rem; }
.seo-tool__bar input.is-invalid { border-color: #ef4444; }
.seo-scan, .seo-result { display: none; margin-top: 1.5rem; }
.seo-scan.show, .seo-result.show { display: block; animation: fadeUp .4s ease; }
.seo-scan .sc-bar { height: 8px; background: var(--ch-border); border-radius: 999px; overflow: hidden; }
.seo-scan .sc-bar i { display: block; height: 100%; width: 0; background: var(--ch-gradient); transition: width .2s; }
.seo-scan .sc-phase { margin-top: .6rem; font-size: .85rem; color: var(--ch-muted); }
.seo-rings { display: flex; gap: 2rem; justify-content: center; flex-wrap: wrap; }
.seo-ring { text-align: center; }
.seo-ring .ring-wrap { position: relative; display: inline-grid; place-items: center; }
.seo-ring svg { transform: rotate(-90deg); }
.seo-ring [data-ring-arc] { transition: stroke-dashoffset 1s ease; stroke: url(#chgrad); }
.seo-ring .rnum { position: absolute; font-family: 'Plus Jakarta Sans'; font-weight: 800; font-size: 1.7rem; color: var(--ch-dark); }
.seo-ring .rl { font-size: .8rem; color: var(--ch-muted); margin-top: .4rem; }
.seo-issues { list-style: none; padding: 0; margin: 1.25rem 0 0; }
.seo-issues li { display: flex; gap: .6rem; align-items: flex-start; padding: .55rem 0; border-bottom: 1px dashed var(--ch-border); font-size: .9rem; }
.seo-issues li i { margin-top: .1rem; }
.seo-issues .sev-high { color: #ef4444; }
.seo-issues .sev-med { color: #f59e0b; }
.seo-issues .sev-low { color: var(--ch-blue); }

/* Assessment */
.assess-q { margin-bottom: 1rem; }
.assess-q label { font-weight: 600; font-size: .92rem; display: block; margin-bottom: .35rem; }
.assess-q select { width: 100%; border: 1px solid var(--ch-border); border-radius: 10px; padding: .7rem .9rem; font-size: .92rem; background: #fff; }
.assess-q select.is-invalid { border-color: #ef4444; }
.assess-result { display: none; margin-top: 1.5rem; }
.assess-result.show { display: block; animation: fadeUp .4s ease; }
.assess-score { font-family: 'Plus Jakarta Sans'; font-weight: 800; font-size: 3rem; line-height: 1; }
[data-assess-tier] { display: none; }
[data-assess-tier].show { display: block; }

/* Mobile bottom sticky bar (Phase 10 — replaces single WhatsApp FAB on mobile) */
.ch-bottombar { display: none; }
@media (max-width: 991.98px) {
  .ch-bottombar { display: grid; grid-template-columns: repeat(3,1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040; background: #fff; border-top: 1px solid var(--ch-border); box-shadow: 0 -4px 20px rgba(2,12,40,.08); }
  .ch-bottombar a { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .55rem 0; font-size: .68rem; font-weight: 600; color: var(--ch-dark); text-decoration: none; }
  .ch-bottombar a i { font-size: 1.3rem; }
  .ch-bottombar a.bb-primary { background: var(--ch-gradient); color: #fff; }
  .ch-bottombar a.bb-wa i { color: #25D366; }
  .ch-bottombar a.bb-primary i { color: #fff; }
  .ch-mobile-wa { display: none !important; }
  body { padding-bottom: 60px; }
}

/* Live chat widget */
.ch-chat { position: fixed; right: 22px; bottom: 22px; z-index: 1045; }
@media (max-width: 991.98px) { .ch-chat { bottom: 74px; right: 14px; } }
.ch-chat__launch { width: 58px; height: 58px; border-radius: 50%; border: none; background: var(--ch-gradient); color: #fff; font-size: 1.7rem; box-shadow: 0 10px 30px rgba(10,84,248,.4); cursor: pointer; display: grid; place-items: center; }
.ch-chat__launch .bx-x { display: none; }
.ch-chat.open .ch-chat__launch .bx-message-rounded-dots { display: none; }
.ch-chat.open .ch-chat__launch .bx-x { display: block; }
.ch-chat__panel { position: absolute; right: 0; bottom: 72px; width: min(360px,calc(100vw - 28px)); border-radius: var(--ch-radius); overflow: hidden; box-shadow: var(--ch-shadow-lg,0 24px 60px rgba(2,12,40,.22)); opacity: 0; transform: translateY(12px) scale(.98); pointer-events: none; transition: .25s; }
.ch-chat.open .ch-chat__panel { opacity: 1; transform: none; pointer-events: auto; }
.ch-chat .ai-chat { box-shadow: none; }

/* Exit-intent popup */
.exit-pop { position: fixed; inset: 0; z-index: 1080; display: none; align-items: center; justify-content: center; padding: 1.25rem; background: rgba(2,12,40,.55); backdrop-filter: blur(3px); }
.exit-pop.show { display: flex; animation: fadeUp .35s ease; }
.exit-pop__card { background: #fff; border-radius: var(--ch-radius); max-width: 520px; width: 100%; overflow: hidden; box-shadow: 0 30px 80px rgba(2,12,40,.3); position: relative; }
.exit-pop__card .ep-top { background: var(--ch-gradient); color: #fff; padding: 2rem; text-align: center; }
.exit-pop__card .ep-body { padding: 1.75rem; }
.exit-pop__close { position: absolute; top: .75rem; right: .9rem; background: rgba(255,255,255,.2); border: none; color: #fff; width: 32px; height: 32px; border-radius: 50%; font-size: 1.3rem; cursor: pointer; line-height: 1; }
.exit-offer { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
@media (max-width: 479.98px) { .exit-offer { grid-template-columns: 1fr; } }

/* Client portal preview dashboard */
.cpp-dash { border-radius: var(--ch-radius); border: 1px solid var(--ch-border); background: #fff; box-shadow: var(--ch-shadow); overflow: hidden; }
.cpp-dash__bar { display: flex; align-items: center; gap: .6rem; padding: 1rem 1.4rem; border-bottom: 1px solid var(--ch-border); background: var(--ch-light); }
.cpp-dash__bar .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--ch-border); }
.cpp-dash__body { padding: 1.4rem; display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 1rem; }
.cpp-tile { border: 1px solid var(--ch-border); border-radius: 12px; padding: 1.1rem; }
.cpp-tile .t-ico { width: 36px; height: 36px; border-radius: 9px; background: rgba(10,84,248,.08); color: var(--ch-blue); display: grid; place-items: center; font-size: 1.2rem; margin-bottom: .6rem; }
.cpp-tile .t-num { font-family: 'Plus Jakarta Sans'; font-weight: 800; font-size: 1.3rem; }
.cpp-tile .t-lbl { font-size: .78rem; color: var(--ch-muted); }

/* Success / thank-you next-steps */
.next-steps { list-style: none; padding: 0; margin: 0; max-width: 540px; }
.next-steps li { display: flex; gap: 1rem; padding: 1rem 0; border-bottom: 1px dashed var(--ch-border); text-align: left; }
.next-steps .ns-num { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; background: var(--ch-gradient); color: #fff; display: grid; place-items: center; font-weight: 700; }
.next-steps .ns-t { font-weight: 700; }
.next-steps .ns-d { font-size: .88rem; color: var(--ch-muted); }

/* Accessibility — skip link (Phase 11) */
.ch-skip-link { position: fixed; top: -60px; left: 12px; z-index: 2000; background: var(--ch-dark); color: #fff; padding: .6rem 1rem; border-radius: 0 0 10px 10px; font-weight: 600; transition: top .2s ease; }
.ch-skip-link:focus { top: 0; color: #fff; outline: 3px solid var(--ch-green); }
#main:focus { outline: none; }

/* Internal design-system / living style guide (Phase 11) */
.ds-swatch { border-radius: 12px; overflow: hidden; border: 1px solid var(--ch-border); }
.ds-swatch .sw { height: 80px; }
.ds-swatch .meta { padding: .6rem .8rem; font-size: .78rem; }
.ds-spec { font-size: .72rem; color: var(--ch-muted); }
.ds-section { scroll-margin-top: 120px; }
.ds-toc a { display: inline-block; margin: .2rem .4rem .2rem 0; }

/* ============================================================
   Homepage Hero Redesign — SCOPED to .home-hero ONLY.
   Does not affect the shared .hero used by inner pages.
   ============================================================ */
.home-hero { min-height: 95vh; display: flex; align-items: center; padding-top: 7.5rem; padding-bottom: 4rem; position: relative; isolation: isolate; }
.home-hero .hh-row { width: 100%; }
.home-hero .hh-left { flex: 0 0 100%; max-width: 100%; }
.home-hero .hh-right { flex: 0 0 100%; max-width: 100%; }
@media (min-width: 992px) {
  .home-hero .hh-left  { flex: 0 0 45%; max-width: 45%; }
  .home-hero .hh-right { flex: 0 0 55%; max-width: 55%; }
}
.home-hero h1 { font-size: clamp(2.5rem, 4.4vw, 4.05rem); line-height: 1.05; }
.home-hero .lead { color: var(--ch-muted); font-size: 1.06rem; max-width: 36em; }

/* --- background decoration --- */
.home-hero .hh-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.home-hero .hh-blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; }
.home-hero .hh-blob--1 { width: 520px; height: 520px; top: -120px; right: -80px; background: radial-gradient(circle, rgba(101,254,128,.5), transparent 70%); animation: hhGlow 9s ease-in-out infinite; }
.home-hero .hh-blob--2 { width: 460px; height: 460px; bottom: -140px; left: -100px; background: radial-gradient(circle, rgba(10,84,248,.4), transparent 70%); animation: hhGlow 11s ease-in-out infinite reverse; }
.home-hero .hh-grid { position: absolute; inset: 0; background-image: radial-gradient(rgba(10,84,248,.16) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(70% 60% at 60% 40%, #000 0%, transparent 75%); mask-image: radial-gradient(70% 60% at 60% 40%, #000 0%, transparent 75%); opacity: .5; }
.home-hero .hh-particle { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--ch-gradient); opacity: .35; animation: hhFloat 7s ease-in-out infinite; }
.home-hero .hh-particle.p1 { top: 18%; left: 8%; }
.home-hero .hh-particle.p2 { top: 70%; left: 14%; animation-delay: 1.2s; }
.home-hero .hh-particle.p3 { top: 30%; left: 48%; width: 5px; height: 5px; animation-delay: 2.1s; }
.home-hero .hh-particle.p4 { top: 80%; left: 60%; animation-delay: .6s; }
.home-hero .hh-particle.p5 { top: 12%; left: 80%; width: 5px; height: 5px; animation-delay: 1.8s; }
.home-hero .hh-particle.p6 { top: 58%; left: 90%; animation-delay: 2.6s; }

/* --- rating + stats + logos --- */
.home-hero .hh-rating { display: flex; align-items: center; gap: .6rem; }
.home-hero .hh-stars { color: #f5b301; font-size: 1.05rem; letter-spacing: 1px; }
.home-hero .hh-rating__txt { font-size: .92rem; color: var(--ch-muted); font-weight: 600; }
.home-hero .hh-stats { gap: 1.75rem 2.25rem; }
.home-hero .hh-stats .stat-num { font-size: 1.95rem; }
.home-hero .hh-logos__label { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ch-muted); font-weight: 700; }
.home-hero .hh-logos__row { display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem 1.5rem; margin-top: .6rem; }
.home-hero .hh-logo { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 1rem; color: #9aa6bf; letter-spacing: .01em; filter: grayscale(1); transition: color .2s; }
.home-hero .hh-logo:hover { color: var(--ch-muted); }

/* --- stage + globe --- */
.home-hero .hh-stage { position: relative; min-height: 520px; display: grid; place-items: center; }
.home-hero .hh-glow { position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(10,84,248,.18), rgba(101,254,128,.12) 45%, transparent 70%); filter: blur(8px); animation: hhGlow 7s ease-in-out infinite; z-index: 0; }
.home-hero .hero-canvas-wrap { position: relative; width: 100%; max-width: 520px; min-height: 440px; aspect-ratio: 1 / .92; z-index: 1; }
.home-hero #hero-canvas { width: 100%; height: 100%; display: block; }
.home-hero .hero-fallback { display: none; width: 100%; }

/* --- floating glass cards --- */
.home-hero .hh-floats { position: absolute; inset: 0; z-index: 2; }
.home-hero .hh-card { position: absolute; display: flex; align-items: center; gap: .55rem; padding: .65rem .9rem; border-radius: 14px; background: rgba(255,255,255,.72); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.7); box-shadow: 0 14px 34px rgba(2,12,40,.12); text-decoration: none; color: var(--ch-dark); font-weight: 700; font-size: .82rem; white-space: nowrap; animation: hhDrift 8s ease-in-out infinite; transition: transform .2s, box-shadow .2s; }
.home-hero .hh-card:hover { transform: translateY(-4px) scale(1.04); box-shadow: 0 20px 44px rgba(10,84,248,.2); color: var(--ch-blue); }
.home-hero .hh-card__ic { width: 28px; height: 28px; border-radius: 8px; background: var(--ch-gradient); color: #fff; display: grid; place-items: center; font-size: 1.05rem; flex-shrink: 0; }
.home-hero .hh-card--c1 { top: 4%;  left: -4%; animation-delay: 0s; }
.home-hero .hh-card--c2 { top: 2%;  right: -2%; animation-delay: .8s; }
.home-hero .hh-card--c3 { top: 42%; left: -8%; animation-delay: 1.6s; }
.home-hero .hh-card--c4 { top: 40%; right: -7%; animation-delay: 1.1s; }
.home-hero .hh-card--c5 { bottom: 8%; left: 2%; animation-delay: 2.2s; }
.home-hero .hh-card--c6 { bottom: 4%; right: 0%; animation-delay: .4s; }

/* --- dashboard preview card --- */
.home-hero .hh-dash { position: absolute; bottom: 16%; left: 50%; transform: translateX(-50%); width: 230px; padding: .9rem 1rem; border-radius: 16px; background: rgba(255,255,255,.82); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.8); box-shadow: 0 22px 50px rgba(2,12,40,.16); z-index: 3; animation: hhDrift 9s ease-in-out infinite; }
.home-hero .hh-dash__head { display: flex; align-items: center; gap: .3rem; margin-bottom: .6rem; }
.home-hero .hh-dash__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ch-border); }
.home-hero .hh-dash__dot:first-child { background: #ef4444; } .home-hero .hh-dash__dot:nth-child(2){ background:#f5b301; } .home-hero .hh-dash__dot:nth-child(3){ background: var(--ch-green); }
.home-hero .hh-dash__title { margin-left: auto; font-size: .68rem; font-weight: 700; color: var(--ch-muted); text-transform: uppercase; letter-spacing: .05em; }
.home-hero .hh-dash__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.home-hero .hh-dash__num { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.15rem; line-height: 1; }
.home-hero .hh-dash__lbl { font-size: .68rem; color: var(--ch-muted); }

/* --- floating tech icons --- */
.home-hero .hh-tech { position: absolute; width: 38px; height: 38px; border-radius: 11px; background: #fff; border: 1px solid var(--ch-border); box-shadow: 0 8px 20px rgba(2,12,40,.1); display: grid; place-items: center; font-size: 1.2rem; color: var(--ch-blue); z-index: 2; animation: hhFloat 6s ease-in-out infinite; }
.home-hero .hh-tech--t1 { top: 24%; left: 16%; animation-delay: .2s; }
.home-hero .hh-tech--t2 { top: 10%; left: 42%; animation-delay: 1s; }
.home-hero .hh-tech--t3 { top: 20%; right: 18%; animation-delay: 1.7s; }
.home-hero .hh-tech--t4 { top: 56%; left: 10%; animation-delay: .5s; }
.home-hero .hh-tech--t5 { top: 64%; right: 14%; animation-delay: 2s; }
.home-hero .hh-tech--t6 { bottom: 18%; left: 24%; animation-delay: 1.3s; }
.home-hero .hh-tech--t7 { bottom: 26%; right: 22%; animation-delay: .9s; }
.home-hero .hh-tech--t8 { top: 38%; left: 46%; animation-delay: 2.4s; }

/* parallax hook (set by JS on desktop) */
.home-hero .hh-stage[style] .hh-card,
.home-hero .hh-stage .hh-card { will-change: transform; }

@keyframes hhDrift { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes hhFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes hhGlow { 0%,100% { opacity: .45; transform: scale(1); } 50% { opacity: .7; transform: scale(1.06); } }

/* --- tablet --- */
@media (max-width: 991.98px) {
  .home-hero { min-height: auto; padding-top: 6.5rem; }
  .home-hero .hh-stage { min-height: 420px; margin-top: 1rem; }
}
/* --- mobile: declutter — reflow floats, drop tiny tech icons --- */
@media (max-width: 767.98px) {
  .home-hero .hh-stage { min-height: auto; display: block; }
  .home-hero .hero-canvas-wrap { max-width: 380px; min-height: 300px; margin: 0 auto; }
  .home-hero .hh-tech { display: none; }
  .home-hero .hh-floats { position: static; display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 1.25rem; }
  .home-hero .hh-card, .home-hero .hh-dash { position: static; transform: none; animation: none; width: auto; }
  .home-hero .hh-dash { width: 100%; max-width: 320px; }
  .home-hero .hh-glow { display: none; }
}
/* --- respect reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .home-hero .hh-card, .home-hero .hh-dash, .home-hero .hh-tech, .home-hero .hh-particle, .home-hero .hh-blob, .home-hero .hh-glow { animation: none !important; }
}

/* ============================================================
   Phase 12 — Blog & Resource Center
   ============================================================ */
/* --- Single post hero --- */
.blog-hero { padding: 7rem 0 1rem; }
.blog-title { font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.12; margin: .6rem 0 1rem; max-width: 20ch; max-width: 24ch; }
.blog-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; color: var(--ch-muted); font-size: .9rem; }
.blog-meta .bm-sep { opacity: .4; }
.blog-meta i { color: var(--ch-blue); }
.bm-author { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; color: var(--ch-dark); }
.bm-avatar, .ba-avatar, .author-head__avatar { display: grid; place-items: center; border-radius: 50%; background: var(--ch-gradient); color: #fff; }
.bm-avatar { width: 26px; height: 26px; font-size: 1rem; }
.blog-hero__media { overflow: hidden; padding: .4rem; }

/* --- Article body typography --- */
.blog-body-row { padding-bottom: 2rem; }
.blog-article { font-size: 1.06rem; line-height: 1.8; color: var(--ch-body); }
.blog-article h2 { font-size: 1.6rem; margin: 2.2rem 0 .9rem; scroll-margin-top: 110px; }
.blog-article p { margin-bottom: 1.1rem; }
.blog-article ul { margin: 0 0 1.2rem 1.1rem; display: flex; flex-direction: column; gap: .5rem; }
.blog-article a { color: var(--ch-blue); font-weight: 600; }
.blog-article a:hover { text-decoration: underline; }
.blog-article strong { color: var(--ch-dark); }

/* comparison tables + callouts */
.blog-table-wrap { overflow-x: auto; margin: 1.4rem 0; }
.blog-table { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 480px; }
.blog-table th, .blog-table td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--ch-border); }
.blog-table thead th { background: var(--ch-light); font-family: 'Plus Jakarta Sans'; }
.blog-table tbody tr:hover { background: rgba(10,84,248,.03); }
.blog-callout { display: flex; gap: .9rem; align-items: flex-start; margin: 1.5rem 0; padding: 1.1rem 1.25rem; border-radius: var(--ch-radius); background: var(--ch-gradient-soft); border: 1px solid var(--ch-border); border-left: 4px solid var(--ch-blue); }
.blog-callout i { font-size: 1.5rem; color: var(--ch-blue); flex-shrink: 0; margin-top: .1rem; }
.blog-callout strong { color: var(--ch-dark); }

/* --- Sticky TOC (within content column; far from the global right sidebar) --- */
.blog-toc { position: sticky; top: 100px; border: 1px solid var(--ch-border); border-radius: var(--ch-radius); padding: 1.25rem; background: #fff; box-shadow: var(--ch-shadow); }
.blog-toc__head { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--ch-muted); margin-bottom: .75rem; }
.blog-toc ul { list-style: none; padding: 0; margin: 0; }
.blog-toc li a { display: block; padding: .3rem 0; font-size: .88rem; color: var(--ch-muted); font-weight: 600; border-left: 2px solid transparent; padding-left: .7rem; transition: .2s; }
.blog-toc li a:hover { color: var(--ch-blue); border-color: var(--ch-blue); }
.blog-share { display: flex; align-items: center; gap: .5rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--ch-border); }
.blog-share .bs-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ch-muted); font-weight: 700; }
.blog-share a, .blog-share .bs-copy { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--ch-border); background: #fff; display: grid; place-items: center; color: var(--ch-blue); cursor: pointer; font-size: 1.1rem; }
.blog-share a:hover, .blog-share .bs-copy:hover { background: var(--ch-gradient-soft); }

/* --- Takeaways / FAQ / related / author --- */
.blog-takeaways { margin: 2rem 0; padding: 1.5rem 1.75rem; border-radius: var(--ch-radius); background: var(--ch-light); border: 1px solid var(--ch-border); }
.blog-takeaways ul { list-style: none; padding: 0; margin: .75rem 0 0; display: grid; gap: .55rem; }
.blog-takeaways li { display: flex; gap: .55rem; align-items: flex-start; }
.blog-takeaways li i { color: var(--ch-green); margin-top: .15rem; }
.blog-faq, .blog-related, .blog-author { margin-top: 2.5rem; }
.br-group { border: 1px solid var(--ch-border); border-radius: var(--ch-radius); padding: 1.1rem 1.25rem; height: 100%; }
.br-head { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ch-muted); font-weight: 700; margin-bottom: .6rem; }
.br-link { display: flex; align-items: center; gap: .45rem; padding: .3rem 0; font-size: .92rem; font-weight: 600; color: var(--ch-dark); }
.br-link i { color: var(--ch-blue); }
.br-link:hover { color: var(--ch-blue); }
.blog-author { display: flex; gap: 1.1rem; align-items: flex-start; padding: 1.5rem; border-radius: var(--ch-radius); background: var(--ch-light); border: 1px solid var(--ch-border); }
.blog-author .ba-avatar { width: 56px; height: 56px; font-size: 1.7rem; flex-shrink: 0; }

/* --- Listing cards --- */
.blog-card { display: flex; flex-direction: column; border: 1px solid var(--ch-border); border-radius: var(--ch-radius); overflow: hidden; background: #fff; box-shadow: var(--ch-shadow); transition: transform .25s, box-shadow .25s; }
.blog-card:hover { transform: translateY(-4px); box-shadow: 0 22px 50px rgba(2,12,40,.14); }
.blog-card__media { display: block; overflow: hidden; aspect-ratio: 1200 / 630; }
.blog-card__media :is(img, .ch-graphic) { transition: transform .4s ease; width: 100%; height: 100%; }
.blog-card:hover .blog-card__media img, .blog-card:hover .blog-card__media .ch-graphic { transform: scale(1.05); }
.blog-card__body { padding: 1.25rem; display: flex; flex-direction: column; flex: 1; }
.blog-card__meta { display: flex; flex-wrap: wrap; gap: .5rem .9rem; font-size: .76rem; color: var(--ch-muted); margin-bottom: .6rem; align-items: center; }
.blog-card__meta i { color: var(--ch-blue); }
.bc-cat { background: var(--ch-gradient-soft); color: var(--ch-blue); font-weight: 700; padding: .15rem .6rem; border-radius: 999px; }
.blog-card__title { font-size: 1.12rem; line-height: 1.3; margin-bottom: .5rem; }
.blog-card__title a { color: var(--ch-dark); }
.blog-card__title a:hover { color: var(--ch-blue); }
.blog-card__excerpt { font-size: .9rem; color: var(--ch-muted); margin-bottom: 1rem; }
.blog-card__foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.bc-author { font-size: .78rem; color: var(--ch-muted); font-weight: 600; display: inline-flex; align-items: center; gap: .3rem; }
.blog-feature-large .blog-card__title { font-size: 1.5rem; }
.blog-feature-large .blog-card__media { aspect-ratio: 16 / 9; }

/* --- Controls + filters --- */
.blog-search { position: relative; margin-bottom: 1rem; }
.blog-search i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--ch-muted); }
.blog-search input { width: 100%; border: 1px solid var(--ch-border); border-radius: 999px; padding: .7rem 1rem .7rem 2.5rem; font-size: .95rem; }
.blog-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.bf-chip { border: 1px solid var(--ch-border); background: #fff; border-radius: 999px; padding: .4rem .9rem; font-size: .85rem; font-weight: 600; color: var(--ch-dark); cursor: pointer; transition: .2s; }
.bf-chip:hover { border-color: rgba(10,84,248,.4); }
.bf-chip.active { background: var(--ch-gradient); color: #fff; border-color: transparent; }

/* --- Sidebar --- */
.blog-sidebar { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 1.25rem; }
.bs-card { border: 1px solid var(--ch-border); border-radius: var(--ch-radius); padding: 1.25rem; background: #fff; }
.bs-title { font-size: .95rem; font-family: 'Plus Jakarta Sans'; font-weight: 700; margin-bottom: .9rem; }
.bs-post { display: block; padding: .5rem 0; border-bottom: 1px dashed var(--ch-border); }
.bs-post:last-child { border-bottom: none; }
.bs-post__t { display: block; font-size: .9rem; font-weight: 600; color: var(--ch-dark); }
.bs-post:hover .bs-post__t { color: var(--ch-blue); }
.bs-post__m { font-size: .76rem; color: var(--ch-muted); }
.bs-news { background: var(--ch-dark); color: #fff; }
.bs-news .bs-title { color: #fff; }

/* --- Author page --- */
.author-head { display: flex; gap: 1.5rem; align-items: flex-start; }
.author-head__avatar { width: 92px; height: 92px; font-size: 2.6rem; flex-shrink: 0; }
.author-social { display: flex; gap: .6rem; }
.author-social a { width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--ch-border); display: grid; place-items: center; color: var(--ch-blue); font-size: 1.2rem; }
.author-social a:hover { background: var(--ch-gradient-soft); }
@media (max-width: 575.98px) { .author-head { flex-direction: column; gap: 1rem; } }

/* About-page real images (about-1/about-2) — plain sizing, NO placeholder box.
   drop-shadow follows the transparent PNG's alpha shape (no rectangular bg). */
.about-img { width: 100%; height: auto; display: block; filter: drop-shadow(0 18px 40px rgba(2,12,40,.12)); }
.about-img--round { border-radius: 25px; }