/* Why AutomateX section only. */
.why-section{
 width:min(100%,1536px);
 margin:0 auto;
 padding:clamp(88px,8vw,120px) 5% clamp(96px,9vw,136px);
 background:#050505;
}
.why-header{max-width:1050px}
.why-eyebrow{
 display:flex;
 align-items:center;
 gap:13px;
 margin:0 0 24px;
 color:var(--red);
 font-size:11px;
 font-weight:600;
 line-height:1;
 letter-spacing:.32em;
}
.why-eyebrow i{width:32px;height:1px;background:linear-gradient(90deg,var(--red),transparent)}
.why-eyebrow b{font:inherit}
.why-header h2{
 margin:0;
 font-family:Anton,Impact,'Arial Narrow',sans-serif;
 font-size:clamp(54px,5.15vw,79px);
 font-weight:400;
 line-height:.98;
 letter-spacing:-.014em;
}
.why-header h2 span,.why-header h2 strong{display:block;font:inherit}
.why-header h2 span{color:#f2f0ef}
.why-header h2 strong{
 margin-top:.08em;
 background:linear-gradient(180deg,#B5121B 0%,#A61019 62%,#8F0D15 100%);
 background-clip:text;
 -webkit-background-clip:text;
 color:transparent;
 -webkit-text-fill-color:transparent;
}
.why-grid{
 display:grid;
 grid-template-columns:repeat(4,minmax(0,1fr));
 gap:clamp(15px,1.55vw,24px);
 margin-top:clamp(52px,5.6vw,76px);
}
.why-card{
 --why-x:50%;
 --why-y:50%;
 position:relative;
 isolation:isolate;
 display:flex;
 flex-direction:column;
 min-width:0;
 min-height:318px;
 padding:30px 29px 31px;
 overflow:hidden;
 border:1px solid rgba(245,243,241,.115);
 border-radius:17px;
 background:linear-gradient(145deg,rgba(24,24,25,.62),rgba(10,10,11,.84));
 box-shadow:inset 0 1px 0 rgba(255,255,255,.035),inset 0 0 28px rgba(0,0,0,.2);
 transform:translateY(0);
 transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .35s ease,box-shadow .35s ease;
}
.why-card::before{
 content:"";
 position:absolute;
 z-index:0;
 inset:0;
 background:radial-gradient(circle 190px at var(--why-x) var(--why-y),rgba(181,18,27,.13),rgba(181,18,27,.045) 42%,transparent 72%);
 opacity:0;
 transition:opacity .35s ease;
 pointer-events:none;
}
.why-card__edge{
 position:absolute;
 z-index:2;
 inset:0;
 padding:1px;
 border-radius:inherit;
 background:radial-gradient(circle 175px at var(--why-x) var(--why-y),rgba(181,18,27,.82),rgba(181,18,27,.18) 48%,transparent 74%);
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
 -webkit-mask-composite:xor;
 mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
 mask-composite:exclude;
 opacity:0;
 transition:opacity .35s ease;
 pointer-events:none;
}
.why-card.is-pointer-active::before,.why-card.is-pointer-active .why-card__edge{opacity:1}
.why-card__number,.why-card h3,.why-card>p{position:relative;z-index:1}
.why-card__number{
 display:flex;
 align-items:center;
 gap:14px;
 margin-bottom:auto;
}
.why-card__number b{
 color:transparent;
 -webkit-text-stroke:1px rgba(242,240,239,.42);
 font-family:Anton,Impact,'Arial Narrow',sans-serif;
 font-size:64px;
 font-weight:400;
 line-height:1;
 letter-spacing:-.03em;
}
.why-card__number i{width:28px;height:1px;background:linear-gradient(90deg,var(--red),transparent)}
.why-card h3{
 margin:37px 0 13px;
 color:#f2f0ef;
 font-size:clamp(18px,1.5vw,23px);
 font-weight:700;
 line-height:1.24;
 letter-spacing:.005em;
}
.why-card>p{
 margin:0;
 color:#aaa6a8;
 font-size:14px;
 font-weight:300;
 line-height:1.58;
}
@media(hover:hover) and (pointer:fine){
 .why-card:hover{
  border-color:rgba(245,243,241,.17);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),inset 0 0 28px rgba(0,0,0,.18),0 12px 28px rgba(0,0,0,.15);
  transform:translateY(-4px);
 }
}
@media(max-width:1100px){
 .why-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
 .why-card{min-height:285px}
 .why-card h3{font-size:22px}
}
@media(max-width:650px){
 .why-section{padding:74px 6% 88px}
 .why-header h2{font-size:clamp(42px,11.5vw,59px);line-height:1.02}
 .why-grid{grid-template-columns:1fr;gap:17px;margin-top:43px}
 .why-card{min-height:255px;padding:26px 25px 27px}
 .why-card__number b{font-size:57px}
 .why-card h3{margin-top:30px;font-size:21px}
}
@media(hover:none),(pointer:coarse){
 .why-card::before,.why-card__edge{display:none}
}
@media(prefers-reduced-motion:reduce){
 .why-card,.why-card::before,.why-card__edge{transition:none}
 .why-card:hover{transform:none}
}
