/**
 * pages.css — Inner page system (page hero, templates, forms, article, pricing, legal)
 * Builds on tokens.css + sections.css. No raw colours outside tokens except tinted glass.
 */

/* ══ Layout helpers ══ */

.container--narrow { max-width: 50rem; }
.section--subtle   { background: var(--color-bg-subtle); }
.section--tight    { padding-block: clamp(2.5rem, 5vw, 4rem) var(--section-y); }
.btn-block         { width: 100%; justify-content: center; }
.hp                { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.split--top { align-items: start; margin-bottom: clamp(3rem, 6vw, 5rem); }
@media (max-width: 899px) { .split { grid-template-columns: 1fr; } }

.tag-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.service-more { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); font-size: var(--text-sm); font-weight: 700; color: var(--color-text); }
.service-more svg { transition: transform var(--duration-normal) var(--ease-out); }
a:hover > .service-more svg, a:hover .service-more svg { transform: translateX(3px); }

/* ══ Page hero ══ */

.page-hero {
  padding-top: clamp(7.5rem, 14vw, 10rem);
  padding-bottom: clamp(4rem, 8vw, 6.5rem);
  border-bottom: 1px solid var(--color-border-muted);
}
.page-hero-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.page-hero--split .page-hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.page-hero-copy { max-width: 44rem; }
.page-hero .breadcrumb { margin-bottom: var(--space-8); }
.page-title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 4.6vw + 1rem, 5.25rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: var(--tracking-tight);
}
.page-title--article { font-size: clamp(2.2rem, 3.4vw + 1rem, 4rem); }
.page-hero-note { position: absolute; right: 0; top: 0; }
.page-hero--split .page-hero-note { display: none; }
@media (max-width: 899px) {
  .page-hero--split .page-hero-inner { grid-template-columns: 1fr; }
  .page-hero-note { display: none; }
}

.platform-orb {
  width: min(100%, 360px); aspect-ratio: 1; margin-inline: auto;
  display: grid; place-items: center; border-radius: 50%;
  color: #fff; background: var(--gradient-brand); box-shadow: var(--shadow-brand), inset 0 -30px 60px rgba(0,0,0,0.15);
}

/* Deliverables card (service hero aside) */
.deliver-card {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--radius-xl);
  background: rgba(255,255,255,0.78);
  border: 1px solid var(--color-border);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow-float);
}
.deliver-title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); margin-bottom: var(--space-5); }
.deliver-card .tag-row { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--color-border-muted); }

.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.check-list li { position: relative; padding-left: 1.9rem; font-size: var(--text-sm); line-height: var(--leading-normal); }
.check-list li::before {
  content: ''; position: absolute; left: 0; top: 0.1em; width: 1.2rem; height: 1.2rem; border-radius: 50%;
  background: var(--tint-violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 8.5 2.5 2.5L12 5.5' fill='none' stroke='%236c3de8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 70% no-repeat;
}

/* ══ Grid variants ══ */

.service-grid--wide { max-width: none; }
.service-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
.product-grid--row { max-width: none; }
.pillars--3 { grid-template-columns: repeat(3, 1fr); max-width: none; }
@media (max-width: 899px) { .pillars--3 { grid-template-columns: 1fr; } }
@media (max-width: 519px) { .service-grid--2 { grid-template-columns: 1fr; } }

.service-group { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.service-group-head { position: sticky; top: 7rem; }
@media (max-width: 899px) { .service-group { grid-template-columns: 1fr; } .service-group-head { position: static; } }

.audience-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-border); }
.audience-list li { display: grid; grid-template-columns: 3rem 1fr; gap: var(--space-4); padding-block: var(--space-6); border-bottom: 1px solid var(--color-border); }
.audience-num { font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); color: var(--color-accent-1); padding-top: 0.3rem; }
.audience-list .body-sm { margin-top: var(--space-1); }

