/* Luminous orange-and-white brand, deliberately light-only at the user's request.
   Preserve redesign: DESIGN_VARIANCE 4, MOTION_INTENSITY 6, VISUAL_DENSITY 6.
   Native CSS + existing Geist and layout. No new font family or theme-switching UI.
   70 / 20 / 10 composition guide: white/off-white and neutral ink dominate;
   #FF6B2C anchors CTAs and selected brand surfaces; peach details stay restrained.
   Bright orange generally uses dark text; the featured sales package uses
   white text on orange as explicitly requested. Other contrast tokens stay intact.
   Small orange text uses a deeper accessible shade.
   Real customer logos and real product screenshots retain their original colors. */
:root,
body.service-home {
  color-scheme: only light;
  --primary: #FF6B2C;
  --primary-strong: #E95618;
  --primary-ink: #B13C0C;
  --on-primary: #271709;
  --dark: #242424;
  --accent: #FF9A6C;
  --background: #FFFFFF;
  --white: #FFFFFF;
  --surface: #FAFAF9;
  --surface-brand: #FFF0E8;
  --muted: #606060;
  --line: #E8E3E0;
  --line-strong: #CEC7C2;
  --shadow: 0 22px 60px rgb(68 42 30 / 10%);
  --site-gutter: clamp(24px, 3vw, 56px);
  --copy-size: 18px;
  --icon-filter: brightness(0) saturate(100%) invert(35%) sepia(77%) saturate(1930%) hue-rotate(354deg) brightness(82%) contrast(104%);
}

html,
body {
  color-scheme: only light;
  background: var(--background);
  color: var(--dark);
}

::selection {
  color: var(--on-primary);
  background: var(--primary);
}

:focus-visible {
  outline-color: var(--primary-ink);
}

body input:focus,
body select:focus,
body textarea:focus,
body .contact-form :is(input, select, textarea):focus {
  border-color: var(--primary-ink);
}

body :is(.button-primary, .header-cta, .catalog-contact, .template-action.live,
  .category-button.active, .svc-demo-filters button.active,
  .architecture-tabs a[aria-current="page"], .article-filters button.active,
  .newsletter-form button, .svc-step, .product-links a:last-child) {
  color: var(--on-primary);
  background: var(--primary);
  border-color: var(--primary);
}

body :is(.button-primary, .header-cta, .catalog-contact,
  .newsletter-form button):hover {
  color: var(--on-primary);
  background: var(--primary-strong);
  border-color: var(--primary-strong);
}

body .button-light {
  color: var(--primary-ink);
  background: var(--white);
}

body .svc-price-featured {
  color: var(--white);
  background: var(--primary);
  border-color: var(--primary);
}

body .svc-price-featured :is(h3, .svc-price, .svc-price strong, .svc-price > span,
  .svc-price-caption, li),
body .svc-price-featured li::before {
  color: var(--white);
}

body .svc-price-featured .button-light {
  color: var(--white);
  background: rgb(255 255 255 / 10%);
  border: 1px solid rgb(255 255 255 / 80%);
}

body .svc-price-featured .button-light:hover {
  color: var(--primary-ink);
  background: var(--white);
}

body .svc-consult-band,
body .catalog-bottom {
  background: var(--primary);
  color: var(--on-primary);
}

body .svc-consult-copy > p:not(.svc-large-brand),
body .catalog-bottom > p,
body .svc-laptop figcaption {
  color: var(--on-primary);
}

body .svc-contact-channels a {
  border-color: rgb(39 23 9 / 35%);
}

body .svc-contact-channels a:hover {
  background: rgb(255 255 255 / 24%);
}

body .svc-contact-channels img {
  filter: none;
}

