/* P576B-S06-TARHE40 */
.ph-process--tarhe40{
    position:relative;
    padding:96px 0 88px!important;
    background:
        radial-gradient(circle at 22% 18%, rgba(41,140,156,.18), transparent 34%),
        radial-gradient(circle at 82% 30%, rgba(70,220,231,.10), transparent 28%),
        linear-gradient(180deg, #031521 0%, #041a29 52%, #03131f 100%);
    overflow:hidden;
}
.ph-process--tarhe40::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size:72px 72px;
    opacity:.15;
    pointer-events:none;
}
.ph-process--tarhe40 .ph-shell{
    position:relative;
    z-index:2;
}
.ph-process--tarhe40 .ph-process-head{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 235px!important;
    gap:28px!important;
    align-items:end!important;
    margin-bottom:34px!important;
}
.ph-process--tarhe40 .ph-process-copy{
    max-width:760px!important;
}
.ph-process--tarhe40 .ph-process-copy .ph-section-kicker{
    display:inline-block;
    margin-bottom:10px;
    color:#73f1ff;
}
.ph-process--tarhe40 .ph-process-copy h2{
    margin:0 0 14px!important;
    font-size:clamp(34px,4vw,66px)!important;
    line-height:1.08!important;
}
.ph-process--tarhe40 .ph-process-copy p{
    margin:0!important;
    max-width:720px!important;
    font-size:16px!important;
    line-height:2!important;
    color:rgba(232,243,248,.82)!important;
}
.ph-process--tarhe40 .ph-process-index{
    justify-self:end!important;
    display:flex!important;
    align-items:center!important;
    gap:16px!important;
    min-height:110px!important;
    min-width:210px!important;
    padding:16px 24px!important;
    border:1px solid rgba(217,177,101,.20)!important;
    border-radius:999px!important;
    background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01))!important;
    box-shadow:0 22px 60px rgba(0,0,0,.18)!important;
}
.ph-process--tarhe40 .ph-process-index strong{
    font-size:clamp(60px,6.2vw,108px)!important;
    line-height:1!important;
    color:#d8aa62!important;
    letter-spacing:-.04em!important;
}
.ph-process--tarhe40 .ph-process-index span{
    color:rgba(230,235,240,.68)!important;
    font-size:14px!important;
}

