/*
  BrightAI sitewide modernization layer.
  This file improves spacing, overflow safety, focus states, and responsive
  polish without replacing the existing brand, header, footer, logo, or fonts.
*/

:root {
  --bright-modern-brand: var(--bai-brand, var(--brand-cyan, #38bdf8));
  --bright-modern-brand-strong: var(--bai-brand-strong, var(--brand-cyan-2, #06b6d4));
  --bright-modern-accent: var(--bai-accent, #fbbf24);
  --bright-modern-bg: var(--bai-bg, var(--bg-base, #06070d));
  --bright-modern-surface: var(--bai-surface, rgba(255, 255, 255, 0.06));
  --bright-modern-surface-soft: var(--bai-surface-soft, rgba(255, 255, 255, 0.04));
  --bright-modern-border: var(--bai-line, var(--border-default, rgba(255, 255, 255, 0.12)));
  --bright-modern-border-strong: var(--bai-line-strong, rgba(255, 255, 255, 0.22));
  --bright-modern-text: var(--bai-text, var(--text-primary, #f5f7ff));
  --bright-modern-muted: var(--bai-text-muted, var(--text-secondary, #c7cee0));
  --bright-modern-soft: var(--bai-text-soft, var(--text-tertiary, #8b93ab));
  --bright-modern-radius: min(var(--bai-radius-sm, 0.5rem), 8px);
  --bright-modern-radius-card: min(var(--bai-radius-md, 0.75rem), 8px);
  --bright-modern-container: min(100% - 2rem, var(--bai-container, 1180px));
  --bright-modern-section: clamp(3rem, 8vw, 6rem);
  --bright-modern-gap: clamp(1rem, 3vw, 1.75rem);
  --bright-modern-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.28);
  --bright-modern-focus: 0 0 0 0.2rem color-mix(in srgb, var(--bright-modern-brand) 36%, transparent);
  --bright-modern-fluid-h1: clamp(2rem, 1.45rem + 2.4vw, 4.2rem);
  --bright-modern-fluid-h2: clamp(1.45rem, 1.16rem + 1.25vw, 2.55rem);
  --bright-modern-fluid-h3: clamp(1.12rem, 1rem + 0.55vw, 1.55rem);
  --bright-modern-fluid-body: clamp(0.98rem, 0.94rem + 0.2vw, 1.08rem);
}

.sr-only,
.bright-a11y-h1 {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  inline-size: 100%;
  max-inline-size: 100%;
  overflow-x: clip;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow-x: clip;
  font-size: var(--bright-modern-fluid-body);
  text-rendering: optimizeLegibility;
}

main,
section,
article,
aside,
header,
footer,
nav,
.container,
.nav-container,
.wrapper,
.content,
.grid,
.row,
[class*="container"],
[class*="grid"],
[class*="flex"],
[class*="wrapper"],
[class*="shell"],
[class*="panel"],
[class*="card"] {
  min-inline-size: 0;
  max-inline-size: 100%;
}

img,
picture,
video,
canvas,
svg,
iframe,
embed,
object {
  max-inline-size: 100%;
}

img,
picture,
video,
canvas,
svg {
  block-size: auto;
}

iframe,
embed,
object {
  border: 0;
}

iframe,
video,
embed,
object,
.bright-responsive-media {
  inline-size: 100%;
  max-inline-size: 100%;
}

table {
  inline-size: 100%;
  max-inline-size: 100%;
  border-collapse: collapse;
}

pre,
code,
kbd,
samp {
  overflow-wrap: anywhere;
}

pre,
table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

a,
button,
input,
select,
textarea,
summary,
[tabindex]:not([tabindex="-1"]) {
  touch-action: manipulation;
}

.skip-link {
  position: fixed;
  inset-block-start: max(0.75rem, env(safe-area-inset-top));
  inset-inline-start: max(0.75rem, env(safe-area-inset-left));
  z-index: 10000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 2.75rem;
  max-inline-size: calc(100vw - 1.5rem);
  padding: 0.65rem 1rem;
  border: 1px solid var(--bright-modern-border-strong);
  border-radius: var(--bright-modern-radius);
  background: var(--bright-modern-bg);
  color: var(--bright-modern-text);
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  transform: translateY(calc(-100% - 1rem));
  opacity: 0;
  transition:
    opacity 160ms ease,
    transform 160ms ease;
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  opacity: 1;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 0;
  box-shadow: var(--bright-modern-focus);
}

body[data-bright-modernized="true"] :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--bright-modern-brand);
  outline-offset: 3px;
}

body[data-bright-modernized="true"] a:not(.btn):not([class*="button"]):not([role="button"]) {
  text-underline-offset: 0.18em;
}

body[data-bright-modernized="true"] a:not(.btn):not([class*="button"]):not([role="button"]):hover,
body[data-bright-modernized="true"] a:not(.btn):not([class*="button"]):not([role="button"]):focus-visible {
  text-decoration-thickness: 0.12em;
}

body[data-bright-modernized="true"] :is(.text-slate-500, .text-slate-600, .text-gray-500, .text-gray-600) {
  color: color-mix(in srgb, var(--bright-modern-muted) 88%, #fff) !important;
}

body[data-bright-modernized="true"] :is(.text-red-400, .text-amber-400, .text-green-400, .text-cyan-400)::before {
  content: "";
  display: inline-block;
  inline-size: 0.42em;
  block-size: 0.42em;
  margin-inline-end: 0.35em;
  border-radius: 999px;
  background: currentColor;
  vertical-align: 0.08em;
}

button,
.btn,
[class*="button"],
[class*="Button"],
a[role="button"],
input,
select,
textarea {
  min-block-size: 2.75rem;
  max-inline-size: 100%;
}

input,
select,
textarea {
  max-inline-size: 100%;
  font: inherit;
}

textarea {
  resize: vertical;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
blockquote,
figcaption,
.title,
.subtitle,
.description {
  overflow-wrap: break-word;
}

h1,
h2,
h3,
.title {
  text-wrap: balance;
}

h1,
.hero-title,
.blog-title,
.page-title {
  font-size: var(--bright-modern-fluid-h1);
  line-height: 1.12;
}

h2,
.section-title {
  font-size: var(--bright-modern-fluid-h2);
  line-height: 1.22;
}

h3,
.card-title {
  font-size: var(--bright-modern-fluid-h3);
  line-height: 1.35;
}

p,
li,
.subtitle,
.description {
  text-wrap: pretty;
}

body[data-bright-modernized="true"] .container,
body[data-bright-modernized="true"] .section > .inner,
body[data-bright-modernized="true"] .page-shell,
body[data-bright-modernized="true"] .content-shell {
  inline-size: var(--bright-modern-container);
  margin-inline: auto;
}

body[data-bright-modernized="true"] :is(.grid, [class*="grid"], .row, [class*="flex"]) > * {
  min-inline-size: 0;
  max-inline-size: 100%;
}

body[data-bright-modernized="true"] :is([class*="grid-cols-"], [class*="md:grid-cols-"], [class*="lg:grid-cols-"], [class*="xl:grid-cols-"]) {
  min-inline-size: 0;
}

body[data-bright-modernized="true"] main > section,
body[data-bright-modernized="true"] .section {
  padding-inline: max(1rem, env(safe-area-inset-left));
}

body[data-bright-modernized="true"] main > section + section {
  margin-block-start: clamp(1rem, 3vw, 2rem);
}

body[data-bright-modernized="true"] :is(.card, article, .feature-card, .service-card, .demo-card, .post, .pricing-card, .tool-card) {
  min-inline-size: 0;
  border-radius: var(--bright-modern-radius-card);
}

body[data-bright-modernized="true"] :is(.card, .feature-card, .service-card, .demo-card, .post, .pricing-card, .tool-card):where(:not(.unstyled)) {
  border-color: color-mix(in srgb, var(--bright-modern-border) 78%, transparent);
}

body[data-bright-modernized="true"] :is(.card, .feature-card, .service-card, .demo-card, .post, .pricing-card, .tool-card):where(a, button, [role="button"]):hover {
  border-color: color-mix(in srgb, var(--bright-modern-brand) 36%, var(--bright-modern-border));
}

body[data-bright-modernized="true"] :is(.grid, .cards, .features-grid, .services-grid, .demo-grid, .blog-grid, .tools-grid) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bright-modern-gap);
}

body[data-bright-modernized="true"] :is(.table-wrap, .table-wrapper, .responsive-table),
body[data-bright-modernized="true"] table {
  max-inline-size: 100%;
}

body[data-bright-modernized="true"] :is(.table-wrap, .table-wrapper, .responsive-table) {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

body[data-bright-modernized="true"] form {
  max-inline-size: 100%;
}

body[data-bright-modernized="true"] form :is(.field, .form-group, label) {
  min-inline-size: 0;
}

body[data-bright-modernized="true"] form :is(input, select, textarea, button) {
  inline-size: 100%;
}

body[data-bright-page-type="home"] .hero,
body.bright-page--home .hero {
  isolation: isolate;
}

body[data-bright-page-type="service-detail"] main,
body.bright-page--service-detail main {
  --bright-modern-section: clamp(3.25rem, 7vw, 5.75rem);
}

body[data-bright-page-type="service-detail"] :is(.hero, .service-hero, .page-hero),
body.bright-page--service-detail :is(.hero, .service-hero, .page-hero) {
  padding-block: clamp(3.5rem, 10vw, 6.5rem);
}

body[data-bright-page-type="service-detail"] :is(.feature-card, .service-card, .solution-card),
body.bright-page--service-detail :is(.feature-card, .service-card, .solution-card) {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bright-modern-brand) 9%, transparent), transparent 55%),
    var(--bright-modern-surface);
}

body[data-bright-page-type="service-detail"] main,
body.bright-page--service-detail main {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bright-modern-brand) 4%, transparent), transparent 26rem),
    transparent;
}

body[data-bright-page-type="service-detail"] :is(.bright-section--problem, .bright-section--value, .bright-section--steps, .bright-section--benefits, .bright-section--related),
body.bright-page--service-detail :is(.bright-section--problem, .bright-section--value, .bright-section--steps, .bright-section--benefits, .bright-section--related) {
  position: relative;
  overflow: hidden;
  padding: clamp(1rem, 3vw, 1.5rem);
  border: 1px solid var(--bright-modern-border);
  border-radius: var(--bright-modern-radius-card);
  background: var(--bright-modern-surface-soft);
}

body[data-bright-page-type="service-detail"] :is(.bright-section--problem, .bright-section--value, .bright-section--steps, .bright-section--benefits, .bright-section--related)::before,
body.bright-page--service-detail :is(.bright-section--problem, .bright-section--value, .bright-section--steps, .bright-section--benefits, .bright-section--related)::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 0.25rem;
  background: var(--bright-modern-brand);
}

body[data-bright-page-type="service-detail"] .bright-section--problem,
body.bright-page--service-detail .bright-section--problem {
  background:
    linear-gradient(135deg, color-mix(in srgb, #ef4444 11%, transparent), transparent 72%),
    var(--bright-modern-surface-soft);
}

body[data-bright-page-type="service-detail"] .bright-section--value,
body.bright-page--service-detail .bright-section--value {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--bright-modern-brand) 12%, transparent), transparent 70%),
    var(--bright-modern-surface-soft);
}

body[data-bright-page-type="service-detail"] :is(.steps, .bright-section--steps ol, .bright-section--steps ul),
body.bright-page--service-detail :is(.steps, .bright-section--steps ol, .bright-section--steps ul) {
  counter-reset: bright-step;
  display: grid;
  gap: 0.85rem;
}

body[data-bright-page-type="service-detail"] :is(.step, .bright-section--steps li),
body.bright-page--service-detail :is(.step, .bright-section--steps li) {
  position: relative;
  min-block-size: 3.25rem;
  padding: 0.9rem 1rem;
  padding-inline-start: 3.25rem;
  border: 1px solid var(--bright-modern-border);
  border-radius: var(--bright-modern-radius-card);
  background: color-mix(in srgb, var(--bright-modern-surface) 72%, transparent);
}

body[data-bright-page-type="service-detail"] :is(.step, .bright-section--steps li)::before,
body.bright-page--service-detail :is(.step, .bright-section--steps li)::before {
  counter-increment: bright-step;
  content: counter(bright-step);
  position: absolute;
  inset-block-start: 0.8rem;
  inset-inline-start: 0.85rem;
  display: grid;
  place-items: center;
  inline-size: 1.8rem;
  block-size: 1.8rem;
  border-radius: 999px;
  background: var(--bright-modern-brand);
  color: var(--bright-modern-bg);
  font-weight: 800;
  line-height: 1;
}

body[data-bright-page-type="service-detail"] :is(.bright-modern-cta-card, .sitewide-cta, .service-demo-cta),
body.bright-page--service-detail :is(.bright-modern-cta-card, .sitewide-cta, .service-demo-cta) {
  border-color: color-mix(in srgb, var(--bright-modern-brand) 42%, var(--bright-modern-border));
  box-shadow: var(--bright-modern-shadow);
}

body[data-bright-page-type="services-index"] :is(.services-grid, .grid),
body.bright-page--services-index :is(.services-grid, .grid) {
  align-items: stretch;
}

body[data-bright-page-type="services-index"] main,
body.bright-page--services-index main {
  --bright-modern-container: min(100% - 1rem, 1280px);
}

body[data-bright-page-type="services-index"] :is(.bright-service-index-card, .ai-agent-card, .answer-list-card, .service-card),
body.bright-page--services-index :is(.bright-service-index-card, .ai-agent-card, .answer-list-card, .service-card) {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-block-size: 100%;
  padding: clamp(1rem, 3vw, 1.35rem);
  border: 1px solid var(--bright-modern-border);
  border-radius: var(--bright-modern-radius-card);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bright-modern-brand) 7%, transparent), transparent 52%),
    var(--bright-modern-surface-soft);
}

