/* Kailvex site-wide professional visual audit - 2026-06-27 */

/* 1. Consistent white line icons inside blue/gradient icon tiles */
:is(
  .nav-product__icon,
  .capability-icon,
  .service-hub-icon,
  .authority-proof article > span,
  .scene-icon,
  .seo-core__icon,
  .feature-icon,
  .ec-icon,
  .ec-addon-icon,
  .journey-icon,
  .ec-story-scene__icon,
  .assurance-icon,
  .contact-method > span:first-child,
  .hw-icon,
  .route-package,
  .route-truck,
  .phone-cart
) svg {
  display:block;
  width:1.55rem;
  height:1.55rem;
  fill:none !important;
  stroke:#fff !important;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}
:is(
  .nav-product__icon,
  .capability-icon,
  .service-hub-icon,
  .authority-proof article > span,
  .scene-icon,
  .seo-core__icon,
  .feature-icon,
  .ec-icon,
  .ec-addon-icon,
  .journey-icon,
  .ec-story-scene__icon,
  .assurance-icon,
  .contact-method > span:first-child,
  .hw-icon,
  .route-package,
  .route-truck,
  .phone-cart
) svg * {
  fill:none !important;
  stroke:inherit !important;
  vector-effect:non-scaling-stroke;
}

/* 2. Cards remain readable even when animation JS is delayed or unavailable */
.seo-process-step,
[data-reveal],
.pro-reveal {
  visibility:visible;
}
.seo-process-step {
  opacity:1;
  transform:none;
}

/* 3. Professional light-background delivery/process timeline */
.section:not(.section--dark) .seo-process {
  position:relative;
  gap:18px;
}
.section:not(.section--dark) .seo-process::before {
  content:"";
  position:absolute;
  left:7%;
  right:7%;
  top:50px;
  height:2px;
  background:linear-gradient(90deg,rgba(7,93,226,.08),rgba(7,141,255,.42),rgba(7,93,226,.08));
  z-index:0;
}
.section:not(.section--dark) .seo-process-step {
  position:relative;
  z-index:1;
  min-height:245px;
  padding:28px 25px 25px;
  border:1px solid rgba(7,93,226,.12);
  border-radius:26px;
  background:linear-gradient(155deg,#ffffff,#f6faff);
  box-shadow:0 16px 42px rgba(4,35,88,.07);
  overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s ease,border-color .35s ease;
}
.section:not(.section--dark) .seo-process-step::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:4px;
  background:linear-gradient(90deg,var(--blue-700),var(--blue-500),var(--cyan));
  transform:scaleX(.34);
  transform-origin:left;
  transition:transform .45s var(--ease);
}
.section:not(.section--dark) .seo-process-step:hover {
  transform:translateY(-8px);
  border-color:rgba(7,93,226,.25);
  box-shadow:0 28px 62px rgba(4,43,108,.13);
  background:#fff;
}
.section:not(.section--dark) .seo-process-step:hover::after {transform:scaleX(1)}
.section:not(.section--dark) .seo-process-step b {
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:16px;
  color:#fff;
  background:linear-gradient(135deg,var(--blue-700),var(--blue-500));
  box-shadow:0 14px 28px rgba(7,93,226,.24);
  font-size:.72rem;
  letter-spacing:.08em;
}
.section:not(.section--dark) .seo-process-step h3 {
  margin-top:30px;
  color:var(--ink);
  font-size:1.2rem;
}
.section:not(.section--dark) .seo-process-step p {
  margin-top:12px;
  color:var(--muted);
  font-size:.86rem;
  line-height:1.7;
}

/* 4. Dark process sections are fully legible and polished */
.section--dark .seo-process-step {
  opacity:1;
  transform:none;
  border-color:rgba(255,255,255,.12);
  background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.045));
  box-shadow:0 18px 45px rgba(0,0,0,.14);
}
.section--dark .seo-process-step h3{color:#fff}
.section--dark .seo-process-step p{color:rgba(255,255,255,.68)}
.section--dark .seo-process-step:hover{
  transform:translateY(-7px);
  border-color:rgba(105,214,255,.38);
  background:rgba(7,141,255,.13);
}

/* 5. Software company authority page: balanced grids and premium hierarchy */
.authority-page .authority-hero__grid{gap:48px}
.authority-page .authority-proof{
  position:relative;
  overflow:hidden;
  border-color:rgba(7,93,226,.14);
  box-shadow:0 34px 85px rgba(4,35,88,.15);
}
.authority-page .authority-proof::before{
  content:"";
  position:absolute;
  width:260px;
  height:260px;
  right:-120px;
  top:-140px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(7,141,255,.18),transparent 70%);
  pointer-events:none;
}
.authority-page .authority-proof article{
  position:relative;
  transition:transform .35s var(--ease),box-shadow .35s ease,border-color .35s ease;
}
.authority-page .authority-proof article:hover{
  transform:translateY(-6px);
  border-color:rgba(7,93,226,.22);
  box-shadow:0 18px 38px rgba(4,35,88,.09);
}
.authority-page .authority-capabilities .capability-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.authority-page .authority-capabilities .capability-card{
  min-height:320px;
}
.authority-page .authority-capabilities .capability-card h3{
  margin-top:38px;
}
.authority-page .authority-trust .trust-card{
  position:relative;
  overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s ease,border-color .35s ease;
}
.authority-page .authority-trust .trust-card::after{
  content:"";
  position:absolute;
  right:-75px;
  bottom:-85px;
  width:155px;
  height:155px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(7,141,255,.13),transparent 68%);
  pointer-events:none;
}
.authority-page .authority-trust .trust-card:hover{
  transform:translateY(-8px);
  border-color:rgba(7,93,226,.23);
  box-shadow:0 26px 58px rgba(4,43,108,.12);
}
.authority-page .authority-process{
  background:linear-gradient(180deg,#fff,#f8fbff);
}

/* 6. Site-wide professional cards and headings */
:is(.capability-card,.trust-card,.service-hub-card,.insight-card,.case-study-card,.faq-item){
  will-change:transform;
}
:is(.capability-card,.trust-card,.service-hub-card,.insight-card,.case-study-card) .capability-icon,
:is(.capability-card,.trust-card,.service-hub-card,.insight-card,.case-study-card) .service-hub-icon{
  transition:transform .35s var(--ease),box-shadow .35s ease;
}
:is(.capability-card,.trust-card,.service-hub-card,.insight-card,.case-study-card):hover .capability-icon,
:is(.capability-card,.trust-card,.service-hub-card,.insight-card,.case-study-card):hover .service-hub-icon{
  transform:translateY(-4px) rotate(-3deg);
  box-shadow:0 20px 38px rgba(7,93,226,.3);
}
.section-head h2{overflow-wrap:anywhere}
.faq-item{transition:background .25s ease,border-color .25s ease,box-shadow .25s ease}
.faq-item:hover{border-color:rgba(7,93,226,.18);box-shadow:0 10px 28px rgba(4,35,88,.055)}

/* 7. Scroll motion without ever hiding content */
.pro-reveal{
  transform:translateY(18px) scale(.992);
  opacity:.94;
  transition:transform .7s var(--ease),opacity .7s ease,filter .7s ease;
  transition-delay:calc(var(--pro-delay,0) * 75ms);
  filter:saturate(.92);
}
.pro-reveal.pro-visible{
  transform:none;
  opacity:1;
  filter:none;
}

/* 8. Responsive refinements */
@media(max-width:1180px){
  .authority-page .authority-capabilities .capability-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:860px){
  .section:not(.section--dark) .seo-process::before{display:none}
  .authority-page .authority-proof{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .authority-page .authority-capabilities .capability-grid,
  .authority-page .authority-proof{grid-template-columns:1fr}
  .section:not(.section--dark) .seo-process-step{min-height:auto}
  .pro-reveal{transform:translateY(12px);opacity:.97}
}
@media(prefers-reduced-motion:reduce){
  .pro-reveal,.pro-reveal.pro-visible{transform:none!important;opacity:1!important;filter:none!important;transition:none!important}
  :is(.capability-card,.trust-card,.service-hub-card,.insight-card,.case-study-card):hover .capability-icon,
  :is(.capability-card,.trust-card,.service-hub-card,.insight-card,.case-study-card):hover .service-hub-icon{transform:none}
}


/* 2026-06-27 performance-safe motion and media rendering */
img{font-style:italic;background-repeat:no-repeat;background-size:cover;shape-margin:.75rem}
.case-study-card,.insight-card,.capability-card,.trust-card,.service-hub-card{backface-visibility:hidden;transform:translateZ(0)}
@supports (content-visibility:auto){
  .case-study-card,.insight-card{content-visibility:auto;contain-intrinsic-size:390px}
}
@media(prefers-reduced-motion:no-preference){
  .case-study-card[data-reveal].is-visible,.insight-card[data-reveal].is-visible{animation:proCardIn .68s var(--ease) both}
  .case-study-card:nth-child(2),.insight-card:nth-child(2){animation-delay:.05s}
  .case-study-card:nth-child(3),.insight-card:nth-child(3){animation-delay:.1s}
  .case-study-card:nth-child(4),.insight-card:nth-child(4){animation-delay:.15s}
  @keyframes proCardIn{from{opacity:.75;transform:translateY(18px) scale(.99)}to{opacity:1;transform:none}}
}