.chip-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.chip-links--center { justify-content: center; margin-top: var(--space-10); }
.chip-link {
  display: inline-flex; align-items: center; gap: var(--space-3);
  padding: 0.45rem 1.1rem 0.45rem 0.45rem;
  border-radius: var(--radius-full); border: 1px solid var(--color-border); background: #fff;
  font-weight: 700; font-size: var(--text-sm);
  transition: border-color var(--duration-fast), box-shadow var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out);
}
.chip-links--center .chip-link { padding: 0.6rem 1.2rem; }
.chip-link .icon-chip { width: 34px; height: 34px; border-radius: var(--radius-full); }
.chip-link:hover { border-color: transparent; box-shadow: var(--shadow-float); transform: translateY(-2px); }

/* ══ Products index: platform stack ══ */

.platform-stack { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); max-width: 28rem; margin-inline: auto; width: 100%; }
.platform-stack li {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.06); border: 1px solid var(--color-border-dark);
  backdrop-filter: blur(12px);
}
.platform-stack strong { display: block; font-family: var(--font-display); font-size: var(--text-base); }
.platform-stack small { color: var(--color-text-inverse-muted); font-size: var(--text-xs); }
.platform-stack .platform-base { justify-content: center; font-family: var(--font-display); font-weight: 700; background: var(--gradient-brand); border: 0; box-shadow: var(--shadow-brand); }

/* ══ Industries ══ */

.industry-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.industry-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; gap: var(--space-3);
  min-height: 22rem; padding: clamp(1.5rem, 3vw, 2rem);
  border-radius: var(--radius-xl); border: 1px solid var(--color-border); background: #fff;
  transition: transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out), border-color var(--duration-normal) var(--ease-out);
}
.industry-card .icon-chip { margin-bottom: var(--space-3); }
.industry-card .body-sm { max-width: 26ch; }
.industry-card .service-more { margin-top: auto; }
.industry-art {
  position: absolute; inset: 0; z-index: -1; background: var(--art) right -40% bottom -30% / 130% auto no-repeat; mix-blend-mode: multiply; opacity: 0.55;
  will-change: transform, opacity; transform: scale(1) translateZ(0); backface-visibility: hidden;
  transition: opacity var(--duration-crawl) var(--ease-out), transform var(--duration-crawl) var(--ease-out);
}
.industry-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-float); border-color: rgba(108,61,232,0.22); }
.industry-card:hover .industry-art { opacity: 0.9; transform: scale(1.05) translateZ(0); }
@media (max-width: 899px) { .industry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .industry-grid { grid-template-columns: 1fr; } .industry-card { min-height: 18rem; } }

.challenge-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
.challenge { padding: clamp(1.5rem, 3vw, 2rem); border-radius: var(--radius-xl); background: var(--color-bg-subtle); display: grid; gap: var(--space-3); align-content: start; border: 1px solid transparent; transition: transform var(--duration-normal) var(--ease-out), border-color var(--duration-normal) var(--ease-out); }
.challenge:hover { transform: translateY(-5px); border-color: rgba(108,61,232,0.18); }
.challenge-mark { font-family: var(--font-display); font-weight: 700; font-size: var(--text-3xl); line-height: 1; background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 899px) { .challenge-grid { grid-template-columns: 1fr; } }

