/* Sonetec Powers — daylight showroom
   Light surfaces only. Survey Amber stays on the action.
   Loaded last so it repaints night canvases without touching copy. */

html {
  color-scheme: light;
  scrollbar-color: #c5ced8 #f4f6f8;
}

::selection {
  background: #fde8b0;
  color: #0f172a;
}

:focus-visible {
  outline: 2px solid #0b3d91;
  outline-offset: 3px;
}

body {
  background:
    radial-gradient(900px 420px at 100% -10%, rgba(11, 61, 145, 0.05), transparent 55%),
    radial-gradient(700px 380px at -10% 20%, rgba(245, 166, 35, 0.05), transparent 50%),
    #f6f7f9;
  color: #1e293b;
  font-feature-settings: "ss01" on, "cv11" on;
}

h1 {
  letter-spacing: -0.045em;
  line-height: 1.04;
  font-weight: 700;
}

h2 {
  letter-spacing: -0.038em;
  line-height: 1.12;
}

/* Solid ink. Emphasis is weight and Grid Navy, not a clipped gradient. */
.gradient-text,
.gradient-text-solar,
.text-gradient-solar,
.gradient-text-blue,
.text-gradient-blue,
.gradient-text-light,
.text-gradient-light,
.gradient-text-dark,
.text-gradient-dark,
.hero-main-title .gradient-text {
  background: none;
  -webkit-text-fill-color: #0b3d91;
  background-clip: unset;
  color: #0b3d91;
}

/* Header: frosted metal, pointer sheen */
.site-header {
  background-color: rgba(255, 255, 255, 0.78);
  background-image: radial-gradient(480px circle at var(--hx, 70%) var(--hy, 0%), rgba(255, 255, 255, 0.95), transparent 46%);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.site-header.scrolled,
#site-header.scrolled .site-header {
  background-color: rgba(255, 255, 255, 0.92);
}

/* Header menu: quiet ink. Hover only darkens the word. The open page keeps a short rule. */
.site-header .nav-desktop > a,
.site-header .nav-drop > button {
  position: relative;
  color: #64748b;
  font-weight: 500;
  letter-spacing: -0.012em;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  transition: color 0.22s ease;
}

.site-header .nav-desktop > a:hover,
.site-header .nav-drop > button:hover,
.site-header .nav-drop:hover > button {
  color: #0f172a;
  background: transparent;
  box-shadow: none;
}

.site-header .nav-desktop > a.active,
.site-header .nav-drop.active > button {
  color: #0f172a;
  font-weight: 600;
  background: transparent;
  box-shadow: none;
}

.site-header .nav-desktop > a.active::after,
.site-header .nav-drop.active > button::after {
  content: "";
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.08rem;
  height: 2px;
  border-radius: 2px;
  background: #0b3d91;
  pointer-events: none;
}

.site-header .nav-drop-menu {
  top: calc(100% + 12px);
  min-width: 240px;
  padding: 0.4rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 18px 40px -24px rgba(15, 23, 42, 0.35);
  transform: translateY(6px);
}

.site-header .nav-drop:hover .nav-drop-menu {
  transform: translateY(0);
}

.site-header .nav-drop-menu a {
  position: relative;
  color: #475569;
  border-radius: 8px;
  font-weight: 500;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.site-header .nav-drop-menu a:hover {
  background: #f4f6f8;
  color: #0f172a;
  transform: none;
}

.site-header .nav-drop-menu a.active {
  color: #0f172a;
  font-weight: 600;
  background: #f3f6fb;
  box-shadow: inset 2px 0 0 #0b3d91;
  transform: none;
}

#site-header .mobile-nav > a:hover,
#site-header .mobile-nav-submenu a:hover {
  color: #0f172a;
  background: transparent;
}

#site-header .mobile-nav > a.active:not(.btn),
#site-header .mobile-nav-drop.active > summary,
#site-header .mobile-nav-drop.active .mobile-summary-inner {
  color: #0f172a;
  font-weight: 600;
  background: transparent;
  box-shadow: inset 0 -2px 0 #0b3d91;
}

#site-header .mobile-nav-submenu a.active {
  color: #0f172a;
  font-weight: 600;
  background: #f3f6fb;
  box-shadow: inset 2px 0 0 #0b3d91;
}

#site-header .mobile-nav-drop[open] {
  background: transparent;
}

.mobile-nav-drop[open] .mobile-summary-inner {
  color: #0f172a;
  border-bottom-color: rgba(15, 23, 42, 0.08);
}

