/* ==========================================================================
   Lebot Inc. — lebot.co.kr
   Design tokens and components ported from "Lebot Homepage Mockup v2".
   Breakpoints: 900px ("narrow") and 480px ("mobile"), matching renderVals().
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root{
  /* Brand */
  --navy:#003048;
  --navy-deep:#00202e;
  --navy-hover:#02283a;
  --ink:#0d1b24;
  --aqua:#00d6be;
  --aqua-dark:#00b8a4;
  --aqua-deepest:#00776b;
  --aqua-tint:#e6faf7;
  --aqua-tint-2:#f2faf8;
  --aqua-tint-3:#d6f5ef;

  /* Surfaces */
  --page:#f4f6f5;
  --surface:#fff;
  --surface-alt:#f8fbfa;
  --surface-alt-2:#fafbfa;
  --neutral:#eceeed;
  --neutral-2:#f0f2f1;
  --dot:#d4d8d7;

  /* Text */
  --text:#43535d;
  --text-alt:#3c4c56;
  --muted:#5f7280;
  --muted-light:#8a969d;
  --muted-dark:#7d8f99;
  --arrow:#a5b0b6;
  --error:#c2513f;

  /* Lines */
  --line:rgba(13,27,36,.1);
  --line-2:rgba(13,27,36,.12);
  --line-3:rgba(13,27,36,.14);
  --line-4:rgba(13,27,36,.18);
  --line-input:rgba(13,27,36,.2);
  --line-dash:rgba(13,27,36,.3);
  --dline:rgba(255,255,255,.12);
  --dline-2:rgba(255,255,255,.16);
  --dline-3:rgba(255,255,255,.18);

  /* Type families */
  --sans:Archivo,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Spacing — 1440 */
  --pad:72px;
  --secY:96px;
  --secYs:48px;
  --gapL:56px;
  --cardPad:36px;
  --headerH:80px;

  /* Type scale — 1440 */
  --h1:68px;
  --h1s:56px;
  --h2:44px;
  --h3:34px;
  --h4:23px;
  --h5:18px;
  --lead:18px;
  --body:17px;

  /* Block heights — 1440 */
  --introH:760px;
  --heroH:660px;
  --heroMax:74%;
  --bandH:380px;
  --whoImgH:380px;
  --lineImgH:320px;
  --prodImgH:220px;
  --appImgH:340px;

  /* Grid templates — 1440 */
  --cols2:1fr 1fr;
  --cols3:repeat(3,1fr);
  --cols4:repeat(4,1fr);
  --cols5:repeat(7,1fr);
  --colsRoad:repeat(4,1fr);
  --whoCols:1.1fr .9fr;
  --lineCols:.85fr 1.15fr;
  --contactCols:1.15fr .85fr;
  --newsCols:.28fr 1fr;
  --roleCols:1fr .3fr auto;
  --legalCols:.8fr 1.5fr 1fr;
  --splitDir:row;
}

@media (max-width:900px){
  :root{
    --pad:34px;
    --secY:60px;
    --secYs:48px;
    --gapL:36px;
    --cardPad:28px;
    --h1:50px;
    --h1s:42px;
    --h2:33px;
    --h3:28px;
    --introH:680px;
    --heroH:560px;
    --heroMax:100%;
    --cols2:1fr;
    --cols3:1fr 1fr;
    --cols4:1fr 1fr;
    --cols5:repeat(4,1fr);
    --whoCols:1fr;
    --lineCols:1fr;
    --contactCols:1fr;
    --newsCols:1fr;
    --roleCols:1fr auto;
    --legalCols:1fr;
    --splitDir:column;
  }
}

@media (max-width:480px){
  :root{
    --pad:20px;
    --secY:44px;
    --secYs:30px;
    --gapL:28px;
    --cardPad:24px;
    --headerH:64px;
    --h1:36px;
    --h1s:32px;
    --h2:27px;
    --h3:24px;
    --h4:20px;
    --h5:16px;
    --lead:15px;
    --body:15px;
    --introH:620px;
    --heroH:520px;
    --bandH:300px;
    --whoImgH:240px;
    --lineImgH:220px;
    --prodImgH:180px;
    --appImgH:220px;
    --cols3:1fr;
    --cols4:1fr;
    --cols5:1fr 1fr;
    --colsRoad:1fr 1fr;
    --roleCols:1fr;
  }
}

/* --- Base --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--page);
  color:var(--ink);
  font:400 var(--body)/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;
}

body.is-dark{background:var(--navy-deep);color:#eef1f0}
body.is-white{background:var(--surface)}

a{color:inherit;text-decoration:none;transition:opacity .2s ease}
a:hover{opacity:.72}

img{max-width:100%}

h1,h2,h3,h4,h5{margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}

button{font-family:var(--sans);cursor:pointer}

:focus-visible{outline:2px solid var(--aqua);outline-offset:2px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  padding:12px 18px;background:var(--navy);color:#fff;
  font:600 13px/1 var(--sans);border-radius:0 0 4px 0;
}
.skip:focus{left:0}

/* --- Type utilities ----------------------------------------------------- */
.eyebrow{
  font:600 11px/1 var(--mono);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
}
.eyebrow--wide{letter-spacing:.24em}
.eyebrow--aqua{color:var(--aqua)}
.eyebrow--aqua-dark{color:var(--aqua-dark)}
.eyebrow--deepest{color:var(--aqua-deepest)}
.eyebrow--tight{letter-spacing:.16em}
.eyebrow--num{letter-spacing:.2em;text-transform:none}