.areas { margin-top: clamp(3rem, 5vw, 4rem); padding-top: var(--space-8); border-top: 1px solid var(--color-border); display: grid; gap: var(--space-5); }
.areas .tag { background: #fff; font-size: var(--text-sm); padding: 0.45em 1em; }

/* ══ Work ══ */

.filter-bar { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-10); }
.filter-chip {
  padding: 0.55rem 1.1rem; border-radius: var(--radius-full); border: 1px solid var(--color-border); background: #fff;
  font: inherit; font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); cursor: pointer;
  transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
}
.filter-chip:hover { color: var(--color-text); border-color: var(--color-text-subtle); }
.filter-chip.is-active { background: var(--color-text); border-color: var(--color-text); color: #fff; }

.case-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem) var(--gutter); }
.case-card[hidden] { display: none; }
.case-card { display: grid; gap: var(--space-5); align-content: start; }
.case-thumb {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: var(--radius-xl); border: 1px solid var(--color-border);
  background: var(--art) right -20% bottom -25% / 120% auto no-repeat, linear-gradient(135deg, var(--color-bg-subtle), #fff);
  background-blend-mode: multiply;
  transition: background-size var(--duration-crawl) var(--ease-out), box-shadow var(--duration-normal);
}
.case-card:hover .case-thumb { background-size: 132% auto, auto; box-shadow: var(--shadow-float); }
.case-client {
  position: absolute; left: clamp(1.25rem, 3vw, 2rem); top: clamp(1.25rem, 3vw, 2rem); max-width: 60%;
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-2xl); line-height: 1.1; letter-spacing: var(--tracking-snug);
}
.case-client--lg { font-size: var(--text-4xl); }
.case-meta { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-xs); color: var(--color-text-subtle); margin-bottom: var(--space-2); }
.case-body .body-sm { margin-top: var(--space-2); max-width: 46ch; }
.case-services { margin-top: var(--space-3); font-size: var(--text-xs); font-weight: 700; color: var(--color-accent-1); }
.case-logo {
  position: absolute; right: var(--space-5); bottom: var(--space-5);
  width: 44px; height: 44px; border-radius: var(--radius-md);
  background: #fff; border: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: center; padding: 6px;
  box-shadow: var(--shadow-card);
}
.case-logo img { width: 100%; height: 100%; object-fit: contain; }
.case-link {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-3); font-size: var(--text-xs); font-weight: 700; color: var(--color-text);
  transition: color var(--duration-fast) var(--ease-out);
}
.case-link:hover { color: var(--color-accent-1); }
.case-link svg { transition: transform var(--duration-fast) var(--ease-out); }
.case-link:hover svg { transform: translateX(2px); }
@media (max-width: 767px) { .case-grid { grid-template-columns: 1fr; } }

.case-study-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.case-study-grid.is-reverse > :first-child { order: 2; }
.case-study-visual {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-2xl); overflow: hidden;
  background: var(--art) right -20% bottom -20% / 130% auto no-repeat, #fff; background-blend-mode: multiply;
  border: 1px solid var(--color-border); box-shadow: var(--shadow-float);
}
.case-facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin: var(--space-8) 0 0; padding-top: var(--space-6); border-top: 1px solid var(--color-border); }
.case-facts dt { font-size: var(--text-xs); color: var(--color-text-subtle); margin-bottom: var(--space-1); }
.case-facts dd { margin: 0; font-weight: 700; font-size: var(--text-sm); }
@media (max-width: 899px) { .case-study-grid { grid-template-columns: 1fr; } .case-study-grid.is-reverse > :first-child { order: 0; } }

/* ══ Insights ══ */

.post-feature {
  display: grid; grid-template-columns: 1.2fr 1fr; overflow: hidden;
  border-radius: var(--radius-2xl); border: 1px solid var(--color-border); background: #fff;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  transition: box-shadow var(--duration-normal) var(--ease-out);
}
.post-feature:hover { box-shadow: var(--shadow-float); }
.post-feature-art { min-height: 320px; background: var(--art) left center / cover no-repeat, var(--color-bg-subtle); background-blend-mode: multiply; }
.post-feature-body { display: flex; flex-direction: column; justify-content: center; gap: var(--space-4); padding: clamp(1.75rem, 4vw, 3.5rem); }
.post-feature-body .lead { margin-top: 0; }
@media (max-width: 767px) { .post-feature { grid-template-columns: 1fr; } .post-feature-art { min-height: 220px; } }

.insight-grid--page { align-items: start; }
.newsletter-card { display: grid; gap: var(--space-3); padding: clamp(1.5rem, 3vw, 2rem); border-radius: var(--radius-xl); background: var(--color-bg-subtle); }
.inline-form { display: grid; gap: var(--space-3); margin-top: var(--space-2); }

.article-hero { border-bottom: 0; padding-bottom: var(--space-10); }
.article-hero .insight-meta { margin-bottom: var(--space-5); }
.prose { font-size: var(--text-lg); line-height: 1.75; color: var(--color-text); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; letter-spacing: var(--tracking-snug); line-height: var(--leading-snug); margin-top: 2em; }
.prose p { color: #3b3b4d; max-width: 68ch; }
.prose--article { padding-bottom: var(--section-y); }
.article-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: 3em !important; padding-top: var(--space-6); border-top: 1px solid var(--color-border); }