.menu-toggle {
  padding: 0.35rem;
  line-height: 0;
}

.header-ctas .btn svg,
.mobile-bar a svg {
  display: block;
  flex-shrink: 0;
}

body.brand-page .btn-outline {
  background: rgba(11, 61, 145, 0.05);
  color: #0b3d91;
  border-color: rgba(11, 61, 145, 0.35);
}

body.brand-page .btn-outline:hover {
  background: #0b3d91;
  color: #ffffff;
}

/* Inner-page heroes */
.hero,
.hero-compact {
  color: #1e293b;
  background:
    radial-gradient(900px 420px at 85% -10%, rgba(245, 166, 35, 0.16), transparent 60%),
    radial-gradient(800px 480px at 0% 80%, rgba(11, 61, 145, 0.08), transparent 62%),
    linear-gradient(180deg, #fbfcfe 0%, #f3f6fa 100%);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: inset 0 1px 0 #ffffff;
}

.hero::before {
  background-image:
    linear-gradient(to right, rgba(15, 23, 42, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 23, 42, 0.045) 1px, transparent 1px);
}

.hero h1,
.hero-compact h1,
.hero-main-title,
.cta-band h2 {
  color: #0f172a !important;
  background: none !important;
  -webkit-text-fill-color: #0f172a !important;
  background-clip: border-box !important;
}

.backup-inverters-section .section-header h2 {
  color: #f8fafc !important;
  background: none !important;
  -webkit-text-fill-color: #f8fafc !important;
  background-clip: border-box !important;
}

.hero .lead,
.hero-stat-num {
  color: #0f172a;
}

.hero-stat-label {
  color: #475569;
}

.hero-stat-suffix {
  color: #b45309;
}

.hero-stats {
  border-top-color: rgba(15, 23, 42, 0.08);
}

.hero-badge,
.hero-badge--gold {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(15, 23, 42, 0.1);
  color: #0b3d91;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9), 0 8px 20px -16px rgba(15, 23, 42, 0.4);
}

.hero-badge--gold {
  background: #fff7e6;
  border-color: rgba(180, 83, 9, 0.28);
  color: #9a3412;
}

/* The hover sheen is a skewed band that sits on the label and reads as a bar. */
.btn::after,
.backup-inverters-section .btn::after {
  content: none !important;
  display: none !important;
}

.hero .btn-outline,
.hero-compact .btn-outline,
.cta-band .btn-outline,
.solar-hero-wrap .btn-outline,
.brand-hero .btn-outline {
  background: #ffffff !important;
  color: #0b3d91 !important;
  border: 1px solid rgba(11, 61, 145, 0.35) !important;
  box-shadow: inset 0 1px 0 #ffffff, 0 8px 18px -14px rgba(15, 23, 42, 0.45) !important;
}

.hero .btn-outline:hover,
.hero-compact .btn-outline:hover,
.cta-band .btn-outline:hover,
.solar-hero-wrap .btn-outline:hover,
.brand-hero .btn-outline:hover {
  background: #0b3d91 !important;
  color: #ffffff !important;
  border-color: #0b3d91 !important;
}

/* Sunny and on-grid stay daylight. Rain, power cut, and night need a dark sky
   so the canvas rain, storm, and stars can be seen. */
.solar-hero-wrap,
.solar-hero-wrap[data-weather="sunny"],
.solar-hero-wrap[data-weather="ongrid"] {
  color: #1e293b;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.solar-hero-wrap[data-weather="sunny"] {
  background:
    radial-gradient(900px 480px at 72% 0%, rgba(251, 191, 36, 0.28), transparent 58%),
    linear-gradient(180deg, #fbf8f2 0%, #f4f7fb 70%);
}

.solar-hero-wrap[data-weather="ongrid"] {
  background:
    radial-gradient(800px 420px at 50% 0%, rgba(14, 165, 233, 0.18), transparent 60%),
    linear-gradient(180deg, #f3f8fd 0%, #eef3f8 100%);
}

.solar-hero-wrap[data-weather="sunny"]::before,
.solar-hero-wrap[data-weather="ongrid"]::before {
  opacity: 0.55;
}

.solar-hero-wrap[data-weather="sunny"] .hero-bg-solar-array,
.solar-hero-wrap[data-weather="ongrid"] .hero-bg-solar-array {
  opacity: 0.07;
  mix-blend-mode: multiply;
  filter: none;
}

.solar-hero-wrap[data-weather="monsoon"] {
  color: #f8fafc;
  background: radial-gradient(circle at 50% 18%, #243044 0%, #121926 46%, #070b12 100%);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.solar-hero-wrap[data-weather="monsoon"]::before {
  background: radial-gradient(circle at 50% 8%, rgba(148, 163, 184, 0.22) 0%, rgba(51, 65, 85, 0.08) 42%, transparent 78%);
  opacity: 1;
}

.solar-hero-wrap[data-weather="monsoon"] .hero-bg-solar-array {
  opacity: 0.14;
  mix-blend-mode: overlay;
  filter: grayscale(0.45) brightness(0.55);
}

.solar-hero-wrap[data-weather="blackout"] {
  color: #f8fafc;
  background: radial-gradient(circle at 50% 30%, #10182a 0%, #070b14 52%, #020308 100%);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.solar-hero-wrap[data-weather="blackout"]::before {
  background: radial-gradient(circle at 38% 72%, rgba(16, 185, 129, 0.2) 0%, transparent 58%);
  opacity: 1;
}

.solar-hero-wrap[data-weather="blackout"] .hero-bg-solar-array {
  opacity: 0.1;
  mix-blend-mode: overlay;
  filter: brightness(0.4) contrast(1.15);
}

.solar-hero-wrap[data-weather="night"] {
  color: #f8fafc;
  background: radial-gradient(circle at 76% 16%, #1a2444 0%, #0a1020 48%, #03060e 100%);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.solar-hero-wrap[data-weather="night"]::before {
  background: radial-gradient(circle at 78% 12%, rgba(165, 180, 252, 0.28) 0%, rgba(79, 70, 229, 0.1) 38%, transparent 70%);
  opacity: 1;
}

.solar-hero-wrap[data-weather="night"] .hero-bg-solar-array {
  opacity: 0.16;
  mix-blend-mode: overlay;
  filter: hue-rotate(-12deg) brightness(0.42) contrast(1.12);
}

.solar-hero-wrap[data-weather="monsoon"] .hero-main-title,
.solar-hero-wrap[data-weather="blackout"] .hero-main-title,
.solar-hero-wrap[data-weather="night"] .hero-main-title {
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc !important;
  background: none !important;
}

.solar-hero-wrap[data-weather="monsoon"] .hero-main-title .gradient-text,
.solar-hero-wrap[data-weather="blackout"] .hero-main-title .gradient-text,
.solar-hero-wrap[data-weather="night"] .hero-main-title .gradient-text {
  color: #fbbf24 !important;
  -webkit-text-fill-color: #fbbf24 !important;
  background: none !important;
}

.solar-hero-wrap[data-weather="monsoon"] .hero-sublead,
.solar-hero-wrap[data-weather="blackout"] .hero-sublead,
.solar-hero-wrap[data-weather="night"] .hero-sublead,
.solar-hero-wrap[data-weather="monsoon"] .hero-trust-bullets,
.solar-hero-wrap[data-weather="blackout"] .hero-trust-bullets,
.solar-hero-wrap[data-weather="night"] .hero-trust-bullets {
  color: rgba(226, 232, 240, 0.9);
}

.solar-hero-wrap[data-weather="monsoon"] .hero-pill-badge,
.solar-hero-wrap[data-weather="blackout"] .hero-pill-badge,
.solar-hero-wrap[data-weather="night"] .hero-pill-badge {
  background: rgba(8, 12, 22, 0.55);
  border-color: rgba(255, 255, 255, 0.18);
  color: #fde68a;
}

.solar-hero-wrap[data-weather="monsoon"] .trust-bullet-item,
.solar-hero-wrap[data-weather="blackout"] .trust-bullet-item,
.solar-hero-wrap[data-weather="night"] .trust-bullet-item {
  background: rgba(8, 12, 22, 0.48);
  border-color: rgba(255, 255, 255, 0.14);
  color: #e2e8f0;
}

.solar-hero-wrap[data-weather="monsoon"] .trust-bullet-item .tb-check,
.solar-hero-wrap[data-weather="blackout"] .trust-bullet-item .tb-check,
.solar-hero-wrap[data-weather="night"] .trust-bullet-item .tb-check {
  color: #86efac;
}

.hero-main-title {
  color: #0f172a;
  letter-spacing: -0.046em;
  line-height: 1.05;
  font-weight: 700;
}

.hero-sublead,
.hero-trust-bullets {
  color: #334155;
}

.hero-pill-badge {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(15, 23, 42, 0.1);
  color: #0b3d91;
  box-shadow: inset 0 1px 0 #ffffff, 0 10px 24px -18px rgba(15, 23, 42, 0.5);
}

.trust-bullet-item {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(15, 23, 42, 0.08);
  color: #1e293b;
}

.trust-bullet-item .tb-check {
  color: #0b3d91;
}

.scenario-controller {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: inset 0 1px 0 #ffffff, 0 16px 36px -24px rgba(15, 23, 42, 0.45);
}

.scenario-btn {
  color: #475569;
}

.scenario-btn:hover {
  color: #0f172a;
}

.scenario-btn.active {
  color: #0b192c;
}

.scenario-narrative-bar {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(15, 23, 42, 0.08);
  color: #0f172a;
  box-shadow: inset 0 1px 0 #ffffff, 0 12px 28px -20px rgba(15, 23, 42, 0.4);
}

.scenario-narrative-bar .sn-badge,
.solar-hero-wrap[data-weather="sunny"] .scenario-narrative-bar .sn-badge {
  background: #fde68a;
  border-color: #b45309;
  color: #78350f;
  -webkit-text-fill-color: #78350f;
}

.solar-hero-wrap[data-weather="ongrid"] .scenario-narrative-bar .sn-badge {
  background: #cffafe;
  border-color: #0e7490;
  color: #155e75;
  -webkit-text-fill-color: #155e75;
}

.solar-hero-wrap[data-weather="monsoon"] .scenario-narrative-bar .sn-badge {
  background: #e2e8f0;
  border-color: #334155;
  color: #0f172a;
  -webkit-text-fill-color: #0f172a;
}

.solar-hero-wrap[data-weather="blackout"] .scenario-narrative-bar .sn-badge {
  background: #fecaca;
  border-color: #b91c1c;
  color: #7f1d1d;
  -webkit-text-fill-color: #7f1d1d;
}

.solar-hero-wrap[data-weather="night"] .scenario-narrative-bar .sn-badge {
  background: #e0e7ff;
  border-color: #4338ca;
  color: #312e81;
  -webkit-text-fill-color: #312e81;
}

.trust-marquee {
  background:
    linear-gradient(180deg, #ffffff 0%, #f3f5f8 100%);
  color: #1e293b;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  border-bottom: 1px solid rgba(180, 83, 9, 0.45);
  box-shadow: inset 0 1px 0 #ffffff;
}

.cta-band {
  color: #1e293b;
  background:
    radial-gradient(700px 320px at 50% 0%, rgba(245, 166, 35, 0.16), transparent 70%),
    radial-gradient(600px 280px at 100% 100%, rgba(11, 61, 145, 0.08), transparent 70%),
    linear-gradient(180deg, #f8f5ef 0%, #f4f7fb 100%);
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: inset 0 1px 0 #ffffff;
}

.cta-band h2 {
  color: #0f172a;
}

.cta-band p {
  color: #475569;
}

.cta-parallax-grid {
  background-image: radial-gradient(rgba(15, 23, 42, 0.08) 1.5px, transparent 1.5px);
}

/* Footer as a light closing plate. The wordmark is the colour logo. */
.site-footer {
  color: #475569;
  background:
    radial-gradient(640px 240px at 12% 0%, rgba(11, 61, 145, 0.06), transparent 70%),
    linear-gradient(180deg, #f8f9fb 0%, #eef1f5 100%);
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  border-image: none;
  box-shadow: inset 0 1px 0 #ffffff;
}

.site-footer::before {
  background-image: radial-gradient(rgba(15, 23, 42, 0.05) 1px, transparent 1px);
}

.footer-grid h4 {
  color: #0b3d91;
}

.footer-grid a {
  color: #334155;
}

.footer-grid a:hover {
  color: #0b3d91;
}

.footer-grid a:hover::before {
  color: #b45309;
}

.footer-solar-word {
  color: #0b3d91;
  font-weight: 800;
  letter-spacing: 0.08em;
  font-size: 0.82rem;
}

.footer-brands-bar {
  margin-bottom: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.84rem;
}

.footer-brands-bar strong {
  color: #0f172a;
  font-weight: 700;
}

.footer-brands-bar a {
  color: #334155;
  text-decoration: none;
}

.footer-brands-bar a:hover {
  color: #0b3d91;
}

.footer-brands-bar .footer-brands-all {
  color: #9a3412;
  font-weight: 700;
}

.footer-scheme {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin: 0.25rem 0 1.15rem;
  padding-top: 1.15rem;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  text-decoration: none;
}

.footer-scheme img {
  display: block;
  height: 132px;
  width: auto;
  background: #ffffff;
  border-radius: 12px;
}

.footer-scheme span {
  color: #475569;
  font-size: 0.84rem;
  line-height: 1.45;
  max-width: 26rem;
}

.scheme-lockup {
  display: inline-block;
  line-height: 0;
  text-decoration: none;
}

.scheme-lockup img {
  display: block;
  height: 168px;
  width: auto;
  background: #ffffff;
  border-radius: 14px;
}

.scheme-lockup--sm {
  display: block;
  margin-bottom: 0.75rem;
}

.scheme-lockup--sm img {
  height: 140px;
}

.card .scheme-lockup--sm img {
  margin-inline: auto;
}

.scheme-lockup--hero {
  display: block;
  margin-bottom: 1rem;
}

.scheme-lockup--hero img {
  height: 220px;
}

.calc-header .scheme-lockup {
  margin: 0 auto 1rem;
}

.bento-body .scheme-lockup {
  margin-bottom: 0.85rem;
}

.footer-bottom {
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  color: #64748b;
}

.proj-card-carousel {
  background: #e8edf3;
}

/* Brand chapters: same daylight, accent stays inside the chapter */
body.brand-page {
  background:
    radial-gradient(800px 360px at 100% 0%, rgba(11, 61, 145, 0.05), transparent 55%),
    #f5f7fb !important;
  color: #1e293b;
}

body.brand-page .breadcrumb {
  background: #f8fafc !important;
  color: #475569 !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

body.brand-page .breadcrumb a {
  color: #475569 !important;
}

body.brand-page .breadcrumb span {
  color: #0f172a !important;
}

body.brand-page .brand-hero {
  color: #1e293b;
  background:
    radial-gradient(680px 360px at 50% -10%, rgba(245, 166, 35, 0.2), transparent 62%),
    radial-gradient(700px 400px at 80% 100%, rgba(11, 61, 145, 0.07), transparent 60%),
    linear-gradient(180deg, #fbfcfe 0%, #f3f6fa 100%);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

body.brand-page .brand-hero h1,
body.brand-page .brand-hero h1 span.highlight {
  color: #0f172a;
  background: none;
  -webkit-text-fill-color: #0f172a;
}

body.brand-page .brand-hero h1 span.highlight {
  color: #0b3d91;
  -webkit-text-fill-color: #0b3d91;
}

body.brand-page .brand-hero p.brand-lead,
body.brand-page .brand-metric-label {
  color: #475569;
}

/* These four heroes keep a dark inline stage. Light-mode ink disappears on it. */
body.brand-page .brand-hero[style*="background"] h1 {
  color: #f8fafc;
  -webkit-text-fill-color: #f8fafc;
}

body.brand-page .brand-hero[style*="background"] p.brand-lead {
  color: #e2e8f0;
}

body.brand-page .brand-hero[style*="background"] .brand-hero-eyebrow {
  color: var(--brand-accent, #f8fafc) !important;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
}

/* Product cards are light. Badge and view labels were still painted for a dark stage. */
body.brand-page .category-chapter .finish-label {
  color: #475569;
}

body.brand-page .category-chapter .finish-label strong,
body.brand-page .category-chapter .finish-name {
  color: #0f172a;
}

body.brand-page .hw-subbrand {
  color: #9a3412;
}

body.brand-page .category-chapter .flagship-badge--gold,
body.brand-page .category-chapter .flagship-badge--kerala {
  color: #9a3412;
  background: #fff7ed;
  border-color: rgba(154, 52, 18, 0.28);
}

body.brand-page .category-chapter .flagship-badge--green {
  color: #166534;
  background: #f0fdf4;
  border-color: rgba(22, 101, 52, 0.28);
}

body.brand-page .category-chapter .flagship-badge--warranty {
  color: #1e3a8a;
  background: #eff6ff;
  border-color: rgba(30, 58, 138, 0.28);
}

body.brand-page .brand-hero-eyebrow,
body.brand-page .flagship-eyebrow,
body.brand-page .chapter-eyebrow,
body.brand-page .brand-hub-section .section-header .eyebrow,
body.brand-page .hub-card-badge {
  color: #0b3d91 !important;
  background: rgba(11, 61, 145, 0.06);
  border-color: rgba(11, 61, 145, 0.14);
}

body.brand-page .flagship-metrics-grid {
  background: #f1f5f9;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: inset 0 1px 0 #ffffff;
}

body.brand-page .f-metric-val {
  background: none !important;
  -webkit-text-fill-color: #0f172a !important;
  color: #0f172a !important;
}

body.brand-page .f-metric-label {
  color: #475569 !important;
}

body.brand-page .brand-metrics-ribbon {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: inset 0 1px 0 #ffffff, 0 18px 40px -28px rgba(15, 23, 42, 0.45);
}

body.brand-page .brand-subnav {
  background: rgba(255, 255, 255, 0.86);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 10px 24px -20px rgba(15, 23, 42, 0.4);
}

body.brand-page .brand-subnav-pill {
  color: #334155;
}

body.brand-page .brand-subnav-pill:hover,
body.brand-page .brand-subnav-pill.active {
  color: #0f172a;
  background: rgba(11, 61, 145, 0.06);
}

body.brand-page .category-chapter,
body.brand-page .brand-compare-section,
body.brand-page .brand-trust-section,
body.brand-page .brand-hub-section {
  color: #1e293b;
  background:
    radial-gradient(820px 380px at 8% -8%, rgba(11, 61, 145, 0.07), transparent 60%),
    radial-gradient(640px 320px at 100% 0%, rgba(245, 166, 35, 0.08), transparent 58%),
    #f7f8fb;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

body.brand-page .category-chapter::before,
body.brand-page .brand-trust-section::before {
  background-image:
    linear-gradient(to right, rgba(15, 23, 42, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 23, 42, 0.04) 1px, transparent 1px);
}

body.brand-page :is(.chapter-title, .flagship-title, .brand-hub-section .section-header h2, .brand-trust-section .chapter-title) {
  color: #0f172a !important;
  background: none !important;
  -webkit-text-fill-color: #0f172a !important;
}

body.brand-page :is(.chapter-lead, .flagship-desc, .flagship-tagline, .brand-trust-card p, .hub-card-desc, .brand-hub-section .section-subtitle, .hw-body p, .hw-subhead, .flagship-features-list li, .hw-specs-list li) {
  color: #475569;
}

body.brand-page :is(.flagship-features-list li strong, .hw-specs-list li strong, .hw-body h4, .brand-trust-card h3, .hub-card-title) {
  color: #0f172a;
}

body.brand-page :is(.flagship-product-card, .hardware-card, .brand-trust-card, .hub-brand-card) {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 18px 40px -28px rgba(15, 23, 42, 0.45), inset 0 1px 0 #ffffff;
  color: #1e293b;
}

body.brand-page .hub-card-stage,
body.brand-page .hw-visual-wrap,
body.brand-page .category-chapter .flagship-visual-stage {
  background: linear-gradient(180deg, #f8fafc 0%, #e8eef5 100%);
  border-color: rgba(15, 23, 42, 0.06);
}

body.brand-page .compare-table-wrapper {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 16px 36px -28px rgba(15, 23, 42, 0.4);
}

body.brand-page .brand-compare-table,
body.brand-page .brand-compare-table th,
body.brand-page .brand-compare-table td {
  color: #1e293b;
  border-bottom-color: rgba(15, 23, 42, 0.06);
}

body.brand-page .brand-compare-table th {
  background: #f1f5f9;
}

body.brand-page .brand-compare-table th.highlight-col {
  background: #e8f0fc;
  color: #0b3d91;
}

body.brand-page .hub-pill {
  background: rgba(11, 61, 145, 0.06);
  color: #0b3d91;
  border-color: rgba(11, 61, 145, 0.12);
}

body.brand-page .hw-specs-list li::before,
body.brand-page .flagship-features-list li::before {
  color: #0b3d91;
}

/* Split words stay on the baseline. The hidden CSS reveal classes stay visible so GSAP can own the entrance. */
h1 .word,
h2 .word,
.hero-main-title .word,
.hero h1 .word {
  display: inline-block;
}

.reveal,
.reveal-up,
.reveal-scale,
.section-reveal,
.section-reveal:not(.is-inview),
.split-reveal,
.split-reveal:not(.is-inview),
.cta-band-reveal,
.cta-band-reveal:not(.is-inview),
.img-frame-reveal,
.img-frame-reveal:not(.is-inview),
.section-reveal .section-header,
.section-reveal .section-header:not(.is-inview),
.grid-reveal > *,
.grid-reveal:not(.is-inview) > *,
.stagger-cascade > *,
[data-motion-hold] {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none;
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .site-header {
    background-image: none;
  }
}