.h1{font:800 var(--h1)/1.04 var(--sans);letter-spacing:-.03em}
.h1--tight{line-height:1.02;letter-spacing:-.035em}
.h1s{font:800 var(--h1s)/1.05 var(--sans);letter-spacing:-.03em}
.h1s--band{line-height:1.06}
.h2{font:700 var(--h2)/1.1 var(--sans);letter-spacing:-.025em}
.h2--display{font-weight:800;line-height:1.08;letter-spacing:-.03em}
.h3{font:700 var(--h3)/1.15 var(--sans);letter-spacing:-.025em}
.h4{font:600 var(--h4)/1.25 var(--sans)}
.h4--tall{line-height:1.3}
.h4--card{line-height:1.2}
.h5{font:600 var(--h5)/1.25 var(--sans)}
.h5--tall{line-height:1.3}

.lead{font:400 var(--lead)/1.55 var(--sans);color:var(--text)}
.lead--medium{font-weight:500}
.lead--tall{line-height:1.6}
.copy{font:400 var(--body)/1.6 var(--sans);color:var(--text)}
.card-copy{font:400 15px/1.6 var(--sans);color:var(--text)}
.card-copy--tight{line-height:1.55}
.small{font:400 14px/1.6 var(--sans);color:var(--text)}
.fine{font:400 12px/1 var(--mono);color:var(--muted-light)}
.fine--tall{line-height:1.5;font-size:13px}

.on-dark .lead,.on-dark .copy,.on-dark .card-copy,.on-dark .small{color:rgba(255,255,255,.72)}
.on-dark .eyebrow{color:var(--aqua)}
.dim-70{color:rgba(255,255,255,.7)}
.dim-68{color:rgba(255,255,255,.68)}
.dim-72{color:rgba(255,255,255,.72)}
.dim-76{color:rgba(255,255,255,.76)}
.dim-78{color:rgba(255,255,255,.78)}
.on-aqua-dim{color:rgba(0,32,46,.72)}

.m-18{max-width:18ch}.m-20{max-width:20ch}.m-22{max-width:22ch}
.m-24{max-width:24ch}.m-26{max-width:26ch}.m-34{max-width:34ch}
.m-44{max-width:44ch}.m-46{max-width:46ch}.m-48{max-width:48ch}
.m-52{max-width:52ch}.m-56{max-width:56ch}.m-60{max-width:60ch}
.m-62{max-width:62ch}.m-64{max-width:64ch}.m-66{max-width:66ch}
.m-70{max-width:70ch}.m-74{max-width:74ch}

