/* ConnecTech v1.28 — blog redesign */
:root{--b2-blue:#1264c7;--b2-teal:#00cdb9;--b2-navy:#061523;--b2-ink:#112a3d;--b2-mut:#5f7384;--b2-line:#e1e9f0}
.ct-b2-main,.ct-b2-single{background:#f3f7fb}
/* ---------- index hero ---------- */
.ct-b2-hero{position:relative;padding:clamp(34px,5vw,64px) 0 0;color:#fff;background:radial-gradient(ellipse at 85% 0,#1a5fae66 0,transparent 55%),radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.4px) 0 0/22px 22px,linear-gradient(135deg,#061523,#0b2742 60%,#0d3157)}
.ct-b2-hero-in{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 40px;flex-wrap:wrap}
.ct-b2-kicker{display:inline-block;margin-bottom:12px;padding:5px 12px;border-radius:99px;background:rgba(0,205,185,.14);border:1px solid rgba(0,205,185,.35);color:#6ff0e3;font-size:11px;font-weight:800;letter-spacing:.14em}
.ct-b2-hero h1{margin:0 0 10px;color:#fff;font-size:clamp(34px,5vw,60px);line-height:1.05;letter-spacing:-.03em}
.ct-b2-hero p{margin:0;max-width:620px;color:#bcd0e3;font-size:clamp(15px,1.4vw,18px);line-height:1.6}
.ct-b2-search{display:flex;width:min(360px,100%);margin-bottom:6px;background:#fff;border-radius:99px;overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,.28)}
.ct-b2-search input{flex:1;min-width:0;padding:13px 18px;border:0;outline:0;font-size:14px;background:transparent;color:var(--b2-ink)}
.ct-b2-search button{width:50px;border:0;background:var(--b2-blue);color:#fff;font-size:20px;cursor:pointer}
.ct-b2-chips{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;padding:26px 0 22px;scrollbar-width:none}
.ct-b2-chips::-webkit-scrollbar{display:none}
.ct-b2-chips a{flex:0 0 auto;padding:8px 16px;border-radius:99px;border:1px solid rgba(190,220,245,.28);color:#d6e6f6;font-size:13px;font-weight:700;text-decoration:none;transition:.2s}
.ct-b2-chips a:hover{background:rgba(255,255,255,.12);color:#fff}
.ct-b2-chips a.is-on{background:#fff;color:var(--b2-navy);border-color:#fff}
.ct-b2-body{padding-top:clamp(26px,3.4vw,46px);padding-bottom:clamp(40px,5vw,72px)}
/* ---------- card + signature image style ---------- */
.ct-b2-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,2.4vw,34px)}
.ct-b2-card{display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid var(--b2-line);border-radius:22px;box-shadow:0 10px 30px rgba(17,42,61,.06);transition:transform .25s,box-shadow .25s}
.ct-b2-card:hover{transform:translateY(-5px);box-shadow:0 22px 48px rgba(17,42,61,.14)}
.ct-b2-media{position:relative;display:block;margin:14px 24px 0 14px;text-decoration:none}
.ct-b2-plate,.ct-b2-frame{clip-path:polygon(0 0,calc(100% - 46px) 0,100% 46px,100% 100%,0 100%);border-radius:18px}
.ct-b2-plate{position:absolute;inset:0;transform:translate(10px,10px);background:linear-gradient(135deg,var(--b2-blue),var(--b2-teal));transition:transform .3s;z-index:0}
.ct-b2-card:hover .ct-b2-plate{transform:translate(14px,14px)}
.ct-b2-frame{position:relative;z-index:1;display:block;aspect-ratio:16/10;overflow:hidden;background:#0b1f33}
.ct-b2-frame .ct-b2-img,.ct-b2-frame img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease,filter .5s}
.ct-b2-card:hover .ct-b2-frame img{transform:scale(1.07);filter:saturate(1.1)}
.ct-b2-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(6,21,35,.55));pointer-events:none}
.ct-b2-tag{position:absolute;left:14px;bottom:14px;z-index:2;padding:6px 12px;border-radius:99px;background:#fff;color:var(--b2-blue);font-size:11px;font-weight:800;font-style:normal;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 6px 16px rgba(0,0,0,.25)}
.ct-b2-art{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(135deg,hsl(var(--h),70%,16%),hsl(calc(var(--h) + 24),78%,34%))}
.ct-b2-art svg{position:absolute;inset:0;width:100%;height:100%}
.ct-b2-art line{stroke:rgba(255,255,255,.28);stroke-width:2}
.ct-b2-art circle{fill:rgba(255,255,255,.85)}
.ct-b2-art span{position:relative;color:#fff;font-weight:800;font-size:clamp(15px,1.6vw,22px);letter-spacing:.18em;text-transform:uppercase;text-shadow:0 2px 12px rgba(0,0,0,.4)}
.ct-b2-copy{display:flex;flex-direction:column;flex:1;padding:20px 24px 24px}
.ct-b2-meta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:9px;color:var(--b2-mut);font-size:12.5px;font-weight:600}
.ct-b2-meta span::before{content:"•";margin-right:10px;opacity:.5}
.ct-b2-copy h2{margin:0 0 10px;font-size:clamp(18px,1.5vw,21px);line-height:1.3;letter-spacing:-.01em}
.ct-b2-copy h2 a{color:var(--b2-ink);text-decoration:none;background:linear-gradient(var(--b2-blue),var(--b2-blue)) 0 100%/0 2px no-repeat;transition:background-size .3s}
.ct-b2-card:hover h2 a{background-size:100% 2px}
.ct-b2-copy p{margin:0 0 16px;color:#4b6173;font-size:14.5px;line-height:1.65;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ct-b2-more{margin-top:auto;color:var(--b2-blue);font-weight:800;font-size:14px;text-decoration:none}
.ct-b2-more span{display:inline-block;transition:transform .2s}
.ct-b2-card:hover .ct-b2-more span{transform:translateX(5px)}
/* featured */
.ct-b2-featured{margin-bottom:clamp(26px,3vw,40px)}
.ct-b2-card.is-featured{flex-direction:row;align-items:center;gap:clamp(18px,3vw,44px);padding:clamp(16px,2vw,26px);background:linear-gradient(135deg,#061523,#0d3157);border:0;color:#fff}
.ct-b2-card.is-featured .ct-b2-media{flex:1.15 1 0;margin:0 14px 14px 0}
.ct-b2-card.is-featured .ct-b2-frame{aspect-ratio:16/10}
.ct-b2-card.is-featured .ct-b2-copy{flex:1 1 0;padding:8px 8px 8px 0}
.ct-b2-card.is-featured .ct-b2-meta{color:#9fb8cf}
.ct-b2-card.is-featured h2{font-size:clamp(24px,3vw,40px);line-height:1.15}
.ct-b2-card.is-featured h2 a{color:#fff}
.ct-b2-card.is-featured p{color:#c5d7e8;font-size:16px;-webkit-line-clamp:4}
.ct-b2-card.is-featured .ct-b2-more{margin-top:6px;display:inline-block;align-self:flex-start;padding:12px 22px;border-radius:99px;background:linear-gradient(135deg,var(--b2-blue),#1b86e6);color:#fff}
/* pagination */
.ct-b2-pages{margin-top:clamp(30px,4vw,52px)}
.ct-b2-pages ul{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.ct-b2-pages a,.ct-b2-pages span{display:inline-flex;min-width:42px;height:42px;padding:0 14px;align-items:center;justify-content:center;border-radius:99px;border:1px solid var(--b2-line);background:#fff;color:var(--b2-ink);font-weight:700;text-decoration:none}
.ct-b2-pages .current{background:var(--b2-blue);border-color:var(--b2-blue);color:#fff}
.ct-b2-pages a:hover{border-color:var(--b2-blue);color:var(--b2-blue)}
.ct-b2-empty{padding:40px;text-align:center;color:var(--b2-mut)}
/* ---------- single post ---------- */
.ct-b2-progress{position:fixed;left:0;right:0;top:0;height:4px;z-index:99999;background:transparent;pointer-events:none}
.ct-b2-progress i{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--b2-blue),var(--b2-teal))}
.ct-b2-phero{padding:clamp(28px,4.2vw,58px) 0 clamp(34px,4.4vw,60px);color:#fff;background:radial-gradient(ellipse at 90% 10%,#1a5fae66 0,transparent 55%),radial-gradient(rgba(255,255,255,.06) 1px,transparent 1.4px) 0 0/22px 22px,linear-gradient(135deg,#061523,#0b2742 60%,#0d3157)}
.ct-b2-phero-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:clamp(24px,4vw,64px);width:min(1180px,calc(100% - 32px));margin:0 auto}
.ct-b2-back{display:inline-block;margin-bottom:16px;color:#9fc4ea;font-size:14px;font-weight:700;text-decoration:none}
.ct-b2-back:hover{color:#fff}
.ct-b2-chips-s{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.ct-b2-chips-s a{padding:5px 13px;border-radius:99px;background:rgba(0,205,185,.14);border:1px solid rgba(0,205,185,.4);color:#6ff0e3;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
.ct-b2-phero h1{margin:0 0 16px;color:#fff;font-size:clamp(28px,3.8vw,50px);line-height:1.1;letter-spacing:-.025em;overflow-wrap:anywhere}
.ct-b2-lead{margin:0 0 22px;color:#c3d6e8;font-size:clamp(16px,1.5vw,19px);line-height:1.6}
.ct-b2-by{display:flex;align-items:center;gap:12px}
.ct-b2-avatar img{display:block;width:44px;height:44px;border-radius:50%;border:2px solid rgba(255,255,255,.5)}
.ct-b2-by strong{display:block;color:#fff;font-size:15px}
.ct-b2-by small{color:#9fb8cf;font-size:13px}
.ct-b2-pframe{position:relative;margin:0 14px 14px 0}
.ct-b2-pframe .ct-b2-frame{aspect-ratio:16/10;box-shadow:0 24px 60px rgba(0,0,0,.4)}
.ct-b2-single .ct-article-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(28px,4vw,56px);width:min(1180px,calc(100% - 32px));max-width:none;margin:clamp(30px,4vw,56px) auto;align-items:start}
.ct-b2-single .ct-article{min-width:0;background:#fff;border:1px solid var(--b2-line);border-radius:22px;padding:clamp(22px,4vw,52px);box-shadow:0 10px 30px rgba(17,42,61,.05)}
.ct-b2-single .ct-article-body{color:#26394a;font-size:clamp(16.5px,1.25vw,18.5px);line-height:1.85}
.ct-b2-single .ct-article-body>*:first-child{margin-top:0}
.ct-b2-single .ct-article-body p{margin:0 0 1.35em}
.ct-b2-single .ct-article-body>p:first-of-type::first-letter{float:left;margin:6px 12px 0 0;font-size:3.6em;line-height:.85;font-weight:800;color:var(--b2-blue)}
.ct-b2-single .ct-article-body h2{position:relative;margin:2.1em 0 .7em;padding-left:18px;color:var(--b2-ink);font-size:clamp(23px,2.3vw,30px);line-height:1.25;scroll-margin-top:90px}
.ct-b2-single .ct-article-body h2::before{content:"";position:absolute;left:0;top:.12em;bottom:.12em;width:6px;border-radius:6px;background:linear-gradient(var(--b2-blue),var(--b2-teal))}
.ct-b2-single .ct-article-body h3{margin:1.8em 0 .6em;color:var(--b2-ink);font-size:clamp(19px,1.8vw,23px);scroll-margin-top:90px}
.ct-b2-single .ct-article-body a{color:var(--b2-blue);text-decoration:underline;text-underline-offset:3px}
.ct-b2-single .ct-article-body img,.ct-b2-single .ct-article-body figure img{max-width:100%;height:auto;border-radius:16px;box-shadow:0 14px 34px rgba(17,42,61,.16)}
.ct-b2-single .ct-article-body figure{margin:1.8em 0}
.ct-b2-single .ct-article-body figcaption{margin-top:10px;color:var(--b2-mut);font-size:13.5px;text-align:center}
.ct-b2-single .ct-article-body blockquote{margin:1.8em 0;padding:22px 26px;border-left:6px solid var(--b2-teal);border-radius:0 16px 16px 0;background:linear-gradient(90deg,#eef7fd,#fff);color:var(--b2-ink);font-size:1.08em;font-style:italic}
.ct-b2-single .ct-article-body ul,.ct-b2-single .ct-article-body ol{margin:0 0 1.4em;padding-left:1.4em}
.ct-b2-single .ct-article-body li{margin-bottom:.5em}
.ct-b2-single .ct-article-body li::marker{color:var(--b2-blue);font-weight:800}
.ct-b2-single .ct-article-body table{display:block;width:100%;overflow-x:auto;border-collapse:collapse;margin:1.6em 0;font-size:.92em}
.ct-b2-single .ct-article-body th{background:var(--b2-navy);color:#fff;text-align:left}
.ct-b2-single .ct-article-body th,.ct-b2-single .ct-article-body td{padding:11px 14px;border:1px solid var(--b2-line)}
.ct-b2-single .ct-article-body tr:nth-child(even) td{background:#f6f9fc}
.ct-b2-single .ct-article-body pre,.ct-b2-single .ct-article-body code{background:#0b1f33;color:#d6ecff;border-radius:8px}
.ct-b2-single .ct-article-body code{padding:2px 7px;font-size:.9em}
.ct-b2-single .ct-article-body pre{padding:18px;overflow-x:auto}
.ct-b2-single .ct-article-aside{position:sticky;top:96px;display:flex;flex-direction:column;gap:14px;padding:26px;border-radius:22px;background:linear-gradient(160deg,#061523,#0d3157);color:#fff;border:0}
.ct-b2-single .ct-article-aside h2{margin:0;color:#fff;font-size:20px;line-height:1.3}
.ct-b2-single .ct-article-aside p{margin:0;color:#c3d6e8;font-size:14.5px;line-height:1.6}
.ct-b2-single .ct-article-aside .section-kicker{color:#6ff0e3}
.ct-b2-toc{padding:0 0 16px;margin-bottom:2px;border-bottom:1px solid rgba(255,255,255,.14)}
.ct-b2-toc strong{display:block;margin-bottom:10px;color:#6ff0e3;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.ct-b2-toc a{display:block;padding:7px 0 7px 12px;border-left:2px solid rgba(255,255,255,.18);color:#d3e3f2;font-size:13.5px;line-height:1.4;text-decoration:none}
.ct-b2-toc a:hover,.ct-b2-toc a.is-on{border-left-color:var(--b2-teal);color:#fff}
.ct-b2-toc a.sub{padding-left:26px;font-size:12.5px}
.ct-b2-single .ct-related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ct-b2-single .ct-related-card{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid var(--b2-line);border-radius:16px;background:#fff;text-decoration:none;color:var(--b2-ink);transition:.2s}
.ct-b2-single .ct-related-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(17,42,61,.12)}
.ct-b2-single .ct-related-img img{width:100%;height:140px;object-fit:cover;border-radius:12px}
/* ---------- responsive ---------- */
@media(max-width:1050px){.ct-b2-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ct-b2-single .ct-article-layout{grid-template-columns:1fr}.ct-b2-single .ct-article-aside{position:static}}
@media(max-width:820px){.ct-b2-card.is-featured{flex-direction:column;align-items:stretch}.ct-b2-card.is-featured .ct-b2-media{margin:0 14px 14px 0}.ct-b2-phero-in{grid-template-columns:1fr}.ct-b2-pframe{order:-1}.ct-b2-single .ct-related-grid{grid-template-columns:1fr}}
@media(max-width:620px){.ct-b2-grid{grid-template-columns:1fr}.ct-b2-search{width:100%}.ct-b2-single .ct-article{padding:20px 16px}.ct-b2-single .ct-article-body>p:first-of-type::first-letter{font-size:3em}}
@media(prefers-reduced-motion:reduce){.ct-b2-card,.ct-b2-plate,.ct-b2-frame img{transition:none}}