/* ══ About ══ */

.timeline--page { margin-top: 0; }
.role-list { list-style: none; margin: clamp(3rem, 6vw, 5rem) 0 0; padding: 0; border-top: 1px solid var(--color-border); }
.role {
  display: grid; grid-template-columns: 1.4fr auto 1fr auto; align-items: center; gap: var(--space-6);
  padding: var(--space-6) var(--space-2); border-bottom: 1px solid var(--color-border);
  transition: background var(--duration-fast), padding var(--duration-normal) var(--ease-out);
}
.role .tile-arrow { position: static; }
.role:hover { background: var(--color-bg-subtle); padding-inline: var(--space-5); }
.role:hover .tile-arrow { background: var(--color-text); color: #fff; }
.role-note { margin-top: var(--space-6); }
@media (max-width: 767px) { .role { grid-template-columns: 1fr auto; } .role .body-sm { grid-column: 1; } .role .tag { justify-self: start; } }

/* ══ Contact ══ */

.contact-page { padding-bottom: clamp(10rem, 22vw, 18rem); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.contact-points--stack { flex-direction: column; gap: var(--space-5); margin-top: var(--space-10); }
.contact-note { margin-top: var(--space-10); display: inline-block; }
.form-card {
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
  border-radius: var(--radius-2xl);
  background: rgba(255,255,255,0.88);
  border: 1px solid var(--color-border);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow-float);
  scroll-margin-top: 7rem;
}
.contact-form { display: grid; gap: var(--space-5); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.field { display: grid; align-content: start; border: 0; margin: 0; padding: 0; min-width: 0; }
.field.has-error .form-input, .field.has-error .form-textarea { border-color: var(--color-error); }
.field-error { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-error); }
.form-alert { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: #fef2f2; color: var(--color-error); font-size: var(--text-sm); }
.budget { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.budget legend { width: 100%; }
.chip-radio input { position: absolute; opacity: 0; pointer-events: none; }
.chip-radio span {
  display: inline-block; padding: 0.5rem 1rem; border-radius: var(--radius-full); border: 1px solid var(--color-border);
  font-size: var(--text-sm); font-weight: 600; cursor: pointer; transition: all var(--duration-fast) var(--ease-out);
}
.chip-radio input:checked + span { background: var(--color-text); color: #fff; border-color: var(--color-text); }
.chip-radio input:focus-visible + span { outline: 2px solid var(--color-accent-1); outline-offset: 2px; }
.form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5 5 6.5 8 3.5' fill='none' stroke='%236b6b80' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 10px; padding-right: 2.5rem; }
.form-fine { font-size: var(--text-xs); color: var(--color-text-subtle); text-align: center; }
.form-success { display: grid; gap: var(--space-4); justify-items: start; }
@media (max-width: 899px) { .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 519px) { .form-row { grid-template-columns: 1fr; } }

/* ══ Pricing ══ */

.price-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); align-items: stretch; }
.price-card {
  position: relative; display: flex; flex-direction: column; gap: var(--space-4);
  padding: clamp(1.75rem, 3vw, 2.5rem); border-radius: var(--radius-2xl); border: 1px solid var(--color-border); background: #fff;
  transition: transform var(--duration-normal) var(--ease-out), border-color var(--duration-normal) var(--ease-out);
}
.price-card:hover { transform: translateY(-5px); border-color: rgba(108,61,232,0.22); }
.price-card .check-list { margin-top: var(--space-4); padding-top: var(--space-6); border-top: 1px solid var(--color-border-muted); }
.price-card.is-featured { border-color: transparent; box-shadow: var(--shadow-float), 0 0 0 2px var(--color-accent-1); }
.price-badge { position: absolute; top: -0.8rem; left: clamp(1.75rem, 3vw, 2.5rem); padding: 0.3rem 0.8rem; border-radius: var(--radius-full); background: var(--gradient-brand); color: #fff; font-size: var(--text-xs); font-weight: 700; }
.price { display: flex; align-items: baseline; gap: var(--space-2); margin-block: var(--space-2); }
.price-value { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: 700; letter-spacing: var(--tracking-tight); line-height: 1; }
.price-unit { font-size: var(--text-sm); color: var(--color-text-subtle); }
.price-note { margin-top: var(--space-8); text-align: center; }
@media (max-width: 899px) { .price-grid { grid-template-columns: 1fr; max-width: 30rem; margin-inline: auto; } }

/* ══ 404 & legal ══ */

.not-found { min-height: 100svh; display: flex; align-items: center; padding-bottom: clamp(14rem, 30vw, 22rem); border: 0; }
.not-found-inner { text-align: center; display: flex; flex-direction: column; align-items: center; }
.not-found .lead { margin-inline: auto; }
.not-found .btn-row { justify-content: center; }
.not-found-code { font-family: var(--font-display); font-weight: 800; font-size: clamp(6rem, 18vw, 14rem); line-height: 0.9; letter-spacing: -0.06em; background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; }

.legal-grid { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.legal-toc { position: sticky; top: 7rem; display: grid; gap: var(--space-2); }
.legal-toc a { font-size: var(--text-sm); color: var(--color-text-muted); padding: 0.25rem 0; }
.legal-toc a:hover { color: var(--color-accent-1); }
.legal-grid .prose h2:first-child { margin-top: 0; }
.legal-grid .prose h2 { scroll-margin-top: 7rem; }
@media (max-width: 767px) { .legal-grid { grid-template-columns: 1fr; } .legal-toc { position: static; } }

.service-grid--2 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.page-hero--split .page-title { font-size: clamp(2.4rem, 3.6vw + 1rem, 4.5rem); }
.service-grid--wide > :last-child:nth-child(3n+2) { grid-column: span 2; }
@media (max-width: 899px) { .service-grid--wide > :last-child:nth-child(3n+2) { grid-column: auto; } .service-grid--wide > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (max-width: 519px) { .service-grid--wide > :last-child { grid-column: auto !important; } }
.price-value { white-space: nowrap; }
.price-card:last-child .price-value { font-size: var(--text-3xl); }
.case-type { position: absolute; left: var(--space-5); top: var(--space-5); padding: 0.35rem 0.8rem; border-radius: var(--radius-full); background: rgba(255,255,255,0.85); backdrop-filter: blur(8px); font-size: var(--text-xs); font-weight: 700; }

/* ══ Gradients & glass on inner pages ══ */
.deliver-card, .form-card { background: var(--glass-bg-strong); border-color: var(--glass-border); box-shadow: var(--glass-shadow), var(--shadow-float); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.industry-card { background: var(--card-grad, var(--grad-1)); }
.price-card { background: var(--grad-8); }
.price-card.is-featured { background: var(--grad-7); }
.newsletter-card { background: var(--grad-2); }
.post-feature { background: var(--grad-7); }
.case-thumb { background: var(--art) right -20% bottom -25% / 120% auto no-repeat, var(--grad-8); }
.case-card:nth-child(even) .case-thumb { background: var(--art) right -20% bottom -25% / 120% auto no-repeat, var(--grad-7); }
.case-type, .filter-chip { backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.platform-stack li:not(.platform-base) { background: var(--glass-bg-dark); border-color: var(--glass-border-dark); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.role:hover { background: var(--grad-1); }

/* ══ Page hero — full-bleed art plate with legibility veil ══ */
.page-hero .art {
  background-size: cover;
  opacity: 0.95;
}
.page-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, var(--color-bg) 0%, rgba(255,255,255,0.92) 32%, rgba(255,255,255,0.55) 55%, rgba(255,255,255,0) 78%),
    linear-gradient(180deg, var(--color-bg) 0%, rgba(255,255,255,0) 30%);
}
.page-hero.contact-page::before { background: linear-gradient(180deg, var(--color-bg) 0%, rgba(255,255,255,0.85) 45%, rgba(255,255,255,0) 75%); }
.page-hero.contact-page .art, .not-found .art { background-size: var(--art-size) auto; }
.not-found::before { background: linear-gradient(180deg, var(--color-bg) 30%, rgba(255,255,255,0) 70%); }
@media (max-width: 767px) {
  .page-hero .art { --art-size: cover !important; background-size: cover; opacity: 0.45; }
}

.product-logo { display: block; width: auto; height: clamp(40px, 4vw, 52px); margin-bottom: var(--space-6); }

/* ══ Blog system ══ */

.blog-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-10); }
.blog-toolbar .filter-bar { margin: 0; }
.filter-chip { text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem; }
.filter-count { font-size: 0.7em; opacity: 0.6; }
.blog-search {
  display: flex; align-items: center; gap: var(--space-2);
  min-width: min(100%, 18rem); padding: 0.3rem 1rem;
  border-radius: var(--radius-full); border: 1px solid var(--color-border);
  background: var(--glass-bg-strong); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  color: var(--color-text-subtle);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.blog-search:focus-within { border-color: var(--color-accent-1); box-shadow: 0 0 0 3px rgba(108,61,232,0.12); }
.blog-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: var(--text-sm); padding: 0.45rem 0; color: var(--color-text); }
.blog-result-note { margin: calc(var(--space-6) * -1) 0 var(--space-8); font-size: var(--text-sm); color: var(--color-text-muted); }
.blog-empty { display: grid; justify-items: start; gap: var(--space-3); padding: var(--space-12) 0; }

.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: clamp(2.5rem, 5vw, 4rem); }
.page-link {
  min-width: 2.6rem; height: 2.6rem; padding-inline: 0.9rem; display: inline-grid; place-items: center;
  border-radius: var(--radius-full); border: 1px solid var(--color-border); background: #fff;
  font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted);
  transition: all var(--duration-fast) var(--ease-out);
}
.page-link:hover { color: var(--color-text); border-color: var(--color-text-subtle); }
.page-link.is-active { background: var(--color-text); border-color: var(--color-text); color: #fff; }

/* Article */
.read-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: var(--z-modal); pointer-events: none; }
.read-progress span { display: block; height: 100%; width: 100%; background: var(--gradient-brand-h); transform-origin: 0 50%; transform: scaleX(0); }
.scroll-progress { display: none; }
body:not(:has(.read-progress)) .scroll-progress { display: block; }

.draft-flag { display: inline-block; margin-bottom: var(--space-4); padding: 0.3rem 0.8rem; border-radius: var(--radius-full); background: #fff7ed; color: #c2410c; font-size: var(--text-xs); font-weight: 700; }
.article-byline { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-6); font-size: var(--text-sm); }
.article-byline > span:last-child { display: grid; gap: 2px; }
.article-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: var(--shadow-card); }
.container--wide-media { max-width: 68rem; }
.article-cover { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-2xl); box-shadow: var(--glass-frame); margin-bottom: var(--space-12); }