/* --- Layout ------------------------------------------------------------- */
.sec{padding:var(--secY) var(--pad)}
.sec--intro{padding:var(--secY) var(--pad) var(--secYs)}
.sec--band{padding:var(--secYs) var(--pad)}
.sec--flush-top{padding-top:0}
.sec--rule{border-bottom:1px solid var(--line)}
.sec--rule-d{border-bottom:1px solid var(--dline)}
.sec--navy{background:var(--navy);color:#fff}
.sec--aqua{background:var(--aqua);color:var(--navy-deep)}
.sec--light{background:var(--page);border-top:1px solid var(--line)}

.stack{display:flex;flex-direction:column}
.g4{gap:4px}.g6{gap:6px}.g8{gap:8px}.g10{gap:10px}.g12{gap:12px}
.g14{gap:14px}.g16{gap:16px}.g18{gap:18px}.g20{gap:20px}
.g22{gap:22px}.g24{gap:24px}.g26{gap:26px}

.grid2{display:grid;grid-template-columns:var(--cols2);gap:var(--gapL)}
.grid2--tight{gap:22px}
.grid3{display:grid;grid-template-columns:var(--cols3);gap:20px}
.gridwho{display:grid;grid-template-columns:var(--whoCols);gap:var(--gapL);align-items:start}
.row{display:flex;gap:12px;flex-wrap:wrap}
.align-end{align-items:flex-end}
.align-center{align-items:center}
.align-start{align-items:start}
.mt6{margin-top:6px}.mt4{margin-top:4px}
.mt-gapL{margin-top:var(--gapL)}
.fit{width:fit-content}

.sec-head{margin:14px 0 var(--gapL)}
.sec-head--tight{margin:14px 0 12px}
.sec-lead{margin:0 0 var(--gapL)}

.head-row{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px;flex-wrap:wrap;margin-bottom:var(--gapL);
}

/* --- Buttons ------------------------------------------------------------ */
.btn{
  display:inline-block;
  padding:16px 24px;
  border:0;border-radius:4px;
  font:700 14px/1 var(--sans);
  text-align:center;
  transition:background .2s ease,opacity .2s ease;
}
.btn--navy{background:var(--navy);color:#fff}
.btn--navy:hover{background:var(--navy-deep);opacity:1}
.btn--aqua{background:var(--aqua);color:var(--navy-deep)}
.btn--aqua:hover{opacity:.86}
.btn--outline{border:1px solid rgba(255,255,255,.4);color:#fff;font-weight:600}
.btn--sm{padding:15px 22px;font-weight:600}
.btn--tk{padding:16px 22px}
.btn--cta{padding:17px 24px}
.btn--fit{width:fit-content}
.btn--block{width:100%}

/* Underlined text link */
.tlink{
  display:inline-block;
  font:600 14px/1 var(--sans);color:var(--navy);
  border-bottom:2px solid var(--aqua);padding-bottom:4px;
  width:fit-content;
}
.tlink--dark{color:var(--aqua);border-bottom:1px solid rgba(0,214,190,.5)}

/* --- Chips / pills ------------------------------------------------------ */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  padding:8px 11px;border-radius:99px;
  background:var(--surface);border:1px solid var(--line-3);
  font:500 12px/1 var(--mono);color:var(--text-alt);
}
.chip--ghost{background:rgba(255,255,255,.12);border:0;color:rgba(255,255,255,.86);padding:8px 12px}
.chip--tint{background:var(--aqua-tint);border-color:rgba(0,119,107,.2);color:var(--aqua-deepest)}
.chip--lg{padding:11px 15px;background:rgba(255,255,255,.09);border:0;font-size:13px;color:inherit}
.chip--cert{
  padding:9px 13px;background:rgba(0,214,190,.12);
  border:1px solid rgba(0,214,190,.35);color:var(--aqua);
}

/* --- Header ------------------------------------------------------------- */
.hdr{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:0 var(--pad);height:var(--headerH);
  background:var(--surface);
  border-bottom:1px solid var(--line);
}
.hdr--dark{background:transparent;border-bottom:1px solid var(--dline)}
.hdr--plain{background:transparent}
.hdr__brand{display:flex;align-items:center;gap:12px}
.hdr__brand--sm{gap:10px}
.hdr__logo{height:27px;width:auto;display:block}
.hdr__logo--sm{height:25px}
.hdr__sub{
  font:600 14px/1 var(--sans);color:var(--muted);
  padding-left:10px;border-left:1px solid var(--line-4);
}

.nav{display:flex;align-items:center;gap:26px;font:500 14px/1 var(--sans)}
.hdr--dark .nav{color:rgba(255,255,255,.72)}
.nav__item.is-active{color:var(--navy);border-bottom:2px solid var(--aqua);padding-bottom:3px}
.hdr--dark .nav__item.is-active{color:#fff}
.nav__div{width:1px;height:16px;background:var(--line-4)}
.hdr--dark .nav__div{background:rgba(255,255,255,.2)}
.nav__en{font:500 13px/1 var(--mono);color:var(--muted)}
.hdr--dark .nav__en{color:rgba(255,255,255,.72)}
.nav__cta{padding:11px 18px;border-radius:4px;font:600 13px/1 var(--sans);background:var(--navy);color:#fff}
.nav__cta--aqua{background:var(--aqua);color:var(--navy-deep)}

/* Burger + drawer — not in the mockup, designed for this build */
.burger{
  display:none;flex-direction:column;gap:4px;padding:8px;
  background:none;border:0;
}
.burger span{width:20px;height:2px;background:var(--ink);display:block;transition:transform .3s ease}
.hdr--dark .burger span{background:#fff}

.drawer{
  position:fixed;inset:0;z-index:120;
  background:var(--navy-deep);color:#fff;
  display:flex;flex-direction:column;
  padding:0 var(--pad) var(--secYs);
  transform:translateY(-100%);
  visibility:hidden;
  transition:transform .38s cubic-bezier(.4,0,.2,1),visibility .38s;
  overflow-y:auto;
}
.drawer[data-open="true"]{transform:none;visibility:visible}
.drawer__top{
  display:flex;align-items:center;justify-content:space-between;
  height:var(--headerH);margin:0 calc(var(--pad) * -1);padding:0 var(--pad);
  border-bottom:1px solid var(--dline);flex:0 0 auto;
}
.drawer__close{background:none;border:0;padding:8px;color:#fff;font:300 30px/1 var(--sans)}
.drawer__nav{display:flex;flex-direction:column;padding:34px 0 0}
.drawer__nav a{
  font:600 26px/1.2 var(--sans);letter-spacing:-.02em;
  padding:18px 0;border-bottom:1px solid var(--dline);
}
.drawer__nav a.is-active{color:var(--aqua)}
.drawer__foot{display:flex;flex-direction:column;gap:16px;padding-top:32px;margin-top:auto}
.drawer__meta{font:400 12px/1.6 var(--mono);color:rgba(255,255,255,.5)}

@media (max-width:900px){
  .nav{display:none}
  .burger{display:flex}
  body.drawer-open{overflow:hidden}
}

/* --- Sub-nav (Turnkey / Products) --------------------------------------- */
.subnav{
  display:flex;align-items:center;gap:24px;
  padding:0 var(--pad);height:54px;
  background:var(--surface);border-bottom:1px solid var(--line);
  font:500 14px/1 var(--sans);
  overflow-x:auto;
  scrollbar-width:none;
}
.subnav::-webkit-scrollbar{display:none}
.subnav--dark{background:rgba(255,255,255,.05);border-bottom:0}
.subnav__label{
  font:600 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--aqua-dark);white-space:nowrap;
}
.subnav--dark .subnav__label{color:var(--aqua)}
.subnav a{color:var(--muted);white-space:nowrap}
.subnav--dark a{color:rgba(255,255,255,.7)}
.subnav a.is-active{color:var(--navy);border-bottom:2px solid var(--aqua);padding-bottom:3px}
.subnav--dark a.is-active{color:#fff}

/* --- Footer ------------------------------------------------------------- */
.foot{
  display:flex;flex-wrap:wrap;gap:16px;
  justify-content:space-between;align-items:center;
  padding:36px var(--pad);
  background:var(--ink);color:rgba(255,255,255,.6);
  font:400 13px/1.5 var(--sans);
}
.foot--slim{padding:26px var(--pad)}
.foot__links{display:flex;gap:20px;flex-wrap:wrap}
.foot__profile{color:var(--aqua);font-weight:600}
.foot__mark{font:400 12px/1 var(--mono)}

/* --- Hero / band -------------------------------------------------------- */
.hero{
  position:relative;min-height:var(--heroH);
  display:flex;align-items:flex-end;overflow:hidden;
  background:#04202e;
}
.hero__bg,.hero__wash{position:absolute;inset:0}
.hero__bg{background:url('../assets/hero-gear-machining.jpg') center/cover}
.hero__wash{background:linear-gradient(100deg,rgba(0,32,46,.94) 0%,rgba(0,32,46,.7) 48%,rgba(0,32,46,.28) 100%)}
.hero__inner{
  position:relative;padding:var(--pad);padding-bottom:var(--secY);
  display:flex;flex-direction:column;gap:22px;max-width:var(--heroMax);
}

.band{
  position:relative;min-height:var(--bandH);
  display:flex;align-items:flex-end;overflow:hidden;background:#04202e;
}
.band__bg{position:absolute;inset:0;background:url('../assets/band-machining.jpg') center/cover}
.band__wash{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,32,46,.92) 0%,rgba(0,32,46,.5) 100%)}
.band__inner{position:relative;padding:var(--pad);display:flex;flex-direction:column;gap:16px}

/* --- Cards -------------------------------------------------------------- */
.card{
  background:var(--surface);border:1px solid var(--line-2);border-radius:8px;
  padding:var(--cardPad);display:flex;flex-direction:column;
}
.card--navy{background:var(--navy);border-color:var(--navy);color:#fff}

/* Hairline-separated groups: the container background is the line */
.hairgrid{
  display:grid;gap:1px;background:var(--line-2);
  border:1px solid var(--line-2);border-radius:8px;overflow:hidden;
}
.hairgrid > *{background:var(--surface)}
.hairstack{
  display:flex;flex-direction:column;gap:1px;background:var(--line-2);
  border:1px solid var(--line-2);border-radius:8px;overflow:hidden;
}
.hairstack > *{background:var(--surface)}

/* --- Intro gateway ------------------------------------------------------ */
.split{display:flex;flex-direction:var(--splitDir);min-height:var(--introH)}
.split__half{
  flex:1;position:relative;overflow:hidden;
  display:flex;align-items:flex-end;min-height:340px;
  transition:flex .5s cubic-bezier(.4,0,.2,1),filter .5s cubic-bezier(.4,0,.2,1);
}
.split__half:hover{opacity:1}
.split__bg,.split__wash{position:absolute;inset:0}
.split__inner{
  position:relative;padding:var(--cardPad);
  display:flex;flex-direction:column;gap:18px;width:100%;
}
.split__left .split__bg{background:url('../assets/hero-gear-machining.jpg') center/cover}
.split__left .split__wash{background:linear-gradient(180deg,rgba(0,32,46,.45) 0%,rgba(0,32,46,.94) 72%)}
.split__right{background:var(--page);color:var(--ink);border-left:1px solid var(--dline)}
.split__right .split__bg{
  bottom:auto;height:58%;
  background:var(--surface) url('../assets/designer-ui.png') top right/cover;
  opacity:.5;
}
.split__right .split__wash{background:linear-gradient(180deg,rgba(244,246,245,.4) 0%,#f4f6f5 62%)}
.split__enter{font:700 14px/1 var(--sans);margin-top:6px}
.split__left .split__enter{color:var(--aqua)}
.split__right .split__enter{color:var(--navy)}

@media (hover:hover) and (min-width:901px){
  .split:hover .split__half{flex:.74}
  .split:hover .split__left:not(:hover){filter:brightness(.6) saturate(.7)}
  .split:hover .split__right:not(:hover){filter:brightness(.97) saturate(.8)}
  .split .split__half:hover{flex:1.34}
}

/* --- Company: comparison ------------------------------------------------ */
.compare > *{transition:opacity .3s ease}
@media (hover:hover){
  .compare:hover > *{opacity:.45}
  .compare > *:hover{opacity:1}
}
.chain{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.chain--wide{gap:10px}
.chain__node{
  padding:9px 12px;border-radius:4px;
  font:500 12px/1 var(--mono);color:var(--text-alt);
  border:1px dashed var(--line-dash);
}
.chain__node--solid{background:var(--neutral);border:0;font-weight:600}
.chain__node--ghost{background:rgba(255,255,255,.12);border:0;font-weight:600;color:#fff}
.chain__node--aqua{padding:9px 14px;background:var(--aqua);color:var(--navy-deep);border:0;font-weight:700}
.chain__arrow{color:var(--arrow);font:400 14px/1 var(--sans)}
.chain__arrow--aqua{color:var(--aqua)}

.points{
  display:flex;flex-direction:column;gap:12px;
  border-top:1px solid var(--line);padding-top:20px;
}
.points--dark{border-top-color:var(--dline-2)}
.point{display:flex;gap:12px;align-items:flex-start;font:400 15px/1.5 var(--sans);color:var(--text-alt)}
.points--dark .point{color:rgba(255,255,255,.84)}
.point__mark{font:600 14px/1.4 var(--sans);flex:0 0 auto}
.point__mark--no{color:var(--error)}
.point__mark--yes{color:var(--aqua)}

/* Numbered hairline list (Who we are) */
.numlist{
  display:flex;flex-direction:column;gap:1px;
  background:var(--line-2);border-top:1px solid var(--line-2);margin-top:8px;
}
.numlist > div{
  background:var(--page);padding:20px 0;
  display:flex;gap:16px;align-items:baseline;
}
.numlist__n{font:600 12px/1 var(--mono);color:var(--aqua-dark)}

.who__img{
  min-height:var(--whoImgH);border-radius:8px;
  background:url('../assets/tool-endmill.jpg') center/cover;
}
@media (max-width:900px){.who__img{display:none}}

.partner__logo{height:26px;width:auto;object-fit:contain;object-position:left;align-self:flex-start}
.partner__logo--tall{height:30px}
.factlist{
  display:flex;flex-direction:column;gap:10px;
  border-top:1px solid var(--line);padding-top:18px;
  font:500 13px/1.5 var(--sans);color:var(--ink);
}
.certmeta{
  display:flex;flex-direction:column;gap:6px;
  border-top:1px solid var(--line);padding-top:16px;
  font:400 13px/1.6 var(--mono);color:var(--text-alt);
}

/* --- Company: PM window diagram ---------------------------------------- */
.pmflow{display:flex;flex-direction:column;gap:14px;align-items:center;margin-bottom:var(--gapL)}
.pmflow__node{padding:12px 20px;background:rgba(255,255,255,.1);border-radius:4px;font:600 13px/1 var(--mono)}
.pmflow__link{width:1px;height:22px;background:rgba(0,214,190,.6)}
.pmflow__hub{
  padding:16px 26px;background:var(--aqua);color:var(--navy-deep);
  border-radius:4px;font:700 var(--h5)/1 var(--sans);text-align:center;
}
.pmflow__grid{
  display:grid;grid-template-columns:var(--cols3);gap:1px;
  background:var(--dline-2);width:100%;
  border:1px solid var(--dline-2);border-radius:6px;overflow:hidden;
}
.pmflow__grid > div{background:var(--navy);padding:26px;display:flex;flex-direction:column;gap:8px}
.pmflow__sub{font:400 14px/1.5 var(--mono);color:rgba(255,255,255,.6)}
.principles{
  display:grid;grid-template-columns:var(--cols3);gap:28px;
  border-top:1px solid var(--dline-2);padding-top:32px;
}
.principles > div{display:flex;flex-direction:column;gap:8px}
.principles h3{font:600 15px/1.3 var(--sans);color:var(--aqua)}
.principles p{font:400 15px/1.6 var(--sans);color:rgba(255,255,255,.78)}

/* --- Product cards ------------------------------------------------------ */
.prodcard{
  background:var(--surface);border:1px solid var(--line-2);border-radius:8px;
  overflow:hidden;display:flex;flex-direction:column;
}
.prodcard__body{padding:24px;display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line)}

/* --- Browser chrome frame ---------------------------------------------- */
.frame{border:1px solid var(--line-3);border-radius:8px;overflow:hidden;background:var(--surface)}
.frame--shot{border-radius:12px;box-shadow:0 30px 70px -40px rgba(0,32,46,.5)}
.frame__bar{
  display:flex;align-items:center;gap:6px;
  padding:10px 14px;border-bottom:1px solid var(--line);background:var(--page);
}
.frame--shot .frame__bar{padding:12px 16px;flex-wrap:wrap}
.frame__dot{width:8px;height:8px;border-radius:50%;background:var(--dot);flex:0 0 auto}
.frame--shot .frame__dot{width:9px;height:9px}
.frame__dot--live{background:var(--aqua)}
.frame__label{margin-left:8px;font:400 11px/1 var(--mono);color:var(--muted-dark)}
.frame--shot .frame__label{margin-left:10px;font-size:12px}
.frame__tabs{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.frame img{display:block;width:100%;height:auto}

/* --- Product lines (alternating rows) ---------------------------------- */
.lines{display:flex;flex-direction:column;gap:1px;background:var(--line-2)}
.line{
  background:var(--page);
  display:grid;grid-template-columns:var(--lineCols);gap:var(--gapL);
  align-items:center;padding:var(--secYs) 0;
}
.line:first-child{padding-top:0}
.line:last-child{padding-bottom:0}

/* --- Process step selector --------------------------------------------- */
.steps{display:grid;grid-template-columns:var(--cols5);gap:10px;margin-bottom:26px}
.step{
  text-align:left;border-radius:6px;padding:20px;
  background:rgba(255,255,255,.05);border:1px solid var(--dline-3);
  display:flex;flex-direction:column;gap:10px;
  transition:background .2s ease,border-color .2s ease;
}
.step:hover{background:rgba(255,255,255,.1)}
.step__n{font:600 11px/1 var(--mono);color:var(--aqua)}
.step__label{font:600 var(--h5)/1.2 var(--sans);color:#fff}
.step[aria-selected="true"]{background:var(--aqua);border-color:var(--aqua)}
.step[aria-selected="true"]:hover{background:var(--aqua)}
.step[aria-selected="true"] .step__n{color:rgba(0,32,46,.6)}
.step[aria-selected="true"] .step__label{color:var(--navy-deep)}

.quote{
  border-left:2px solid var(--aqua);padding:6px 0 6px 22px;
  font:400 var(--lead)/1.55 var(--sans);color:rgba(255,255,255,.9);
  max-width:60ch;min-height:52px;
}
.quote--light{
  color:var(--text);font:400 14px/1.7 var(--sans);
  padding:4px 0 4px 20px;min-height:0;max-width:none;
}

.panel{
  background:var(--surface);border-radius:8px;padding:var(--cardPad);
  display:flex;flex-direction:column;gap:16px;
}
.panel__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.panel img{display:block;width:100%;max-width:760px;height:auto;margin:0 auto}

/* --- Harmonic reducer animation ---------------------------------------- */
.harmonic{
  background:var(--surface);border-radius:8px;padding:18px;
  display:flex;flex-direction:column;gap:12px;align-items:center;
}
.harmonic--framed{background:var(--page);border:1px solid var(--line-2);padding:24px}
.harmonic__stage{position:relative;width:100%;max-width:300px}
.harmonic--framed .harmonic__stage{max-width:280px}
.harmonic__stage img{width:100%;height:auto;display:none}
.harmonic__stage img.is-on{display:block}
.harmonic__cap{font:500 11px/1.4 var(--mono);color:var(--muted);letter-spacing:.06em;text-align:center}

/* --- Quality infrastructure -------------------------------------------- */
.qcheck{padding:22px;display:flex;gap:14px}
.qcheck__mark{color:var(--aqua-dark);font:600 15px/1.4 var(--sans);flex:0 0 auto}
.qcheck__body{display:flex;flex-direction:column;gap:4px}
.qcheck__body span:last-child{font:400 14px/1.5 var(--sans);color:var(--text)}
.qfig{padding:22px;display:flex;flex-direction:column;gap:12px}
.qfig img{display:block;width:100%;height:auto;border-radius:4px}
.qfig__cap{font:500 11px/1.5 var(--mono);color:var(--muted)}
.qgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.qgrid figure{
  margin:0;background:var(--surface);border:1px solid var(--line-2);border-radius:6px;
  padding:14px;display:flex;flex-direction:column;gap:10px;align-items:center;
}
.qgrid img{width:100%;height:auto;display:block}
.qgrid figcaption{font:500 11px/1 var(--mono);color:var(--muted)}
.specnote{border-top:1px solid var(--line-2);padding-top:20px;display:flex;flex-direction:column;gap:12px}
.specnote__title{font:600 13px/1 var(--sans);color:var(--navy)}

/* --- Tabs (applications, screenshots, legal) ---------------------------- */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.tab{
  padding:13px 18px;border-radius:99px;
  border:1px solid var(--line-4);background:var(--surface);color:var(--text-alt);
  font:600 13px/1 var(--sans);
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.tab[aria-selected="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.tab--sm{padding:7px 12px;font-size:11px}
.tab--lg{padding:13px 20px;color:var(--muted)}

.apppanel{
  display:grid;grid-template-columns:var(--cols2);gap:0;
  border:1px solid var(--line-2);border-radius:8px;overflow:hidden;background:var(--surface);
}
.apppanel__media{min-height:var(--appImgH);background:var(--neutral)}
.apppanel__media > div{width:100%;height:100%;min-height:var(--appImgH);display:none}
.apppanel__media > div.is-on{display:block}
.app--powertrain{background:url('../assets/app-powertrain.jpg') center/cover}
.app--robotics{background:url('../assets/app-robotics.jpg') center/cover}
.app--ev{background:url('../assets/app-ev.jpg') center/cover}
.app--machinetool{background:var(--neutral) url('../assets/app-machinetool.png') center/contain no-repeat}
.apppanel__body{padding:var(--cardPad);display:flex;flex-direction:column;gap:16px;justify-content:center}
.apppanel__proof{
  font:500 13px/1.5 var(--mono);color:var(--aqua-dark);
  border-top:1px solid var(--line-2);padding-top:16px;
}

/* --- Turnkey ------------------------------------------------------------ */
.callout{display:flex;flex-direction:column;gap:14px;border-left:2px solid var(--aqua);padding-left:24px}
.process{
  display:grid;grid-template-columns:var(--cols4);gap:1px;
  background:var(--dline-2);border:1px solid var(--dline-2);border-radius:8px;overflow:hidden;
}
.process__cell{
  background:var(--navy-deep);padding:var(--cardPad);
  display:flex;flex-direction:column;gap:14px;
  transition:background .2s ease;
}
.process__cell:hover{background:var(--navy-hover)}
.process__n{font:600 11px/1 var(--mono);color:var(--aqua)}
.process__title{font:600 var(--h4)/1.2 var(--sans)}
.process__desc{font:400 15px/1.55 var(--sans);color:rgba(255,255,255,.68)}
.process__deliver{
  margin-top:auto;font:500 12px/1.5 var(--mono);color:var(--aqua);
  border-top:1px solid var(--dline-2);padding-top:14px;
}
.option{
  border:1px solid var(--dline-3);border-radius:8px;padding:var(--cardPad);
  display:flex;flex-direction:column;gap:16px;background:rgba(255,255,255,.03);
}
.option--pick{border-color:var(--aqua);background:rgba(0,214,190,.08)}
.option__tag{font:700 12px/1 var(--mono);color:var(--aqua);letter-spacing:.14em}
.tk__img{
  min-height:var(--whoImgH);border-radius:8px;
  background:var(--surface) url('../assets/app-machinetool.png') center/contain no-repeat;
  border:1px solid var(--dline-2);
}

/* --- Designer ----------------------------------------------------------- */
.statusbar{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:8px var(--pad);min-height:38px;background:var(--navy);
  font:500 12px/1.4 var(--sans);color:rgba(255,255,255,.8);
  text-align:center;
}
.statusbar__dot{width:6px;height:6px;border-radius:50%;background:var(--aqua);flex:0 0 auto}
.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;background:var(--aqua-tint);border-radius:99px;
  font:600 12px/1 var(--mono);color:var(--aqua-deepest);letter-spacing:.08em;
}
.shot img{display:none}
.shot img.is-on{display:block}
.road{display:grid;grid-template-columns:var(--colsRoad);gap:10px}
.road__cell{
  border:1px solid var(--line-3);background:var(--surface);border-radius:6px;
  padding:18px;display:flex;flex-direction:column;gap:10px;
}
.road__cell--now{border-color:var(--aqua);background:var(--aqua-tint-2)}
.road__head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.road__n{font:600 11px/1 var(--mono);color:var(--muted-light)}
.road__cell--now .road__n{color:var(--aqua-deepest)}
.road__badge{
  font:600 9px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--aqua-deepest);background:var(--aqua-tint-3);
  padding:4px 7px;border-radius:99px;
}
.road__label{font:600 15px/1.25 var(--sans);color:var(--ink)}

/* --- Forms -------------------------------------------------------------- */
.form{display:flex;flex-direction:column;gap:22px}
.field{display:flex;flex-direction:column;gap:8px}
.field__label{font:600 13px/1 var(--sans)}
.req{color:var(--error)}
.opt{font-weight:400;color:var(--muted-light)}

.input,.textarea{
  padding:14px 16px;
  border:1px solid var(--line-input);border-radius:4px;
  font:400 14px/1 var(--sans);color:var(--ink);
  background:var(--surface);
  outline-color:var(--aqua);
  width:100%;
}
.textarea{min-height:130px;resize:vertical;line-height:1.5}
.input--inline{padding:15px 18px;min-width:260px;width:auto;flex:1 1 260px}

.dropzone{
  position:relative;
  border:1px dashed var(--line-dash);border-radius:6px;
  padding:26px 20px;display:flex;flex-direction:column;gap:8px;
  align-items:center;text-align:center;background:var(--surface-alt-2);
  cursor:pointer;transition:border-color .2s ease,background .2s ease;
}
.dropzone:hover,.dropzone.is-over,.dropzone:focus-within{border-color:var(--aqua);background:var(--aqua-tint-2)}
.dropzone__title{font:600 14px/1.3 var(--sans);color:var(--navy)}
.dropzone__hint{font:400 12px/1.5 var(--mono);color:var(--muted-light)}
.dropzone input[type=file]{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;cursor:pointer;
}
.dropnote{font:400 12px/1.6 var(--sans);color:var(--muted-light)}

.consent{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.consent input{margin:3px 0 0;accent-color:var(--aqua);width:16px;height:16px;flex:0 0 auto}
.consent span{font:400 13px/1.55 var(--sans);color:var(--text)}
.consent a{border-bottom:1px solid var(--line-4)}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.formnote{
  border-radius:4px;padding:14px 16px;
  font:500 14px/1.55 var(--sans);
}
.formnote[hidden]{display:none}
.formnote--ok{background:var(--aqua-tint);color:var(--aqua-deepest);border:1px solid rgba(0,119,107,.25)}
.formnote--err{background:#fbeeeb;color:var(--error);border:1px solid rgba(194,81,63,.3)}

.infostack .info{padding:var(--cardPad);display:flex;flex-direction:column;gap:10px}
.info__email{font:600 var(--h5)/1.3 var(--sans);color:var(--navy)}
.info__addr{font:600 var(--h5)/1.4 var(--sans)}
.getback{display:flex;flex-direction:column;gap:10px}
.getback span{display:flex;gap:10px;font:400 14px/1.5 var(--sans);color:var(--text)}
.getback b{color:var(--aqua-dark);font-weight:600;flex:0 0 auto}

/* --- News --------------------------------------------------------------- */
.newslist{display:flex;flex-direction:column;border-top:1px solid var(--line-3)}
.newsrow{
  display:grid;grid-template-columns:var(--newsCols);gap:var(--gapL);
  padding:32px 0;border-bottom:1px solid var(--line-3);align-items:start;
}
.newsrow__meta{display:flex;flex-direction:column;gap:8px}
.newsrow__date{font:500 13px/1 var(--mono);color:var(--muted-light)}
.newsrow__cat{font:600 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--aqua-dark)}
.newsrow__body{display:flex;flex-direction:column;gap:10px}
/* Applied once News entries have detail pages and the rows become links. */
.newsrow--link{transition:background .2s ease}
.newsrow--link:hover{opacity:1;background:rgba(0,214,190,.05)}

/* --- Careers ------------------------------------------------------------ */
.role{
  padding:var(--cardPad);
  display:grid;grid-template-columns:var(--roleCols);gap:20px;align-items:center;
  transition:background .2s ease;
}
.role:hover{opacity:1;background:var(--surface-alt)}
.role__where{font:500 13px/1.6 var(--mono);color:var(--muted)}
.role__apply{font:700 14px/1 var(--sans);color:var(--navy);white-space:nowrap}

/* --- Legal -------------------------------------------------------------- */
.doc{padding:var(--secY) var(--pad);max-width:82ch}
.doc[hidden]{display:none}
.doc h2{margin:0 0 12px;font:700 var(--h3)/1.2 var(--sans);letter-spacing:-.02em}
.doc p{margin:0 0 34px;font:400 var(--body)/1.7 var(--sans);color:var(--text)}
.doc p.lead-in{margin-bottom:14px}
.doc p.before-block{margin-bottom:20px}
.doc ul{margin:0 0 34px;padding-left:22px;font:400 var(--body)/1.8 var(--sans);color:var(--text)}
.doc a{border-bottom:1px solid var(--line-4)}

.dtable{
  display:flex;flex-direction:column;gap:1px;
  background:var(--line-2);border:1px solid var(--line-2);
  border-radius:6px;overflow:hidden;margin-bottom:34px;
}
.dtable__head{
  background:var(--surface-alt);padding:14px 18px;
  display:grid;grid-template-columns:var(--legalCols);gap:16px;
  font:600 12px/1.4 var(--mono);color:var(--text-alt);
}
.dtable__row{
  background:var(--surface);padding:16px 18px;
  display:grid;grid-template-columns:var(--legalCols);gap:16px;
  font:400 14px/1.6 var(--sans);color:var(--text);
}
.dtable__row b{color:var(--ink);font-weight:600}
.dtable__label{
  display:none;font:600 10px/1.6 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-light);
}
@media (max-width:900px){
  .dtable__head{display:none}
  .dtable__label{display:block}
}

/* --- Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .split:hover .split__half,
  .split .split__half:hover{flex:1}
  .split:hover .split__left:not(:hover),
  .split:hover .split__right:not(:hover){filter:none}
}

/* --- Logo ---------------------------------------------------------------
   Inlined rather than <img src="logo-on-*.svg"> so the Poppins wordmark
   inside it can use the page's loaded font — an <img>-referenced SVG is an
   isolated document and cannot reach the page's @font-face rules. One
   markup, both variants: .logo__ink flips on dark surfaces. */
.logo{height:27px;width:auto;display:block}
.logo--sm{height:25px}
.logo__ink{fill:#0a2540}
.logo__mark{fill:#00d9c0}
.logo text{font-family:Poppins,Archivo,system-ui,sans-serif;font-size:48px;font-weight:600}
.hdr--dark .logo__ink,.drawer .logo__ink{fill:#fff}
.split__title{color:#fff}
.split__left .h2{letter-spacing:-.03em}
.split__right .h2{letter-spacing:-.035em}
.split__half .h2{line-height:1.05}

/* Visually hidden — available to assistive tech, absent from the design. */
.vh{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* --- Product image slider ------------------------------------------------
   Replaces the single background image on each product line. Slides are
   stacked and crossfaded rather than translated: the stage has a fixed
   height from --lineImgH, so mixed aspect ratios cannot shift the layout.
   Auto-advance is paused on hover, on focus, when the tab is hidden, and
   by the pause button — WCAG 2.2.2 wants moving content to be stoppable. */
.slider{
  position:relative;
  border:1px solid var(--line);border-radius:8px;
  background:var(--surface);overflow:hidden;
}
.slider__stage{position:relative;height:var(--lineImgH);background:var(--surface)}

.slide{
  position:absolute;inset:0;
  opacity:0;pointer-events:none;
  transition:opacity .5s ease;
}
.slide.is-on{opacity:1;pointer-events:auto}
.slide img{display:block;width:100%;height:100%}

/* Cutouts sit on white with breathing room; photographs fill the frame. */
.slide--contain img{object-fit:contain;padding:18px}
.slide--cover img{object-fit:cover}

.slider__bar{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;
  border-top:1px solid var(--line);
  background:var(--surface);
}
.slider__count{
  font:500 11px/1 var(--mono);color:var(--muted);
  letter-spacing:.06em;flex:0 0 auto;
}
.slider__caption{
  font:400 12px/1.4 var(--sans);color:var(--muted-light);
  flex:1 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.slider__dots{display:flex;gap:6px;flex:0 0 auto}
.slider__dot{
  width:7px;height:7px;padding:0;border-radius:50%;
  border:0;background:rgba(13,27,36,.2);
  transition:background .2s ease,transform .2s ease;
}
.slider__dot[aria-selected="true"]{background:var(--aqua-dark);transform:scale(1.25)}
.slider__dot:hover{background:var(--aqua-dark)}

.slider__btns{display:flex;gap:4px;flex:0 0 auto}
.slider__btn{
  width:26px;height:26px;padding:0;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line-3);border-radius:4px;
  background:var(--surface);color:var(--navy);
  font:400 13px/1 var(--sans);
  transition:background .2s ease,border-color .2s ease;
}
.slider__btn:hover{background:var(--aqua-tint-2);border-color:var(--aqua)}
.slider__btn svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2}

@media (max-width:480px){
  .slider__caption{display:none}
}

@media (prefers-reduced-motion:reduce){
  .slide{transition:none}
}

/* <picture> is only a wrapper for the WebP <source>; it must not create a box
   of its own, or the display toggles on .shot img and .harmonic__stage img
   would be fighting an inline parent. */
picture{display:contents}

/* --- Slider variants -----------------------------------------------------
   Nested inside a card or a browser frame, the parent already draws the
   border and the rounded corners, so the slider must not draw its own. */
.slider--bare{border:0;border-radius:0;background:transparent}

/* Product cards on the Company page: same height as the old static image. */
/* White, not grey: several product cut-outs carry an opaque white
   background of their own, which shows as a pale box on any other colour. */
.slider--card .slider__stage{height:var(--prodImgH);background:var(--surface)}

/* Designer preview: keep a stable box so the three screenshots, which have
   different aspect ratios, cannot make the section jump as they cycle. */
.slider--frame .slider__stage{height:auto;aspect-ratio:1370/897;background:var(--surface)}

/* Screenshots fit whole, without the padding the product cut-outs get. */
.slide--fit img{object-fit:contain}

/* Compact bar: dots and pause only. */
.slider--compact .slider__bar{padding:8px 12px;gap:10px;justify-content:flex-end}
.slider--compact .slider__dots{margin-right:auto}

/* --- Korean landing page (/laifual/) -------------------------------------
   Archivo and IBM Plex Mono carry no Hangul, so a page set in Korean would
   fall back to whatever the OS supplies and look unrelated to the rest of
   the site. Noto Sans KR goes in front of the stack for this page only; the
   Latin shapes stay Archivo because it is listed first for those glyphs. */
body.is-ko{
  --sans:Archivo,"Noto Sans KR",system-ui,-apple-system,"Malgun Gothic",sans-serif;
  --mono:"IBM Plex Mono","Noto Sans KR",ui-monospace,monospace;
  word-break:keep-all;          /* never split a Korean word across lines */
}
/* Hangul has no ascenders/descenders to speak of; -0.03em tracking that
   suits Archivo looks cramped on it. */
body.is-ko .h1s,body.is-ko .h2,body.is-ko .h3{letter-spacing:-.02em}
.ko-h1{line-height:1.25}

/* Cell used by the guidance and product grids on that page. */
.infocell{
  padding:var(--cardPad);
  display:flex;flex-direction:column;gap:10px;
}

/* Secondary button on a light surface. */
.btn--ghost{
  border:1px solid var(--line-4);
  color:var(--navy);background:var(--surface);
  font-weight:600;
}
.btn--ghost:hover{background:var(--aqua-tint-2);border-color:var(--aqua);opacity:1}

/* The select needs the same chrome as the text inputs. */
select.input{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) calc(50% + 2px),calc(100% - 13px) calc(50% + 2px);
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
  padding-right:40px;
  line-height:1.3;
}