/* ============================================================
   SOFTRIFY COMPONENT LIBRARY — new block styles
   Reuses tokens + classes from styles.css. Everything here is
   additive: page banner, image placeholders, logo grid, industry
   cards, feature rows, stats band, testimonials, blog, team,
   about, contact, FAQ, pricing — plus the library chrome.
   ============================================================ */

/* ---------- Image placeholder ---------- */
.img-ph { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; text-align: center; padding: 22px; border-radius: 16px; border: 1.5px dashed rgba(38,51,89,.28); background: linear-gradient(135deg, rgba(38,51,89,.05), rgba(38,51,89,.02)); color: var(--muted); overflow: hidden; }
.img-ph::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(38,51,89,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(38,51,89,.05) 1px, transparent 1px); background-size: 22px 22px; mask-image: radial-gradient(ellipse at 50% 50%, #000 0%, transparent 80%); pointer-events: none; }
.img-ph .ic { width: 30px; height: 30px; color: var(--navy); opacity: .55; position: relative; }
.img-ph .dim { position: relative; font-family: 'JetBrains Mono'; font-size: 12px; letter-spacing: 0.06em; color: var(--navy); font-weight: 500; }
.img-ph .desc { position: relative; font-size: 12px; line-height: 1.4; max-width: 26ch; color: var(--muted); }
.img-ph.solid { background: var(--navy-deep); border-color: rgba(255,255,255,.16); }
.img-ph.solid .ic { color: #fff; opacity: .5; }
.img-ph.solid .dim { color: rgba(255,255,255,.9); }
.img-ph.solid .desc { color: rgba(255,255,255,.5); }
.ph-wide { aspect-ratio: 16 / 9; }
.ph-square { aspect-ratio: 1 / 1; }
.ph-portrait { aspect-ratio: 4 / 5; }
.ph-banner { aspect-ratio: 21 / 9; }
.ph-avatar { width: 56px; height: 56px; border-radius: 999px; flex-shrink: 0; padding: 0; gap: 2px; }
.ph-avatar .dim { font-size: 9px; }
.ph-logo { aspect-ratio: 5 / 2; border-radius: 12px; }

/* ---------- 1. Sub-page banner ---------- */
.page-banner { position: relative; padding: 150px 0 70px; overflow: hidden; background: linear-gradient(165deg, var(--navy-darker) 0%, var(--navy-deep) 55%, var(--navy) 100%); color: #fff; }
.page-banner-bg { position: absolute; inset: 0; pointer-events: none; }
.page-banner-bg .grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse at 22% 30%, #000 0%, transparent 72%); }
.page-banner-bg .glow { position: absolute; top: -14%; right: -6%; width: 540px; height: 440px; background: radial-gradient(ellipse, rgba(215,71,66,.24) 0%, transparent 65%); filter: blur(16px); }
.page-banner-bg .photo { position: absolute; inset: 0; opacity: .16; mix-blend-mode: luminosity; }
.page-banner .inner { position: relative; z-index: 2; max-width: 760px; }
.page-banner .crumb { display: inline-flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono'; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: 8px; }
.page-banner .crumb a { color: rgba(255,255,255,.5); text-decoration: none; transition: color .2s; }
.page-banner .crumb a:hover { color: var(--red-bright); }
.page-banner .crumb .sep { opacity: .45; }
.page-banner .crumb .cur { color: #fff; }
.page-banner h1 { font-family: 'Space Grotesk'; font-weight: 600; font-size: clamp(38px, 5.4vw, 62px); line-height: 1.04; letter-spacing: -0.035em; margin: 18px 0 16px; max-width: 16ch; }
.page-banner h1 .accent { color: var(--red-bright); font-style: italic; font-weight: 500; }
.page-banner p { font-size: 18px; line-height: 1.55; color: rgba(255,255,255,.72); max-width: 540px; margin: 0; }

/* ---------- 2. Service cards (with image slot variant) ---------- */
.svc-card-img { padding: 0; cursor: default; }
.svc-card-img .ph-wide { border-radius: 18px 18px 0 0; border: none; border-bottom: 1px solid rgba(38,51,89,.1); }
.svc-card-img .svc-body { padding: 26px 30px 30px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.svc-card-img .svc-body h3 { font-family: 'Space Grotesk'; font-size: 21px; font-weight: 600; letter-spacing: -0.02em; margin: 0; color: var(--ink); }
.svc-card-img .svc-body p { color: var(--muted); margin: 0; font-size: 15px; line-height: 1.55; }
.svc-card-img .svc-link { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono'; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.svc-card-img .svc-link svg { transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.svc-card-img:hover .svc-link svg { transform: translateX(4px); }

/* ---------- 3. Service detail block ---------- */
.detail-block { padding: 120px 0; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.detail-grid.flip .detail-media { order: 2; }
@media (max-width: 900px) { .detail-grid { grid-template-columns: 1fr; gap: 40px; } .detail-grid.flip .detail-media { order: 0; } }
.detail-media .img-ph { box-shadow: 0 40px 80px -44px rgba(13,18,36,.3); }
.service-photo { aspect-ratio: 16 / 9; margin: 0; overflow: hidden; border-radius: 16px; background: var(--cream); box-shadow: 0 40px 80px -44px rgba(13,18,36,.3); }
.service-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.detail-copy h2 { font-family: 'Space Grotesk'; font-weight: 600; font-size: clamp(30px, 3.6vw, 44px); line-height: 1.08; letter-spacing: -0.03em; margin: 18px 0 18px; color: var(--ink); }
.detail-copy h2 .accent { color: var(--red); }
.detail-copy p { color: var(--muted); font-size: 17px; line-height: 1.6; margin: 0 0 24px; max-width: 52ch; }
.detail-features { list-style: none; padding: 0; margin: 0 0 30px; display: flex; flex-direction: column; gap: 14px; }
.detail-features li { display: flex; align-items: flex-start; gap: 13px; font-size: 15px; line-height: 1.45; color: var(--ink); }
.detail-features .tick { width: 24px; height: 24px; border-radius: 7px; background: rgba(215,71,66,.12); color: var(--red); display: grid; place-items: center; flex-shrink: 0; margin-top: 1px; }

/* ---------- 4. Integrations / logo grid ---------- */
.logos { padding: 110px 0; background: var(--cream); }
.logo-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
@media (max-width: 980px) { .logo-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 600px) { .logo-grid { grid-template-columns: repeat(2, 1fr); } }
.logo-cell { background: #fff; border: 1px solid rgba(38,51,89,.12); border-radius: 14px; padding: 22px; display: grid; place-items: center; transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s; }
.logo-cell:hover { transform: translateY(-4px); border-color: rgba(38,51,89,.26); box-shadow: 0 20px 40px -26px rgba(13,18,36,.22); }
.logo-cell .img-ph { width: 100%; aspect-ratio: 5 / 2; background: transparent; border-color: rgba(38,51,89,.2); }
.integration-logo { display: flex; min-height: 70px; width: 100%; flex-direction: column; align-items: center; justify-content: center; gap: 11px; }
.integration-icon { display: block; width: 38px; height: 38px; object-fit: contain; }
.integration-icon svg { display: block; width: 100%; height: 100%; }
.integration-label { color: var(--ink); font-family: 'Space Grotesk'; font-size: 13px; font-weight: 600; letter-spacing: -.01em; text-align: center; }

/* ---------- 5. Industries (image + name + text) ---------- */
.industries-rich { padding: 120px 0; }
.ind-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .ind-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ind-grid { grid-template-columns: 1fr; } }
.ind-card { border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid rgba(38,51,89,.12); transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
.ind-card:hover { transform: translateY(-5px); box-shadow: 0 34px 64px -40px rgba(13,18,36,.3); }
.ind-card .ind-media { position: relative; }
.ind-card .ind-media .img-ph { border-radius: 0; border: none; aspect-ratio: 3 / 2; }
.ind-card .ind-body { padding: 22px 24px 26px; }
.ind-card .ind-body .kicker { font-family: 'JetBrains Mono'; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); }
.ind-card .ind-body h3 { font-family: 'Space Grotesk'; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; margin: 8px 0 8px; color: var(--ink); }
.ind-card .ind-body p { font-size: 14px; line-height: 1.55; color: var(--muted); margin: 0; }

/* ---------- 6. Feature / benefits row ---------- */
.features { padding: 120px 0; }
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 40px; }
@media (max-width: 900px) { .feat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .feat-grid { grid-template-columns: 1fr; } }
.feat { padding: 30px 28px; border-radius: 16px; transition: background .3s; }
.feat:hover { background: var(--cream); }
.feat .ic { width: 48px; height: 48px; border-radius: 13px; background: rgba(38,51,89,.06); color: var(--navy); display: grid; place-items: center; margin-bottom: 18px; transition: background .3s, color .3s, transform .3s; }
.feat:hover .ic { background: var(--ink); color: #fff; transform: rotate(-6deg); }
.feat h3 { font-family: 'Space Grotesk'; font-size: 19px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 9px; color: var(--ink); }
.feat p { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 0; }

/* ---------- 7. Stats / counters band ---------- */
.stats { padding: 96px 0; background: var(--ink); color: #fff; position: relative; overflow: hidden; }
.stats::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse at 50% 50%, #000 0%, transparent 78%); pointer-events: none; }
.stats .container-x { position: relative; z-index: 1; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 760px) { .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; } }
.stat-cell { text-align: left; }
.stat-cell .num { font-family: 'Space Grotesk'; font-weight: 600; font-size: clamp(40px, 5vw, 60px); letter-spacing: -0.03em; line-height: 1; color: #fff; }
.stat-cell .num .suf { color: var(--red-bright); }
.stat-cell .label { font-family: 'JetBrains Mono'; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-top: 14px; }
.stat-cell .sub { font-size: 14px; color: rgba(255,255,255,.5); margin-top: 6px; line-height: 1.5; }

/* ---------- 9. Testimonials ---------- */
.testi { padding: 120px 0; background: var(--cream); }
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .testi-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } }
.testi-card { background: #fff; border: 1px solid rgba(38,51,89,.12); border-radius: 20px; padding: 32px 30px; display: flex; flex-direction: column; gap: 20px; position: relative; }
.testi-card .quote-mark { font-family: 'Space Grotesk'; font-size: 56px; line-height: .6; color: var(--red); opacity: .25; height: 24px; }
.testi-card .stars { display: flex; gap: 3px; color: var(--red); }
.testi-card blockquote { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink); flex: 1; }
.testi-card .who { display: flex; align-items: center; gap: 14px; padding-top: 6px; border-top: 1px solid rgba(38,51,89,.1); }
.testi-card .who .nm { font-family: 'Space Grotesk'; font-weight: 600; font-size: 15px; letter-spacing: -0.01em; color: var(--ink); }
.testi-card .who .ro { font-size: 13px; color: var(--muted); margin-top: 2px; }

/* ---------- 10. Blog cards ---------- */
.blog { padding: 120px 0; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
@media (max-width: 900px) { .blog-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } }
.post-card { border-radius: 20px; overflow: hidden; background: #fff; border: 1px solid rgba(38,51,89,.1); transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s; display: flex; flex-direction: column; }
.post-card:hover { transform: translateY(-6px); box-shadow: 0 40px 80px -42px rgba(13,18,36,.3); }
.post-card .post-media .img-ph { border-radius: 0; border: none; aspect-ratio: 16 / 9; }
.post-card .post-body { padding: 22px 26px 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.post-meta { display: flex; align-items: center; gap: 12px; font-family: 'JetBrains Mono'; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.post-meta .cat { color: var(--red); }
.post-meta .dot { width: 3px; height: 3px; border-radius: 999px; background: rgba(38,51,89,.3); }
.post-card h3 { font-family: 'Space Grotesk'; font-size: 21px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; margin: 0; color: var(--ink); }
.post-card p { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 0; }
.post-card .read { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono'; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.post-card .read svg { transition: transform .3s; }
.post-card:hover .read svg { transform: translateX(4px); }

/* ---------- 11. Blog single / article ---------- */
.article { padding: 110px 0 120px; }
.article-head { max-width: 760px; margin: 0 auto 40px; text-align: center; }
.article-head .cat { font-family: 'JetBrains Mono'; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); }
.article-head h1 { font-family: 'Space Grotesk'; font-weight: 600; font-size: clamp(32px, 4.4vw, 52px); line-height: 1.08; letter-spacing: -0.03em; margin: 16px 0 22px; color: var(--ink); }
.article-meta { display: inline-flex; align-items: center; gap: 14px; }
.article-meta .nm { font-family: 'Space Grotesk'; font-weight: 600; font-size: 14px; color: var(--ink); }
.article-meta .mt { font-size: 13px; color: var(--muted); }
.article-feature { max-width: 1000px; margin: 0 auto 48px; }
.article-feature .img-ph { aspect-ratio: 21 / 9; box-shadow: 0 40px 90px -50px rgba(13,18,36,.35); }
.article-body { max-width: 720px; margin: 0 auto; }
.article-body > * { margin: 0 0 24px; }
.article-body p { font-size: 18px; line-height: 1.72; color: #313a4d; }
.article-body h2 { font-family: 'Space Grotesk'; font-weight: 600; font-size: 28px; letter-spacing: -0.02em; color: var(--ink); margin-top: 16px; }
.article-body h3 { font-family: 'Space Grotesk'; font-weight: 600; font-size: 21px; letter-spacing: -0.02em; color: var(--ink); }
.article-body ul { padding-left: 22px; color: #313a4d; font-size: 17px; line-height: 1.7; display: flex; flex-direction: column; gap: 8px; }
.article-body img, .article-body .img-ph { aspect-ratio: 16 / 9; }
.article-body figcaption { font-size: 13px; color: var(--muted); text-align: center; margin-top: 12px; }
.article-pull { border-left: 3px solid var(--red); padding: 6px 0 6px 26px; font-family: 'Space Grotesk'; font-size: 24px; font-weight: 500; line-height: 1.4; letter-spacing: -0.02em; color: var(--ink); }

/* ---------- 12. Team ---------- */
.team { padding: 120px 0; background: var(--cream); }
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 900px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .team-grid { grid-template-columns: 1fr; max-width: 320px; margin: 0 auto; } }
.team-card { text-align: left; }
.team-card .team-photo .img-ph { aspect-ratio: 4 / 5; border-radius: 18px; border: none; box-shadow: 0 24px 50px -34px rgba(13,18,36,.3); }
.team-card .nm { font-family: 'Space Grotesk'; font-weight: 600; font-size: 18px; letter-spacing: -0.02em; color: var(--ink); margin: 18px 0 4px; }
.team-card .ro { font-family: 'JetBrains Mono'; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red); }
.team-card .bio { font-size: 13px; line-height: 1.55; color: var(--muted); margin: 10px 0 0; }

/* ---------- 13. About / company intro ---------- */
.about { padding: 120px 0; }
.about-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; }
@media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; gap: 40px; } }
.about-media { position: relative; }
.about-media .img-ph { aspect-ratio: 4 / 5; box-shadow: 0 40px 80px -44px rgba(13,18,36,.3); }
.about-media .badge { position: absolute; right: -16px; bottom: -16px; background: linear-gradient(140deg, var(--navy-deep), var(--navy)); color: #fff; border-radius: 16px; padding: 18px 22px; box-shadow: 0 24px 50px -24px rgba(38,51,89,.5); }
.about-media .badge .v { font-family: 'Space Grotesk'; font-weight: 600; font-size: 30px; letter-spacing: -0.02em; }
.about-media .badge .l { font-family: 'JetBrains Mono'; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-top: 4px; }
.about-copy h2 { font-family: 'Space Grotesk'; font-weight: 600; font-size: clamp(30px, 3.8vw, 46px); line-height: 1.08; letter-spacing: -0.03em; margin: 18px 0 20px; color: var(--ink); }
.about-copy h2 .accent { color: var(--red); font-style: italic; font-weight: 500; }
.about-copy p { color: var(--muted); font-size: 17px; line-height: 1.65; margin: 0 0 18px; max-width: 54ch; }
.about-copy .sign { margin-top: 26px; display: flex; align-items: center; gap: 14px; }
.about-copy .sign .nm { font-family: 'Space Grotesk'; font-weight: 600; font-size: 15px; color: var(--ink); }
.about-copy .sign .ro { font-size: 13px; color: var(--muted); }

/* ---------- 15. Contact ---------- */
.contact { padding: 120px 0; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 40px; } }
.contact-form { display: flex; flex-direction: column; gap: 18px; }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 480px) { .cf-row { grid-template-columns: 1fr; } }
.cf-field { display: flex; flex-direction: column; gap: 7px; }
.cf-field label { font-family: 'JetBrains Mono'; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.cf-field label .req { color: var(--red); }
.cf-field input, .cf-field textarea, .cf-field select { font-family: 'Manrope', system-ui, sans-serif; font-size: 15px; color: var(--ink); background: #fff; border: 1px solid rgba(38,51,89,.18); border-radius: 12px; padding: 12px 14px; transition: border-color .2s, box-shadow .2s; resize: none; }
.cf-field textarea { min-height: 120px; line-height: 1.5; }
.cf-field input:focus, .cf-field textarea:focus, .cf-field select:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(215,71,66,.12); }
.contact-form .btn-primary { justify-content: center; margin-top: 4px; }
.contact-aside { display: flex; flex-direction: column; gap: 18px; }
.contact-map .img-ph { aspect-ratio: 16 / 11; border-radius: 18px; }
.contact-info { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 480px) { .contact-info { grid-template-columns: 1fr; } }
.contact-info .ci { background: var(--cream); border-radius: 14px; padding: 18px 20px; }
.contact-info .ci .k { font-family: 'JetBrains Mono'; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--red); margin-bottom: 8px; }
.contact-info .ci .v { font-family: 'Space Grotesk'; font-weight: 500; font-size: 15px; letter-spacing: -0.01em; color: var(--ink); line-height: 1.4; }

/* ---------- 16. FAQ accordion ---------- */
.faq { padding: 120px 0; background: var(--cream); }
.faq-wrap { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: #fff; border: 1px solid rgba(38,51,89,.12); border-radius: 16px; overflow: hidden; transition: border-color .25s, box-shadow .25s; }
.faq-item[open] { border-color: rgba(38,51,89,.26); box-shadow: 0 24px 50px -38px rgba(13,18,36,.26); }
.faq-item summary { list-style: none; cursor: pointer; padding: 24px 26px; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-family: 'Space Grotesk'; font-weight: 600; font-size: 18px; letter-spacing: -0.02em; color: var(--ink); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .pm { width: 30px; height: 30px; flex-shrink: 0; border-radius: 999px; background: rgba(38,51,89,.06); color: var(--navy); display: grid; place-items: center; transition: transform .3s cubic-bezier(.2,.7,.2,1), background .25s, color .25s; }
.faq-item[open] summary .pm { transform: rotate(45deg); background: var(--red); color: #fff; }
.faq-item .faq-a { padding: 0 26px 26px; color: var(--muted); font-size: 15px; line-height: 1.65; max-width: 64ch; }

/* ---------- 17. Pricing tiers ---------- */
.pricing { padding: 120px 0; }
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
@media (max-width: 900px) { .price-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } }
.price-card { background: var(--bg); border: 1px solid rgba(38,51,89,.16); border-radius: 22px; padding: 36px 32px 38px; display: flex; flex-direction: column; gap: 22px; position: relative; transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
.price-card:hover { transform: translateY(-5px); box-shadow: 0 34px 70px -44px rgba(13,18,36,.28); }
.price-card.feat-tier { background: linear-gradient(150deg, var(--navy-deep), var(--navy)); color: #fff; border-color: transparent; box-shadow: 0 40px 90px -44px rgba(38,51,89,.55); }
.price-card .ribbon { position: absolute; top: 22px; right: 22px; font-family: 'JetBrains Mono'; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; background: var(--red); padding: 5px 11px; border-radius: 999px; }
.price-card .plan { font-family: 'JetBrains Mono'; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); }
.price-card.feat-tier .plan { color: var(--red-bright); }
.price-card .amt { font-family: 'Space Grotesk'; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); display: flex; align-items: baseline; gap: 4px; }
.price-card.feat-tier .amt { color: #fff; }
.price-card .amt .cur { font-size: 22px; align-self: flex-start; margin-top: 8px; }
.price-card .amt .big { font-size: 48px; line-height: 1; }
.price-card .amt .per { font-family: 'Manrope'; font-size: 14px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.price-card.feat-tier .amt .per { color: rgba(255,255,255,.6); }
.price-card .plan-desc { font-size: 14px; line-height: 1.55; color: var(--muted); margin: -8px 0 0; }
.price-card.feat-tier .plan-desc { color: rgba(255,255,255,.65); }
.price-card .plan-feats { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 13px; flex: 1; }
.price-card .plan-feats li { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; line-height: 1.45; color: var(--ink); }
.price-card.feat-tier .plan-feats li { color: rgba(255,255,255,.85); }
.price-card .plan-feats .tick { width: 20px; height: 20px; border-radius: 6px; background: rgba(215,71,66,.12); color: var(--red); display: grid; place-items: center; flex-shrink: 0; margin-top: 1px; }
.price-card.feat-tier .plan-feats .tick { background: rgba(255,255,255,.14); color: #fff; }
.price-card .btn { justify-content: center; }

/* ---------- 18. Filter / Tab Bar ---------- */
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; }
.filter-btn { font-family: 'JetBrains Mono'; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); background: #fff; border: 1px solid rgba(38,51,89,.16); border-radius: 999px; padding: 10px 18px; cursor: pointer; transition: all .2s; }
.filter-btn:hover { color: var(--ink); border-color: rgba(38,51,89,.34); }
.filter-btn.active { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 0 10px 22px -12px rgba(215,71,66,.6); }
.filter-bar.underline { gap: 4px; border-bottom: 1px solid rgba(38,51,89,.14); }
.filter-bar.underline .filter-btn { background: none; border: none; border-radius: 0; padding: 12px 16px; position: relative; }
.filter-bar.underline .filter-btn::after { content: ''; position: absolute; left: 16px; right: 16px; bottom: -1px; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.filter-bar.underline .filter-btn.active { color: var(--red); box-shadow: none; }
.filter-bar.underline .filter-btn.active::after { transform: scaleX(1); }

/* ---------- 19. Pagination ---------- */
.pagination { display: flex; align-items: center; justify-content: center; gap: 8px; }
.pg-link { min-width: 44px; height: 44px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: 'JetBrains Mono'; font-size: 14px; color: var(--ink); background: #fff; border: 1px solid rgba(38,51,89,.16); border-radius: 12px; text-decoration: none; cursor: pointer; transition: all .2s; }
.pg-link:hover { border-color: rgba(38,51,89,.4); }
.pg-link.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.pg-link.arrow { font-family: 'Manrope'; font-weight: 600; letter-spacing: 0.02em; }
.pg-link[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.pg-ellipsis { min-width: 24px; text-align: center; color: var(--muted); font-family: 'JetBrains Mono'; }

/* ---------- 20. Featured Post Card ---------- */
.featured-post { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; background: #fff; border: 1px solid rgba(38,51,89,.12); border-radius: 22px; overflow: hidden; transition: box-shadow .4s, transform .4s cubic-bezier(.2,.7,.2,1); }
.featured-post:hover { transform: translateY(-4px); box-shadow: 0 44px 90px -50px rgba(13,18,36,.32); }
@media (max-width: 860px) { .featured-post { grid-template-columns: 1fr; } }
.featured-post .fp-media .img-ph { border: none; border-radius: 0; height: 100%; min-height: 320px; aspect-ratio: auto; }
@media (max-width: 860px) { .featured-post .fp-media .img-ph { min-height: 240px; aspect-ratio: 16 / 9; } }
.featured-post .fp-body { padding: 44px 46px; display: flex; flex-direction: column; gap: 16px; justify-content: center; }
@media (max-width: 560px) { .featured-post .fp-body { padding: 30px 26px; } }
.featured-post .fp-tag { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-family: 'JetBrains Mono'; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); background: rgba(215,71,66,.1); padding: 6px 12px; border-radius: 999px; }
.featured-post h3 { font-family: 'Space Grotesk'; font-weight: 600; font-size: clamp(26px, 3vw, 38px); line-height: 1.1; letter-spacing: -0.03em; margin: 0; color: var(--ink); }
.featured-post p { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0; }
.featured-post .fp-meta { display: flex; align-items: center; gap: 12px; font-family: 'JetBrains Mono'; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.featured-post .fp-meta .dot { width: 3px; height: 3px; border-radius: 999px; background: rgba(38,51,89,.3); }
.featured-post .read { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: 4px; font-family: 'JetBrains Mono'; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.featured-post .read svg { transition: transform .3s; }
.featured-post:hover .read svg { transform: translateX(4px); }

/* ---------- 21. Project Meta Block ---------- */
.proj-meta { background: var(--cream); border: 1px solid rgba(38,51,89,.12); border-radius: 20px; padding: 32px 34px; display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: center; }
@media (max-width: 720px) { .proj-meta { grid-template-columns: 1fr; gap: 26px; } }
.proj-meta .pm-logo .img-ph { width: 200px; aspect-ratio: 5 / 2; background: #fff; }
@media (max-width: 720px) { .proj-meta .pm-logo .img-ph { width: 160px; } }
.proj-meta .pm-specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 24px 32px; }
.proj-meta .pm-spec .k { font-family: 'JetBrains Mono'; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); margin-bottom: 7px; }
.proj-meta .pm-spec .v { font-family: 'Space Grotesk'; font-weight: 500; font-size: 15px; letter-spacing: -0.01em; color: var(--ink); line-height: 1.4; }
.proj-meta .pm-spec .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.proj-meta .pm-spec .chips span { font-family: 'JetBrains Mono'; font-size: 11px; color: var(--navy); background: rgba(38,51,89,.07); border-radius: 6px; padding: 4px 9px; }

/* ---------- 22. Table of Contents ---------- */
.toc { position: sticky; top: 130px; background: #fff; border: 1px solid rgba(38,51,89,.12); border-radius: 18px; padding: 24px 24px; }
.toc .toc-title { font-family: 'JetBrains Mono'; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.toc ol { list-style: none; counter-reset: toc; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.toc li { counter-increment: toc; }
.toc a { display: flex; gap: 12px; align-items: baseline; padding: 9px 12px; border-radius: 10px; font-size: 14px; line-height: 1.4; color: var(--muted); text-decoration: none; border-left: 2px solid transparent; transition: all .2s; }
.toc a::before { content: counter(toc, decimal-leading-zero); font-family: 'JetBrains Mono'; font-size: 11px; color: rgba(38,51,89,.4); }
.toc a:hover { color: var(--ink); background: var(--cream); }
.toc a.active { color: var(--red); background: rgba(215,71,66,.07); border-left-color: var(--red); font-weight: 500; }
.toc a.active::before { color: var(--red); }
.toc-body h2 { font-family: 'Space Grotesk'; font-weight: 600; font-size: 26px; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 14px; scroll-margin-top: 130px; }
.toc-body h2:not(:first-child) { margin-top: 40px; }
.toc-body p { font-size: 16px; line-height: 1.7; color: #313a4d; margin: 0 0 18px; max-width: 60ch; }

/* ---------- 23. Author Box ---------- */
.author-box { display: flex; align-items: center; gap: 22px; background: var(--cream); border: 1px solid rgba(38,51,89,.12); border-radius: 20px; padding: 26px 30px; max-width: 720px; }
@media (max-width: 560px) { .author-box { flex-direction: column; text-align: center; gap: 16px; } }
.author-box .ab-avatar .img-ph { width: 80px; height: 80px; border-radius: 999px; flex-shrink: 0; padding: 0; gap: 2px; }
.author-box .ab-avatar .img-ph .dim { font-size: 9px; }
.author-box .ab-info { flex: 1; min-width: 0; }
.author-box .ab-info .nm { font-family: 'Space Grotesk'; font-weight: 600; font-size: 18px; letter-spacing: -0.02em; color: var(--ink); }
.author-box .ab-info .role { font-family: 'JetBrains Mono'; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red); margin: 4px 0 8px; }
.author-box .ab-info .bio { font-size: 14px; line-height: 1.55; color: var(--muted); margin: 0; }
.author-box .ab-socials { display: flex; gap: 8px; }
@media (max-width: 560px) { .author-box .ab-socials { justify-content: center; } }
.author-box .ab-socials a { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: #fff; border: 1px solid rgba(38,51,89,.14); color: var(--navy); transition: all .2s; }
.author-box .ab-socials a:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------- 24. Prev / Next Navigation ---------- */
.prev-next { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .prev-next { grid-template-columns: 1fr; } }
.pn-link { display: flex; align-items: center; gap: 16px; padding: 22px 24px; background: #fff; border: 1px solid rgba(38,51,89,.14); border-radius: 16px; text-decoration: none; transition: all .25s; }
.pn-link:hover { border-color: rgba(38,51,89,.32); box-shadow: 0 20px 44px -30px rgba(13,18,36,.24); }
.pn-link.next { text-align: right; flex-direction: row-reverse; }
.pn-link .pn-arrow { width: 40px; height: 40px; flex-shrink: 0; border-radius: 999px; background: rgba(38,51,89,.06); color: var(--navy); display: grid; place-items: center; transition: background .25s, color .25s; }
.pn-link:hover .pn-arrow { background: var(--red); color: #fff; }
.pn-link .pn-dir { font-family: 'JetBrains Mono'; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.pn-link .pn-title { font-family: 'Space Grotesk'; font-weight: 600; font-size: 16px; letter-spacing: -0.02em; color: var(--ink); margin-top: 4px; line-height: 1.25; }
.pn-link .pn-text { min-width: 0; }

/* ---------- 25. Breadcrumb (standalone) ---------- */
.breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-family: 'JetBrains Mono'; font-size: 12px; letter-spacing: 0.06em; }
.breadcrumb a { color: var(--muted); text-decoration: none; transition: color .2s; }
.breadcrumb a:hover { color: var(--red); }
.breadcrumb .sep { color: rgba(38,51,89,.32); }
.breadcrumb .current { color: var(--ink); font-weight: 500; }
.breadcrumb.on-dark { padding: 16px 20px; background: var(--navy-deep); border-radius: 12px; }
.breadcrumb.on-dark a { color: rgba(255,255,255,.55); }
.breadcrumb.on-dark a:hover { color: var(--red-bright); }
.breadcrumb.on-dark .sep { color: rgba(255,255,255,.3); }
.breadcrumb.on-dark .current { color: #fff; }

/* ============================================================
   IMAGE COMPONENTS — framed / treated image containers.
   Each holds a real <img> in production; here the .img-ph
   placeholder shows dimensions. Swap the placeholder for <img>.
   ============================================================ */

/* ---------- 26. Image Frames ---------- */
.imgframe-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
@media (max-width: 900px) { .imgframe-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .imgframe-grid { grid-template-columns: 1fr; } }
.imgframe { display: flex; flex-direction: column; gap: 12px; }
.imgframe .cap { font-family: 'JetBrains Mono'; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
/* the frame itself — apply these classes to a wrapper around <img> or .img-ph */
.frame { position: relative; overflow: hidden; }
.frame > img, .frame > .img-ph { display: block; width: 100%; height: 100%; object-fit: cover; border: none; border-radius: 0; aspect-ratio: 4 / 3; }
.frame-rounded { border-radius: 18px; }
.frame-soft { border-radius: 18px; box-shadow: 0 30px 60px -34px rgba(13,18,36,.34); }
.frame-bordered { border-radius: 18px; padding: 8px; background: #fff; border: 1px solid rgba(38,51,89,.14); }
.frame-bordered > img, .frame-bordered > .img-ph { border-radius: 12px; }
.frame-circle { border-radius: 999px; }
.frame-circle > img, .frame-circle > .img-ph { aspect-ratio: 1 / 1; }
.frame-tilt { border-radius: 18px; transform: rotate(-2deg); transition: transform .4s cubic-bezier(.2,.7,.2,1); box-shadow: 0 30px 60px -34px rgba(13,18,36,.3); }
.frame-tilt:hover { transform: rotate(0deg) scale(1.01); }
.frame-accent { border-radius: 18px; }
.frame-accent::after { content: ''; position: absolute; inset: 0; border: 2px solid var(--red); border-radius: 18px; transform: translate(12px, 12px); z-index: -1; }
.frame-accent { margin: 0 12px 12px 0; }
.frame-duotone > img, .frame-duotone > .img-ph { filter: grayscale(1); }
.frame-duotone { border-radius: 18px; position: relative; }
.frame-duotone::after { content: ''; position: absolute; inset: 0; background: linear-gradient(150deg, rgba(38,51,89,.55), rgba(215,71,66,.4)); mix-blend-mode: color; pointer-events: none; }
.frame-zoom { border-radius: 18px; }
.frame-zoom > img, .frame-zoom > .img-ph { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.frame-zoom:hover > img, .frame-zoom:hover > .img-ph { transform: scale(1.06); }

/* ---------- 27. Image + Caption cards ---------- */
.imgcap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .imgcap-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .imgcap-grid { grid-template-columns: 1fr; } }
/* caption overlaid at the bottom */
.img-overlay-cap { position: relative; border-radius: 18px; overflow: hidden; }
.img-overlay-cap > img, .img-overlay-cap > .img-ph { display: block; width: 100%; border: none; border-radius: 0; aspect-ratio: 4 / 5; object-fit: cover; }
.img-overlay-cap .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 44px 22px 22px; background: linear-gradient(to top, rgba(10,15,32,.86), transparent); color: #fff; }
.img-overlay-cap .cap .t { font-family: 'Space Grotesk'; font-weight: 600; font-size: 19px; letter-spacing: -0.02em; }
.img-overlay-cap .cap .s { font-family: 'JetBrains Mono'; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-top: 6px; }
.img-overlay-cap .badge-tl { position: absolute; top: 16px; left: 16px; font-family: 'JetBrains Mono'; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; background: var(--red); padding: 6px 11px; border-radius: 999px; }
/* caption below */
.img-below-cap { display: flex; flex-direction: column; gap: 14px; }
.img-below-cap > .frame { border-radius: 16px; }
.img-below-cap .cap .t { font-family: 'Space Grotesk'; font-weight: 600; font-size: 18px; letter-spacing: -0.02em; color: var(--ink); }
.img-below-cap .cap .s { font-size: 14px; line-height: 1.55; color: var(--muted); margin-top: 5px; }

/* ---------- 28. Image Gallery / Mosaic ---------- */
.mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 180px; gap: 14px; }
@media (max-width: 760px) { .mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; } }
.mosaic .tile { position: relative; border-radius: 16px; overflow: hidden; }
.mosaic .tile > img, .mosaic .tile > .img-ph { width: 100%; height: 100%; border: none; border-radius: 0; object-fit: cover; }
.mosaic .tile > .img-ph { height: 100%; }
.mosaic .tile.wide { grid-column: span 2; }
.mosaic .tile.tall { grid-row: span 2; }
.mosaic .tile.big { grid-column: span 2; grid-row: span 2; }
@media (max-width: 760px) { .mosaic .tile.big { grid-column: span 2; grid-row: span 2; } .mosaic .tile.wide { grid-column: span 2; } .mosaic .tile.tall { grid-row: span 1; } }

/* ---------- 29. Before / After split ---------- */
.split-media { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; border-radius: 20px; overflow: hidden; box-shadow: 0 30px 60px -40px rgba(13,18,36,.3); max-width: 900px; margin: 0 auto; }
@media (max-width: 560px) { .split-media { grid-template-columns: 1fr; } }
.split-media .half { position: relative; }
.split-media .half > .img-ph, .split-media .half > img { width: 100%; border: none; border-radius: 0; aspect-ratio: 3 / 2; object-fit: cover; }
.split-media .half .tag { position: absolute; top: 14px; left: 14px; font-family: 'JetBrains Mono'; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; padding: 6px 11px; border-radius: 999px; color: #fff; }
.split-media .half .tag.b { background: rgba(10,15,32,.7); }
.split-media .half .tag.a { background: var(--red); }

/* ============================================================
   BACKGROUND-IMAGE INFO SECTIONS — content over a full-bleed
   photo. Set the photo via inline style="--bg:url(...)" on the
   section, or drop an <img class="bgphoto"> as the first child.
   A scrim keeps text legible; swap .scrim-* for the mood.
   ============================================================ */
.bg-section { position: relative; overflow: hidden; isolation: isolate; }
.bg-section > .bgphoto, .bg-section > .img-ph.bgphoto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: none; border-radius: 0; z-index: -2; }
.bg-section.has-var::before { content: ''; position: absolute; inset: 0; background-image: var(--bg); background-size: cover; background-position: center; z-index: -2; }
.bg-section .scrim { position: absolute; inset: 0; z-index: -1; }
.scrim-navy { background: linear-gradient(150deg, rgba(10,15,32,.9), rgba(38,51,89,.72)); }
.scrim-bottom { background: linear-gradient(to top, rgba(10,15,32,.92) 8%, rgba(10,15,32,.35) 60%, rgba(10,15,32,.15)); }
.scrim-left { background: linear-gradient(to right, rgba(10,15,32,.9) 30%, rgba(10,15,32,.4) 62%, transparent); }
.scrim-red { background: linear-gradient(150deg, rgba(38,51,89,.82), rgba(215,71,66,.55)); }

/* ---------- 30. Full-bleed banner (content over photo) ---------- */
.bg-banner { padding: 130px 0; color: #fff; }
.bg-banner .inner { max-width: 640px; }
.bg-banner .eyebrow { color: #fff; background: rgba(255,255,255,.12); }
.bg-banner .eyebrow .dot { background: var(--red-bright); }
.bg-banner h2 { font-family: 'Space Grotesk'; font-weight: 600; font-size: clamp(34px, 4.6vw, 56px); line-height: 1.06; letter-spacing: -0.03em; margin: 20px 0 18px; }
.bg-banner h2 .accent { color: var(--red-bright); font-style: italic; font-weight: 500; }
.bg-banner p { font-size: 18px; line-height: 1.6; color: rgba(255,255,255,.82); margin: 0 0 30px; max-width: 52ch; }

/* ---------- 31. Split info: photo half + content half ---------- */
.bg-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 520px; border-radius: 24px; overflow: hidden; }
@media (max-width: 860px) { .bg-split { grid-template-columns: 1fr; } }
.bg-split .bg-split-media { position: relative; min-height: 300px; }
.bg-split .bg-split-media > .img-ph, .bg-split .bg-split-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: none; border-radius: 0; }
.bg-split .bg-split-body { background: linear-gradient(150deg, var(--navy-deep), var(--navy)); color: #fff; padding: 60px 56px; display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 560px) { .bg-split .bg-split-body { padding: 44px 30px; } }
.bg-split .bg-split-body .eyebrow { color: #fff; background: rgba(255,255,255,.1); align-self: flex-start; }
.bg-split .bg-split-body .eyebrow .dot { background: var(--red-bright); }
.bg-split .bg-split-body h2 { font-family: 'Space Grotesk'; font-weight: 600; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -0.03em; margin: 18px 0 16px; }
.bg-split .bg-split-body h2 .accent { color: var(--red-bright); }
.bg-split .bg-split-body p { font-size: 16px; line-height: 1.65; color: rgba(255,255,255,.78); margin: 0 0 24px; }

/* ---------- 32. Stat band over photo ---------- */
.bg-stats { padding: 110px 0; color: #fff; }
.bg-stats .section-head h2 { color: #fff; }
.bg-stats .section-head h2 .accent { color: var(--red-bright); }
.bg-stats .eyebrow { color: #fff; background: rgba(255,255,255,.12); }
.bg-stats .eyebrow .dot { background: var(--red-bright); }
.bg-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 12px; }
@media (max-width: 760px) { .bg-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 24px; } }
.bg-stats-grid .cell .num { font-family: 'Space Grotesk'; font-weight: 600; font-size: clamp(38px, 4.6vw, 56px); letter-spacing: -0.03em; line-height: 1; }
.bg-stats-grid .cell .num .suf { color: var(--red-bright); }
.bg-stats-grid .cell .label { font-family: 'JetBrains Mono'; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-top: 12px; }

/* ---------- 33. CTA card over photo ---------- */
.bg-cta { position: relative; overflow: hidden; border-radius: 24px; padding: 84px 56px; text-align: center; color: #fff; isolation: isolate; }
@media (max-width: 560px) { .bg-cta { padding: 60px 28px; } }
.bg-cta h2 { font-family: 'Space Grotesk'; font-weight: 600; font-size: clamp(30px, 3.8vw, 46px); line-height: 1.08; letter-spacing: -0.03em; margin: 0 0 16px; }
.bg-cta h2 .accent { color: var(--red-bright); font-style: italic; font-weight: 500; }
.bg-cta p { font-size: 18px; line-height: 1.6; color: rgba(255,255,255,.82); margin: 0 auto 30px; max-width: 46ch; }
.bg-cta .row { justify-content: center; }