/* ============================================================
   CTRSpace — inner page components
   Extends css/site.css using the same design tokens
   (colors, radius, shadows, typography already defined there)
   ============================================================ */

/* ---------- "What Sets It Apart" numbered feature grid ---------- */
.apart-badge{ display:inline-flex; align-items:center; gap:10px; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--purple); border:1.5px solid rgba(123,0,255,.25); padding:8px 20px; border-radius:100px; background:rgba(123,0,255,.05); }
.apart-badge svg{ width:11px; height:11px; flex-shrink:0; }
.apart-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:56px; }
.apart-card{ position:relative; border-radius:24px; overflow:hidden; display:flex; min-height:250px; transition:transform .35s cubic-bezier(.2,.8,.2,1); }
.apart-card:hover{ transform:translateY(-4px); }
.apart-card-content{ position:relative; z-index:2; flex:0 0 56%; padding:40px 32px; display:flex; align-items:flex-start; gap:16px; }
.apart-num{ font-size:40px; font-weight:800; line-height:1; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; flex-shrink:0; }
.apart-divider{ width:2px; align-self:stretch; opacity:.18; flex-shrink:0; }
.apart-card-text h4{ font-size:20px; font-weight:800; line-height:1.28; }
.apart-card-text h4 span{ display:block; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.apart-card-text p{ margin-top:14px; font-size:14px; line-height:1.65; }
.apart-card-wedge{ position:absolute; inset:0; left:36%; clip-path:polygon(14% 0,100% 0,100% 100%,0% 100%); display:flex; align-items:center; justify-content:center; }
.apart-card-wedge::before{ content:''; position:absolute; inset:0; background-image:radial-gradient(currentColor 1px, transparent 1px); background-size:16px 16px; opacity:.14; color:var(--purple); }
.apart-dark .apart-card-wedge{ background:linear-gradient(160deg,#1A1650,#0D0B28); }
.apart-light .apart-card-wedge{ background:linear-gradient(160deg,#F1EFFB,#E9E7F8); }
.apart-icon-wrap{ position:relative; z-index:1; width:130px; height:130px; display:flex; align-items:center; justify-content:center; }
.apart-icon-wrap svg{ width:96px; height:96px; position:relative; z-index:2; filter:drop-shadow(0 16px 20px rgba(30,0,90,.28)); }
.apart-icon-shadow{ position:absolute; bottom:14px; left:50%; transform:translateX(-50%); width:74px; height:12px; border-radius:50%; background:radial-gradient(ellipse, rgba(76,0,255,.4), transparent 72%); filter:blur(1px); }
.apart-dark .apart-card-text p{ color:rgba(255,255,255,.55); }
.apart-dark .apart-divider{ background:#fff; }
.apart-light{ background:#fff; border:1px solid var(--line); color:var(--ink); }
.apart-light .apart-card-text p{ color:var(--muted); }
.apart-light .apart-divider{ background:var(--ink); }
.apart-dark{ background:linear-gradient(135deg,#0B0A1F,#151233); color:#fff; }
@media (max-width:900px){ .apart-grid{ grid-template-columns:1fr; gap:20px; } .apart-card{ flex-direction:column; min-height:auto; } .apart-card-content{ flex:1; padding:32px 26px 0; } .apart-card-wedge{ position:relative; left:0; clip-path:none; inset:auto; padding:30px 0; margin-top:24px; } }

/* ---------- Contact page "Documentation / Support / Getting Started" help cards ---------- */
.help-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; max-width:1020px; margin:0 auto; text-align:left; }
.help-card{ position:relative; background:#fff; border-radius:24px; padding:40px 28px 34px; overflow:hidden; box-shadow:0 14px 34px -18px rgba(30,10,80,.16); border:1px solid var(--line); text-align:center; transition:transform .3s ease, box-shadow .3s ease; }
.help-card:hover{ transform:translateY(-4px); box-shadow:0 20px 40px -16px rgba(30,10,80,.22); }
.help-card::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--hc-grad); border-radius:0 0 24px 24px; }
.help-card-dots{ position:absolute; top:26px; left:26px; width:56px; height:44px; background-image:radial-gradient(var(--hc-solid) 1.4px, transparent 1.4px); background-size:12px 12px; opacity:.3; }
.help-icon-wrap{ position:relative; width:110px; height:110px; margin:0 auto 26px; display:flex; align-items:center; justify-content:center; }
.help-icon-wrap::before{ content:''; position:absolute; inset:4px; border-radius:50%; background:var(--bg-lav); }
.help-icon{ position:relative; z-index:1; width:88px; height:88px; border-radius:50%; background:var(--hc-grad); display:flex; align-items:center; justify-content:center; box-shadow:0 16px 30px -12px rgba(60,20,180,.4); }
.help-icon svg{ width:36px; height:36px; }
.help-dot-a, .help-dot-b{ position:absolute; border-radius:50%; z-index:2; background:var(--hc-solid); }
.help-dot-a{ width:9px; height:9px; top:14px; right:0; }
.help-dot-b{ width:13px; height:13px; bottom:6px; left:-4px; }
.help-card h4{ font-size:22px; font-weight:800; color:var(--ink); }
.help-underline{ display:inline-flex; align-items:center; gap:5px; margin:10px 0 18px; }
.help-underline::before{ content:''; width:30px; height:3px; border-radius:2px; background:var(--hc-solid); }
.help-underline::after{ content:''; width:5px; height:5px; border-radius:50%; background:var(--hc-solid); }
.help-card p{ font-size:14.5px; color:var(--muted); line-height:1.65; }
@media (max-width:860px){ .help-cards{ grid-template-columns:1fr; gap:24px; } }
/* ---------- contact page info cards (Documentation / Support / Getting Started) ---------- */
.contact-info-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; max-width:1020px; margin:0 auto; }
.contact-info-card{ position:relative; background:#fff; border-radius:22px; padding:44px 30px 36px; box-shadow:0 16px 40px -18px rgba(30,10,80,.16); overflow:hidden; text-align:center; text-decoration:none; display:block; transition:transform .3s ease, box-shadow .3s ease; }
.contact-info-card:hover{ transform:translateY(-5px); box-shadow:0 22px 46px -16px rgba(30,10,80,.22); }
.contact-info-card::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--grad); border-radius:0 0 22px 22px; }
.contact-info-card.is-blue::after{ background:linear-gradient(90deg,#00A8FF,#3030FF); }
.contact-info-dots{ position:absolute; top:22px; left:22px; width:56px; height:44px; background-image:radial-gradient(var(--purple) 1.4px, transparent 1.4px); background-size:12px 12px; opacity:.3; }
.contact-info-icon-wrap{ position:relative; width:96px; height:96px; margin:0 auto 26px; }
.contact-info-icon-wrap::before{ content:''; position:absolute; inset:4px; border-radius:50%; background:#F3F1FB; }
.contact-info-icon{ position:relative; z-index:1; width:100%; height:100%; border-radius:50%; background:var(--grad); display:flex; align-items:center; justify-content:center; box-shadow:0 14px 28px -10px rgba(76,0,255,.4); }
.contact-info-card.is-blue .contact-info-icon{ background:linear-gradient(135deg,#00A8FF,#3030FF); box-shadow:0 14px 28px -10px rgba(0,90,255,.4); }
.contact-info-icon svg{ width:36px; height:36px; }
.contact-info-dot-a, .contact-info-dot-b{ position:absolute; border-radius:50%; background:var(--purple); }
.contact-info-card.is-blue .contact-info-dot-a, .contact-info-card.is-blue .contact-info-dot-b{ background:#00A8FF; }
.contact-info-dot-a{ width:9px; height:9px; bottom:6px; left:-2px; }
.contact-info-dot-b{ width:6px; height:6px; top:14px; right:-4px; }
.contact-info-title{ font-size:22px; font-weight:800; color:var(--ink); }
.contact-info-underline{ display:inline-flex; align-items:center; gap:6px; margin:10px 0 18px; }
.contact-info-underline span{ display:block; width:32px; height:3px; border-radius:2px; background:var(--grad); }
.contact-info-underline i{ display:block; width:5px; height:5px; border-radius:50%; background:var(--purple); }
.contact-info-card.is-blue .contact-info-underline span, .contact-info-card.is-blue .contact-info-underline i{ background:linear-gradient(90deg,#00A8FF,#3030FF); }
.contact-info-desc{ font-size:14.5px; color:var(--muted); line-height:1.65; }
@media (max-width:820px){ .contact-info-grid{ grid-template-columns:1fr; max-width:380px; } }

/* ---------- Team grid (About page) ---------- */
.team-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px 28px; margin-top:56px; }
.team-card{ text-align:center; }
.team-photo{ position:relative; border-radius:20px; overflow:hidden; aspect-ratio:4/5; box-shadow:var(--shadow); }
.team-photo img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.team-card:hover .team-photo img{ transform:scale(1.06); }
.team-card h4{ margin-top:18px; font-size:17px; font-weight:800; color:var(--ink); }
.team-card span{ display:block; margin-top:4px; font-size:13px; color:var(--purple); font-weight:700; }
@media (max-width:760px){ .team-grid{ grid-template-columns:1fr 1fr; gap:24px 20px; } }
@media (max-width:480px){ .team-grid{ grid-template-columns:1fr; max-width:280px; margin-left:auto; margin-right:auto; } }

/* ---------- Publishing Blocks page: intro features + editorial workflow mockup ---------- */
.pub-feature{ display:flex; gap:14px; margin-top:18px; align-items:flex-start; }
.pub-feature-icon{ width:40px; height:40px; border-radius:12px; background:linear-gradient(135deg,var(--blue),var(--purple)); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 8px 18px -6px rgba(80,40,200,.4); }
.pub-feature-icon svg{ width:18px; height:18px; }
.pub-feature h5{ font-size:14.5px; font-weight:800; color:var(--ink); }
.pub-feature p{ margin-top:2px; font-size:13px; color:var(--muted); }

.flow-split{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:60px; align-items:start; margin-top:56px; }
.flow-item{ display:flex; gap:16px; }
.flow-item + .flow-item{ margin-top:32px; }
.flow-item-icon{ width:46px; height:46px; border-radius:14px; background:var(--bg-lav); color:var(--purple); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.flow-item-icon svg{ width:20px; height:20px; }
.flow-item h5{ font-size:16px; font-weight:800; color:var(--ink); }
.flow-item p{ margin-top:6px; font-size:13.5px; color:var(--muted); line-height:1.6; max-width:320px; }
.flow-item a{ display:inline-flex; align-items:center; gap:6px; margin-top:10px; font-size:13px; font-weight:800; color:var(--purple); text-decoration:none; }
.flow-item a svg{ width:13px; height:13px; transition:transform .25s ease; }
.flow-item a:hover svg{ transform:translateX(3px); }

.flow-mockup{ display:flex; flex-direction:column; gap:16px; }
.flow-mock-card{ background:#fff; border-radius:18px; border:1px solid var(--line); box-shadow:var(--shadow-lg); padding:20px; }
.flow-check{ width:20px; height:20px; border-radius:50%; background:var(--grad); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.flow-check svg{ width:11px; height:11px; }
.flow-stat-label{ font-size:11.5px; color:var(--muted); }
.flow-stat-value{ display:block; font-size:15px; font-weight:800; color:var(--ink); margin-top:2px; }
.flow-table{ width:100%; font-size:12.5px; border-collapse:collapse; }
.flow-table th{ text-align:left; padding-bottom:10px; font-weight:700; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.03em; }
.flow-table td{ padding:9px 0; font-weight:600; color:var(--ink); border-top:1px solid var(--line); }
.flow-status{ display:inline-flex; align-items:center; gap:6px; }
.flow-status::before{ content:''; width:7px; height:7px; border-radius:50%; background:#22B573; }
.flow-status.draft::before{ background:#F5A623; }
@media (max-width:900px){ .flow-split{ grid-template-columns:1fr; gap:40px; } }
.flow-timeline{ position:relative; }
.flow-timeline::before{ content:''; position:absolute; top:23px; bottom:23px; left:23px; width:2px; background:linear-gradient(180deg, var(--blue), var(--purple) 50%, var(--magenta)); opacity:.22; }
.flow-step{ width:46px; height:46px; border-radius:50%; background:var(--grad); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-weight:800; font-size:17px; position:relative; z-index:1; box-shadow:0 10px 24px rgba(123,0,255,.28); }
@media (max-width:640px){ .flow-timeline::before{ left:20px; } .flow-step{ width:40px; height:40px; font-size:15px; } }

/* ---------- Blog article end section: FAQ, Tags, Share, Author, Comments ---------- */
.article-tag{ display:inline-flex; align-items:center; padding:9px 18px; border-radius:100px; background:#fff; border:1px solid var(--line); font-size:13px; font-weight:700; color:var(--ink-soft); text-decoration:none; transition:all .2s ease; }
.article-tag:hover{ background:var(--grad-soft); color:var(--purple); border-color:transparent; }

.share-block{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; padding:28px 32px; border-radius:20px; background:var(--bg-lav); }
.share-btn{ width:44px; height:44px; border-radius:12px; background:#fff; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--ink-soft); transition:all .2s ease; flex-shrink:0; }
.share-btn:hover{ background:var(--grad); color:#fff; border-color:transparent; transform:translateY(-2px); }

.author-card{ display:flex; gap:22px; align-items:flex-start; padding:32px; border-radius:22px; border:1px solid var(--line); background:#fff; }
.author-card img{ width:72px; height:72px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.author-card-eyebrow{ font-size:12px; font-weight:800; color:var(--purple); text-transform:uppercase; letter-spacing:.05em; }
.author-card h4{ margin-top:6px; font-size:18px; font-weight:800; color:var(--ink); }
.author-card p{ margin-top:8px; font-size:14px; color:var(--muted); line-height:1.65; }

.comment-item{ display:flex; gap:16px; padding:22px 0; border-bottom:1px solid var(--line); }
.comment-item:first-child{ padding-top:0; }
.comment-avatar{ width:44px; height:44px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff; font-size:14px; background:var(--grad); }
.comment-body{ flex:1; min-width:0; }
.comment-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.comment-head b{ font-size:14.5px; color:var(--ink); }
.comment-head span{ font-size:12.5px; color:var(--muted); }
.comment-body p{ margin-top:6px; font-size:14px; color:var(--ink-soft); line-height:1.65; }
.comment-signin{ margin-top:24px; padding:22px; border-radius:16px; background:var(--bg-lav); text-align:center; font-size:14px; color:var(--muted); }
.comment-signin a{ color:var(--purple); font-weight:800; text-decoration:none; }
@media (max-width:640px){ .share-block{ flex-direction:column; align-items:flex-start; } .author-card{ flex-direction:column; align-items:flex-start; } }

/* ---------- Dark FAQ card (Support page) ---------- */
.faq-dark-card{ position:relative; border-radius:32px; padding:70px 56px; background:var(--ink); overflow:hidden; }
.faq-dark-blob{ position:absolute; border-radius:50%; filter:blur(100px); z-index:0; }
.faq-dark-blob.f1{ width:400px; height:400px; background:#00A8FF; top:-140px; left:-100px; opacity:.35; }
.faq-dark-blob.f2{ width:400px; height:400px; background:#D000FF; bottom:-160px; right:-100px; opacity:.35; }
.faq-dark-head{ position:relative; z-index:1; text-align:center; max-width:600px; margin:0 auto; }
.faq-dark-eyebrow{ font-size:13px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.faq-dark-head h2{ margin-top:10px; font-size:clamp(26px,3.2vw,38px) !important; font-weight:800 !important; color:#fff !important; background:none !important; -webkit-text-fill-color:#fff !important; }
.faq-dark-head p{ margin-top:14px; color:rgba(255,255,255,.55); font-size:15px; line-height:1.7; }
.faq-dark-body{ position:relative; z-index:1; display:grid; grid-template-columns:0.8fr 1.2fr; gap:60px; align-items:center; margin-top:60px; }
.faq-dark-illustration{ position:relative; height:420px; display:flex; align-items:center; justify-content:center; }
.faq-dark-item{ border-radius:16px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); overflow:hidden; }
.faq-dark-item + .faq-dark-item{ margin-top:14px; }
.faq-dark-q{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px; cursor:pointer; font-weight:700; font-size:14.5px; color:#fff; }
.faq-dark-q-icon{ width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#fff; transition:all .25s ease; }
.faq-dark-q-icon svg{ transition:transform .3s ease; }
.faq-dark-item.open .faq-dark-q-icon{ background:var(--grad); }
.faq-dark-item.open .faq-dark-q-icon svg{ transform:rotate(135deg); }
.faq-dark-a{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.faq-dark-item.open .faq-dark-a{ max-height:260px; }
.faq-dark-a p{ padding:0 24px 22px; color:rgba(255,255,255,.55); font-size:13.5px; line-height:1.75; }
@media (max-width:900px){ .faq-dark-card{ padding:50px 26px; } .faq-dark-body{ grid-template-columns:1fr; gap:36px; } .faq-dark-illustration{ height:280px; } }

/* ---------- Publish section: rich dashboard mockup with labeled callouts ---------- */
.pub-mockup-wrap{ position:relative; padding:0 10px; }
.pub-browser{ background:#fff; border-radius:20px; box-shadow:0 30px 60px -20px rgba(20,10,70,.25); border:1px solid var(--line); overflow:hidden; position:relative; z-index:1; }
.pub-browser-nav{ display:flex; align-items:center; justify-content:space-between; padding:14px 20px; border-bottom:1px solid var(--line); }
.pub-browser-logo{ font-weight:800; font-size:14px; color:var(--ink); }
.pub-browser-logo b{ color:var(--purple); }
.pub-browser-menu{ display:flex; gap:16px; font-size:11px; font-weight:700; color:var(--muted); }
.pub-browser-menu .active{ color:var(--purple); }
.pub-browser-actions{ display:flex; align-items:center; gap:10px; }
.pub-browser-btn{ background:var(--grad); color:#fff; font-size:10.5px; font-weight:800; padding:6px 14px; border-radius:100px; }
.pub-body{ display:grid; grid-template-columns:1fr 160px; gap:16px; padding:16px; }
.pub-hero-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:8px; }
.pub-hero-card{ position:relative; border-radius:10px; overflow:hidden; background:#EFEDF8; }
.pub-hero-card img{ width:100%; height:100%; object-fit:cover; display:block; }
.pub-hero-main{ min-height:190px; }
.pub-hero-main-overlay{ position:absolute; inset:0; background:linear-gradient(to top, rgba(10,5,30,.85), transparent 55%); display:flex; flex-direction:column; justify-content:flex-end; padding:12px; color:#fff; }
.pub-hero-cat{ display:inline-block; background:var(--grad); font-size:7.5px; font-weight:800; padding:3px 7px; border-radius:4px; margin-bottom:6px; width:fit-content; }
.pub-hero-title{ font-size:12px; font-weight:800; line-height:1.28; }
.pub-hero-meta{ margin-top:5px; font-size:7.5px; opacity:.75; }
.pub-hero-side{ display:flex; flex-direction:column; gap:8px; }
.pub-side-card{ border-radius:9px; overflow:hidden; border:1px solid var(--line); }
.pub-side-card img{ width:100%; height:52px; object-fit:cover; display:block; }
.pub-side-card-body{ padding:7px 9px; }
.pub-side-card-body h6{ font-size:8.5px; font-weight:800; color:var(--ink); line-height:1.3; }
.pub-side-card-body span{ font-size:7px; color:var(--muted); }
.pub-cats-head{ display:flex; align-items:center; justify-content:space-between; margin-top:16px; }
.pub-cats-head h5{ font-size:10.5px; font-weight:800; color:var(--ink); }
.pub-cats-head span{ font-size:8.5px; color:var(--purple); font-weight:700; }
.pub-cats-row{ display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin-top:9px; }
.pub-cat-pill{ text-align:center; padding:9px 4px; border-radius:9px; background:#F7F6FC; }
.pub-cat-pill-icon{ width:20px; height:20px; border-radius:6px; margin:0 auto 5px; display:flex; align-items:center; justify-content:center; }
.pub-cat-pill h6{ font-size:7.5px; font-weight:800; color:var(--ink); }
.pub-cat-pill span{ font-size:6px; color:var(--muted); }
.pub-trending-head{ margin-top:16px; font-size:10.5px; font-weight:800; color:var(--ink); }
.pub-trend-item{ display:flex; align-items:center; gap:8px; margin-top:9px; }
.pub-trend-num{ width:15px; height:15px; border-radius:50%; background:var(--grad); color:#fff; font-size:7px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.pub-trend-thumb{ width:34px; height:28px; border-radius:6px; object-fit:cover; flex-shrink:0; }
.pub-trend-text h6{ font-size:8px; font-weight:700; color:var(--ink); line-height:1.3; }
.pub-trend-text span{ font-size:6.5px; color:var(--muted); }
.pub-sidebar{ display:flex; flex-direction:column; gap:10px; }
.pub-sb-card{ border:1px solid var(--line); border-radius:10px; padding:10px 11px; }
.pub-sb-card h6{ font-size:8.5px; font-weight:800; color:var(--ink); margin-bottom:7px; }
.pub-sb-toc-item{ font-size:7px; color:var(--muted); padding:2.5px 0; display:flex; gap:5px; }
.pub-sb-toc-item b{ color:var(--purple); }
.pub-sb-pop-item{ display:flex; gap:6px; align-items:center; padding:4px 0; }
.pub-sb-pop-item img{ width:24px; height:24px; border-radius:5px; object-fit:cover; flex-shrink:0; }
.pub-sb-pop-item h6{ font-size:7px; font-weight:700; color:var(--ink); line-height:1.2; margin:0; }
.pub-sb-pop-item span{ font-size:6px; color:var(--muted); }
.pub-sb-cta{ background:var(--grad); border-radius:10px; padding:13px; color:#fff; }
.pub-sb-cta h6{ font-size:9.5px; font-weight:800; margin-bottom:4px; }
.pub-sb-cta p{ font-size:7px; opacity:.85; line-height:1.4; margin-bottom:9px; }
.pub-sb-cta a{ display:inline-block; background:#fff; color:var(--purple); font-size:7.5px; font-weight:800; padding:6px 11px; border-radius:100px; }
.pub-callout{ position:absolute; z-index:5; display:flex; align-items:center; gap:8px; background:#fff; border-radius:12px; padding:7px 14px; box-shadow:0 10px 24px -8px rgba(20,10,70,.25); font-size:11px; font-weight:800; color:var(--purple); white-space:nowrap; }
.pub-callout-blue{ color:#1C5FE0; }
.pub-callout-line{ position:absolute; border-top:2px dashed rgba(123,0,255,.4); }
.pub-callout-dot{ position:absolute; width:7px; height:7px; border-radius:50%; background:var(--purple); }
@media (max-width:900px){ .pub-body{ grid-template-columns:1fr; } .pub-sidebar{ flex-direction:row; flex-wrap:wrap; } .pub-sidebar > *{ flex:1; min-width:150px; } .pub-callout{ display:none; } }
@media (max-width:640px){ .pub-browser-menu{ display:none; } }

.nav-item > a.is-active, .nav-item > button.is-active{ color:var(--purple); }

/* ---------- consistent 350px page banner (breadcrumb + heading + subheading, center-aligned) ---------- */
.page-banner{ position:relative; min-height:350px; display:flex; align-items:center; justify-content:center; padding:150px 0 40px; overflow:hidden; text-align:center; background:linear-gradient(150deg, #F0F8FF, #F6F5FF 55%, #FBF3FF); }
.page-banner::before{ content:''; position:absolute; inset:0; background:radial-gradient(55% 65% at 12% 0%, rgba(58,180,255,.12), transparent 70%), radial-gradient(45% 60% at 100% 100%, rgba(208,0,255,.1), transparent 70%); pointer-events:none; }
.page-banner::after{ content:''; position:absolute; right:-60px; top:-60px; width:220px; height:220px; border-radius:50%; border:1px dashed rgba(123,0,255,.16); pointer-events:none; }
.page-banner .wrap{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; max-width:760px; margin:0 auto; }
.page-banner-crumb{ display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; margin:0 auto 16px; }
.page-banner-crumb a{ color:var(--muted); transition:color .2s ease; }
.page-banner-crumb a:hover{ color:var(--purple); }
.page-banner-crumb .current{ color:var(--purple); font-weight:800; }
.page-banner h1{ font-size:clamp(30px,4vw,46px) !important; font-weight:700 !important; line-height:1.15; letter-spacing:-0.02em; margin:0 auto; max-width:720px; }
.page-banner-sub{ margin:16px auto 0; max-width:720px; color:var(--muted); font-size:17px; line-height:1.65; }
@media (max-width:640px){ .page-banner{ min-height:280px; padding:130px 0 30px; } .page-banner-sub{ font-size:15.5px; } }

/* ---------- consistent hero-to-content spacing rhythm ---------- */
/* The page-banner already carries 40px of bottom padding, so the section
   immediately following it uses a matched 40px top (not the default 150px
   section rhythm, and not the ad-hoc 0/10/20/60px values that were previously
   scattered across pages) — giving every inner page the same banner-to-content
   gap while still using the standard 150/100/76 rhythm between all other
   sections further down the page. */
.page-banner + section{ padding-top:40px !important; }
@media (max-width:1024px){ .page-banner + section{ padding-top:32px !important; } }
@media (max-width:640px){ .page-banner + section{ padding-top:24px !important; } }

.page-banner + section.contact-content-top{ padding-top:150px !important; }
@media (max-width:1024px){ .page-banner + section.contact-content-top{ padding-top:100px !important; } }
@media (max-width:640px){ .page-banner + section.contact-content-top{ padding-top:70px !important; } }

.heading-nowrap{ white-space:nowrap; }
@media (max-width:760px){ .heading-nowrap{ white-space:normal; } }

/* ---------- lightweight intro block that follows the banner on pages that need supporting copy ---------- */
.page-intro{ padding:50px 0 0; text-align:center; }
.page-intro p.lead{ margin:0 auto; max-width:640px; color:var(--muted); font-size:16.5px; line-height:1.7; }
.page-intro-actions{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:26px; flex-wrap:wrap; }

/* ---------- simple page hero (legacy, retained for reference) ---------- */
.page-hero{ position:relative; padding:150px 0 70px; text-align:center; overflow:hidden; }
.page-hero .wrap{ position:relative; z-index:1; }
.page-hero::before{ content:''; position:absolute; inset:0; background:radial-gradient(60% 60% at 50% 0%, rgba(123,0,255,.07), transparent 70%); pointer-events:none; }
.page-hero h1{ font-size:clamp(32px,4.6vw,54px) !important; font-weight:700 !important; line-height:1.12; letter-spacing:-0.02em; margin-top:16px; max-width:900px; margin-left:auto; margin-right:auto; }
.page-hero p.lead{ margin:20px auto 0; max-width:640px; color:var(--muted); font-size:17px; line-height:1.65; }
.page-hero-sm{ padding-bottom:56px; }
.page-hero-actions{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:30px; flex-wrap:wrap; }

/* ---------- breadcrumb ---------- */
.breadcrumb{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; font-weight:600; color:var(--muted); }
.breadcrumb a{ color:var(--muted); transition:color .2s ease; }
.breadcrumb a:hover{ color:var(--purple); }
.breadcrumb svg{ flex-shrink:0; opacity:.5; }
.breadcrumb .current{ color:var(--ink); font-weight:700; }

/* ---------- search + filter bar (catalog pages) ---------- */
.catalog-toolbar{ display:flex; align-items:center; gap:14px; margin:0 0 28px; flex-wrap:wrap; }
.catalog-search{ display:flex; align-items:center; gap:12px; flex:1 1 260px; padding:16px 22px; border-radius:100px; border:1px solid var(--line); background:#fff; box-shadow:0 4px 16px rgba(20,10,70,.05); }
.catalog-search svg{ color:var(--purple); flex-shrink:0; }
.catalog-search input{ border:none; outline:none; flex:1; min-width:0; font-size:14.5px; color:var(--ink); background:transparent; }
.catalog-search input::placeholder{ color:var(--muted); }
.catalog-sort-wrap{ position:relative; flex-shrink:0; }
.catalog-sort{ appearance:none; -webkit-appearance:none; -moz-appearance:none; padding:15px 42px 15px 22px; border-radius:100px; border:1px solid var(--line); background:#fff; font-size:14px; font-weight:700; color:var(--ink); cursor:pointer; }
.catalog-sort-wrap::after{ content:''; position:absolute; right:19px; top:50%; width:8px; height:8px; border-right:2px solid var(--ink-soft); border-bottom:2px solid var(--ink-soft); transform:translateY(-70%) rotate(45deg); pointer-events:none; }
.catalog-filter-icon-btn{ width:52px; height:52px; border-radius:16px; border:1px solid var(--line); background:#fff; display:flex; align-items:center; justify-content:center; color:var(--ink-soft); flex-shrink:0; }
.filter-btn{ display:inline-flex; align-items:center; gap:8px; }
.filter-btn svg{ flex-shrink:0; }
.catalog-filters{ display:flex; gap:10px; flex-wrap:wrap; }

/* ---------- editorial split (feature groups on Features page) ---------- */
.editorial-row{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
.editorial-row.rev{ direction:rtl; } .editorial-row.rev > *{ direction:ltr; }
.editorial-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--purple); }
.editorial-list{ margin-top:24px; display:flex; flex-direction:column; gap:14px; }
.editorial-list li{ display:flex; align-items:flex-start; gap:12px; font-size:15px; color:var(--ink-soft); font-weight:600; }
.editorial-list svg{ flex-shrink:0; margin-top:2px; color:#fff; background:var(--grad); border-radius:50%; padding:3px; width:20px; height:20px; box-shadow:0 6px 14px -4px rgba(123,0,255,.5); }
.editorial-panel{ border-radius:26px; border:1px solid var(--line); background:linear-gradient(150deg,#fff,var(--bg-lav) 120%); box-shadow:var(--shadow); padding:34px; }
@media (max-width:900px){ .editorial-row{ grid-template-columns:1fr; gap:40px; } .editorial-row.rev{ direction:ltr; } }

/* ---------- generic icon-feature grid ---------- */
.feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.feat-grid-5{ grid-template-columns:repeat(5,1fr); }
.feat-item{ padding:26px 24px; border-radius:20px; border:1px solid var(--line); background:#fff; box-shadow:var(--shadow); transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease; }
.feat-item:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.feat-item-icon{ width:48px; height:48px; border-radius:14px; background:linear-gradient(135deg,var(--blue),var(--purple)); color:#fff; display:flex; align-items:center; justify-content:center; margin-bottom:16px; box-shadow:0 10px 22px -8px rgba(80,40,200,.4); }
.feat-item h4{ font-size:15.5px; font-weight:800; color:var(--ink); }
.feat-item p{ margin-top:6px; font-size:13px; color:var(--muted); line-height:1.6; }
@media (max-width:900px){ .feat-grid{ grid-template-columns:1fr 1fr; } .feat-grid-5{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .feat-grid{ grid-template-columns:1fr; } .feat-grid-5{ grid-template-columns:1fr 1fr; } }

/* ---------- block preview (Publishing Blocks page) ---------- */
.block-showcase{ display:flex; flex-direction:column; gap:100px; }
.block-row{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:60px; align-items:start; }
.block-row.rev{ grid-template-columns:1.15fr 0.85fr; }
.block-row.rev .block-preview{ order:2; }
.block-tag{ display:inline-flex; align-items:center; gap:8px; font-size:11.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--purple); background:var(--grad-soft); border:1px solid rgba(123,0,255,.16); padding:7px 14px; border-radius:100px; }
.block-row h3{ font-size:26px; font-weight:800; margin-top:16px; color:var(--ink); }
.block-row p{ margin-top:12px; color:var(--muted); font-size:15px; line-height:1.7; max-width:440px; }
.block-points{ margin-top:18px; display:flex; flex-direction:column; gap:10px; max-width:440px; }
.block-points li{ display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600; color:var(--ink-soft); }
.block-points li::before{ content:''; flex-shrink:0; width:6px; height:6px; border-radius:50%; background:var(--grad); }
.block-cta{ display:inline-flex; align-items:center; gap:8px; margin-top:22px; font-size:14px; font-weight:800; color:var(--purple); text-decoration:none; }
.block-cta svg{ width:15px; height:15px; transition:transform .25s ease; }
.block-cta:hover svg{ transform:translateX(4px); }
.block-preview{ border-radius:22px; border:1px solid var(--line); background:#fff; box-shadow:var(--shadow-lg); padding:22px; }
.bp-featured{ display:flex; gap:14px; padding-bottom:14px; border-bottom:1px solid var(--line); margin-bottom:14px; }
.bp-featured .thumb{ width:110px; height:78px; border-radius:12px; background:var(--bg-lav); flex-shrink:0; }
.bp-featured .lines{ flex:1; }
.bp-line{ height:8px; border-radius:4px; background:var(--line); margin-bottom:8px; }
.bp-line.w60{ width:60%; } .bp-line.w80{ width:80%; } .bp-line.w40{ width:40%; } .bp-line.title{ height:11px; background:#DCD3FA; width:85%; }
.bp-list-item{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); }
.bp-list-item:last-child{ border-bottom:none; }
.bp-list-item .thumb{ width:52px; height:40px; border-radius:8px; background:var(--bg-lav); flex-shrink:0; }
.bp-rank{ width:26px; height:26px; border-radius:50%; background:var(--grad); color:#fff; font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.bp-toc{ display:flex; flex-direction:column; gap:4px; }
.bp-toc a{ position:relative; display:flex; align-items:center; justify-content:space-between; padding:9px 12px 9px 18px; border-radius:10px; font-size:13px; font-weight:600; color:var(--ink-soft); transition:background .2s ease, color .2s ease; }
.bp-toc a::before{ content:''; position:absolute; left:0; top:4px; bottom:4px; width:3px; border-radius:3px; background:var(--grad); opacity:.25; transition:opacity .2s ease; }
.bp-toc a:hover{ background:var(--bg-lav); color:var(--purple); }
.bp-toc a:hover::before{ opacity:.6; }
.bp-toc a.active{ background:var(--bg-lav); color:var(--purple); font-weight:800; }
.bp-toc a.active::before{ opacity:1; }
.bp-cta{ border-radius:16px; background:linear-gradient(135deg,var(--blue),var(--purple)); color:#fff; padding:22px; text-align:center; }
.bp-cta h5{ font-size:15px; font-weight:800; } .bp-cta p{ font-size:12.5px; opacity:.85; margin-top:4px; }
.bp-cta .btn{ margin-top:14px; background:#fff; color:var(--purple); padding:10px 20px; font-size:13px; }
.bp-compare{ width:100%; border-collapse:collapse; font-size:13px; }
.bp-compare th, .bp-compare td{ padding:10px 12px; text-align:left; border-bottom:1px solid var(--line); }
.bp-compare th{ color:var(--muted); font-weight:700; font-size:11.5px; text-transform:uppercase; letter-spacing:.03em; }
.bp-compare td{ font-weight:600; color:var(--ink); }
.bp-compare .yes{ color:#22B573; } .bp-compare .no{ color:#C7C6DA; }
@media (max-width:900px){ .block-row, .block-row.rev{ grid-template-columns:1fr; gap:26px; } .block-row.rev .block-preview{ order:0; } }

/* ---------- blog cards ---------- */
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.blog-card{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:22px; overflow:hidden; background:#fff; transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease; }
.blog-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.blog-card-thumb{ aspect-ratio:16/10; background:var(--bg-lav); position:relative; overflow:hidden; }
.blog-card-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.blog-card:hover .blog-card-thumb img{ transform:scale(1.06); }
.blog-card-cat{ position:absolute; top:14px; left:14px; padding:6px 13px; border-radius:100px; font-size:11px; font-weight:800; color:#fff; background:var(--grad); }
.blog-card-body{ padding:22px; flex:1; display:flex; flex-direction:column; }
.blog-card-meta{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); font-weight:600; }
.blog-card h4{ font-size:17px; font-weight:800; margin-top:10px; line-height:1.35; color:var(--ink); }
.blog-card p{ margin-top:8px; font-size:13.5px; color:var(--muted); line-height:1.6; flex:1; }
.blog-card-link{ margin-top:16px; display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:800; color:var(--purple); }
.blog-card-link svg{ transition:transform .25s ease; }
.blog-card:hover .blog-card-link svg{ transform:translateX(3px); }
@media (max-width:900px){ .blog-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .blog-grid{ grid-template-columns:1fr; } }

.blog-featured{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; border-radius:28px; border:1px solid var(--line); background:#fff; box-shadow:var(--shadow); overflow:hidden; margin-bottom:0; }
.blog-featured-media{ aspect-ratio:4/3; background:var(--bg-lav); overflow:hidden; }
.blog-featured-media img{ width:100%; height:100%; object-fit:cover; }
.blog-featured-body{ padding:12px 44px 12px 4px; }
@media (max-width:900px){ .blog-featured{ grid-template-columns:1fr; } .blog-featured-body{ padding:0 28px 28px; } }

/* ---------- article (blog details) ---------- */
.article-layout{ display:grid; grid-template-columns:1fr 280px; gap:60px; align-items:start; text-align:left; }
.article-layout > *{ min-width:0; }
.article-left{ min-width:0; }
.article-header{ margin:0 0 36px; text-align:left; }
.article-header h1{ font-size:clamp(28px,4vw,44px) !important; font-weight:700 !important; margin-top:16px; line-height:1.2; }
.article-meta{ display:flex; align-items:center; justify-content:flex-start; gap:18px; margin-top:16px; font-size:13.5px; color:var(--muted); font-weight:600; flex-wrap:wrap; }
.article-meta span{ display:inline-flex; align-items:center; gap:6px; }
.article-featured-img{ border-radius:24px; overflow:hidden; margin:0 0 48px; width:100%; height:500px; box-shadow:var(--shadow-lg); }
.article-featured-img img{ width:100%; height:100%; display:block; object-fit:cover; }
.article-body{ max-width:none; color:var(--ink-soft); font-size:16.5px; line-height:1.85; background:#fff; border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow); padding:44px 48px; }
@media (max-width:640px){ .article-body{ padding:28px 22px; } }
.article-body h2{ font-size:27px !important; font-weight:800 !important; margin:52px 0 18px; color:var(--ink); background:none; -webkit-text-fill-color:var(--ink); letter-spacing:-.01em; }
.article-body h2:first-child{ margin-top:0; }
.article-body h3{ font-size:20px !important; font-weight:800 !important; margin:34px 0 12px; color:var(--ink); background:none; -webkit-text-fill-color:var(--ink); }
.article-body p{ margin-bottom:20px; }
.article-body ul{ margin:0 0 20px 20px; display:flex; flex-direction:column; gap:8px; }
.article-body li{ list-style:disc; }
.article-inline-cta{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin:36px 0; padding:26px 30px; border-radius:20px; background:linear-gradient(135deg,var(--blue),var(--purple)); color:#fff; }
.article-inline-cta h5{ font-size:16px; font-weight:800; } .article-inline-cta p{ font-size:13px; opacity:.85; margin:0; }
.article-inline-cta .btn{ background:#fff; color:var(--purple); flex-shrink:0; }
.article-sidebar{ position:sticky; top:100px; display:flex; flex-direction:column; gap:26px; }
.sidebar-card{ border:1px solid var(--line); border-radius:18px; padding:22px; background:#fff; }
.sidebar-card h6{ font-size:12px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; }
.article-share{ display:flex; gap:10px; }
.article-share a{ width:36px; height:36px; border-radius:50%; background:var(--bg-lav); color:var(--purple); display:flex; align-items:center; justify-content:center; transition:.25s; }
.article-share a:hover{ background:var(--grad); color:#fff; transform:translateY(-2px); }

/* Article page — modern prev/next navigation */
/* ---------- Previous/Next article navigation: true 3-column grid (left | divider | right) ---------- */
.article-nav2{ position:relative; display:grid; grid-template-columns:1fr 76px 1fr; align-items:stretch; min-height:300px; margin:48px 0 150px; padding:0; border-radius:30px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); overflow:hidden; }
.an2-wave-a{ position:absolute; left:0; top:0; width:50%; height:100%; background:radial-gradient(ellipse at 25% 50%, rgba(123,0,255,.05), transparent 72%); z-index:0; pointer-events:none; }
.an2-wave-b{ position:absolute; right:0; top:0; width:50%; height:100%; background:radial-gradient(ellipse at 75% 50%, rgba(58,180,255,.05), transparent 72%); z-index:0; pointer-events:none; }

.an2-side{ position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:20px; min-width:0; padding:40px; text-decoration:none; }
.an2-arrow-box{ width:76px; height:76px; border-radius:20px; flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:transform .25s ease; }
.an2-arrow-prev{ background:linear-gradient(135deg,#EFE7FF,#DCC9FF); color:var(--purple); }
.an2-arrow-next{ background:linear-gradient(135deg,#DEEDFF,#BFDDFF); color:#1C5FE0; }
.an2-prev:hover .an2-arrow-box{ transform:translateX(-4px); }
.an2-next:hover .an2-arrow-box{ transform:translateX(4px); }

.an2-content{ min-width:0; flex:1; text-align:left; }
.an2-next .an2-content{ text-align:right; }
.an2-label{ position:relative; display:inline-block; font-size:13px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--purple); padding-bottom:9px; margin-bottom:14px; }
.an2-next .an2-label{ color:#1C5FE0; }
.an2-label::after{ content:''; position:absolute; left:0; bottom:0; width:32px; height:2.5px; border-radius:2px; background:var(--purple); }
.an2-next .an2-label::after{ left:auto; right:0; background:#1C5FE0; }
.an2-content h5{ font-size:27px; font-weight:800; color:var(--ink); line-height:1.32; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.an2-read{ display:inline-flex; align-items:center; gap:5px; margin-top:16px; font-size:14.5px; font-weight:700; color:var(--purple); }
.an2-next .an2-read{ color:#1C5FE0; flex-direction:row-reverse; }

.an2-divider{ position:relative; z-index:1; display:flex; align-items:stretch; justify-content:center; padding:36px 0; }
.an2-divider-line{ width:1px; background:var(--line); }
.an2-divider-circle{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:56px; height:56px; border-radius:50%; background:#fff; box-shadow:0 10px 26px rgba(20,10,70,.12); display:flex; align-items:center; justify-content:center; color:var(--purple); z-index:2; }

@media (max-width:1024px){
  .article-nav2{ grid-template-columns:1fr 60px 1fr; min-height:260px; }
  .an2-side{ padding:30px 26px; gap:16px; }
  .an2-arrow-box{ width:60px; height:60px; border-radius:16px; }
  .an2-content h5{ font-size:21px; }
  .an2-divider-circle{ width:46px; height:46px; }
}
@media (max-width:760px){
  .article-nav2{ grid-template-columns:1fr; }
  .an2-divider{ display:none; }
  .an2-side{ padding:26px 24px; justify-content:flex-start; }
  .an2-side + .an2-side{ border-top:1px solid var(--line); }
  .an2-next{ flex-direction:row; text-align:left; }
  .an2-next .an2-content{ text-align:left; }
  .an2-next .an2-label::after{ left:0; right:auto; }
  .an2-next .an2-read{ flex-direction:row; }
}

.article-nav{ display:flex; justify-content:space-between; gap:20px; margin:60px auto 0; max-width:720px; padding-top:30px; border-top:1px solid var(--line); }
.article-nav a{ display:flex; flex-direction:column; gap:6px; max-width:45%; }
.article-nav a:last-child{ text-align:right; align-items:flex-end; }
.article-nav small{ font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--purple); }
.article-nav span{ font-size:14.5px; font-weight:700; color:var(--ink); }
@media (max-width:960px){ .article-layout{ grid-template-columns:1fr; } .article-sidebar{ position:static; flex-direction:column; } .sidebar-card{ width:100%; } .article-featured-img{ width:100%; height:380px; } }
@media (max-width:640px){ .article-featured-img{ height:280px; } }

/* Article page — category badge + updated date */
.article-cat-badge{ display:inline-flex; align-items:center; gap:6px; padding:7px 15px; border-radius:100px; font-size:11.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; background:var(--bg-lav); color:var(--purple); margin-bottom:16px; }

/* Article page — modern badge pill + meta info card */
.article-badge-pill{ display:inline-flex; align-items:center; gap:12px; padding:8px 22px 8px 8px; border-radius:100px; background:#fff; border:1px solid var(--line); box-shadow:0 4px 16px rgba(20,10,70,.06); margin-bottom:22px; }
.article-badge-pill .badge-icon-circle{ width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,#3AB4FF,#7B00FF); display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; }
.article-badge-pill .badge-label{ font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--purple); font-size:13.5px; }
.article-badge-pill .badge-dot{ width:6px; height:6px; border-radius:50%; background:var(--purple); flex-shrink:0; }

.article-meta-card{ display:flex; align-items:center; flex-wrap:wrap; gap:0; background:#fff; border-radius:18px; border:1px solid var(--line); box-shadow:0 6px 22px rgba(20,10,70,.07); padding:22px 30px; position:relative; overflow:hidden; margin-bottom:28px; }
.article-meta-card::before{ content:''; position:absolute; left:0; top:14px; bottom:14px; width:4px; border-radius:4px; background:var(--grad); }
.meta-item{ display:flex; align-items:center; gap:14px; padding:6px 26px; }
.meta-item:first-child{ padding-left:14px; }
.meta-item + .meta-item{ border-left:1px solid var(--line); }
.meta-icon{ width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.meta-text{ display:flex; flex-direction:column; }
.meta-label{ font-size:12px; color:var(--muted); font-weight:600; }
.meta-value{ font-size:15px; font-weight:800; color:var(--ink); margin-top:2px; white-space:nowrap; }
@media (max-width:760px){ .article-meta-card{ padding:18px; } .meta-item{ padding:8px 18px; flex:1 1 45%; } .meta-item + .meta-item{ border-left:none; } }
@media (max-width:480px){ .meta-item{ flex:1 1 100%; } }

/* Article page — checklist (problem/good lists with check icon) */
.article-checklist{ list-style:none !important; margin:20px 0 30px !important; display:flex; flex-direction:column; gap:12px !important; }
.article-checklist li{ list-style:none !important; display:flex; align-items:flex-start; gap:12px; font-size:15.5px; }
.article-checklist .ck-icon{ width:24px; height:24px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; margin-top:1px; box-shadow:0 3px 8px rgba(20,10,70,.08); }
.article-checklist.is-bad .ck-icon{ background:linear-gradient(135deg,#FF7A6B,#E1493B); color:#fff; }
.article-checklist.is-good .ck-icon{ background:linear-gradient(135deg,#4FD897,#22B573); color:#fff; }
.article-callout{ display:flex; align-items:center; gap:16px; margin:32px 0; padding:22px 26px; border-radius:18px; background:linear-gradient(135deg,#F6F3FF,#F0F6FF); border:1px solid rgba(123,0,255,.15); font-weight:600; font-size:15px; color:var(--ink); }
.article-callout .callout-icon{ width:40px; height:40px; border-radius:12px; background:var(--grad); display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; box-shadow:0 8px 18px -4px rgba(123,0,255,.4); }

/* Article page — 4-col icon grid */
.article-icon-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin:26px 0 38px; }
.article-icon-card{ padding:22px 20px; border-radius:18px; border:1px solid var(--line); background:#fff; transition:transform .25s ease, box-shadow .25s ease; }
.article-icon-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.article-icon-card .aig-icon{ width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center; margin-bottom:14px; color:#fff; box-shadow:0 8px 16px -4px rgba(20,10,70,.22); }
.article-icon-card:nth-child(4n+1) .aig-icon{ background:linear-gradient(135deg,#3AB4FF,#7B00FF); }
.article-icon-card:nth-child(4n+2) .aig-icon{ background:linear-gradient(135deg,#9B4CFF,#D000FF); }
.article-icon-card:nth-child(4n+3) .aig-icon{ background:linear-gradient(135deg,#4FC3FF,#4338CA); }
.article-icon-card:nth-child(4n+4) .aig-icon{ background:linear-gradient(135deg,#FF3DD8,#7B00FF); }
.article-icon-card h5{ font-size:14.5px; font-weight:800; color:var(--ink); margin-bottom:4px; }
.article-icon-card p{ font-size:12.5px; color:var(--muted); margin:0; line-height:1.5; }
@media (max-width:760px){ .article-icon-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .article-icon-grid{ grid-template-columns:1fr; } }

/* Article page — 2-col type cards */
.article-type-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:26px 0 38px; }
.article-type-card{ display:flex; align-items:flex-start; gap:14px; padding:20px 22px; border-radius:16px; border:1px solid var(--line); background:#fff; transition:transform .25s ease, box-shadow .25s ease; }
.article-type-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.article-type-card .atc-icon{ width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#fff; box-shadow:0 8px 16px -4px rgba(20,10,70,.22); }
.article-type-card:nth-child(6n+1) .atc-icon{ background:linear-gradient(135deg,#3AB4FF,#7B00FF); }
.article-type-card:nth-child(6n+2) .atc-icon{ background:linear-gradient(135deg,#9B4CFF,#D000FF); }
.article-type-card:nth-child(6n+3) .atc-icon{ background:linear-gradient(135deg,#4FC3FF,#4338CA); }
.article-type-card:nth-child(6n+4) .atc-icon{ background:linear-gradient(135deg,#FF3DD8,#7B00FF); }
.article-type-card:nth-child(6n+5) .atc-icon{ background:linear-gradient(135deg,#4FD897,#22B573); }
.article-type-card:nth-child(6n+6) .atc-icon{ background:linear-gradient(135deg,#FFB84F,#FF7A3D); }
.article-type-card h5{ font-size:14.5px; font-weight:800; color:var(--ink); margin-bottom:3px; }
.article-type-card p{ font-size:12.5px; color:var(--muted); margin:0; line-height:1.5; }
@media (max-width:640px){ .article-type-grid{ grid-template-columns:1fr; } }

/* Article page — how-to layout (steps + pro tip) */
.article-howto{ display:grid; grid-template-columns:1.3fr 1fr; gap:32px; margin:26px 0 38px; align-items:start; }
.article-steps{ display:flex; flex-direction:column; gap:22px; }
.article-step{ display:flex; align-items:flex-start; gap:16px; }
.article-step-num{ width:34px; height:34px; border-radius:50%; background:var(--grad); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13.5px; flex-shrink:0; box-shadow:0 8px 16px -4px rgba(123,0,255,.4); }
.article-step h5{ font-size:15px; font-weight:800; color:var(--ink); margin-bottom:3px; }
.article-step p{ font-size:13.5px; color:var(--muted); margin:0; line-height:1.5; }
.article-protip{ padding:26px; border-radius:20px; background:linear-gradient(160deg,#F6F3FF,#F0F6FF); border:1px solid rgba(123,0,255,.15); position:relative; overflow:hidden; }
.article-protip::before{ content:''; position:absolute; top:-30px; right:-30px; width:100px; height:100px; border-radius:50%; background:var(--grad); opacity:.12; }
.article-protip h6{ display:flex; align-items:center; gap:8px; font-size:11.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--purple); margin-bottom:12px; position:relative; }
.article-protip p{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; margin:0; position:relative; }
@media (max-width:760px){ .article-howto{ grid-template-columns:1fr; } }

/* Article page — inline dark newsletter CTA bar */
.article-cta-bar{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; margin:44px 0 0; padding:30px 34px; border-radius:22px; background:linear-gradient(135deg, #0D0E28, #16123A 55%, #1C0F35); border:1px solid rgba(123,0,255,.35); }
.article-cta-bar-left{ display:flex; align-items:center; gap:18px; }
.article-cta-bar-icon{ width:52px; height:52px; border-radius:50%; background:linear-gradient(135deg,#3AB4FF,#7B00FF); display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; }
.article-cta-bar h5{ font-size:17px; font-weight:800; color:#fff; }
.article-cta-bar p{ font-size:13px; color:rgba(255,255,255,.55); margin-top:4px; max-width:360px; }
.article-cta-bar-form{ display:flex; gap:8px; background:rgba(255,255,255,.06); padding:6px; border-radius:100px; border:1px solid rgba(255,255,255,.14); }
.article-cta-bar-form input{ padding:10px 16px; border-radius:100px; border:none; background:transparent; color:#fff; font-size:13.5px; outline:none; min-width:180px; }
.article-cta-bar-form input::placeholder{ color:rgba(255,255,255,.4); }
.article-cta-bar-form button{ white-space:nowrap; }
@media (max-width:760px){ .article-cta-bar{ flex-direction:column; align-items:flex-start; } .article-cta-bar-form{ width:100%; } .article-cta-bar-form input{ flex:1; min-width:0; } }

/* Article page — sidebar CTA + newsletter + popular articles */
.article-sidebar-cta h5{ font-size:16px; font-weight:800; color:#fff; line-height:1.35; }
.article-sidebar-cta p{ font-size:13px; color:rgba(255,255,255,.75); margin:10px 0 16px; line-height:1.55; }
.sidebar-news-input{ width:100%; padding:11px 16px; border-radius:11px; border:1px solid var(--line); font-size:13.5px; margin-bottom:10px; outline:none; }
.sidebar-news-input::placeholder{ color:var(--muted); }
.popular-article-item{ display:flex; gap:12px; align-items:center; }
.popular-article-item + .popular-article-item{ margin-top:14px; }
.popular-article-thumb{ width:54px; height:54px; border-radius:10px; object-fit:cover; flex-shrink:0; background:var(--bg-lav); }
.popular-article-item h6{ font-size:12.5px; font-weight:700; color:var(--ink); line-height:1.4; text-transform:none; letter-spacing:0; margin:0; }
.popular-article-item span{ display:block; font-size:11px; color:var(--muted); margin-top:4px; }

/* ---------- FAQ / support ---------- */
.faq-list{ max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:14px; }
.faq-item{ border:1px solid var(--line); border-radius:16px; background:#fff; overflow:hidden; }
.faq-q{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px; cursor:pointer; font-weight:700; font-size:15px; color:var(--ink); }
.faq-q svg{ flex-shrink:0; transition:transform .3s ease; color:var(--purple); }
.faq-item.open .faq-q svg{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.faq-item.open .faq-a{ max-height:220px; }
.faq-a p{ padding:0 24px 20px; color:var(--muted); font-size:14.5px; line-height:1.7; }
.support-topics{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media (max-width:900px){ .support-topics{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .support-topics{ grid-template-columns:1fr; } }
.support-topic{ padding:26px; border-radius:18px; border:1px solid var(--line); background:#fff; text-align:left; transition:transform .3s ease, box-shadow .3s ease; }
.support-topic:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:rgba(123,0,255,.25); }
.support-topic-icon{ width:42px; height:42px; border-radius:12px; background:var(--grad-soft); color:var(--purple); display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.support-topic h5{ font-size:14.5px; font-weight:800; color:var(--ink); }
.support-topic p{ margin-top:6px; font-size:12.5px; color:var(--muted); }

/* ---------- auth pages ---------- */
/* ---------- Auth pages v2: light floating-card design (login & signup) ---------- */
.auth2-section{ position:relative; padding:150px 20px 90px; background:linear-gradient(150deg, #F0F8FF, #F6F5FF 55%, #FBF3FF); overflow:hidden; }
.auth2-section::before{ content:''; position:absolute; top:60px; right:6%; width:130px; height:110px; background-image:radial-gradient(var(--purple) 1.5px, transparent 1.5px); background-size:16px 16px; opacity:.16; pointer-events:none; }
.auth2-section::after{ content:''; position:absolute; top:10%; left:26%; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle, rgba(123,0,255,.06), transparent 70%); pointer-events:none; }
.auth2-grid{ position:relative; z-index:1; max-width:1220px; margin:0 auto; display:grid; grid-template-columns:1fr 440px; gap:70px; align-items:start; }

.auth2-badge{ display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line); padding:9px 18px; border-radius:100px; font-size:13px; font-weight:700; color:var(--purple); box-shadow:var(--shadow); }
.auth2-badge svg{ width:16px; height:16px; flex-shrink:0; }
.auth2-heading{ margin-top:20px; max-width:560px; font-size:clamp(30px,4vw,44px); font-weight:800; line-height:1.15; color:var(--ink); }
.auth2-heading span{ display:block; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.auth2-sub{ margin-top:14px; color:var(--muted); font-size:15px; max-width:560px; line-height:1.6; }

.auth2-mock-card{ margin-top:36px; background:#fff; border-radius:20px; border:1px solid var(--line); box-shadow:0 24px 50px -20px rgba(30,10,80,.16); padding:20px; max-width:560px; }
.auth2-mock-top{ display:flex; align-items:center; justify-content:space-between; }
.auth2-mock-logo{ display:flex; align-items:center; gap:8px; font-weight:800; font-size:14px; color:var(--ink); }
.auth2-mock-logo span{ width:16px; height:16px; border-radius:50%; background:var(--grad); flex-shrink:0; }
.auth2-mock-dots{ display:flex; gap:4px; }
.auth2-mock-dots i{ width:4px; height:4px; border-radius:50%; background:var(--line); display:block; }
.auth2-mock-search{ margin-top:16px; display:flex; align-items:center; justify-content:space-between; background:#F6F5FB; border-radius:100px; padding:12px 16px; color:var(--muted); font-size:13px; }
.auth2-mock-grid{ margin-top:16px; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.auth2-mock-item{ background:#F8F7FC; border-radius:14px; padding:14px 10px; text-align:left; }
.auth2-mock-item-icon{ width:36px; height:36px; border-radius:10px; background:var(--grad-soft); color:var(--purple); display:flex; align-items:center; justify-content:center; }
.auth2-mock-item-icon svg{ width:17px; height:17px; }
.auth2-mock-item h6{ margin-top:10px; font-size:12.5px; font-weight:800; color:var(--ink); }
.auth2-mock-item p{ margin-top:3px; font-size:10px; color:var(--muted); line-height:1.35; }

.auth2-stats{ position:relative; z-index:1; margin-top:28px; max-width:560px; display:flex; gap:26px; flex-wrap:wrap; }
.auth2-stat{ display:flex; align-items:center; gap:10px; }
.auth2-stat-icon{ width:36px; height:36px; border-radius:10px; background:var(--grad); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.auth2-stat-icon svg{ width:16px; height:16px; }
.auth2-stat b{ display:block; font-size:17px; font-weight:800; color:var(--purple); }
.auth2-stat span{ display:block; font-size:11.5px; color:var(--muted); }

.auth2-bottom{ position:relative; z-index:1; margin-top:32px; max-width:560px; }
.auth2-bottom p:first-child{ font-weight:800; color:var(--ink); font-size:14.5px; }
.auth2-bottom p:last-child{ margin-top:4px; color:var(--muted); font-size:13.5px; line-height:1.6; }

.auth2-form-card{ position:relative; z-index:1; background:#fff; border-radius:24px; border:1px solid var(--line); box-shadow:0 30px 60px -24px rgba(30,10,80,.18); padding:44px 40px; }
.auth2-form-card h2{ font-size:28px; font-weight:800; color:var(--ink); }
.auth2-form-card h2 span{ background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.auth2-form-card > p{ margin-top:8px; color:var(--muted); font-size:14.5px; line-height:1.6; }

@media (max-width:960px){ .auth2-grid{ grid-template-columns:1fr; } .auth2-form-card{ max-width:460px; margin:0 auto; } }
@media (max-width:640px){ .auth2-section{ padding:120px 16px 60px; } .auth2-mock-grid{ grid-template-columns:1fr 1fr; } .auth2-form-card{ padding:34px 24px; } }
.auth-visual{ position:relative; background:linear-gradient(160deg,#0B0D24,#16123A 55%,#1C0F35); display:flex; flex-direction:column; justify-content:space-between; padding:64px 60px 60px; color:#fff; overflow:hidden; }
.auth-visual::before{ content:''; position:absolute; top:-100px; right:-100px; width:340px; height:340px; border-radius:50%; background:radial-gradient(circle,#00A8FF,transparent 70%); opacity:.28; filter:blur(20px); z-index:0; }
.auth-visual::after{ content:''; position:absolute; bottom:-120px; left:-100px; width:360px; height:360px; border-radius:50%; background:radial-gradient(circle,#D000FF,transparent 70%); opacity:.24; filter:blur(20px); z-index:0; }
.auth-visual-top{ position:relative; z-index:1; }
.auth-visual-badge{ display:inline-flex; align-items:center; gap:8px; margin-top:56px; font-size:12px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#fff; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); padding:8px 18px; border-radius:100px; }
.auth-mock{ position:relative; z-index:1; margin-top:34px; background:#15132E; border-radius:16px 16px 4px 4px; padding:10px 10px 0; box-shadow:0 40px 70px -24px rgba(0,0,0,.5); }
.auth-mock-inner{ background:#fff; border-radius:8px 8px 0 0; overflow:hidden; }
.auth-mock-base{ height:14px; background:linear-gradient(180deg,#2A2750,#1C1A3C); border-radius:0 0 10px 10px; }
.auth-stat-row{ position:relative; z-index:1; display:flex; gap:36px; margin-top:40px; }
.auth-stat b{ display:block; font-size:24px; font-weight:800; background:linear-gradient(90deg,#4FC3FF,#D000FF); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.auth-stat span{ display:block; margin-top:4px; font-size:12.5px; color:rgba(255,255,255,.55); }
.auth-visual-quote{ position:relative; z-index:1; }
.auth-visual-quote h3{ font-size:20px; font-weight:700; line-height:1.4; }
.auth-visual-quote p{ margin-top:10px; font-size:13.5px; color:rgba(255,255,255,.55); line-height:1.6; }

.auth-form-side{ display:flex; align-items:center; justify-content:center; padding:150px 40px 60px; }
.auth-form-wrap{ width:100%; max-width:400px; }
.auth-form-wrap h2{ font-size:28px; font-weight:800; color:var(--ink); }
.auth-form-wrap > p{ margin-top:8px; color:var(--muted); font-size:14.5px; }
.field-group{ margin-top:20px; }
.field-group label{ display:block; font-size:13px; font-weight:700; color:var(--ink); margin-bottom:8px; }
.auth-input-wrap{ position:relative; }
.auth-input-icon{ position:absolute; left:15px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none; display:flex; }
.auth-input-wrap input{ width:100%; padding:13px 16px 13px 44px; border-radius:12px; border:1.5px solid var(--line); font-size:14.5px; outline:none; transition:border-color .2s ease; background:#fff; color:var(--ink); }
.auth-input-wrap input:focus{ border-color:var(--purple); }
.auth-pass-toggle{ position:absolute; right:14px; top:50%; transform:translateY(-50%); background:none; border:none; padding:2px; cursor:pointer; color:var(--muted); display:flex; }
.auth-pass-toggle:hover{ color:var(--ink); }
.field-row-between{ display:flex; align-items:center; justify-content:space-between; margin-top:20px; font-size:13.5px; }
.field-check{ display:flex; align-items:center; gap:8px; color:var(--ink-soft); }
.field-check input{ accent-color:var(--purple); width:16px; height:16px; }
.auth2-form-card .btn{ width:100%; margin-top:20px; padding:15px; }
.auth-divider{ display:flex; align-items:center; gap:14px; margin:26px 0; color:var(--muted); font-size:12px; font-weight:700; }
.auth-divider::before, .auth-divider::after{ content:''; flex:1; height:1px; background:var(--line); }
.btn-social{ width:100%; display:flex; align-items:center; justify-content:center; gap:10px; padding:13px; border-radius:12px; border:1.5px solid var(--line); font-weight:700; font-size:14px; color:var(--ink); background:#fff; transition:border-color .2s ease, transform .2s ease; }
.btn-social:hover{ border-color:var(--purple); transform:translateY(-1px); }
.auth-bottom{ text-align:center; margin-top:26px; font-size:14px; color:var(--muted); }
.auth-bottom a{ color:var(--purple); font-weight:800; text-decoration:none; }
@media (max-width:900px){ .auth-shell{ grid-template-columns:1fr; } .auth-visual{ display:none; } }
@media (max-width:900px){ .auth-shell{ grid-template-columns:1fr; } .auth-visual{ display:none; } }

/* ---------- account dashboard ---------- */
.dash-shell{ display:grid; grid-template-columns:260px 1fr; gap:40px; align-items:start; }
.dash-sidebar{ position:sticky; top:100px; border:1px solid var(--line); border-radius:20px; background:#fff; padding:14px; display:flex; flex-direction:column; gap:2px; }
.dash-sidebar a{ display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:12px; font-size:14px; font-weight:700; color:var(--ink-soft); transition:background .2s ease, color .2s ease; }
.dash-sidebar a svg{ flex-shrink:0; }
.dash-sidebar a:hover{ background:var(--bg-lav); color:var(--ink); }
.dash-sidebar a.active{ background:var(--grad); color:#fff; box-shadow:0 10px 22px -8px rgba(123,0,255,.45); }
.dash-card{ border:1px solid var(--line); border-radius:20px; background:#fff; padding:28px; box-shadow:var(--shadow); }
.dash-card + .dash-card{ margin-top:22px; }
.dash-card h3{ font-size:18px !important; font-weight:800 !important; }
.dash-row{ display:flex; align-items:center; justify-content:space-between; padding:16px 0; border-bottom:1px solid var(--line); gap:16px; flex-wrap:wrap; }
.dash-row:last-child{ border-bottom:none; }
.dash-row-label{ font-size:13px; color:var(--muted); font-weight:600; }
.dash-row-value{ font-size:14.5px; font-weight:800; color:var(--ink); }
.status-pill{ display:inline-flex; align-items:center; gap:6px; padding:5px 13px; border-radius:100px; font-size:12px; font-weight:800; }
.status-pill.active{ background:rgba(34,181,115,.12); color:#22B573; }
.status-pill.active .dot{ width:6px; height:6px; border-radius:50%; background:#22B573; }
.quick-actions{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.quick-action{ display:flex; align-items:center; gap:14px; padding:18px; border-radius:16px; border:1px solid var(--line); background:#fff; transition:transform .25s ease, box-shadow .25s ease; }
.quick-action:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.quick-action-icon{ width:38px; height:38px; border-radius:11px; background:var(--grad-soft); color:var(--purple); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.quick-action span{ font-size:13.5px; font-weight:700; color:var(--ink); }
.product-card{ display:flex; align-items:center; gap:20px; padding:22px; border-radius:18px; background:linear-gradient(135deg,var(--blue),var(--purple)); color:#fff; }
.product-card-icon{ width:56px; height:56px; border-radius:16px; background:rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.product-card h4{ font-size:17px; font-weight:800; } .product-card p{ font-size:12.5px; opacity:.85; margin-top:2px; }
.stats-row-4{ grid-template-columns:repeat(4,1fr); margin-bottom:26px; }
@media (max-width:860px){ .dash-shell{ display:block; } .dash-sidebar{ position:static; flex-direction:row; overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; margin-bottom:20px; } .dash-sidebar a{ flex-shrink:0; } .quick-actions{ grid-template-columns:1fr; } }
@media (max-width:640px){ .stats-row-4{ grid-template-columns:1fr 1fr; } }
@media (max-width:420px){ .stats-row-4{ grid-template-columns:1fr; } }

.license-key{ display:flex; align-items:center; gap:10px; font-family:monospace; font-size:14px; letter-spacing:.05em; color:var(--ink); background:var(--bg-lav); padding:10px 16px; border-radius:10px; }

/* ---------- cart / checkout ---------- */
.cart-layout{ display:grid; grid-template-columns:1fr 360px; gap:40px; align-items:start; }
.cart-item{ display:flex; gap:20px; align-items:center; padding:22px 0; border-bottom:1px solid var(--line); }
.cart-item-thumb{ width:100px; height:72px; border-radius:12px; overflow:hidden; flex-shrink:0; background:var(--bg-lav); }
.cart-item-thumb img{ width:100%; height:100%; object-fit:cover; }
.cart-item-body{ flex:1; min-width:0; }
.cart-item-body h4{ font-size:15.5px; font-weight:800; color:var(--ink); }
.cart-item-body p{ font-size:13px; color:var(--muted); margin-top:4px; }
.cart-item-price{ font-size:16px; font-weight:800; color:var(--ink); flex-shrink:0; }
.cart-item-remove{ color:var(--muted); flex-shrink:0; transition:color .2s ease; }
.cart-item-remove:hover{ color:#FF3D71; }
.order-summary{ border:1px solid var(--line); border-radius:20px; background:#fff; padding:26px; box-shadow:var(--shadow); position:sticky; top:100px; }
.order-summary h4{ font-size:16px; font-weight:800; margin-bottom:18px; }
.order-row{ display:flex; justify-content:space-between; padding:9px 0; font-size:14px; color:var(--ink-soft); }
.order-row.total{ border-top:1px solid var(--line); margin-top:8px; padding-top:16px; font-size:17px; font-weight:800; color:var(--ink); }
.order-summary .btn{ width:100%; margin-top:20px; }
.cart-empty{ text-align:center; padding:80px 20px; }
.cart-empty svg{ color:var(--muted); margin-bottom:18px; }
.cart-empty h3{ font-size:22px !important; font-weight:800 !important; } .cart-empty p{ color:var(--muted); margin-top:8px; }
@media (max-width:900px){ .cart-layout{ grid-template-columns:1fr; } .order-summary{ position:static; } }

.checkout-layout{ display:grid; grid-template-columns:1.2fr 0.8fr; gap:50px; align-items:start; }
.checkout-section{ margin-bottom:34px; }
.checkout-section h3{ font-size:16px !important; font-weight:800 !important; margin-bottom:16px; }
.field-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.field-grid .field-group{ margin-top:0; }
.payment-placeholder{ border:1.5px dashed var(--line); border-radius:16px; padding:30px; text-align:center; color:var(--muted); font-size:13.5px; }
.payment-placeholder svg{ margin-bottom:10px; color:var(--purple); }
@media (max-width:900px){ .checkout-layout{ grid-template-columns:1fr; } .field-grid{ grid-template-columns:1fr; } }

/* ---------- contact ---------- */
.contact-layout{ display:grid; grid-template-columns:1fr 0.7fr; gap:60px; align-items:start; }
.contact-side{ display:flex; flex-direction:column; gap:16px; }
.contact-side-card{ display:flex; gap:16px; padding:28px; border-radius:18px; border:1px solid var(--line); background:#fff; transition:transform .25s ease, box-shadow .25s ease; }
.contact-side-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.contact-side-icon{ width:44px; height:44px; border-radius:13px; background:var(--grad-soft); color:var(--purple); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contact-side-card h5{ font-size:14.5px; font-weight:800; color:var(--ink); }
.contact-side-card p{ font-size:12.5px; color:var(--muted); margin-top:4px; }
@media (max-width:900px){ .contact-layout{ grid-template-columns:1fr; } }

/* ---------- generic pagination reuse alias ---------- */
.simple-pagination{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:50px; }

/* Blog page — stats row */
.blog-stats-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
.blog-stat-item{ display:flex; align-items:center; gap:16px; padding:26px 22px; border-radius:20px; border:1px solid var(--line); background:#fff; box-shadow:0 2px 14px rgba(20,10,70,.05); text-align:left; }
.blog-stat-icon{ width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:var(--bg-lav); background:color-mix(in srgb, var(--c) 12%, white); color:var(--c); }
.blog-stat-icon svg{ width:22px; height:22px; }
.blog-stat-text{ min-width:0; }
.blog-stat-value{ display:block; font-size:26px; font-weight:800; color:var(--c); line-height:1.15; }
.blog-stat-label{ display:block; margin-top:3px; font-size:12.5px; color:var(--muted); font-weight:600; }
@media (max-width:760px){ .blog-stats-row{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .blog-stats-row{ grid-template-columns:1fr; } }

/* Blog page — hero */
.blog-hero{ position:relative; padding:150px 0 60px; overflow:hidden; background:linear-gradient(160deg, #F6F5FF, #F0F8FF); }
.blog-hero-blob{ position:absolute; top:-140px; right:-180px; width:640px; height:640px; border-radius:50%; background:radial-gradient(circle, rgba(123,0,255,.16), transparent 70%); z-index:0; pointer-events:none; }
.blog-hero-grid{ display:grid; grid-template-columns:1.3fr 0.7fr; gap:60px; align-items:center; position:relative; z-index:1; }
.blog-hero-title{ font-size:clamp(52px,7.4vw,90px) !important; font-weight:800 !important; line-height:1.15; letter-spacing:-0.03em; margin:0; padding-top:6px; background:linear-gradient(90deg, var(--ink) 0%, var(--ink) 40%, var(--purple) 75%, var(--magenta) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.blog-hero-underline{ width:64px; height:4px; border-radius:4px; background:var(--grad); margin-top:16px; }
.blog-hero-sub{ margin-top:22px; font-size:15px; line-height:1.7; color:var(--muted); max-width:none; }
.blog-hero-badges{ display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }
.blog-hero-badge{ display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:100px; background:rgba(123,0,255,.08); color:var(--ink); font-size:13.5px; font-weight:700; border:1px solid rgba(123,0,255,.12); }
.blog-hero-badge svg{ width:16px; height:16px; color:var(--purple); flex-shrink:0; }
.blog-hero-visual{ position:relative; }
.blog-hero-visual img{ width:100%; border-radius:24px; box-shadow:var(--shadow-lg); display:block; border:1px solid var(--line); }
.bh-illustration{ position:relative; width:100%; max-width:600px; margin:0 auto; aspect-ratio:1.35/1; }
.bh-dots-deco{ position:absolute; top:2%; right:0; width:150px; height:110px; background-image:radial-gradient(var(--purple) 1.5px, transparent 1.5px); background-size:16px 16px; opacity:.28; z-index:0; }
.bh-laptop{ position:absolute; left:50%; top:0; transform:translateX(-50%); width:76%; z-index:2; }
.bh-screen{ background:#fff; border:9px solid var(--ink); border-bottom:none; border-radius:18px 18px 0 0; overflow:hidden; box-shadow:var(--shadow-lg); }
.bh-screen-topbar{ background:var(--grad); color:#fff; font-weight:800; font-size:16px; padding:16px 20px; letter-spacing:-0.01em; }
.bh-screen-body{ padding:18px 20px 24px; }
.bh-screen-row{ display:flex; gap:14px; align-items:center; margin-bottom:16px; }
.bh-screen-row:last-child{ margin-bottom:0; }
.bh-screen-thumb{ width:58px; height:46px; border-radius:9px; flex-shrink:0; }
.bh-thumb-a{ background:linear-gradient(135deg,#9FC9FF,#4F87F7); }
.bh-thumb-b{ background:linear-gradient(135deg,#3A3A6E,#1C1C3A); }
.bh-screen-lines{ flex:1; }
.bh-laptop-base{ height:18px; background:linear-gradient(180deg,#4a4a5f,#1c1c28); border-radius:0 0 12px 12px; position:relative; }
.bh-laptop-base::after{ content:''; position:absolute; left:50%; top:0; transform:translateX(-50%); width:64px; height:7px; background:#0A0B1E; border-radius:0 0 7px 7px; }
.bh-mug{ position:absolute; left:-4%; bottom:30%; width:20%; z-index:3; filter:drop-shadow(0 14px 20px rgba(20,10,70,.14)); }
.bh-plant{ position:absolute; right:2%; bottom:40%; width:16%; z-index:3; filter:drop-shadow(0 14px 20px rgba(20,10,70,.14)); }
.bh-notebook{ position:absolute; right:-6%; bottom:10%; width:36%; z-index:3; filter:drop-shadow(0 14px 20px rgba(20,10,70,.14)); }
.bh-mug svg, .bh-plant svg, .bh-notebook svg{ width:100%; height:auto; display:block; }

/* Blog page — toolbar (title + filters + search in one aligned row) */
.blog-toolbar{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; margin-bottom:36px; }
.blog-toolbar-title{ font-size:22px; font-weight:800; flex-shrink:0; margin:0; }
.blog-toolbar .catalog-filters{ flex:1 1 auto; justify-content:flex-start; min-width:240px; }
.blog-toolbar .catalog-search{ flex:0 1 260px; margin-left:auto; }
@media (max-width:760px){ .blog-toolbar{ flex-direction:column; align-items:stretch; } .blog-toolbar .catalog-search{ margin-left:0; flex:1 1 auto; max-width:none; } }

/* Blog page — newsletter card */
.blog-newsletter-card{ background:#fff; border-radius:28px; padding:56px 48px; box-shadow:var(--shadow-lg); border:1px solid var(--line); }
@media (max-width:640px){ .blog-newsletter-card{ padding:40px 24px; } }
.news-form-light{ background:#fff; border:1.5px solid var(--line); }
.news-form-light input{ color:var(--ink); }
.news-form-light input::placeholder{ color:var(--muted); }

/* Blog page — newsletter v2 (hero-style) */
.bn2{ position:relative; overflow:hidden; background:linear-gradient(135deg, #F3F1FF 0%, #EFF4FF 55%, #F8F1FF 100%); }
.bn2-grid{ display:grid; grid-template-columns:1.3fr 0.7fr; gap:60px; align-items:center; position:relative; z-index:1; }
.bn2-title{ margin-top:16px; font-size:clamp(30px,3.6vw,44px); font-weight:800; line-height:1.18; letter-spacing:-0.01em; color:var(--ink); }
.bn2-grad-a{ background:linear-gradient(90deg,#3A2FE0,#7B00FF); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.bn2-grad-b{ background:linear-gradient(90deg,#7B00FF,#3AB4FF); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.bn2-sub{ margin-top:18px; font-size:16px; line-height:1.6; color:var(--muted); }
.bn2-form{ margin-top:30px; max-width:460px; display:flex; align-items:center; gap:4px; padding:6px 6px 6px 18px; }
.bn2-form-icon{ color:var(--purple); display:flex; flex-shrink:0; }
.bn2-form input{ padding-left:10px; }
.bn2-form .btn-primary{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.bn2-features{ display:flex; gap:34px; flex-wrap:wrap; margin-top:36px; }
.bn2-feature{ position:relative; display:flex; align-items:center; gap:12px; }
.bn2-feature + .bn2-feature::before{ content:''; position:absolute; left:-18px; top:2px; bottom:2px; width:1px; background:var(--line); }
.bn2-feature-icon{ width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; border:1px solid rgba(20,10,70,.06); background:var(--bg-lav); background:color-mix(in srgb, var(--c) 12%, white); color:var(--c); }
.bn2-feature-icon svg{ width:19px; height:19px; stroke-linecap:round; stroke-linejoin:round; }
.bn2-feature h5{ font-size:14px; font-weight:800; color:var(--ink); }
.bn2-feature span{ display:block; font-size:12.5px; color:var(--muted); margin-top:1px; }
.bn2-visual{ position:relative; width:100%; max-width:460px; margin:0 auto; aspect-ratio:1.05/1; }
.bn2-ring{ position:absolute; top:8%; left:50%; transform:translateX(-50%); width:78%; height:78%; border:1.5px dashed rgba(123,0,255,.28); border-radius:50%; z-index:0; }
.bn2-accent-dot{ position:absolute; width:8px; height:8px; border-radius:50%; background:var(--purple); opacity:.55; z-index:1; }
.bn2-accent-plus{ position:absolute; width:14px; height:14px; z-index:1; opacity:.5; color:var(--purple); }
.bn2-dots-deco{ position:absolute; top:0; right:4%; width:120px; height:100px; background-image:radial-gradient(var(--purple) 1.5px, transparent 1.5px); background-size:14px 14px; opacity:.25; z-index:0; }
.bn2-wave{ position:absolute; right:-24%; bottom:-30%; width:95%; height:85%; background:linear-gradient(140deg,#D6C8FF,#B8A0F8); border-radius:60% 40% 55% 45%/55% 45% 60% 40%; opacity:.4; z-index:0; filter:blur(6px); }
.bn2-sparkle{ position:absolute; top:6%; left:20%; width:34px; height:34px; z-index:3; opacity:.8; }
.bn2-plane{ position:absolute; top:10%; right:2%; width:26px; height:26px; z-index:3; opacity:.85; transform:rotate(8deg); }
.bn2-envelope{ position:relative; width:82%; margin:14% auto 0; z-index:2; filter:drop-shadow(0 18px 26px rgba(60,20,140,.16)); }
.bn2-mug{ position:absolute; left:0%; bottom:0; width:26%; z-index:4; filter:drop-shadow(0 12px 18px rgba(60,20,140,.16)); }
.bn2-plant-mug{ position:absolute; right:3%; bottom:0; width:23%; z-index:4; filter:drop-shadow(0 12px 18px rgba(60,20,140,.16)); }
.bn2-envelope svg, .bn2-mug svg, .bn2-plant-mug svg{ width:100%; height:auto; display:block; }
@media (max-width:900px){ .bn2-grid{ grid-template-columns:1fr; gap:50px; text-align:center; } .bn2-form{ margin-left:auto; margin-right:auto; } .bn2-features{ justify-content:center; } .bn2-visual{ max-width:360px; } }
@media (max-width:900px){ .bh-illustration{ max-width:460px; } }
@media (max-width:480px){ .bh-mug{ display:none; } .bh-notebook{ width:42%; } }
@media (max-width:900px){ .blog-hero{ padding:130px 0 44px; } .blog-hero-grid{ grid-template-columns:1fr; gap:36px; text-align:center; } .blog-hero-badges{ justify-content:center; } .blog-hero-sub{ margin-left:auto; margin-right:auto; } .blog-hero .page-banner-crumb{ justify-content:center !important; } }
@media (max-width:640px){ .blog-hero{ padding:110px 0 36px; } }

/* Blog page — topic pills */
.blog-topics-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }
.blog-topic-pill{ display:inline-flex; align-items:center; gap:10px; padding:13px 22px 13px 13px; border-radius:100px; border:1.5px solid var(--line); background:#fff; font-weight:700; font-size:14px; color:var(--ink); cursor:pointer; transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; font-family:inherit; }
.blog-topic-pill:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:rgba(123,0,255,.25); }
.blog-topic-pill-icon{ width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }

/* Blog page — category cards */
.blog-cat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.blog-cat-card{ display:flex; align-items:center; gap:16px; padding:22px; border-radius:18px; border:1px solid var(--line); background:#fff; cursor:pointer; transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; text-align:left; width:100%; font-family:inherit; }
.blog-cat-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:rgba(123,0,255,.2); }
.blog-cat-icon{ width:48px; height:48px; border-radius:14px; background:var(--bg-lav); color:var(--purple); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.blog-cat-icon svg{ width:22px; height:22px; }
.blog-cat-card h5{ font-size:15.5px; font-weight:800; color:var(--ink); }
.blog-cat-card span{ display:block; margin-top:4px; font-size:12.5px; color:var(--muted); font-weight:600; }
@media (max-width:900px){ .blog-cat-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .blog-cat-grid{ grid-template-columns:1fr; } }

/* Blog page — featured post badge + author avatar */
.blog-featured{ position:relative; }
.blog-featured-badge{ display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:100px; font-size:11.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; background:var(--grad); color:#fff; }
.blog-author-avatar{ width:26px; height:26px; border-radius:50%; background:var(--grad); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; flex-shrink:0; }

/* ============================================================
   About page — editorial / storytelling components
   ============================================================ */

/* ---------- Our Story: asymmetric editorial split ---------- */
.story-split{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:80px; align-items:center; }
.story-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--purple); }
.story-heading{ margin-top:18px; font-size:clamp(28px,3.6vw,42px); font-weight:800; line-height:1.18; letter-spacing:-0.02em; color:var(--ink); }
.story-heading em{ font-style:normal; font-weight:500; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.story-body{ margin-top:22px; color:var(--muted); font-size:16px; line-height:1.8; max-width:480px; }
.story-body p + p{ margin-top:16px; }
.story-visual{ position:relative; }
.story-visual-card{ position:relative; border-radius:24px; overflow:hidden; box-shadow:var(--shadow-lg); border:1px solid var(--line); transform:rotate(-2deg); background:#fff; }
.story-visual-card img{ width:100%; display:block; }
.story-visual-badge{ position:absolute; bottom:-22px; left:-26px; background:#fff; border-radius:18px; padding:16px 20px; box-shadow:var(--shadow-lg); border:1px solid var(--line); display:flex; align-items:center; gap:12px; transform:rotate(3deg); }
.story-visual-badge-icon{ width:38px; height:38px; border-radius:11px; background:var(--grad); display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; }
.story-visual-badge b{ display:block; font-size:13px; font-weight:800; color:var(--ink); }
.story-visual-badge span{ font-size:11px; color:var(--muted); }
.story-visual-ring{ position:absolute; top:-30px; right:-30px; width:110px; height:110px; border-radius:50%; border:1.5px dashed rgba(123,0,255,.22); z-index:-1; }
.story-visual-dot{ position:absolute; width:9px; height:9px; border-radius:50%; background:var(--grad); }
@media (max-width:900px){ .story-split{ grid-template-columns:1fr; gap:56px; } .story-visual-card{ transform:none; max-width:420px; margin:0 auto; } .story-visual-badge{ transform:none; } }

/* ---------- Why CTRSpace: large-number editorial list ---------- */
.num-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0; border-top:1px solid var(--line); }
.num-item{ position:relative; display:flex; align-items:flex-start; gap:24px; padding:44px 30px; border-bottom:1px solid var(--line); transition:background .3s ease; }
.num-item:nth-child(odd){ border-right:1px solid var(--line); }
.num-item:hover{ background:var(--bg-lav); }
.num-item-digit{ font-size:64px; font-weight:800; line-height:1; background:linear-gradient(180deg,var(--line),transparent); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; flex-shrink:0; transition:background .4s ease; letter-spacing:-.02em; }
.num-item:hover .num-item-digit{ background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.num-item-text h4{ font-size:18px; font-weight:800; color:var(--ink); }
.num-item-text p{ margin-top:8px; font-size:14px; color:var(--muted); line-height:1.65; max-width:340px; }
@media (max-width:760px){ .num-grid{ grid-template-columns:1fr; } .num-item:nth-child(odd){ border-right:none; } .num-item-digit{ font-size:48px; } }

/* ---------- Built for Modern Publishers: horizontal journey ---------- */
.journey{ position:relative; display:flex; justify-content:space-between; gap:0; max-width:1000px; margin:70px auto 0; }
.journey::before{ content:''; position:absolute; top:34px; left:8%; right:8%; height:2px; background:linear-gradient(90deg,#3AB4FF,#7B00FF,#D000FF,#3AB4FF); background-size:300% 100%; opacity:.35; }
.journey-step{ position:relative; flex:1; text-align:center; padding:0 10px; }
.journey-step-num{ width:68px; height:68px; border-radius:50%; background:#fff; border:2px solid var(--line); display:flex; align-items:center; justify-content:center; margin:0 auto 22px; font-size:22px; font-weight:800; color:var(--ink-soft); position:relative; z-index:1; transition:all .4s cubic-bezier(.2,.8,.2,1); }
.journey-step.in .journey-step-num{ background:var(--grad); border-color:transparent; color:#fff; transform:scale(1.08); box-shadow:0 14px 30px -10px rgba(123,0,255,.5); }
.journey-step h4{ font-size:16px; font-weight:800; color:var(--ink); }
.journey-step p{ margin-top:8px; font-size:13px; color:var(--muted); line-height:1.6; max-width:190px; margin-left:auto; margin-right:auto; }
@media (max-width:760px){ .journey{ flex-direction:column; gap:36px; align-items:flex-start; } .journey::before{ display:none; } .journey-step{ display:flex; align-items:center; gap:18px; text-align:left; padding:0; } .journey-step-num{ margin:0; flex-shrink:0; } .journey-step p{ margin-left:0; } }

/* ---------- "From Idea to Audience" wave journey (icons + wavy connector) ---------- */
.journey2{ position:relative; max-width:1080px; margin:76px auto 0; }
.journey2-row{ position:relative; display:flex; justify-content:space-between; gap:16px; }
.journey2-step{ flex:1; max-width:250px; display:flex; flex-direction:column; align-items:center; text-align:center; }
.journey2-num{ width:56px; height:56px; border-radius:50%; background:var(--c); color:#fff; font-size:19px; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 22px -8px var(--c); }
.journey2-step h4{ margin-top:18px; font-size:22px; font-weight:800; color:var(--c); }
.journey2-underline{ display:block; width:36px; height:3px; border-radius:2px; background:var(--c); margin:8px auto 0; }
.journey2-step p{ margin-top:14px; font-size:14.5px; line-height:1.7; color:var(--muted); }
@media (max-width:900px){ .journey2-row{ flex-direction:column; gap:36px; } .journey2-step{ max-width:340px; } }

/* ---------- What Makes CTRSpace Different: split with large type + checklist ---------- */
/* ---------- "What Makes CTRSpace Different" card grid (badges + icons + blobs) ---------- */
/* ---------- "One Experience. Every Screen." device showcase (rebuilt: clean grid, no overlap) ---------- */
.resp-section{ position:relative; overflow:hidden; }
.resp-section::before{ content:''; position:absolute; top:-60px; left:-60px; width:260px; height:260px; background:radial-gradient(circle,#3AB4FF,transparent 70%); opacity:.16; filter:blur(10px); z-index:0; pointer-events:none; }
.resp-section::after{ content:''; position:absolute; bottom:-70px; right:-70px; width:280px; height:280px; background:radial-gradient(circle,#D000FF,transparent 70%); opacity:.14; filter:blur(10px); z-index:0; pointer-events:none; }
.resp-header{ position:relative; z-index:1; max-width:600px; margin:0 auto; }
.resp-header p{ margin-top:16px; color:var(--muted); font-size:16px; line-height:1.7; }

.resp-checks{ position:relative; z-index:1; display:flex; justify-content:center; gap:16px; margin-top:48px; flex-wrap:wrap; }
.resp-check{ display:inline-flex; align-items:center; gap:9px; background:#fff; border:1px solid var(--line); padding:12px 22px; border-radius:100px; font-size:13.5px; font-weight:700; color:var(--ink); box-shadow:0 8px 20px -10px rgba(30,10,80,.12); }
.resp-check svg{ width:15px; height:15px; color:var(--purple); flex-shrink:0; }

.resp-stage{ position:relative; z-index:1; max-width:1040px; margin:80px auto 0; padding:0 24px; }
.resp-stage::before{ content:''; position:absolute; left:50%; bottom:-6px; transform:translateX(-50%); width:64%; height:36px; background:radial-gradient(ellipse, rgba(90,40,200,.22), transparent 72%); filter:blur(14px); z-index:0; pointer-events:none; }
.resp-devices{ display:flex; align-items:flex-end; justify-content:center; gap:40px; flex-wrap:nowrap; }
.resp-device{ display:flex; flex-direction:column; align-items:center; }
.resp-device-caption{ margin-top:20px; display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line); padding:9px 16px; border-radius:100px; font-size:12.5px; font-weight:700; color:var(--ink); box-shadow:0 6px 16px -8px rgba(30,10,80,.14); white-space:nowrap; }
.resp-device-caption svg{ width:14px; height:14px; color:var(--purple); flex-shrink:0; }

.resp-mini-nav{ display:flex; align-items:center; justify-content:space-between; padding:14px 20px; border-bottom:1px solid #EEECF8; }
.resp-mini-logo{ display:flex; align-items:center; gap:6px; font-weight:800; color:var(--ink); font-size:12px; }
.resp-mini-logo span{ width:14px; height:14px; border-radius:50%; background:var(--grad); flex-shrink:0; }
.resp-mini-menu{ display:flex; gap:8px; }
.resp-mini-menu i{ display:block; width:5px; height:5px; border-radius:50%; background:#D8D6EC; }
.resp-mini-body{ padding:24px 28px 28px; }
.resp-mini-heading{ font-weight:800; color:var(--ink); line-height:1.28; font-size:20px; }
.resp-mini-heading .grad-text{ display:block; }
.resp-mini-sub{ margin-top:6px; color:var(--muted); font-size:13px; }
.resp-mini-search{ margin-top:14px; display:flex; align-items:center; justify-content:space-between; background:#F6F5FB; border-radius:100px; padding:9px 9px 9px 16px; color:#B7B3D4; font-size:12px; }
.resp-mini-search span:last-child{ width:22px; height:22px; border-radius:50%; background:var(--grad); flex-shrink:0; }
.resp-mini-grid{ margin-top:14px; display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.resp-mini-grid div{ aspect-ratio:3/4; border-radius:6px; background:linear-gradient(160deg,#E7E4FA,#F3F1FC); }

.resp-laptop{ width:540px; flex-shrink:0; }
.resp-laptop-screen{ background:#15132E; border-radius:16px 16px 4px 4px; padding:10px 10px 0; box-shadow:0 40px 70px -24px rgba(20,10,60,.35); }
.resp-laptop-inner{ background:#fff; border-radius:8px 8px 0 0; overflow:hidden; }
.resp-laptop-base{ height:16px; background:linear-gradient(180deg,#E2E1EE,#C4C2D6); border-radius:0 0 12px 12px; position:relative; }
.resp-laptop-base::before{ content:''; position:absolute; left:50%; top:0; transform:translateX(-50%); width:80px; height:6px; background:#A7A4BE; border-radius:0 0 6px 6px; }

.resp-tablet-frame{ width:180px; background:#161428; border-radius:20px; padding:11px 9px; box-shadow:0 26px 50px -18px rgba(20,10,60,.28); flex-shrink:0; }
.resp-tablet-frame .resp-mini-nav{ padding:9px 12px; }
.resp-tablet-frame .resp-mini-logo{ font-size:9.5px; }
.resp-tablet-frame .resp-mini-logo span{ width:11px; height:11px; }
.resp-tablet-frame .resp-mini-body{ padding:12px; }
.resp-tablet-frame .resp-mini-heading{ font-size:12.5px; }
.resp-tablet-frame .resp-mini-sub{ font-size:9px; margin-top:4px; }
.resp-tablet-frame .resp-mini-search{ font-size:8.5px; padding:6px 6px 6px 10px; margin-top:8px; }
.resp-tablet-frame .resp-mini-search span:last-child{ width:14px; height:14px; }
.resp-tablet-frame .resp-mini-grid{ grid-template-columns:repeat(3,1fr); gap:6px; margin-top:8px; }
.resp-tablet-screen{ background:#fff; border-radius:10px; overflow:hidden; }

.resp-phone-frame{ position:relative; width:112px; background:#161428; border-radius:24px; padding:9px 7px; box-shadow:0 26px 50px -18px rgba(20,10,60,.28); flex-shrink:0; }
.resp-phone-frame::before{ content:''; position:absolute; top:9px; left:50%; transform:translateX(-50%); width:38px; height:5px; background:#000; border-radius:4px; z-index:2; }
.resp-phone-screen{ background:#fff; border-radius:16px; overflow:hidden; padding-top:6px; }
.resp-phone-screen .resp-mini-nav{ padding:7px 10px; }
.resp-phone-screen .resp-mini-logo{ font-size:8px; }
.resp-phone-screen .resp-mini-logo span{ width:9px; height:9px; }
.resp-phone-screen .resp-mini-body{ padding:10px; }
.resp-phone-screen .resp-mini-heading{ font-size:9.5px; }
.resp-phone-screen .resp-mini-sub{ display:none; }
.resp-phone-screen .resp-mini-search{ display:none; }
.resp-phone-screen .resp-mini-grid{ grid-template-columns:repeat(2,1fr); gap:6px; margin-top:10px; }

.resp-stat-bar{ position:relative; z-index:1; display:flex; align-items:stretch; justify-content:center; max-width:820px; margin:64px auto 0; background:#fff; border:1px solid var(--line); border-radius:20px; box-shadow:0 24px 48px -24px rgba(20,10,70,.18); overflow:hidden; }
.resp-stat{ flex:1; display:flex; align-items:center; gap:12px; padding:24px 22px; min-width:0; }
.resp-stat + .resp-stat{ border-left:1px solid var(--line); }
.resp-stat-icon{ width:40px; height:40px; border-radius:12px; background:var(--grad-soft); color:var(--purple); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.resp-stat-icon svg{ width:19px; height:19px; }
.resp-stat h6{ font-size:13.5px; font-weight:800; color:var(--ink); text-align:left; }
.resp-stat p{ font-size:11.5px; color:var(--muted); text-align:left; margin-top:2px; line-height:1.4; }
@media (max-width:700px){ .resp-stat-bar{ flex-direction:column; } .resp-stat + .resp-stat{ border-left:none; border-top:1px solid var(--line); } }

@media (max-width:900px){
  .resp-devices{ flex-wrap:wrap; gap:56px; }
  .resp-laptop{ width:100%; max-width:460px; }
}
@media (max-width:520px){
  .resp-laptop{ max-width:320px; }
  .resp-tablet-frame{ width:160px; }
  .resp-phone-frame{ width:104px; }
}
.diff-section{ position:relative; overflow:hidden; }
.diff-section::before{ content:''; position:absolute; top:-70px; right:-70px; width:300px; height:300px; background:var(--grad); opacity:.14; border-radius:55% 45% 60% 40% / 50% 55% 45% 50%; filter:blur(4px); z-index:0; }
.diff-section::after{ content:''; position:absolute; bottom:-90px; left:-90px; width:280px; height:280px; background:var(--grad); opacity:.13; border-radius:45% 55% 40% 60% / 55% 45% 55% 45%; filter:blur(4px); z-index:0; }
.diff-dots-1, .diff-dots-2{ position:absolute; width:130px; height:100px; background-image:radial-gradient(var(--purple) 1.5px, transparent 1.5px); background-size:16px 16px; opacity:.14; z-index:0; pointer-events:none; }
.diff-dots-1{ top:24px; left:46%; }
.diff-dots-2{ bottom:50px; right:6%; }
.diff-split{ position:relative; z-index:1; display:grid; grid-template-columns:0.85fr 1.15fr; gap:70px; align-items:start; }
.diff-heading{ font-size:clamp(26px,3.2vw,38px); font-weight:800; line-height:1.2; letter-spacing:-0.02em; color:var(--ink); position:sticky; top:120px; }
.diff-arrow{ position:absolute; width:80px; height:64px; margin-top:10px; color:var(--purple); opacity:.8; }
.diff-list{ display:grid; grid-template-columns:1fr 1fr; gap:28px 36px; }
.diff-list-item{ display:flex; gap:14px; }
.diff-list-num{ font-size:13px; font-weight:800; color:var(--purple); flex-shrink:0; width:26px; }
.diff-list-item h5{ font-size:15px; font-weight:800; color:var(--ink); }
.diff-list-item p{ margin-top:5px; font-size:13px; color:var(--muted); line-height:1.6; }
.diff-cards{ position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.diff-card{ position:relative; background:#fff; border-radius:20px; padding:30px 26px 26px; box-shadow:0 14px 34px -16px rgba(30,10,80,.14); border:1px solid var(--line); transition:transform .3s ease, box-shadow .3s ease; }
.diff-card:hover{ transform:translateY(-4px); box-shadow:0 20px 40px -16px rgba(30,10,80,.2); }
.diff-card-badge{ position:absolute; top:-16px; left:24px; width:40px; height:40px; border-radius:50%; background:var(--grad); color:#fff; font-size:13.5px; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 18px -6px rgba(123,0,255,.5); z-index:2; }
.diff-card-icon{ width:62px; height:62px; border-radius:50%; background:var(--bg-lav); display:flex; align-items:center; justify-content:center; margin:16px 0 16px; }
.diff-card-icon svg{ width:27px; height:27px; color:var(--purple); }
.diff-card h5{ font-size:16px; font-weight:800; color:var(--ink); line-height:1.3; }
.diff-card p{ margin-top:8px; font-size:13.5px; color:var(--muted); line-height:1.6; }
@media (max-width:900px){ .diff-split{ grid-template-columns:1fr; gap:36px; } .diff-heading{ position:static; } .diff-list{ grid-template-columns:1fr; } .diff-cards{ grid-template-columns:1fr; } .diff-arrow{ display:none; } }

/* ---------- creative full-width visual section ---------- */
.creative-visual-section{ position:relative; background:linear-gradient(160deg,#0B0D24,#16123A 55%,#1C0F35); overflow:hidden; padding:120px 0; }
.creative-visual-section::before{ content:''; position:absolute; inset:0; background:radial-gradient(50% 50% at 15% 15%, rgba(58,180,255,.18), transparent 65%), radial-gradient(50% 50% at 90% 85%, rgba(208,0,255,.16), transparent 65%); pointer-events:none; }
.creative-visual-inner{ position:relative; z-index:1; text-align:center; }
.creative-visual-inner .eyebrow{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.16); color:#fff; }
.creative-visual-inner h2{ margin-top:16px; color:#fff; background:none; -webkit-text-fill-color:#fff; font-size:clamp(26px,3.4vw,40px); font-weight:800; }
.creative-visual-inner p{ margin:14px auto 0; max-width:520px; color:rgba(255,255,255,.6); font-size:15px; }
.creative-frame{ position:relative; max-width:920px; margin:60px auto 0; border-radius:24px; overflow:hidden; box-shadow:0 60px 120px -30px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08); transform:perspective(1400px) rotateX(3deg); }
.creative-frame-bar{ height:36px; background:#15162E; display:flex; align-items:center; gap:6px; padding:0 16px; }
.creative-frame-bar span{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.18); }
.creative-frame img{ width:100%; display:block; }
.creative-float-badge{ position:absolute; top:-24px; right:6%; background:#fff; border-radius:16px; padding:14px 18px; box-shadow:0 20px 40px -12px rgba(0,0,0,.4); display:flex; align-items:center; gap:10px; z-index:2; }
.creative-float-badge-icon{ width:34px; height:34px; border-radius:10px; background:var(--grad); display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; }
.creative-float-badge b{ font-size:12.5px; font-weight:800; color:var(--ink); display:block; }
.creative-float-badge span{ font-size:10.5px; color:var(--muted); }
@media (max-width:760px){ .creative-frame{ transform:none; } .creative-float-badge{ display:none; } }