.article-layout { display: grid; grid-template-columns: 15rem minmax(0, 46rem); justify-content: center; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.article-aside { position: sticky; top: 7rem; display: grid; gap: var(--space-8); }
.toc { display: grid; gap: 2px; padding-left: var(--space-4); border-left: 1px solid var(--color-border); }
.toc-title { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-text-subtle); margin-bottom: var(--space-2); }
.toc-link { position: relative; padding: 0.35rem 0; font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--leading-snug); transition: color var(--duration-fast), translate var(--duration-normal) var(--ease-out); }
.toc-link--h3 { padding-left: var(--space-3); font-size: var(--text-xs); }
.toc-link::before { content: ''; position: absolute; left: calc(var(--space-4) * -1 - 1px); top: 0.3rem; bottom: 0.3rem; width: 2px; border-radius: 2px; background: var(--gradient-brand); scale: 1 0; transition: scale var(--duration-normal) var(--ease-out); }
.toc-link:hover { color: var(--color-text); translate: 2px 0; }
.toc-link.is-active { color: var(--color-accent-1); font-weight: 600; }
.toc-link.is-active::before { scale: 1 1; }
.share-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.share-btn {
  width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--color-border); background: #fff; font: inherit; font-size: 0.72rem; font-weight: 700; color: var(--color-text-muted); cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}
