/* TreliconAI premium refresh — five-color brand system.
   Loaded after the existing styles so the existing PHP application and components remain intact. */
:root {
  --brand-cyan: #00AFC4;
  --brand-cyan-deep: #007F91;
  --brand-mint: #BDEBD9;
  --brand-orange: #E88745;
  --brand-gray: #414A4D;
  --brand-gray-soft: #697477;
  --brand-beige: #F3EBDD;
  --brand-beige-light: #FBF8F1;
  --brand-white: #FFFFFF;

  --primary: var(--brand-cyan);
  --primary-hover: #008FA1;
  --primary-soft: rgba(0, 175, 196, .12);
  --primary-soft-strong: rgba(0, 175, 196, .2);
  --accent-cyan: var(--brand-cyan);
  --accent-green: #3A9E83;
  --accent-earth: var(--brand-orange);
  --accent-violet: var(--brand-mint);
  --accent-purple: var(--brand-mint);
  --accent-pink: var(--brand-orange);
  --accent-coral: var(--brand-orange);
  --background: var(--brand-beige);
  --surface: var(--brand-beige-light);
  --surface-alt: #F5F0E6;
  --surface-raised: #FFFFFF;
  --border: #DED8CC;
  --border-strong: #B8C3BE;
  --text-primary: var(--brand-gray);
  --text-secondary: #515D5F;
  --text-muted: #626D6F;
  --text-on-primary: #FFFFFF;
  --link: #007F91;
  --success: #287C65;
  --danger: #A84C2A;
  --gradient-vibrant: linear-gradient(120deg, #00AFC4 0%, #BDEBD9 100%);
  --gradient-brand: linear-gradient(120deg, #00AFC4 0%, #48C9C5 100%);
  --gradient-mesh: radial-gradient(ellipse at 12% 0%, rgba(189,235,217,.42), transparent 42%),
                   radial-gradient(ellipse at 88% 12%, rgba(0,175,196,.09), transparent 38%);
  --shadow-sm: 0 2px 8px rgba(65,74,77,.06);
  --shadow-md: 0 12px 30px rgba(65,74,77,.10);
  --shadow-lg: 0 24px 64px rgba(65,74,77,.14);
  --shadow-glow: 0 0 0 1px rgba(0,175,196,.18), 0 10px 28px rgba(0,175,196,.14);
  --header-bg-top: rgba(243,235,221,.92);
  --header-bg-scrolled: rgba(251,248,241,.96);
  --neural-node: 0, 175, 196;
  --neural-line: 58, 158, 131;
  --neural-cursor: 232, 135, 69;
}
html { background: var(--brand-beige); }
body {
  background-color: var(--brand-beige);
  background-image: var(--gradient-mesh);
  color: var(--brand-gray);
}
h1,h2,h3,h4,h5,h6 { color: var(--brand-gray); }
p, li { color: var(--text-secondary); }
::selection { background: rgba(0,175,196,.22); color: var(--brand-gray); }
:focus-visible { outline: 3px solid var(--brand-orange); outline-offset: 3px; }
.scroll-progress { background: linear-gradient(90deg,var(--brand-cyan),var(--brand-mint),var(--brand-orange)); }
.site-header { background: rgba(243,235,221,.92); border-bottom-color: rgba(65,74,77,.08); }
.site-header.is-scrolled { background: rgba(251,248,241,.97); border-bottom-color: var(--border); box-shadow: 0 5px 24px rgba(65,74,77,.06); }
.brand--text { background: rgba(255,255,255,.72); border-color: var(--border); }
.brand__name { color: var(--brand-gray); }
.brand__accent { background: linear-gradient(110deg,var(--brand-cyan-deep),#398D79); -webkit-background-clip:text; background-clip:text; color:transparent; }
.nav-desktop__links a { color: var(--brand-gray); }
.nav-desktop__links a:hover,.nav-desktop__links a:focus-visible,.nav-desktop__links a.is-active { color: var(--brand-cyan-deep); }
.mega-dropdown,.mobile-menu { background: var(--brand-beige-light); border-color: var(--border); color: var(--brand-gray); box-shadow: var(--shadow-lg); }
.mega-dropdown h5,.mobile-menu__group { color: var(--brand-cyan-deep); }
.mega-dropdown a,.mobile-menu__links a { color: var(--brand-gray); }
.mega-dropdown a:hover,.mobile-menu__links a:hover { background: var(--brand-mint); color: var(--brand-gray); }
.btn { text-decoration: none; }
.btn--primary { background: var(--brand-cyan); color: #FFFFFF !important; border-color: var(--brand-cyan); box-shadow: 0 8px 22px rgba(0,175,196,.18); }
.btn--primary:hover,.btn--primary:focus-visible { background: var(--brand-cyan-deep); border-color: var(--brand-cyan-deep); color: #FFFFFF !important; filter:none; }
.btn--primary:active { background: #006C79; color:#FFFFFF !important; }
.btn--outline { color: var(--brand-gray); border-color: #8A9997; background: rgba(255,255,255,.35); }
.btn--outline:hover,.btn--outline:focus-visible { color: var(--brand-gray); background: var(--brand-mint); border-color: #5CA995; }
.btn--ghost { background: rgba(255,255,255,.55); color: var(--brand-gray); border-color: var(--border); }
.btn--ghost:hover { color: var(--brand-gray); background: var(--brand-mint); }
.btn--secondary,.btn--orange { background: var(--brand-orange); color: #3B3028 !important; border-color: var(--brand-orange); }
.btn--secondary:hover,.btn--orange:hover { background: #D87936; color:#30251E !important; }
.card,.service-card,.project-card,.testimonial-card,.blog-card,.industry-card,.case-study-card,.product-card,.stat-card,.value-card {
  background: rgba(255,255,255,.82);
  border-color: var(--border);
  box-shadow: 0 5px 18px rgba(65,74,77,.045);
}
.card:hover,.service-card:hover,.project-card:hover,.testimonial-card:hover,.blog-card:hover,.industry-card:hover,.case-study-card:hover,.product-card:hover {
  border-color: rgba(0,175,196,.55);
  box-shadow: 0 16px 34px rgba(65,74,77,.10);
}
.service-card__icon,.icon-box,.signal-wave__icon { background: var(--brand-mint); color: var(--brand-cyan-deep); }
.eyebrow { color: var(--brand-cyan-deep); }
.text-gradient { background: linear-gradient(105deg,var(--brand-cyan-deep),#3B9C83 70%,var(--brand-orange)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero,.page-hero { color: var(--brand-gray); background: transparent; }
.hero h1,.page-hero h1 { color: var(--brand-gray); }
.hero__lead,.page-hero p { color: #515D5F; }
.neural-bg { opacity: .52; }
.section-head p { color: var(--text-secondary); }
.section--muted,.section--alt,.signal-wave { background: rgba(255,255,255,.38); }
.signal-wave__title { color: var(--brand-gray); }
.signal-wave__svg stop:first-child { stop-color: var(--brand-cyan); }
.sw-node { background: var(--brand-orange); box-shadow: 0 0 0 5px rgba(232,135,69,.12); }
.tag,.badge,.pill { background: var(--brand-mint); color: #315B50; border-color: rgba(58,158,131,.22); }
input,textarea,select { background: #FFFFFF; color: var(--brand-gray); border-color: #B8C3BE; }
input::placeholder,textarea::placeholder { color: #697477; opacity: 1; }
input:focus,textarea:focus,select:focus { border-color: var(--brand-cyan); box-shadow: 0 0 0 3px rgba(0,175,196,.14); outline: none; }
label,.form-label { color: var(--brand-gray); }
.site-footer { background: #E9E1D3; border-top: 1px solid var(--border); }
.site-footer h5,.footer-brand__name { color: var(--brand-gray); }
.site-footer p,.site-footer li,.site-footer a { color: #515D5F; }
.site-footer a:hover { color: var(--brand-cyan-deep); }
.footer-social a { background: rgba(255,255,255,.6); border-color: var(--border); }
.footer-social a:hover { background: var(--brand-mint); color: var(--brand-gray); }
.footer-discord { background: rgba(255,255,255,.6); border-color: var(--border); }
.back-to-top { background: var(--brand-cyan); color: #fff; box-shadow: var(--shadow-md); }
.back-to-top:hover { background: var(--brand-cyan-deep); color:#fff; }
a { transition: color .2s ease, background-color .2s ease, border-color .2s ease; }
button, .btn, .card, .service-card { -webkit-tap-highlight-color: rgba(0,175,196,.14); }
[data-reveal] { transition-duration: .55s; }
@media (max-width: 900px) {
  .nav-desktop--centered { position: static; transform: none; }
  .site-header__inner { gap: 12px; }
}
@media (max-width: 640px) {
  .site-header__inner { padding: 12px 0; }
  .hero { padding-top: 3.5rem; }
  .hero h1,.page-hero h1 { font-size: clamp(2rem, 9vw, 2.8rem); }
  .container { padding-left: 1.15rem; padding-right: 1.15rem; }
  .card,.service-card { border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* Accessibility and contrast refinement — 2026-10-30.
   Keep text legible in every state, not only on hover/focus. */
:root {
  --brand-gray: #172B3A;
  --brand-gray-soft: #405466;
  --text-primary: #172B3A;
  --text-secondary: #33485A;
  --text-muted: #4B5E6D;
  --link: #006779;
}
body, p, li, small, .text-muted { color: #33485A; }
.nav-desktop__links a, .mega-dropdown a, .mobile-menu__links a,
.site-footer a, .service-card__link { color: #17394A; }
.nav-desktop__links a:hover, .nav-desktop__links a:focus-visible,
.nav-desktop__links a.is-active, .site-footer a:hover,
.service-card__link:hover { color: #006779; }

/* Client reviews: deep, even card background with high-contrast copy. */
.testimonial-card,
.testimonial-pages .testimonial-card,
.testimonial-pages__item .testimonial-card {
  background: linear-gradient(145deg, #102638 0%, #17384B 100%) !important;
  border: 1px solid #31556A !important;
  box-shadow: 0 12px 28px rgba(8, 28, 43, .18);
  color: #F7FBFF;
}
.testimonial-card .testimonial-card__name,
.testimonial-card .testimonial-card__quote,
.testimonial-card .testimonial-card__meta,
.testimonial-card .testimonial-card__role,
.testimonial-card .testimonial-card__company {
  color: #F7FBFF !important;
  opacity: 1 !important;
}
.testimonial-card .testimonial-card__quote { line-height: 1.75; }
.testimonial-card .testimonial-card__meta { color: #D6E8F2 !important; }
.testimonial-card .testimonial-card__company { color: #BDEBD9 !important; }
.testimonial-card .testimonial-rating { background: #FFFFFF; }
.testimonial-card .badge-demo { color: #F7FBFF; border-color: #7895A7; }

/* CTA banners: ensure the button is visible before hover and remains legible on hover. */
.cta-banner {
  background: linear-gradient(115deg, #102638 0%, #123F55 58%, #075B6C 100%);
  border: 1px solid #28566B;
}
.cta-banner h2, .cta-banner p, .cta-banner .eyebrow { color: #FFFFFF !important; }
.cta-banner .btn--primary,
.cta-banner a.btn--primary,
.cta-banner .btn--outline,
.cta-banner a.btn--outline,
.cta-banner .cta-banner__ghost-btn {
  background: #00C4D8 !important;
  color: #082536 !important;
  border: 2px solid #00C4D8 !important;
  box-shadow: 0 5px 18px rgba(0, 196, 216, .24);
  font-weight: 800;
  text-decoration: none;
}
.cta-banner .btn--primary:hover, .cta-banner .btn--primary:focus-visible,
.cta-banner .btn--outline:hover, .cta-banner .btn--outline:focus-visible,
.cta-banner .cta-banner__ghost-btn:hover, .cta-banner .cta-banner__ghost-btn:focus-visible {
  background: #FFFFFF !important;
  color: #102638 !important;
  border-color: #FFFFFF !important;
  outline: 3px solid #8CECF5;
  outline-offset: 3px;
}
/* Make outlined/ghost controls distinguishable without requiring hover. */
.btn--outline, a.btn--outline, button.btn--outline,
.btn--ghost, a.btn--ghost, button.btn--ghost {
  color: #17394A;
  background: #FFFFFF;
  border-color: #587181;
}
.btn--outline:hover, .btn--outline:focus-visible,
.btn--ghost:hover, .btn--ghost:focus-visible {
  color: #102638;
  background: #BDEBD9;
  border-color: #006779;
}
:focus-visible { outline: 3px solid #E88745; outline-offset: 3px; }