body[data-bright-page-type="services-index"] :is(.bright-service-index-card, .ai-agent-card, .answer-list-card, .service-card):nth-of-type(3n + 2),
body.bright-page--services-index :is(.bright-service-index-card, .ai-agent-card, .answer-list-card, .service-card):nth-of-type(3n + 2) {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bright-modern-accent) 8%, transparent), transparent 52%),
    var(--bright-modern-surface-soft);
}

body[data-bright-page-type="services-index"] :is(.bright-service-index-card, .ai-agent-card, .answer-list-card, .service-card):nth-of-type(3n),
body.bright-page--services-index :is(.bright-service-index-card, .ai-agent-card, .answer-list-card, .service-card):nth-of-type(3n) {
  background:
    linear-gradient(180deg, color-mix(in srgb, #22c55e 8%, transparent), transparent 52%),
    var(--bright-modern-surface-soft);
}

body[data-bright-page-type="services-index"] :is(.bright-service-index-card, .ai-agent-card, .answer-list-card, .service-card) :is(strong, h2, h3),
body.bright-page--services-index :is(.bright-service-index-card, .ai-agent-card, .answer-list-card, .service-card) :is(strong, h2, h3) {
  color: var(--bright-modern-text);
}

body[data-bright-page-type="blog-post"] article,
body.bright-page--blog-post article,
body[data-bright-page-type="blog-post"] .blog-card,
body.bright-page--blog-post .blog-card {
  max-inline-size: min(100%, 78ch);
  margin-inline: auto;
}

body[data-bright-page-type="blog-post"] main,
body.bright-page--blog-post main {
  --bright-modern-container: min(100% - 2rem, 880px);
}

body[data-bright-page-type="blog-post"] article :is(p, li),
body.bright-page--blog-post article :is(p, li),
body[data-bright-page-type="blog-post"] .blog-content :is(p, li),
body.bright-page--blog-post .blog-content :is(p, li) {
  line-height: 1.9;
  font-size: clamp(1rem, 1.2vw, 1.08rem);
}

body[data-bright-page-type="blog-post"] article :is(img, video, iframe),
body.bright-page--blog-post article :is(img, video, iframe),
body[data-bright-page-type="blog-post"] .blog-card :is(img, video, iframe),
body.bright-page--blog-post .blog-card :is(img, video, iframe) {
  border-radius: var(--bright-modern-radius-card);
}

body[data-bright-page-type="blog-post"] article :is(h2, h3),
body.bright-page--blog-post article :is(h2, h3),
body[data-bright-page-type="blog-post"] .blog-content :is(h2, h3),
body.bright-page--blog-post .blog-content :is(h2, h3) {
  margin-block-start: clamp(2rem, 6vw, 3.5rem);
  padding-block-end: 0.4rem;
  border-block-end: 1px solid var(--bright-modern-border);
}

body[data-bright-page-type="blog-post"] article blockquote,
body[data-bright-page-type="blog-post"] .bright-reading-callout,
body.bright-page--blog-post article blockquote,
body.bright-page--blog-post .bright-reading-callout {
  margin-inline: 0;
  padding: clamp(1rem, 3vw, 1.5rem);
  border: 1px solid color-mix(in srgb, var(--bright-modern-brand) 35%, var(--bright-modern-border));
  border-inline-start-width: 0.28rem;
  border-radius: var(--bright-modern-radius-card);
  background: color-mix(in srgb, var(--bright-modern-brand) 8%, var(--bright-modern-surface-soft));
}

body[data-bright-page-type="blog-post"] .bright-table-scroll,
body.bright-page--blog-post .bright-table-scroll {
  margin-block: 1.5rem;
  border: 1px solid var(--bright-modern-border);
  border-radius: var(--bright-modern-radius-card);
  background: var(--bright-modern-surface-soft);
}

body[data-bright-page-type="blog-index"] :is(.blog-grid, .posts-grid, .grid),
body.bright-page--blog-index :is(.blog-grid, .posts-grid, .grid) {
  gap: clamp(1rem, 2.8vw, 1.5rem);
}

body[data-bright-page-type="blog-index"] main,
body.bright-page--blog-index main {
  --bright-modern-container: min(100% - 1rem, 1240px);
}

body[data-bright-page-type="blog-index"] :is(.bright-blog-index-card, .post, .blog-card),
body.bright-page--blog-index :is(.bright-blog-index-card, .post, .blog-card),
body[data-bright-page-type="blog-index"] main :is(article, .glass-card),
body.bright-page--blog-index main :is(article, .glass-card),
body[data-bright-page-type="blog-index"] section :is(article, .glass-card),
body.bright-page--blog-index section :is(article, .glass-card) {
  position: relative;
  min-block-size: 100%;
  padding: clamp(1rem, 2.5vw, 1.4rem);
  border: 1px solid var(--bright-modern-border);
  border-radius: var(--bright-modern-radius-card);
  background: var(--bright-modern-surface-soft);
}

body[data-bright-page-type="blog-index"] :is(.bright-blog-index-card, .post, .blog-card):first-child,
body.bright-page--blog-index :is(.bright-blog-index-card, .post, .blog-card):first-child,
body[data-bright-page-type="blog-index"] section :is(article, .glass-card):first-child,
body.bright-page--blog-index section :is(article, .glass-card):first-child {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--bright-modern-brand) 16%, transparent), transparent 72%),
    var(--bright-modern-surface);
}

