
/* Final Periwinkle visual system: clean, calm, and less shape-heavy. */
:root{
  --hue-color: 235;
  --first-color: #8f96ff;
  --second-color: #161832;
  --brand-periwinkle: #8f96ff;
  --brand-periwinkle-dark: #5159c9;
  --brand-periwinkle-soft: #f0f2ff;
  --brand-brown: #171a35;
  --brand-dark: #111327;
  --brand-ink: #20223c;
  --brand-muted: #656a85;
  --brand-line: rgba(143,150,255,.18);
  --brand-card: #ffffff;
  --readable-accent: #8f96ff;
  --readable-accent-dark: #5159c9;
  --readable-accent-soft: #f0f2ff;
  --readable-border: rgba(143,150,255,.18);
  --three-periwinkle: #8f96ff;
  --three-periwinkle-soft: #f0f2ff;
}

body.portfolio-page{
  background:
    radial-gradient(circle at 11% 10%, rgba(143,150,255,.13), transparent 29rem),
    radial-gradient(circle at 88% 18%, rgba(180,188,255,.14), transparent 31rem),
    linear-gradient(180deg, #fdfdff 0%, #ffffff 42%, #f7f8ff 100%) !important;
  color: var(--brand-ink) !important;
}
body.portfolio-page::before{
  background-image:
    linear-gradient(rgba(143,150,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143,150,255,.045) 1px, transparent 1px) !important;
}
*{scrollbar-color:#8f96ff #f0f2ff!important;}

/* Softer cards with a more refined surface. */
.cms-card,
.blog__article,
.publication-card,
.project-card,
.service-card,
.resource-card,
.testimonial-card,
.case-card,
.faq-card,
.contact__form,
.contact-panel,
.forms-library .custom-form-card,
.custom-form-public,
.form-side-note{
  border-color: rgba(143,150,255,.14)!important;
  box-shadow: 0 18px 48px rgba(42,46,100,.075)!important;
  background: rgba(255,255,255,.93)!important;
}
.cms-card:hover,
.blog__article:hover,
.publication-card:hover,
.project-card:hover,
.service-card:hover,
.resource-card:hover,
.testimonial-card:hover,
.case-card:hover,
.faq-card:hover{
  border-color: rgba(143,150,255,.32)!important;
  box-shadow: 0 24px 64px rgba(42,46,100,.115)!important;
}

/* Periwinkle buttons retain the brush effect but use calmer tones. */
.button,
.contact__button.button,
.nav__link--cta{
  --brush-main:#8f96ff;
  --brush-deep:#5159c9;
  --brush-soft:#f0f2ff;
}
.button--primary,
.contact__button.button,
.project-filter.active,
.project-filter:hover,
.contact-switch__button.active,
.contact-switch__button:hover,
.contact-switch__link:hover,
.nav__link--cta,
.process-card span,
.case-card__industry{
  background:#8f96ff!important;
  border-color:#8f96ff!important;
  color:#fff!important;
  box-shadow:0 14px 32px rgba(143,150,255,.26)!important;
}
.button--ghost,
.project-filter,
.contact-switch__button,
.contact-switch__link{
  background:#fff!important;
  color:#5159c9!important;
  border-color:rgba(143,150,255,.25)!important;
  box-shadow:0 10px 28px rgba(42,46,100,.055)!important;
}

/* Remove the AI-looking label borders/shapes while keeping text emphasis. */
.hero__eyebrow,
.page-hero__eyebrow,
.mini-label,
.content-chip,
.tag-cloud span,
.custom-form-card__meta span,
.project-card__body>span,
.publication-card span,
.contact__eyebrow{
  background:transparent!important;
  border-color:transparent!important;
  border-width:0!important;
  box-shadow:none!important;
  border-radius:0!important;
  padding-left:0!important;
  padding-right:0!important;
  color:#5159c9!important;
  letter-spacing:.075em!important;
  text-transform:uppercase!important;
  font-weight:900!important;
}
.hero__eyebrow i,
.page-hero__eyebrow i,
.mini-label i{color:#8f96ff!important;}
.hero__eyebrow::after,
.page-hero__eyebrow::after,
.mini-label::after{
  content:"";
  display:block;
  width:42px;
  height:3px;
  margin-top:.35rem;
  border-radius:999px;
  background:linear-gradient(90deg,#8f96ff,rgba(143,150,255,0));
}

.home__title-color,
.section-title,
.impact-card strong,
.blog__read-more,
.project-card__body>span,
.publication-card span,
.testimonial-card span,
.case-card strong,
.skills__core-number,
.service-card i,
.why-work-grid i,
.innovation-card i,
.resource-card i,
.home__social-icon,
.nav__brand-text{
  color:#5159c9!important;
}
.section-title::after,
.nav__link.active::after,
.nav__link:hover::after,
.scroll-progress span{
  background:#8f96ff!important;
}

/* Core capability icons stay white inside periwinkle blocks. */
.skills__core-card i,
.core-capability-card i,
.skills__core-icon i{
  color:#fff!important;
}
.skills__core-card i{
  background:#8f96ff!important;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:16px;
  box-shadow:0 14px 24px rgba(143,150,255,.23);
}
.skills__core-number,
.tag-cloud span,
.content-chip{
  background:#f0f2ff!important;
  color:#5159c9!important;
}

/* Three.js / hero bubble periwinkle adaptation. */
body.portfolio-page.visual-system-active .home::after{
  background: radial-gradient(circle, rgba(143,150,255,.12), rgba(143,150,255,.045) 45%, rgba(255,255,255,0) 72%)!important;
}
body.portfolio-page.visual-system-active .home .home__img.dynamic-profile-frame{
  background:
    radial-gradient(circle at 48% 34%, rgba(255,255,255,.88) 0 20%, rgba(245,246,255,.76) 21% 44%, rgba(143,150,255,.34) 45% 78%, rgba(143,150,255,.22) 79% 100%)!important;
  border-color:rgba(143,150,255,.34)!important;
  box-shadow:0 30px 90px rgba(42,46,100,.16), inset 0 -34px 76px rgba(143,150,255,.20)!important;
}
body.portfolio-page.visual-system-active .home .home__img.dynamic-profile-frame::before{
  background:radial-gradient(circle at 46% 34%, rgba(255,255,255,.74), rgba(246,247,255,.52) 46%, rgba(143,150,255,.2) 100%)!important;
}
body.portfolio-page.visual-system-active .home .home__img.dynamic-profile-frame::after{
  background:
    radial-gradient(circle at 72% 22%, rgba(143,150,255,.26), rgba(143,150,255,0) 34%)!important;
}
.three-skills-orbit,.timeline-three-layer,.three-ecosystem-status{
  border-color:rgba(143,150,255,.15)!important;
  background:linear-gradient(135deg,rgba(255,255,255,.85),rgba(240,242,255,.68))!important;
}
.three-ecosystem-status i{color:#8f96ff!important;}

/* Unified contact and appointment fix: hidden panels must not inherit scroll-reveal invisibility. */
.contact-tab-panel{display:none!important; visibility:visible!important; opacity:1!important; transform:none!important;}
.contact-tab-panel.active{display:block!important; visibility:visible!important; opacity:1!important; transform:none!important;}
.contact-tab-panel.active .contact__form,
.contact-tab-panel.active .appointment-form,
.contact-tab-panel.active .contact__input,
.contact-tab-panel.active input,
.contact-tab-panel.active textarea,
.contact-tab-panel.active select,
.contact-tab-panel.active button,
.contact-tab-panel.active .form-two-cols{
  visibility:visible!important;
  opacity:1!important;
  transform:none!important;
}
.hp-field{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;}
.contact-switch{background:rgba(255,255,255,.88)!important;border:1px solid rgba(143,150,255,.14)!important;box-shadow:0 16px 40px rgba(42,46,100,.065)!important;}
.contact__input:focus,
.newsletter-form input:focus{
  border-color:#8f96ff!important;
  box-shadow:0 0 0 4px rgba(143,150,255,.15)!important;
}

/* Forms library / active forms page polish. */
.compact-page-hero,
.page-hero,
.academy-hero,
.community-hero{
  background:linear-gradient(135deg,rgba(240,242,255,.72),rgba(255,255,255,.92))!important;
  border-bottom:1px solid rgba(143,150,255,.12)!important;
}
.custom-form-card{
  position:relative;
  overflow:hidden;
}
.custom-form-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:5px;
  background:linear-gradient(90deg,#8f96ff,rgba(143,150,255,0));
}
.custom-form-card h2{color:#20223c!important;}
.custom-form-card p{color:#656a85!important;}

/* Periwinkle carousel controls and mobile nav readability. */
.carousel-arrow,
.logo-carousel__arrow,
.client-carousel__arrow{
  background:#8f96ff!important;
  color:#fff!important;
  border-color:#8f96ff!important;
}
@media(max-width: 968px){
  .nav__menu{
    background:#0009!important;
    backdrop-filter:blur(16px)!important;
  }
  .nav__link{color:#fff!important;text-shadow:0 1px 8px rgba(0,0,0,.55)!important;}
  .nav__link.active,.nav__link:hover{color:#dfe2ff!important;}
}