body .svc-intro {
  background: linear-gradient(180deg, #FFF9F5, #FFFFFF 82%);
}

body .svc-intro .svc-hero {
  background: #FFF9F5;
  border-color: #FFE0D0;
}

body .svc-hero-scenery {
  opacity: .28;
}

body .svc-hero-scenery > img {
  filter: sepia(1) saturate(2) hue-rotate(330deg);
}

body .catalog-stat {
  color: var(--dark);
  background: var(--surface-brand);
  border-color: var(--line);
  box-shadow: 0 16px 36px rgb(68 42 30 / 8%);
}

body .catalog-stat > img {
  filter: grayscale(1);
  opacity: .18;
}

body .catalog-stat::after {
  background: linear-gradient(180deg, #FFFFFF66, #FFF0E8DD);
}

body .catalog-stat strong {
  color: var(--primary-ink);
}

body .catalog-stat i {
  color: var(--muted);
}

body .template-preview.is-live {
  background: var(--surface-brand);
  border-color: var(--line);
  box-shadow: 0 10px 28px rgb(68 42 30 / 8%);
}

body .template-preview.is-live::after {
  border-color: #FFCCB5;
}

body[class] .site-footer {
  background: var(--surface);
  color: var(--dark);
  border-top: 1px solid var(--line);
}

body[class] .site-footer .footer-main .footer-brand,
body[class] .site-footer .footer-brand {
  color: var(--dark);
}

body[class] .site-footer .footer-brand-block > p,
body[class] .site-footer .footer-links a,
body[class] .site-footer .footer-company a,
body[class] .site-footer .footer-company span,
body[class] .site-footer .footer-news label > span,
body[class] .site-footer .footer-news small,
body[class] .site-footer .footer-bottom {
  color: var(--muted);
}

body[class] .site-footer .footer-links > p,
body[class] .site-footer .footer-company > p,
body[class] .site-footer .footer-news > p,
body[class] .site-footer .footer-links a:hover,
body[class] .site-footer .footer-company a:hover {
  color: var(--primary-ink);
}

body[class] .site-footer .newsletter-form input {
  color: var(--dark);
  background: var(--white);
  border-color: var(--line-strong);
}

body[class] .site-footer .newsletter-form input::placeholder {
  color: var(--muted);
}

body[class] .site-footer .footer-bottom {
  border-color: var(--line);
}

body .contact-float-call {
  color: var(--on-primary);
  background: var(--primary);
}

body .contact-float-zalo,
body .contact-float-messenger {
  background: var(--white);
  color: #0068FF;
  border-color: var(--line);
}

body.service-home .contact-float-zalo .zalo-mark {
  color: #0068FF;
}

/* Preserve design read: a fluid-width technology storefront, not a narrow
   centered landing page. Variance 4 / motion 6 / density 6, native CSS + Geist.
   Section surfaces bleed to the viewport; prose keeps a readable measure.
   No route, copy, form, logo, animation or theme changes. */
body .section-shell,
body.service-home .section-shell,
body :is(.catalog-hero, .catalog-shell, .catalog-bottom, .catalog-footer) {
  width: calc(100% - 2 * var(--site-gutter));
  max-width: none;
}

body .architecture-header.site-header {
  padding-inline: var(--site-gutter);
}

body .architecture-header .desktop-nav {
  margin-inline: auto;
}

body.service-home:not(.architecture-detail) main > section.section-shell {
  width: 100%;
  margin-inline: 0;
  padding-inline: var(--site-gutter);
}

body.service-home:not(.architecture-detail) main > :is(.svc-customers-highlight, .svc-pricing-highlight) {
  border-inline: 0;
  border-radius: 0;
  box-shadow: none;
}

body.service-home .svc-heading {
  max-width: 1120px;
}

body.service-home .svc-heading > p {
  max-width: 68ch;
}

body.service-home :is(.svc-heading h2, .svc-journey-copy h2, .svc-faq > header h2) {
  font-size: clamp(30px, 2.6vw, 42px);
  line-height: 1.4;
}

body.service-home .svc-intro .svc-hero-visual {
  max-width: 1100px;
  justify-self: end;
}

body.service-home .svc-hero-copy > p {
  max-width: 60ch;
}

body.service-home .svc-intro .svc-hero-copy h1 {
  font-size: clamp(36px, 3vw, 52px);
}

body.service-home .svc-intro .svc-hero-copy h1 > span {
  font-size: clamp(28px, 2.2vw, 38px);
}

body.service-home :is(.svc-proof h2, .svc-process-grid h3, .svc-reason-grid h3,
  .svc-value-list h3, .svc-price-card h3) {
  font-size: 20px;
  line-height: 1.5;
}

body.service-home :is(.svc-demo-info h3, .svc-demo-pair .svc-demo-info h3) {
  font-size: 22px;
}

/* Primary reading text is visibly larger, including explicitly sized card copy. */
body.service-home :is(.svc-hero-copy > p, .svc-proof p, .svc-heading > p,
  .svc-process-grid p, .svc-reason-grid p, .svc-published-copy > p:not(:first-child),
  .svc-journey-copy > p, .svc-value-list p, .svc-faq-list p, .svc-faq > header p,
  .svc-customers-copy > p, .svc-consult-copy > p, .svc-contact-copy > p) {
  font-size: var(--copy-size);
  line-height: 1.75;
}

body.service-home .svc-faq-list summary {
  font-size: var(--copy-size);
  line-height: 1.7;
}

body.service-home .svc-consult-band .svc-consult-copy > p {
  font-size: var(--copy-size);
}

body.service-home .contact-form label,
body.service-home .svc-consult-band .svc-inline-form label {
  font-size: 16px;
}

body.service-home :is(.button, .svc-hero-actions .button, .svc-demo-filters button,
  .svc-demo-actions > a, .svc-demo-actions > button, .svc-process-grid a,
  .svc-consult-band .svc-contact-channels a) {
  font-size: 16px;
}

body.service-home :is(.svc-price-card li, .svc-demo-info > strong) {
  font-size: 16px;
}

body.service-home .svc-price-caption {
  font-size: 16px !important;
}

body.service-home .svc-price-note {
  font-size: 14px !important;
}

body.service-home :is(.svc-demo-info span, .svc-customers-controls > p,
  .svc-customers-highlight .svc-customers-controls > p, .svc-customer-motion) {
  font-size: 14px;
}

body .site-breadcrumb {
  width: calc(100% - 2 * var(--site-gutter));
  max-width: none;
  padding-inline: 0;
  font-size: 14px;
}

body :is(.architecture-prose, .architecture-prose p, .architecture-prose li, .architecture-links p,
  .architecture-articles p, .architecture-content aside p) {
  font-size: var(--copy-size);
  line-height: 1.8;
}

body .architecture-hero > div > p {
  font-size: var(--copy-size);
}

body .architecture-prose > :is(p, ul, ol) {
  max-width: 72ch;
}

body .architecture-header :is(.desktop-nav > a, .desktop-nav summary,
  .desktop-nav .nav-panel a, .nav-panel a) {
  font-size: 16px;
}

body .site-footer :is(.footer-brand-block > p, .footer-links a,
  .footer-company a, .footer-company span) {
  font-size: 16px;
}

@media (max-width: 1023px) {
  :root, body.service-home { --site-gutter: 24px; --copy-size: 17px; }
  body.service-home .svc-intro .svc-hero-copy h1 { font-size: 34px; }
  body.service-home .svc-intro .svc-hero-copy h1 > span { font-size: 25px; }
  body.service-home .svc-intro .svc-hero-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  body.service-home .svc-intro .svc-hero-actions .button { min-width: 0; padding-inline: 10px; font-size: 14px; gap: 8px; }
  body.service-home .svc-hero-actions .button { font-size: 14px; }
  body.service-home .svc-proof h2 { font-size: 17px; }
  body.service-home .svc-proof p { font-size: 16px; }
}

@media (max-width: 359px) {
  body.service-home .svc-intro .svc-hero-actions { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  :root, body.service-home { --site-gutter: 18px; --copy-size: 16px; }
  body.service-home .svc-intro .svc-hero-copy h1 { font-size: 33px; }
  body.service-home .svc-intro .svc-hero-copy h1 > span { font-size: 25px; }
  body.service-home :is(.svc-heading h2, .svc-journey-copy h2, .svc-faq > header h2) {
    font-size: 29px;
    line-height: 1.45;
  }
  body.service-home .svc-proof h2 { font-size: 16px; }
  body.service-home :is(.svc-process-grid h3, .svc-reason-grid h3, .svc-value-list h3) {
    font-size: 18px;
  }
  body.service-home :is(.svc-demo-info h3, .svc-demo-pair .svc-demo-info h3) { font-size: 20px; }
  body.service-home .svc-process-grid article { grid-template-columns: 54px minmax(0, 1fr); gap: 0 14px; padding-inline: 20px; }
  body.service-home .svc-step-icon { width: 54px; height: 54px; }
  body.service-home .svc-step-icon > img { width: 30px; height: 30px; }
  body.service-home :is(.svc-demo-actions > a, .svc-demo-actions > button) { font-size: 14px; padding-inline: 12px; gap: 6px; }
  body.service-home .svc-demo-info > strong { font-size: 14px; }
  body.service-home .svc-demo-filters button { font-size: 14px; }
  body .svc-hero-scenery {
    opacity: .22;
  }
}