body[data-bright-page-type="blog-index"] :is(.bright-blog-index-card, .post, .blog-card) :is(h2, h3, strong),
body.bright-page--blog-index :is(.bright-blog-index-card, .post, .blog-card) :is(h2, h3, strong) {
  color: var(--bright-modern-text);
}

body[data-bright-page-type="demo"] :is(.demo-shell, .demo-panel, .demo-card),
body.bright-page--demo :is(.demo-shell, .demo-panel, .demo-card) {
  border-color: color-mix(in srgb, var(--bright-modern-brand) 24%, var(--bright-modern-border));
}

body[data-bright-page-type="demo"] :is(.bright-interactive-panel, .demo-shell, .demo-panel, .demo-card, form),
body.bright-page--demo :is(.bright-interactive-panel, .demo-shell, .demo-panel, .demo-card, form),
body[data-bright-page-type="tool"] :is(.bright-interactive-panel, .tool-shell, .tool-panel, form),
body.bright-page--tool :is(.bright-interactive-panel, .tool-shell, .tool-panel, form) {
  border: 1px solid color-mix(in srgb, var(--bright-modern-brand) 28%, var(--bright-modern-border));
  border-radius: var(--bright-modern-radius-card);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bright-modern-brand) 8%, transparent), transparent 58%),
    var(--bright-modern-surface-soft);
}