.share-btn:hover { background: var(--color-text); color: #fff; border-color: var(--color-text); translate: 0 -2px; }
.share-btn.is-copied { background: #10b981; border-color: #10b981; color: #fff; }

.prose h2, .prose h3 { scroll-margin-top: 7rem; }
.prose h3 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; margin-top: 1.6em; }
.prose h4 { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; margin-top: 1.4em; }
.prose a:not(.btn):not(.post-nav-link) { color: var(--color-accent-1); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: 0.4em; }
.prose li::marker { color: var(--color-accent-1); }
.prose blockquote { margin-inline: 0; padding: var(--space-5) var(--space-6); border-radius: var(--radius-lg); background: var(--grad-1); border-left: 3px solid var(--color-accent-1); font-size: var(--text-xl); font-family: var(--font-display); }
.prose blockquote p { color: var(--color-text); }
.prose code { padding: 0.15em 0.4em; border-radius: 6px; background: var(--color-bg-muted); font-size: 0.88em; }
.prose pre { padding: var(--space-5); border-radius: var(--radius-lg); background: var(--color-bg-dark); color: #e6e6f0; overflow-x: auto; font-size: var(--text-sm); }
.prose pre code { background: none; padding: 0; }
.prose figure { margin-inline: 0; }
.prose figure img { border-radius: var(--radius-xl); box-shadow: var(--glass-frame); }
.prose hr { border: 0; height: 1px; background: var(--color-border); margin-block: 2.5em; }
.article-tags { margin-top: 2.5em !important; }
.article-foot { padding: var(--space-5) var(--space-6); border-radius: var(--radius-xl); border-top: 0; background: var(--grad-7); }
.article-foot > div { display: grid; gap: 2px; font-size: var(--text-base); }
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); margin-top: 2.5em !important; }
.post-nav-link { display: grid; gap: var(--space-1); padding: var(--space-5); border-radius: var(--radius-lg); border: 1px solid var(--color-border); text-decoration: none !important; color: var(--color-text) !important; transition: border-color var(--duration-fast), box-shadow var(--duration-normal); }
.post-nav-link small { font-size: var(--text-xs); color: var(--color-text-subtle); font-weight: 600; }
.post-nav-link span { font-family: var(--font-display); font-weight: 700; font-size: var(--text-base); line-height: var(--leading-snug); }
.post-nav-link--next { text-align: right; }
.post-nav-link:hover { border-color: transparent; box-shadow: var(--glass-frame); }

