/* Shared public palette. Keep this after component styles; CMS content and
   layout choices inherit these colours without changing their structure. */
.premium-site {
  --brand-blue: #3458d4;
  --brand-blue-hover: #2847ba;
  --brand-deep: #203b88;
  --brand-mid: #4669dc;
  --brand-soft: #eaf0ff;
  --surface-mist: #f4f7fd;
  --surface-white: #fff;
  --text-strong: #243454;
  --text-body: #52627d;
  --text-muted: #65748e;
  --line-soft: #dce4f4;
  --on-blue: #fff;
  --on-blue-muted: #e2eaff;
  --accent: var(--brand-blue);
  --green: var(--text-strong);
  --green-soft: var(--brand-soft);
  --paper: var(--surface-white);
  --ink: var(--text-strong);
  --muted: var(--text-muted);
  --line: var(--line-soft);
  color: var(--text-strong);
  background: var(--surface-white);
}

/* A blue foundation lets the architecture read clearly without black floors
   and heavy shadows. The overlay in hero-carousel.css protects the copy. */
.premium-site .enterprise-hero,
.premium-site .hero-slide {
  background: linear-gradient(115deg, var(--brand-deep), #3657b8 58%, #5679df);
}
.premium-site .hero-slide { isolation: isolate; }
.premium-site .hero-slide img,
.premium-site .enterprise-hero-image {
  mix-blend-mode: screen;
  filter: brightness(1.12) saturate(.8);
  opacity: .85;
}
.premium-site .enterprise-hero .hero-description,
.premium-site .enterprise-hero .hero-eyebrow,
.premium-site .enterprise-hero .hero-tags,
.premium-site .hero-carousel-status,
.premium-site .hero-carousel-controls .hero-carousel-arrow,
.premium-site .hero-carousel-controls .hero-carousel-dot { color: var(--on-blue-muted); }
.premium-site .hero-carousel-dot[aria-pressed=true] { color: var(--on-blue); }
.premium-site .enterprise-hero .title-dot { color: #bfd3ff; }
.premium-site .enterprise-hero .hero-eyebrow .status-dot { background: #c6dcff; }
.premium-site .enterprise-image-note { color: var(--on-blue-muted); }

/* Alternate white and mist-blue surfaces for long-form reading. */
.premium-site .scenario-section,
.premium-site .site-footer { background: var(--surface-mist); }
.premium-site .article-art-grid,
.premium-site .article-art-connect,
.premium-site .article-art-code { background: var(--brand-soft); }
.premium-site .service-card p,
.premium-site .featured-case-copy p,
.premium-site .page-hero-intro,
.premium-site .footer-column > a,
.premium-site .footer-column > button { color: var(--text-body); }
.premium-site .service-card:hover { background: var(--surface-mist); }
.premium-site .button-primary { background: var(--brand-blue); color: var(--on-blue); }
.premium-site .button-primary:hover { background: var(--brand-blue-hover); }
.premium-site .button-lime { background: var(--surface-white); color: var(--brand-deep); }
.premium-site .button-lime:hover { background: var(--brand-soft); }
.premium-site .enterprise-hero .hero-actions .button { background: var(--surface-white); color: var(--brand-deep); }
.premium-site .enterprise-hero .hero-actions .button:hover { background: var(--brand-soft); }

/* The final invitation carries the brand blue, with light copy throughout. */
.premium-site .contact-banner {
  background: radial-gradient(ellipse at 85% 0%, #6b8df060, transparent 65%),
    linear-gradient(115deg, var(--brand-deep), var(--brand-blue) 65%, var(--brand-mid));
  color: var(--on-blue);
}
.premium-site .contact-banner p,
.premium-site .contact-banner .eyebrow { color: var(--on-blue-muted); }
.premium-site .contact-banner h2 { color: var(--on-blue); }

/* The delivery diagram and inline icons share the standalone SVG palette. */
.premium-site .principle svg { color: var(--brand-blue); }
.premium-site .delivery-proof {
  background: linear-gradient(120deg, var(--brand-deep), var(--brand-blue));
  color: var(--on-blue);
  border-top-color: #b9ccff;
}
.premium-site .delivery-proof::before {
  background: radial-gradient(ellipse at 85% 0%, #7d9aee38, transparent 65%),
    repeating-linear-gradient(90deg, transparent 0 79px, #ffffff04 80px);
}
.premium-site .delivery-proof :is(h3,h4) { color: var(--on-blue); }
.premium-site .delivery-proof .eyebrow,
.premium-site .delivery-proof-heading > p,
.premium-site .delivery-proof-note,
.premium-site .delivery-proof .proof-index,
.premium-site .delivery-proof-items :is(svg,p) { color: var(--on-blue-muted); }
.premium-site .delivery-proof-items > li { border-color: rgb(226 234 255 / 24%); }

/* Small supporting text needs enough contrast on the lighter surfaces. */
.premium-site .footer-bottom,
.premium-site .footer-brand > p,
.premium-site[data-page="services"] .page-art-caption,
.premium-site[data-page="services"] .page-art-foot,
.premium-site[data-page="services"] .page-support-art > p { color: var(--text-body); }
.premium-site[data-page="services"] .page-art-caption > strong { color: var(--text-strong); }
.premium-site .service-premium-nav-wrap .catalog-language-note { color: var(--on-blue-muted); }

.premium-site .article-consult {
  background: linear-gradient(115deg, var(--brand-deep), var(--brand-blue));
  color: var(--on-blue);
}
.premium-site .article-consult h3 { color: var(--on-blue); }
.premium-site .article-consult p { color: var(--on-blue-muted); }
.premium-site .article-consult button { background: var(--surface-white); color: var(--brand-deep); }
.premium-site .article-consult button:hover { background: var(--brand-soft); }

/* Balance Japanese phrases instead of leaving a short ending on its own line. */
@media(max-width:700px) {
  html[lang="ja"] .premium-site .enterprise-hero h1 {
    font-size: clamp(24px, 7.4vw, 38px);
    text-wrap: balance;
  }
}