body[data-bright-page-type="demo"] :is(button, .btn, input, select, textarea),
body.bright-page--demo :is(button, .btn, input, select, textarea),
body[data-bright-page-type="tool"] :is(button, .btn, input, select, textarea),
body.bright-page--tool :is(button, .btn, input, select, textarea) {
  min-block-size: 3rem;
}

body[data-bright-page-type="demo"] :is(.result, .results, output, [aria-live]),
body.bright-page--demo :is(.result, .results, output, [aria-live]),
body[data-bright-page-type="tool"] :is(.result, .results, output, [aria-live]),
body.bright-page--tool :is(.result, .results, output, [aria-live]) {
  min-block-size: 3.5rem;
  padding: 1rem;
  border: 1px dashed color-mix(in srgb, var(--bright-modern-brand) 35%, var(--bright-modern-border));
  border-radius: var(--bright-modern-radius-card);
  background: color-mix(in srgb, var(--bright-modern-bg) 62%, transparent);
}

body[data-bright-page-type="dashboard"],
body.bright-page--dashboard {
  --bright-modern-container: min(100% - 1rem, 1440px);
}

body[data-bright-page-type="dashboard"] main,
body.bright-page--dashboard main {
  overflow-x: clip;
}

body[data-bright-page-type="dashboard"] :is(.dashboard-grid, .metrics-grid, .grid),
body.bright-page--dashboard :is(.dashboard-grid, .metrics-grid, .grid) {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(0.75rem, 2vw, 1.25rem);
}

