/* =========================================================
   main
   ========================================================= */
/* ---------- hero ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:640px;max-height:1100px;color:#fff;background:var(--navy);overflow:hidden;display:flex;align-items:flex-end}
.hero__slides{position:absolute;inset:0}
.hero__slide{position:absolute;inset:0;opacity:0;transition:opacity 1.6s var(--ease-io)}
.hero__slide.is-on{opacity:1;z-index:1}
.hero__slide img{width:100%;height:100%;object-fit:cover;object-position:50% 58%;transform:scale(1.14);transition:transform 9s cubic-bezier(.15,.4,.3,1)}
.hero__slide.is-on img{transform:scale(1.02)}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(5,12,26,.74) 0%,rgba(5,12,26,.46) 38%,rgba(5,12,26,.08) 72%),linear-gradient(0deg,rgba(5,12,26,.62) 0%,rgba(5,12,26,0) 34%),linear-gradient(180deg,rgba(5,12,26,.45) 0%,rgba(5,12,26,0) 22%)}
.hero__in{position:relative;z-index:2;padding-bottom:clamp(150px,19vh,220px)}
.hero__eb{font-size:14px;font-weight:600;letter-spacing:.36em;text-transform:uppercase;color:rgba(255,255,255,.82);margin-bottom:26px;display:flex;align-items:center;gap:16px}
.hero__eb::before{content:"";width:40px;height:1px;background:rgba(255,255,255,.7)}
.hero__h{font-size:clamp(38px,4.7vw,78px);line-height:1.18;font-weight:700;letter-spacing:-.045em}
.en .hero__h{letter-spacing:-.035em}
.hero__p{margin-top:26px;font-size:clamp(16px,1.3vw,19px);line-height:1.7;color:rgba(255,255,255,.84);letter-spacing:-.015em}
.hero__btns{margin-top:40px;display:flex;gap:12px}
.hero__p,.hero__btns{opacity:0;transform:translateY(20px);transition:opacity 1s var(--ease) .55s,transform 1.1s var(--ease) .55s}
.is-ready .hero__p,.is-ready .hero__btns{opacity:1;transform:none}
.hero__ctrl{position:absolute;left:0;right:0;bottom:44px;z-index:2;display:flex;justify-content:flex-end;align-items:center;gap:28px}
.hero__count{display:flex;align-items:center;gap:16px;font-size:14px;font-weight:600;letter-spacing:.06em;color:rgba(255,255,255,.6);font-variant-numeric:tabular-nums}
.hero__count b{color:#fff;font-weight:700}
.hero__bar{position:relative;width:160px;height:2px;background:rgba(255,255,255,.25);overflow:hidden}
.hero__bar i{position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left}
.hero__bar i.run{animation:heroBar var(--dur,6.5s) linear forwards}
@keyframes heroBar{to{transform:scaleX(1)}}
.hero__arrows{display:flex;gap:8px}
.hero__arrows button{width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.4);display:grid;place-items:center;color:#fff;transition:background-color .3s,border-color .3s,color .3s}
.hero__arrows button:hover{background:#fff;border-color:#fff;color:var(--ink)}
.hero__arrows svg{width:18px;height:18px}
@media (max-width:768px){
  .hero{min-height:600px;max-height:860px}
  .hero__slide img{object-position:62% 55%}
  .hero::after{background:linear-gradient(0deg,rgba(5,12,26,.82) 0%,rgba(5,12,26,.35) 55%,rgba(5,12,26,.35) 100%)}
  .hero__in{padding-bottom:132px}
  .hero__eb{font-size:12px;letter-spacing:.28em;margin-bottom:18px}
  .hero__eb::before{width:24px}
  .hero__ctrl{justify-content:space-between;bottom:32px}
  .hero__bar{width:96px}
  .hero__arrows button{width:42px;height:42px}
}

/* ---------- process ---------- */
.proc{--s:56px;--gap:8px;display:flex;height:clamp(460px,40vw,580px);border-radius:var(--r-l);overflow:hidden}
.proc__item{flex:1;min-width:0;position:relative;transition:flex-grow .9s var(--ease)}
.proc__item + .proc__item{margin-left:calc(var(--s) * -1 + var(--gap))}
.proc__item:nth-child(1) .proc__a{clip-path:polygon(0 0,100% 0,calc(100% - var(--s)) 100%,0 100%)}
.proc__item:nth-child(2) .proc__a{clip-path:polygon(var(--s) 0,100% 0,calc(100% - var(--s)) 100%,0 100%)}
.proc__item:nth-child(3) .proc__a{clip-path:polygon(var(--s) 0,100% 0,100% 100%,0 100%)}
.proc__a{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;color:#fff;padding:40px 44px 40px 44px;background:var(--navy)}
.proc__item + .proc__item .proc__a{padding-left:calc(var(--s) + 36px)}
.proc__item:not(:last-child) .proc__a{padding-right:calc(var(--s) + 20px)}
.proc__bg{position:absolute;inset:0;z-index:0}
.proc__bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1.4s var(--ease),filter .9s var(--ease);filter:saturate(.85)}
.proc__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,16,34,.78) 0%,rgba(6,16,34,.2) 42%,rgba(6,16,34,.35) 62%,rgba(6,16,34,.88) 100%);transition:background-color .6s}
.proc__top,.proc__bot{position:relative;z-index:1}
.proc__top{display:flex;align-items:flex-start;gap:22px}
.proc__no{font-size:clamp(40px,3.6vw,56px);font-weight:300;line-height:.9;letter-spacing:-.04em;color:rgba(255,255,255,.55);font-variant-numeric:tabular-nums}
.proc__tt{display:flex;flex-direction:column;gap:8px;padding-top:2px}
.proc__tt strong{font-size:clamp(20px,1.7vw,26px);font-weight:700;letter-spacing:.02em;text-transform:uppercase;line-height:1.2}
.proc__tt em{font-size:15px;line-height:1.55;color:rgba(255,255,255,.8)}
.proc__bot{display:flex;flex-direction:column;gap:14px}
.proc__cat{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.proc__list{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .7s var(--ease),opacity .5s var(--ease)}
.proc__list{display:flex;flex-direction:column;gap:6px;max-height:0;overflow:hidden;transition:max-height .8s var(--ease),opacity .5s var(--ease)}
.proc__list span{font-size:15px;color:rgba(255,255,255,.88);padding-left:14px;position:relative;white-space:nowrap}
.proc__list span::before{content:"";position:absolute;left:0;top:.72em;width:5px;height:1px;background:rgba(255,255,255,.7)}
.proc__more{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:600;align-self:flex-start;border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:5px}
.proc__more .ar{width:16px;height:16px;transition:transform .45s var(--ease)}
@media (hover:hover) and (min-width:1025px){
  .proc:hover .proc__item{flex-grow:.82}
  .proc .proc__item:hover{flex-grow:1.55}
  .proc__item:hover .proc__bg img{transform:scale(1.0);filter:saturate(1)}
  .proc__item:hover .proc__list{max-height:160px;opacity:1}
  .proc__item:hover .proc__more .ar{transform:translateX(4px)}
}
@media (max-width:1024px){
  .proc{flex-direction:column;height:auto;gap:10px;border-radius:0;overflow:visible}
  .proc__item{flex:none;height:340px}
  .proc__item + .proc__item{margin-left:0}
  .proc__item .proc__a{clip-path:none!important;border-radius:var(--r);padding:30px 28px!important}
  .proc__list{max-height:none;opacity:1}
  .proc__list span{font-size:14px}
}
@media (max-width:480px){.proc__item{height:360px}.proc__top{gap:16px}}

/* ---------- product cards ---------- */
.pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pcard{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:var(--r-l);overflow:hidden;min-height:600px;box-shadow:0 1px 0 rgba(16,21,31,.04);transition:box-shadow .6s var(--ease)}
.pcard__top{display:flex;flex-direction:column;gap:14px;padding:40px 40px 0}
.pcard__no{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:700;color:var(--blue);letter-spacing:.06em}
.pcard__no i{font-size:13px;font-weight:600;color:var(--g4);letter-spacing:0}
.pcard__t{font-size:clamp(22px,1.9vw,28px);font-weight:700;line-height:1.25;letter-spacing:-.03em;color:var(--ink);transition:color .4s}
.pcard__d{font-size:15px;line-height:1.65;color:var(--g6);white-space:pre-line}
.pcard__g{display:flex;flex-direction:column;gap:4px;padding:22px 40px 28px;font-size:13px;color:var(--g5)}
.pcard__g span{padding-left:12px;position:relative}
.pcard__g span::before{content:"";position:absolute;left:0;top:.7em;width:4px;height:4px;border-radius:50%;background:var(--g3)}
.pcard__img{margin-top:auto;position:relative;aspect-ratio:16/11;overflow:hidden;background:var(--g1)}
.pcard__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.pcard__go{position:absolute;right:24px;bottom:24px;width:56px;height:56px;background:#fff;border-color:#fff;color:var(--ink);box-shadow:0 8px 24px -8px rgba(11,22,40,.35)}
.pcard:hover{box-shadow:0 30px 60px -32px rgba(11,22,40,.32)}
.pcard:hover .pcard__t{color:var(--blue)}
.pcard:hover .pcard__img img{transform:scale(1.06)}
.pcard:hover .pcard__go{background:var(--blue);border-color:var(--blue);color:#fff}
.pcard:hover .pcard__go svg{transform:translateX(3px)}
@media (max-width:1100px){.pcards{grid-template-columns:1fr 1fr}.pcard:last-child{grid-column:1/-1;min-height:0}.pcard:last-child .pcard__img{aspect-ratio:21/9}}
@media (max-width:700px){.pcards{grid-template-columns:1fr;gap:16px}.pcard{min-height:0}.pcard:last-child .pcard__img{aspect-ratio:16/11}.pcard__top{padding:30px 26px 0}.pcard__g{padding:18px 26px 22px}.pcard__go{width:48px;height:48px;right:18px;bottom:18px}}

/* ---------- trust ---------- */
.trust{padding-bottom:calc(var(--sec) * .78)}
.trust__nav{display:flex;align-items:center;gap:10px}
.trust__nav .tlink{margin-right:18px}
.trust__nav .circ{color:var(--ink);border-color:var(--g3)}
.trust__nav .circ:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.logos{overflow:hidden}
.logos__track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding:4px max(var(--pad),calc((100vw - var(--wrap)) / 2)) 8px;scroll-padding:0 max(var(--pad),calc((100vw - var(--wrap)) / 2))}
.logos__track::-webkit-scrollbar{display:none}
.logo{flex:none;width:clamp(180px,15.2vw,212px);aspect-ratio:212/118;border:1px solid var(--g2);border-radius:14px;background:#fff;display:grid;place-items:center;scroll-snap-align:start;overflow:hidden;transition:border-color .35s}
.logo img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;filter:grayscale(1);opacity:.7;transition:filter .45s,opacity .45s}
.logo:hover{border-color:var(--g3)}
.logo:hover img{filter:none;opacity:1}
@media (max-width:768px){.trust__nav .circ{display:none}.trust__nav .tlink{margin:0}.logo{width:156px}}