@media (max-width: 1023px) {
  .article-layout { grid-template-columns: minmax(0, 46rem); }
  .article-aside { position: static; order: 2; }
  .toc { display: none; }
}
@media (max-width: 599px) { .post-nav { grid-template-columns: 1fr; } .post-nav-link--next { text-align: left; } }

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: var(--space-6); z-index: var(--z-modal);
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-full);
  background: var(--glass-bg-strong); box-shadow: var(--glass-frame); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  font-size: var(--text-sm); font-weight: 600;
  translate: -50% 150%; opacity: 0; transition: translate var(--duration-slow) var(--ease-spring), opacity var(--duration-normal);
}
.toast.is-visible { translate: -50% 0; opacity: 1; }
.article-hero .art { background-size: auto 130%; background-position: right -18vw center; opacity: 0.55; }
.article-hero::before { background: linear-gradient(90deg, var(--color-bg) 0%, var(--color-bg) 55%, rgba(255,255,255,0.6) 75%, rgba(255,255,255,0) 100%); }

/* ══ Founder card ══ */
.founder-card {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding: clamp(1.75rem, 4vw, 3rem);
  background: var(--color-bg-subtle);
}
.founder-photo {
  width: clamp(120px, 16vw, 168px); aspect-ratio: 1;
  border-radius: var(--radius-2xl); overflow: hidden;
  border: 1px solid var(--color-border);
}
.founder-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.founder-title { color: var(--color-accent-1); font-weight: 600; margin-top: -0.25rem; }
.founder-bio { margin-top: var(--space-3); max-width: 62ch; color: var(--color-text-muted); }
.founder-linkedin {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-5);
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm);
  color: var(--color-text);
  padding-bottom: 2px;
  border-bottom: 1px solid var(--color-border);
  transition: border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.founder-linkedin:hover { color: var(--color-accent-1); border-color: var(--color-accent-1); }
@media (max-width: 599px) {
  .founder-card { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .founder-bio { max-width: none; }
}