body[data-bright-page-type="dashboard"] :is(table, .table, .chart, .chart-card),
body.bright-page--dashboard :is(table, .table, .chart, .chart-card) {
  min-inline-size: 0;
}

body[data-bright-page-type="dashboard"] :is(.bright-dashboard-card, .metric, .metrics-card, .stat-card, .kpi-card),
body.bright-page--dashboard :is(.bright-dashboard-card, .metric, .metrics-card, .stat-card, .kpi-card),
body[data-bright-page-type="dashboard"] :is(.cards-grid > *, .main-content > section, .main-content > div),
body.bright-page--dashboard :is(.cards-grid > *, .main-content > section, .main-content > div) {
  border: 1px solid var(--bright-modern-border);
  border-radius: var(--bright-modern-radius-card);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bright-modern-brand) 8%, transparent), transparent 60%),
    var(--bright-modern-surface-soft);
}

body[data-bright-page-type="dashboard"] :is(.bright-dashboard-filter, .filters, .filter-bar, .toolbar),
body.bright-page--dashboard :is(.bright-dashboard-filter, .filters, .filter-bar, .toolbar) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  padding: 0.75rem;
  border: 1px solid var(--bright-modern-border);
  border-radius: var(--bright-modern-radius-card);
  background: color-mix(in srgb, var(--bright-modern-surface) 72%, transparent);
}

body[data-bright-page-type="dashboard"] .bright-table-scroll,
body.bright-page--dashboard .bright-table-scroll {
  border: 1px solid var(--bright-modern-border);
  border-radius: var(--bright-modern-radius-card);
  background: var(--bright-modern-surface-soft);
}