.ph-process--tarhe40 .ph-process-stage{
    display:grid!important;
    grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr)!important;
    gap:28px!important;
    align-items:stretch!important;
}
.ph-process--tarhe40 .ph-process-media{
    position:relative;
    min-height:620px;
    border-radius:34px;
    border:1px solid rgba(91,228,241,.15);
    background:
        radial-gradient(circle at 20% 18%, rgba(57,197,207,.14), transparent 33%),
        radial-gradient(circle at 84% 78%, rgba(86,229,238,.10), transparent 26%),
        linear-gradient(180deg, rgba(4,23,36,.96), rgba(3,18,28,.98));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 34px 80px rgba(0,0,0,.26);
    overflow:hidden;
}
.ph-process--tarhe40 .ph-process-media::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
    background-size:34px 34px;
    opacity:.18;
    pointer-events:none;
}
.ph-process--tarhe40 .ph-process-media::after{
    content:"";
    position:absolute;
    inset:auto 7% 8% 7%;
    height:32%;
    background:radial-gradient(circle at 50% 20%, rgba(64,218,228,.18), transparent 62%);
    filter:blur(28px);
    opacity:.7;
    pointer-events:none;
}
.ph-process--tarhe40 .ph-process-terminal{
    position:absolute;
    inset:0;
    overflow:hidden;
}
.ph-process--tarhe40 .ph-process-code{
    position:absolute;
    inset:20px;
    overflow:hidden;
    mask-image:linear-gradient(to top, transparent 0, #000 12%, #000 88%, transparent 100%);
    -webkit-mask-image:linear-gradient(to top, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.ph-process--tarhe40 .ph-s06-line{
    position:absolute;
    left:18px;
    right:18px;
    font:500 12.5px/1.7 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    white-space:nowrap;
    opacity:0;
    animation:s06LineMove linear forwards;
    text-shadow:0 0 14px rgba(89,224,235,.14);
}
.ph-process--tarhe40 .tok-host{color:#74efff}
.ph-process--tarhe40 .tok-user{color:#d8aa62}
.ph-process--tarhe40 .tok-cmd{color:#ffffff}
.ph-process--tarhe40 .tok-path{color:#a5b8ff}
.ph-process--tarhe40 .tok-flag{color:#8af1d0}
.ph-process--tarhe40 .tok-ok{color:#7bffae}
.ph-process--tarhe40 .tok-num{color:#7ee8ff}

@keyframes s06LineMove{
    0%{transform:translateY(120px);opacity:0}
    10%{opacity:.35}
    24%{opacity:.92}
    78%{opacity:.62}
    100%{transform:translateY(-620px);opacity:0}
}

.ph-process--tarhe40 .ph-process-car{
    position:relative;
    z-index:2;
    display:grid;
    place-items:center;
    height:100%;
    padding:42px 34px 34px;
    perspective:1400px;
}
.ph-process--tarhe40 .ph-process-car-frame{
    width:min(100%,780px);
    position:relative;
    border-radius:28px;
    padding:14px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03)),
        linear-gradient(135deg, rgba(75,231,241,.20), rgba(216,170,98,.10));
    border:1px solid rgba(116,240,249,.18);
    box-shadow:
        0 32px 90px rgba(0,0,0,.34),
        inset 0 1px 0 rgba(255,255,255,.08);
    transform-style:preserve-3d;
    transition:transform .18s ease, box-shadow .18s ease;
}
.ph-process--tarhe40 .ph-process-car-frame::before{
    content:"";
    position:absolute;
    inset:10px;
    border-radius:22px;
    border:1px solid rgba(116,240,249,.10);
    pointer-events:none;
}
.ph-process--tarhe40 .ph-process-car-frame img{
    display:block;
    width:100%;
    height:auto;
    border-radius:20px;
    transform:translateZ(24px) scale(1.02);
    transition:transform .18s ease;
    box-shadow:0 16px 40px rgba(0,0,0,.24);
}
.ph-process--tarhe40 .ph-process-car-meta{
    margin-top:18px;
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:center;
    color:rgba(230,240,244,.82);
    font-size:13px;
}
.ph-process--tarhe40 .ph-process-car-meta strong{
    color:#ffffff;
    font-size:15px;
}
.ph-process--tarhe40 .ph-process-car-meta span:last-child{
    color:#7ee8ff;
}

.ph-process--tarhe40 .ph-process-steps{
    display:grid!important;
    gap:16px!important;
}
.ph-process--tarhe40 .ph-process-step{
    position:relative;
    min-height:132px;
    padding:20px 22px 18px;
    border-radius:24px;
    border:1px solid rgba(255,255,255,.08);
    background:linear-gradient(180deg, rgba(7,29,43,.72), rgba(5,21,33,.82));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
    overflow:hidden;
}
.ph-process--tarhe40 .ph-process-step::before{
    content:"";
    position:absolute;
    inset:0 auto 0 0;
    width:3px;
    background:var(--step-accent, #62e6f2);
    box-shadow:0 0 18px var(--step-accent, #62e6f2);
}
.ph-process--tarhe40 .ph-process-step small{
    display:block;
    margin-bottom:8px;
    color:rgba(223,230,235,.62);
    font-size:12px;
}
.ph-process--tarhe40 .ph-process-step strong{
    display:block;
    margin-bottom:10px;
    color:#fff;
    font-size:28px;
    line-height:1.14;
}
.ph-process--tarhe40 .ph-process-step p{
    margin:0;
    color:rgba(231,239,243,.82);
    font-size:15px;
    line-height:1.95;
}
.ph-process--tarhe40 .ph-process-step b{
    position:absolute;
    left:22px;
    top:18px;
    font-size:56px;
    font-weight:300;
    color:rgba(198,215,224,.15);
    line-height:1;
}
.ph-process--tarhe40 .ph-process-step:nth-child(1){--step-accent:#d8aa62}
.ph-process--tarhe40 .ph-process-step:nth-child(2){--step-accent:#62e6f2}
.ph-process--tarhe40 .ph-process-step:nth-child(3){--step-accent:#7d78ff}
.ph-process--tarhe40 .ph-process-step:nth-child(4){--step-accent:#7be8b0}

.ph-process--tarhe40 .ph-process-note{
    margin-top:22px;
    padding-top:18px;
    border-top:1px solid rgba(255,255,255,.08);
    color:rgba(230,239,243,.82);
    font-size:15px;
    line-height:1.95;
}
.ph-process--tarhe40 .ph-process-note strong{
    color:#fff;
}

@media (min-width:1200px){
    .ph-process--tarhe40 .ph-process-copy{
        transform:translateX(42px);
    }
}
@media (max-width:1100px){
    .ph-process--tarhe40 .ph-process-stage{
        grid-template-columns:1fr!important;
    }
    .ph-process--tarhe40 .ph-process-media{
        min-height:520px;
    }
}
@media (max-width:900px){
    .ph-process--tarhe40{
        padding:68px 0 62px!important;
    }
    .ph-process--tarhe40 .ph-process-head{
        grid-template-columns:1fr!important;
        gap:18px!important;
        margin-bottom:24px!important;
    }
    .ph-process--tarhe40 .ph-process-index{
        justify-self:start!important;
        min-width:0!important;
        width:max-content!important;
    }
    .ph-process--tarhe40 .ph-process-copy{
        transform:none!important;
    }
    .ph-process--tarhe40 .ph-process-media{
        min-height:420px;
        border-radius:24px;
    }
    .ph-process--tarhe40 .ph-process-car{
        padding:24px 18px 18px;
    }
    .ph-process--tarhe40 .ph-process-car-frame{
        border-radius:20px;
        padding:10px;
    }
    .ph-process--tarhe40 .ph-process-car-frame img{
        border-radius:14px;
    }
    .ph-process--tarhe40 .ph-process-step strong{
        font-size:23px;
    }
}
@media (max-width:640px){
    .ph-process--tarhe40 .ph-process-copy h2{
        font-size:clamp(28px,8vw,42px)!important;
    }
    .ph-process--tarhe40 .ph-process-index strong{
        font-size:62px!important;
    }
    .ph-process--tarhe40 .ph-process-index{
        padding:12px 16px!important;
        min-height:0!important;
    }
    .ph-process--tarhe40 .ph-process-media{
        min-height:340px;
    }
    .ph-process--tarhe40 .ph-s06-line{
        font-size:11px;
    }
    .ph-process--tarhe40 .ph-process-car-meta{
        flex-direction:column;
        align-items:flex-start;
    }
}
/* END P576B-S06-TARHE40 */

/* P576E TERMINAL + CAR MOTION */
@media (min-width:1101px){

.ph-process--tarhe40 .ph-process-media{
  grid-template-columns:minmax(390px,.82fr) minmax(0,1.18fr)!important;
}

.ph-process--tarhe40 .ph-s06-line{
  left:18px!important;
  right:auto!important;
  width:max-content!important;
  max-width:none!important;
  font-size:13.5px!important;
  line-height:1.85!important;
  letter-spacing:.01em!important;
}

.ph-process--tarhe40 .ph-process-code{
  overflow:hidden!important;
}

.ph-process--tarhe40 .ph-process-car-frame{
  transform:none!important;
}

.ph-process--tarhe40 .ph-process-car-frame img{
  transform-origin:50% 58%!important;
  will-change:transform!important;
  transition:transform .16s ease-out!important;
}

}