body[data-bright-page-type="docs"] main,
body.bright-page--docs main {
  --bright-modern-container: min(100% - 2rem, 980px);
}

body[data-bright-page-type="docs"] :is(pre, code),
body.bright-page--docs :is(pre, code) {
  border-radius: var(--bright-modern-radius);
}

body[data-bright-page-type="legal"] main,
body.bright-page--legal main,
body[data-bright-page-type="about"] main,
body.bright-page--about main,
body[data-bright-page-type="contact"] main,
body.bright-page--contact main {
  --bright-modern-container: min(100% - 2rem, 1040px);
}

body[data-bright-page-type="contact"] :is(.bright-contact-panel, form),
body.bright-page--contact :is(.bright-contact-panel, form),
body[data-bright-page-type="contact"] :is(.glass-card, article),
body.bright-page--contact :is(.glass-card, article) {
  padding: clamp(1rem, 3vw, 1.5rem);
  border: 1px solid color-mix(in srgb, var(--bright-modern-brand) 24%, var(--bright-modern-border));
  border-radius: var(--bright-modern-radius-card);
  background: var(--bright-modern-surface-soft);
}

body[data-bright-page-type="contact"] :is(input, select, textarea),
body.bright-page--contact :is(input, select, textarea) {
  min-block-size: 3rem;
}

body[data-bright-page-type="contact"] :is(button, .btn, a[role="button"]),
body.bright-page--contact :is(button, .btn, a[role="button"]) {
  min-block-size: 3rem;
}

body[data-bright-page-type="about"] :is(.bright-about-story-card, .timeline, .value-card),
body.bright-page--about :is(.bright-about-story-card, .timeline, .value-card) {
  position: relative;
  padding: clamp(1rem, 3vw, 1.5rem);
  border: 1px solid var(--bright-modern-border);
  border-radius: var(--bright-modern-radius-card);
  background: var(--bright-modern-surface-soft);
}

body[data-bright-page-type="about"] :is(.bright-about-story-card, .timeline, .value-card)::before,
body.bright-page--about :is(.bright-about-story-card, .timeline, .value-card)::before {
  content: "";
  position: absolute;
  inset-block: 1rem;
  inset-inline-start: 0;
  inline-size: 0.2rem;
  border-radius: 999px;
  background: linear-gradient(var(--bright-modern-brand), var(--bright-modern-accent));
}

body[data-bright-page-type="legal"] :is(.bright-legal-reader, article, .doc-content, .prose),
body.bright-page--legal :is(.bright-legal-reader, article, .doc-content, .prose) {
  max-inline-size: min(100%, 76ch);
  margin-inline: auto;
}

body[data-bright-page-type="legal"] :is(.bright-legal-reader, article, .doc-content, .prose) :is(p, li),
body.bright-page--legal :is(.bright-legal-reader, article, .doc-content, .prose) :is(p, li) {
  line-height: 1.9;
}

body[data-bright-page-type="legal"] :is(.bright-legal-reader, article, .doc-content, .prose) :is(h2, h3),
body.bright-page--legal :is(.bright-legal-reader, article, .doc-content, .prose) :is(h2, h3) {
  margin-block-start: 2rem;
  padding-block-end: 0.45rem;
  border-block-end: 1px solid var(--bright-modern-border);
}

body[data-bright-page-type="error"] main,
body.bright-page--error main {
  display: grid;
  align-content: center;
  gap: 1.25rem;
  min-block-size: min(100svh, 48rem);
}

body[data-bright-page-type="error"] .bright-error-action,
body.bright-page--error .bright-error-action {
  min-block-size: 3rem;
  border-radius: var(--bright-modern-radius);
}

body[data-bright-page-type="sector"] :is(.sector-card, .feature-card, .case-card),
body.bright-page--sector :is(.sector-card, .feature-card, .case-card),
body[data-bright-page-type="location"] :is(.location-card, .feature-card, .case-card),
body.bright-page--location :is(.location-card, .feature-card, .case-card) {
  border-inline-start: 2px solid color-mix(in srgb, var(--bright-modern-brand) 45%, transparent);
}

body[data-bright-page-type="tool"] :is(.tool-shell, .tool-panel, form),
body.bright-page--tool :is(.tool-shell, .tool-panel, form) {
  border-radius: var(--bright-modern-radius-card);
}

.bright-table-scroll {
  position: relative;
  max-inline-size: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}

.bright-table-scroll::before {
  content: "مرر الجدول أفقياً";
  position: sticky;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 2;
  display: inline-flex;
  margin: 0.5rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--bright-modern-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bright-modern-bg) 86%, transparent);
  color: var(--bright-modern-muted);
  font-size: 0.78rem;
  font-weight: 700;
}

html[lang^="en"] .bright-table-scroll::before,
[lang^="en"] .bright-table-scroll::before {
  content: "Scroll table horizontally";
}

.bright-table-scroll table {
  min-inline-size: 42rem;
}

body.bright-has-overflow-risk {
  overflow-x: clip !important;
}

.bright-modern-form :is(input, select, textarea) {
  border-color: color-mix(in srgb, var(--bright-modern-border) 80%, transparent);
}

.bright-modern-form :is(input, select, textarea)::placeholder {
  color: color-mix(in srgb, var(--bright-modern-soft) 82%, transparent);
}

/*
  Shared utility classes introduced by sitewide modernization:
  - .bright-perf-section: shared replacement for repeated content-visibility inline styles.
  - .bright-text-strong: semantic emphasis replacement for repeated font-weight inline styles.
  - .bright-muted-cell / .bright-muted-cell-soft: compact table/list cell text colors.
  - .bright-demo-note / .bright-demo-title / .bright-demo-copy: shared demo card text rhythm.
  - .bright-demo-panel: shared lightweight demo panel surface.
  - .bright-demo-pill-link: compact CTA link inside demo cards.
  - .bright-demo-success-panel: positive demo card accent.
*/
.bright-perf-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 640px;
}

.bright-text-strong {
  font-weight: 700;
}

.bright-muted-cell {
  padding: 0.75rem 1rem;
  color: #475569;
}

.bright-muted-cell-soft {
  padding: 0.75rem 1rem;
  color: #94a3b8;
}

.bright-demo-note {
  margin: 0;
  color: #cbd5e1;
  line-height: 2;
}

.bright-demo-title {
  margin: 0 0 0.625rem;
  color: #fff;
  font-size: 1.15rem;
}

.bright-demo-copy {
  color: var(--text-secondary, #cbd5e1);
  font-size: 0.9rem;
  line-height: 1.8;
  margin: 0;
}

.bright-demo-support-title {
  color: var(--text-primary, #fff);
  font-size: 1rem;
  margin: 0 0 0.5rem;
}

.bright-demo-panel {
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.875rem;
  background: rgba(255, 255, 255, 0.035);
}

.bright-demo-pill-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 44px;
  padding: 0.625rem 1rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #f3c870, var(--accent, #fbbf24));
  color: #08111f;
  font-weight: 700;
  text-decoration: none;
}

.bright-demo-success-panel {
  border-color: rgba(16, 185, 129, 0.25);
  background: rgba(16, 185, 129, 0.12);
}

.bright-page-guidance {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
  justify-content: space-between;
  max-inline-size: min(100%, 62rem);
  margin-block: 1rem 1.25rem;
  padding: 0.85rem 1rem;
  border: 1px solid color-mix(in srgb, var(--bright-modern-brand) 28%, var(--bright-modern-border));
  border-radius: var(--bright-modern-radius-card);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--bright-modern-brand) 8%, transparent), transparent 62%),
    var(--bright-modern-surface-soft);
  color: var(--bright-modern-muted);
}

.bright-page-guidance p {
  flex: 1 1 18rem;
  margin: 0;
  line-height: 1.8;
}

.bright-page-guidance strong {
  color: var(--bright-modern-text);
}

.bright-page-guidance a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 44px;
  padding: 0.6rem 0.95rem;
  border: 1px solid color-mix(in srgb, var(--bright-modern-brand) 42%, var(--bright-modern-border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--bright-modern-brand) 16%, transparent);
  color: var(--bright-modern-text);
  font-weight: 800;
  text-decoration: none;
}

body[data-bright-page-type="blog-post"] .bright-page-guidance,
body.bright-page--blog-post .bright-page-guidance,
body[data-bright-page-type="legal"] .bright-page-guidance,
body.bright-page--legal .bright-page-guidance {
  max-inline-size: min(100%, 76ch);
}

@media (max-width: 479px) {
  .bright-page-guidance {
    align-items: stretch;
  }

  .bright-page-guidance a {
    inline-size: 100%;
  }
}

body[data-bright-page-type="ai-bots"] :is(.bot-card, .agent-card, .feature-card),
body.bright-page--ai-bots :is(.bot-card, .agent-card, .feature-card),
body[data-bright-page-type="ai-agent"] :is(.agent-card, .feature-card, .service-card),
body.bright-page--ai-agent :is(.agent-card, .feature-card, .service-card) {
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent);
}

body[data-bright-modernized="true"] .bright-modern-reveal {
  transform: translateY(0.75rem);
  opacity: 0.001;
  transition:
    opacity 520ms ease,
    transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--bright-reveal-index, 0) * 42ms);
}

body[data-bright-modernized="true"] .bright-modern-reveal.is-visible {
  transform: translateY(0);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  body[data-bright-modernized="true"] .bright-modern-reveal {
    transform: none;
    opacity: 1;
    transition: none;
  }
}

@media (max-width: 479px) {
  :root {
    --bright-modern-container: min(100% - 1rem, var(--bai-container, 1180px));
    --bright-modern-gap: 0.85rem;
  }

  body[data-bright-modernized="true"] :is(.container, .nav-container, [class*="container"], .blog-container, .agent-container) {
    inline-size: min(100% - 1rem, 100%) !important;
    padding-inline: 0 !important;
  }

  body[data-bright-modernized="true"] :is(main, section, article, .section, .hero, .page-hero, .service-hero) {
    max-inline-size: 100%;
    overflow-x: clip;
  }

  body[data-bright-modernized="true"] :is(.grid, [class*="grid"], .cards, .features-grid, .services-grid, .demo-grid, .blog-grid, .tools-grid, .hero-grid, .section-grid, .link-grid, .result-grid, .cards-grid) {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--bright-modern-gap) !important;
  }

  body[data-bright-modernized="true"] :is(.flex, [class*="flex"], .hero-actions, .nav-actions, .button-group, .mode-row, .sample-row, .result-actions) {
    min-inline-size: 0;
    max-inline-size: 100%;
    flex-wrap: wrap;
  }

  body[data-bright-modernized="true"] :is(.hero-actions, .button-group, .result-actions, .mode-row, .sample-row) > :is(a, button, .btn) {
    flex: 1 1 100%;
    inline-size: 100%;
  }

  body[data-bright-modernized="true"] :is(button, .btn, [class*="button"], [class*="Button"], a[role="button"], input, select, textarea) {
    min-block-size: 44px;
  }

  body[data-bright-modernized="true"] :is(input, select, textarea) {
    inline-size: 100%;
  }

  body[data-bright-modernized="true"] :is(.unified-nav, header[role="banner"]) {
    max-inline-size: 100vw;
    overflow-x: clip;
  }

  body[data-bright-modernized="true"] .nav-container {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 0.6rem !important;
  }

  body[data-bright-modernized="true"] :is(.nav-desktop, .desktop-nav, .search-desktop) {
    display: none !important;
  }

  body[data-bright-modernized="true"] :is(.mobile-toggle, .search-mobile, .lang-switcher-btn-mobile) {
    min-inline-size: 44px;
    min-block-size: 44px;
  }

  body[data-bright-modernized="true"] :is(.mobile-menu, .mobile-menu-drawer, .mobile-nav, [class*="mobile-menu"]) {
    inline-size: min(100vw, 24rem) !important;
    max-inline-size: 100vw !important;
  }

  body[data-bright-modernized="true"] footer,
  body[data-bright-modernized="true"] .site-footer {
    overflow-x: clip;
  }

  body[data-bright-modernized="true"] footer :is(.grid, [class*="grid"], .footer-grid) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 360px) {
  :root {
    --bright-modern-fluid-h1: clamp(1.8rem, 1.55rem + 1.5vw, 2.35rem);
    --bright-modern-fluid-h2: clamp(1.3rem, 1.12rem + 1vw, 1.8rem);
  }

  body[data-bright-modernized="true"] :is(.card, article, .feature-card, .service-card, .demo-card, .post, .pricing-card, .tool-card, .glass-card) {
    padding-inline: min(1rem, 4vw);
  }
}

@media (min-width: 640px) {
  body[data-bright-modernized="true"] :is(.grid, .cards, .features-grid, .services-grid, .demo-grid, .blog-grid, .tools-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-bright-modernized="true"] form :is(input, select, textarea, button) {
    inline-size: auto;
  }
}

@media (min-width: 768px) {
  body[data-bright-modernized="true"] :is(.grid, .cards, .features-grid, .services-grid, .demo-grid, .blog-grid, .tools-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-bright-page-type="blog-post"] main,
  body.bright-page--blog-post main,
  body[data-bright-page-type="legal"] main,
  body.bright-page--legal main {
    --bright-modern-container: min(100% - 3rem, 900px);
  }
}

@media (min-width: 960px) {
  body[data-bright-modernized="true"] main > section,
  body[data-bright-modernized="true"] .section {
    padding-inline: max(1.5rem, env(safe-area-inset-left));
  }

  body[data-bright-modernized="true"] :is(.grid, .cards, .features-grid, .services-grid, .demo-grid, .blog-grid, .tools-grid) {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  }

  body[data-bright-page-type="dashboard"] :is(.dashboard-grid, .metrics-grid, .grid),
  body.bright-page--dashboard :is(.dashboard-grid, .metrics-grid, .grid) {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  }
}

@media (min-width: 1024px) {
  body[data-bright-modernized="true"] :is(.hero-grid, .section-grid, .demo-grid, .result-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-bright-page-type="dashboard"] :is(.dashboard-grid, .metrics-grid, .cards-grid),
  body.bright-page--dashboard :is(.dashboard-grid, .metrics-grid, .cards-grid) {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  }
}