/* ============ WOOJOO BIO — site styles ============ */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');

:root{
  --bg:#0A0A0C;
  --bg-2:#101014;
  --card:#17171C;
  --card-2:#1D1D23;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);
  --tx:#F4F4F6;
  --tx-2:#A7A7B0;
  --tx-3:#6E6E78;
  --or:#F26522;
  --or-2:#FF8347;
  --or-dim:rgba(242,101,34,.12);
  --max:1180px;
  --r:18px;
  --ff:'Pretendard','Pretendard Variable',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--ff);
  background:var(--bg);color:var(--tx);
  line-height:1.65;letter-spacing:-.01em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  word-break:keep-all;overflow-wrap:break-word;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}

/* ---------- lang visibility ---------- */
[data-ko],[data-en]{display:none}
html[lang="ko"] [data-ko]{display:revert}
html[lang="en"] [data-en]{display:revert}

/* ---------- nav ---------- */
header.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(10,10,12,.78);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
  transition:background .25s;
}
.nav-in{max-width:var(--max);margin:0 auto;padding:0 28px;height:66px;display:flex;align-items:center;gap:28px}
.nav-logo img{height:19px;width:auto}
.nav-links{display:flex;gap:26px;margin-left:auto;align-items:center}
.nav-links a{
  font-size:14px;font-weight:500;color:var(--tx-2);
  transition:color .18s;white-space:nowrap;
}
.nav-links a:hover{color:var(--tx)}
.nav-links a.on{color:var(--or)}
.lang{
  display:flex;border:1px solid var(--line-2);border-radius:999px;
  overflow:hidden;font-size:12px;font-weight:700;letter-spacing:.03em;
}
.lang button{
  background:none;border:0;color:var(--tx-3);font-family:var(--ff);
  padding:5px 11px;cursor:pointer;font-weight:700;font-size:12px;transition:.18s;
}
.lang button.on{background:var(--or);color:#fff}
.burger{display:none;background:none;border:0;cursor:pointer;padding:6px;margin-left:auto}
.burger span{display:block;width:21px;height:2px;background:var(--tx);margin:4px 0;border-radius:2px;transition:.22s}

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:92vh;display:flex;align-items:center;
  padding:150px 0 90px;overflow:hidden;
}
.hero-glow{
  position:absolute;right:-8%;top:14%;width:820px;max-width:105%;
  opacity:.75;pointer-events:none;z-index:0;
}
.hero-robot{
  position:absolute;right:4%;top:50%;transform:translateY(-50%);
  width:330px;z-index:1;pointer-events:none;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.6));
  animation:float 6s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translateY(-50%)}50%{transform:translateY(-56%)}}
.hero .wrap{position:relative;z-index:2;width:100%;flex:1 1 auto}
.eyebrow{
  color:var(--or);font-size:13px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;margin-bottom:22px;
}
.hero h1{
  font-size:clamp(38px,5.2vw,64px);font-weight:800;line-height:1.14;
  letter-spacing:-.035em;margin-bottom:24px;max-width:14.5em;
}
.hero h1 em{font-style:normal;color:var(--or)}
.hero p.sub{
  font-size:clamp(15px,1.9vw,20px);color:var(--tx-2);
  max-width:44ch;margin-bottom:38px;line-height:1.6;
}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 26px;border-radius:999px;font-size:14.5px;font-weight:700;
  transition:.2s;border:1px solid transparent;cursor:pointer;font-family:var(--ff);
}
.btn-p{background:var(--or);color:#fff}
.btn-p:hover{background:var(--or-2);transform:translateY(-2px)}
.btn-s{border-color:var(--line-2);color:var(--tx)}
.btn-s:hover{border-color:var(--or);color:var(--or)}

/* ---------- sections ---------- */
section{padding:96px 0;position:relative}
section.alt{background:var(--bg-2)}
.sec-tag{
  color:var(--or);font-size:12px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:16px;
}
h2.sec{
  font-size:clamp(27px,3.9vw,44px);font-weight:800;line-height:1.26;
  letter-spacing:-.03em;margin-bottom:16px;max-width:28ch;
}
h2.sec em{font-style:normal;color:var(--or)}
p.lead{font-size:clamp(14.5px,1.6vw,17.5px);color:var(--tx-2);max-width:60ch;line-height:1.68}
.sec-head{margin-bottom:52px}

/* ---------- grids & cards ---------- */
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:30px;transition:.24s;
}
.card:hover{border-color:rgba(242,101,34,.4);background:var(--card-2);transform:translateY(-3px)}
.card .num{
  color:var(--or);font-size:12px;font-weight:800;letter-spacing:.1em;margin-bottom:14px;
}
.card h3{font-size:18.5px;font-weight:700;margin-bottom:10px;letter-spacing:-.02em;line-height:1.4}
.card p{font-size:14.5px;color:var(--tx-2);line-height:1.66}

/* stat cards */
.stat{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:34px 26px;text-align:center;transition:.24s;
}
.stat:hover{border-color:rgba(242,101,34,.45);transform:translateY(-3px)}
.stat .v{
  font-size:clamp(32px,4.4vw,50px);font-weight:800;color:var(--or);
  letter-spacing:-.04em;line-height:1.05;margin-bottom:10px;
}
.stat .l{font-size:13.5px;color:var(--tx-2);font-weight:500}

.pill{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--card);border:1px solid var(--line);border-radius:26px;
  padding:12px 24px;font-size:14px;color:var(--tx-2);font-weight:500;
  line-height:1.65;max-width:100%;text-align:left;
}
@media (max-width:640px){
  .pill{border-radius:18px;padding:14px 18px;font-size:13.5px;align-items:flex-start}
  .pill > .dot{margin-top:7px}
  .pill .dot{display:inline-block;vertical-align:middle;margin-right:8px}
}
.pill .dot{width:8px;height:8px;border-radius:50%;background:var(--or);flex:0 0 8px}

/* ---------- channel strip ---------- */
.chstrip{
  display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:center;
}
.ch{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  height:64px;width:132px;display:flex;align-items:center;justify-content:center;
  padding:14px 18px;transition:.24s;flex:0 0 auto;
}
.ch:hover{border-color:var(--line-2);background:var(--card-2)}
.ch img{
  max-height:23px;width:auto;object-fit:contain;
  filter:brightness(0) invert(1);opacity:.58;transition:.24s;
}
.ch img.sq{max-height:29px}
.ch:hover img{filter:none;opacity:1}
.ch.more{color:var(--or);font-weight:800;font-size:16px}

/* ---------- flow / steps ---------- */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:stretch}
.flow.flow3{grid-template-columns:repeat(3,1fr)}
.flow.flow5{grid-template-columns:repeat(5,1fr)}
.step .tagb{
  display:inline-block;margin-top:14px;padding:4px 10px;border-radius:999px;
  font-size:10.5px;font-weight:800;letter-spacing:.07em;
  background:var(--or-dim);color:var(--or);border:1px solid rgba(242,101,34,.28);
}
.step .tagb.b2c{background:rgba(255,255,255,.06);color:var(--tx-2);border-color:var(--line-2)}
.step{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:28px 24px;position:relative;transition:.24s;
}
.step:hover{border-color:rgba(242,101,34,.4);transform:translateY(-3px)}
.step .idx{
  width:34px;height:34px;border-radius:50%;background:var(--or-dim);color:var(--or);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;
  margin-bottom:16px;border:1px solid rgba(242,101,34,.3);
}
.step h4{font-size:16.5px;font-weight:700;margin-bottom:8px;letter-spacing:-.015em;line-height:1.42}
.step p{font-size:13.8px;color:var(--tx-2);line-height:1.62}

/* ---------- table ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:14.5px}
.tbl th,.tbl td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--line)}
.tbl th{
  color:var(--tx-3);font-size:11.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;
}
.tbl td{color:var(--tx-2)}
.tbl tr.hi td{color:var(--tx);font-weight:600}
.tbl tr.hi{background:rgba(242,101,34,.05)}
.tbl td strong{color:var(--or);font-weight:800}
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}

/* ---------- chart ---------- */
.chart{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:30px 26px 22px;
}
.chart svg{width:100%;height:auto;display:block;overflow:visible}

/* ---------- brand block ---------- */
.brand{
  background:var(--card);border:1px solid var(--line);border-radius:22px;
  padding:40px;transition:.24s;position:relative;overflow:hidden;
}
.brand:hover{border-color:rgba(242,101,34,.4)}
.brand .tagx{
  display:inline-block;background:var(--or-dim);color:var(--or);
  font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:6px 13px;border-radius:999px;margin-bottom:18px;border:1px solid rgba(242,101,34,.25);
}
.brand h3{font-size:clamp(23px,3vw,31px);font-weight:800;letter-spacing:-.03em;margin-bottom:6px}
.brand .sub{color:var(--or);font-size:14px;font-weight:600;margin-bottom:16px}
.brand p{color:var(--tx-2);font-size:15px;line-height:1.7;margin-bottom:22px}
.kv{display:flex;flex-wrap:wrap;gap:10px}
.kv > span{
  background:var(--bg-2);border:1px solid var(--line);border-radius:10px;
  padding:9px 15px;font-size:13px;color:var(--tx-2);font-weight:500;
}
.kv > span b{color:var(--tx);font-weight:700}

/* ---------- CTA band ---------- */
.band{
  background:linear-gradient(135deg,#141418 0%,#1B1218 100%);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  text-align:center;padding:92px 0;
}
.band h2{
  font-size:clamp(26px,3.9vw,42px);font-weight:800;letter-spacing:-.03em;
  line-height:1.3;margin:0 auto 18px;max-width:24ch;
}
.band p{color:var(--tx-2);font-size:16px;margin-bottom:32px}
.band .hero-cta{justify-content:center}

/* ---------- footer ---------- */
footer{padding:56px 0 44px;border-top:1px solid var(--line);background:var(--bg)}
.foot{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;align-items:flex-start}
.foot img{height:17px;margin-bottom:14px;opacity:.85}
.foot p{font-size:13px;color:var(--tx-3);line-height:1.8}
.foot a:hover{color:var(--or)}
.foot-links{display:flex;gap:26px;font-size:13.5px;color:var(--tx-2);flex-wrap:wrap}
.foot-links a:hover{color:var(--or)}

/* ---------- page hero (subpages) ---------- */
.phero{padding:146px 0 68px;position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.phero .hero-glow{right:-14%;top:-24%;width:640px;opacity:.5}
.phero .wrap{position:relative;z-index:2}
.phero h1{
  font-size:clamp(32px,5vw,56px);font-weight:800;letter-spacing:-.035em;
  line-height:1.16;margin-bottom:18px;max-width:15em;
}
.phero h1 em{font-style:normal;color:var(--or)}
.phero p{font-size:clamp(15px,1.8vw,18.5px);color:var(--tx-2);max-width:58ch;line-height:1.66}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media(max-width:960px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(2,1fr)}
  .flow,.flow.flow3{grid-template-columns:repeat(2,1fr)}
  .flow.flow5{grid-template-columns:repeat(3,1fr)}
  .hero-robot{width:240px;opacity:.5;right:-4%}
}
@media(max-width:760px){
  .wrap,.nav-in{padding:0 20px}
  section{padding:68px 0}
  .burger{display:block}
  .nav-links{
    position:fixed;top:66px;left:0;right:0;
    background:#0A0A0C;
    flex-direction:column;align-items:flex-start;gap:0;
    padding:8px 20px 24px;border-bottom:1px solid var(--line);
    display:none;margin-left:0;max-height:calc(100vh - 66px);overflow-y:auto;
    box-shadow:0 30px 60px rgba(0,0,0,.6);
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:13px 0;width:100%;border-bottom:1px solid var(--line);font-size:15px}
  .nav-links .lang{margin-top:16px}
  /* robot-led hero: character on top, everything centered */
  .hero{
    min-height:auto;padding:88px 0 54px;text-align:center;
    flex-direction:column;align-items:stretch;
  }
  .hero .wrap{text-align:center}
  .hero-robot{
    order:-1;position:static;width:226px;
    margin:0 auto 26px;opacity:1;
    filter:drop-shadow(0 24px 44px rgba(0,0,0,.6));
    animation:floatm 5.4s ease-in-out infinite;
  }
  @keyframes floatm{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
  .hero h1{margin-left:auto;margin-right:auto}
  .hero p.sub{margin-left:auto;margin-right:auto}
  .hero-cta{justify-content:center}
  .rotline{justify-content:center}
  .hero .hero-glow{
    right:auto;left:50%;top:4%;bottom:auto;width:560px;
    transform:translateX(-50%);opacity:.72;
  }
  @keyframes float{0%,100%{transform:none}50%{transform:none}}
  .hero h1{max-width:none}
  .g2,.g3,.g4,.flow,.flow.flow3,.flow.flow5{grid-template-columns:1fr}
  .card,.brand{padding:26px}
  .chstrip .ch{width:calc(33.333% - 10px);height:56px}
  .marquee-track .ch{width:112px;height:56px}
  .phero{padding:118px 0 52px}
  .foot{flex-direction:column;gap:24px}
}

/* ============================================================
   PREMIUM MOTION LAYER
   ============================================================ */

/* ---------- scroll progress ---------- */
.progress{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:200;
  background:linear-gradient(90deg,var(--or),var(--or-2));
  transform:scaleX(0);transform-origin:0 50%;
  will-change:transform;pointer-events:none;
}

/* ---------- aurora blobs (hero + page hero) ---------- */
.aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.aurora i{
  position:absolute;display:block;border-radius:50%;
  filter:blur(90px);opacity:.34;will-change:transform;
}
.aurora i:nth-child(1){
  width:620px;height:620px;right:2%;top:-14%;
  background:radial-gradient(circle,#F26522 0%,rgba(242,101,34,0) 68%);
  animation:drift1 26s ease-in-out infinite;
}
.aurora i:nth-child(2){
  width:520px;height:520px;right:26%;top:24%;
  background:radial-gradient(circle,#FF8347 0%,rgba(255,131,71,0) 66%);
  animation:drift2 34s ease-in-out infinite;opacity:.2;
}
.aurora i:nth-child(3){
  width:460px;height:460px;left:-8%;bottom:-16%;
  background:radial-gradient(circle,#7A3BE0 0%,rgba(122,59,224,0) 70%);
  animation:drift3 30s ease-in-out infinite;opacity:.14;
}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-70px,52px) scale(1.12)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(84px,-46px) scale(.9)}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(60px,-40px) scale(1.15)}}

/* ---------- fine grain ---------- */
body::after{
  content:'';position:fixed;inset:0;z-index:150;pointer-events:none;opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- channel marquee ---------- */
.marquee{
  overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.marquee-track{display:flex;width:max-content;animation:mq 38s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track .ch{margin-right:14px;flex:0 0 auto}
@keyframes mq{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.marquee-note{
  text-align:center;margin-top:26px;font-size:13.5px;color:var(--tx-3);
}
.marquee-note b{color:var(--or);font-weight:800}

/* ---------- tilt ---------- */
.tilt{transform-style:preserve-3d;will-change:transform}
.tilt .sheen{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity .3s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.07),transparent 42%);
}
.tilt:hover .sheen{opacity:1}
.card,.step,.brand,.stat{position:relative;overflow:hidden}

/* ---------- counter ---------- */
.stat .v{font-variant-numeric:tabular-nums}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .aurora i,.marquee-track{animation:none!important}
  .progress{display:none}
  .hero-robot{animation:none!important}
  .rv{opacity:1!important;transform:none!important;transition:none!important}
}

/* ---------- product screenshots ---------- */
.shot{
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  overflow:hidden;transition:.24s;
}
.shot:hover{border-color:rgba(242,101,34,.4)}
.shot .bar{
  height:34px;background:#1F1F26;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:6px;padding:0 14px;
}
.shot .bar i{width:9px;height:9px;border-radius:50%;background:#3A3A44;display:block}
.shot .bar span{
  margin-left:10px;font-size:11px;color:var(--tx-3);font-weight:600;letter-spacing:.02em;
}
.shot img{width:100%;height:auto;display:block;background:#EEF0F3}
.shot figcaption{
  padding:16px 20px 20px;font-size:13.5px;color:var(--tx-2);line-height:1.6;
  border-top:1px solid var(--line);
}
.shot figcaption b{color:var(--tx);font-weight:700}
.shot-note{margin-top:22px;font-size:12.5px;color:var(--tx-3);line-height:1.7}
.shot.mock{border-style:dashed;border-color:rgba(255,255,255,.18)}
.shot.mock .bar span{color:var(--or)}
.shot.mock figcaption{background:rgba(242,101,34,.04)}

/* ============================================================
   KINETIC LAYER — home
   ============================================================ */

/* ---------- rotating material words ---------- */
.rotline{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  margin:0 0 26px;font-size:clamp(17px,2.3vw,26px);font-weight:700;
  letter-spacing:-.025em;
}
.rotline .lab{color:var(--tx-3);font-size:clamp(12px,1.3vw,14px);font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.rot{display:none;position:relative;min-width:7.5em}
html[lang="ko"] .rot[data-ko],html[lang="en"] .rot[data-en]{display:inline-grid}
.rot > i{
  grid-area:1/1;font-style:normal;color:var(--or);opacity:0;
  transform:translateY(16px);animation:rotcycle 8.4s cubic-bezier(.2,.7,.2,1) infinite;
  white-space:nowrap;
}
.rot > i:nth-child(2){animation-delay:2.8s}
.rot > i:nth-child(3){animation-delay:5.6s}
@keyframes rotcycle{
  0%{opacity:0;transform:translateY(16px)}
  4%,29%{opacity:1;transform:none}
  33%,100%{opacity:0;transform:translateY(-16px)}
}

/* ---------- value-chain pipeline ---------- */
.pipewrap{position:relative}
.piperail{
  position:relative;height:34px;margin:0 0 16px;
}
.piperail::before{
  content:'';position:absolute;left:0;right:0;top:16px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,rgba(242,101,34,.10),rgba(242,101,34,.30) 20%,rgba(242,101,34,.30) 80%,rgba(242,101,34,.10));
}
.piperail .run{
  position:absolute;top:12px;left:0;width:110px;height:10px;border-radius:10px;
  background:linear-gradient(90deg,rgba(242,101,34,0),var(--or) 50%,rgba(242,101,34,0));
  filter:blur(2px);animation:railrun 5.6s linear infinite;
}
@keyframes railrun{from{left:-9%}to{left:100%}}
.piperail i{
  position:absolute;top:11px;width:12px;height:12px;margin-left:-6px;border-radius:50%;
  background:var(--bg);border:2px solid rgba(242,101,34,.55);display:block;
}
.piperail i:nth-child(2){left:10%}
.piperail i:nth-child(3){left:30%}
.piperail i:nth-child(4){left:50%}
.piperail i:nth-child(5){left:70%}
.piperail i:nth-child(6){left:90%}
.piperail i::after{
  content:'';position:absolute;inset:-5px;border-radius:50%;
  border:1px solid rgba(242,101,34,.55);opacity:0;animation:idxping 5.6s ease-out infinite;
}
.piperail i:nth-child(2)::after{animation-delay:.35s}
.piperail i:nth-child(3)::after{animation-delay:1.05s}
.piperail i:nth-child(4)::after{animation-delay:1.75s}
.piperail i:nth-child(5)::after{animation-delay:2.45s}
.piperail i:nth-child(6)::after{animation-delay:3.15s}
@keyframes idxping{
  0%{opacity:0;transform:scale(.6)}
  4%{opacity:1;transform:scale(1)}
  16%{opacity:0;transform:scale(1.9)}
  100%{opacity:0;transform:scale(1.9)}
}

/* ---------- leverage bars ---------- */
.lev{display:grid;grid-template-columns:1fr;gap:22px;margin-top:8px}
.levrow{display:flex;align-items:center;gap:18px}
.levrow .k{
  width:88px;flex:0 0 88px;font-size:13px;font-weight:700;color:var(--tx-2);
}
.levbar{
  flex:1;height:38px;border-radius:10px;background:rgba(255,255,255,.05);
  border:1px solid var(--line);overflow:hidden;position:relative;
}
.levbar i{
  display:block;height:100%;width:0;border-radius:9px;
  transition:width 1.5s cubic-bezier(.2,.8,.2,1);
}
.levbar.rev i{background:linear-gradient(90deg,#8A3A12,var(--or))}
.levbar.head i{background:rgba(255,255,255,.14)}
.levrow .v{
  width:132px;flex:0 0 132px;text-align:right;font-size:16.5px;font-weight:800;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.levrow .v.or{color:var(--or)}
.lev.in .levbar.rev i{width:100%}
.lev.in .levbar.head i{width:12%}
.levnote{margin-top:20px;font-size:13.5px;color:var(--tx-3)}
.levnote b{color:var(--tx-2);font-weight:700}

@media(max-width:760px){
  .piperail{display:none}
  .levrow .k{width:64px;flex:0 0 64px;font-size:12px}
  .levrow .v{width:96px;flex:0 0 96px;font-size:14px}
}
@media(prefers-reduced-motion:reduce){
  .rot > i,.piperail .run,.piperail i::after{animation:none!important}
  .rot > i:first-child{opacity:1;transform:none}
  .rot > i:not(:first-child){display:none}
  .levbar i{transition:none}
}

/* ---------- lean landing ---------- */
.hero.hero-big{min-height:100vh;padding:150px 0 110px}
.hero.hero-big h1{font-size:clamp(42px,7vw,86px);margin-bottom:26px}
.hero.hero-big p.sub{max-width:38ch;font-size:clamp(15px,1.7vw,19px);margin-bottom:36px}
.rotline.big{font-size:clamp(20px,3vw,34px);margin:0 0 30px}
.rotline.big .rot{min-width:8.5em}
.scrollcue{
  position:absolute;left:50%;bottom:34px;transform:translateX(-50%);
  width:22px;height:34px;border:1.5px solid rgba(255,255,255,.22);border-radius:12px;z-index:3;
}
.scrollcue span{
  position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;
  background:var(--or);animation:cue 1.9s ease-in-out infinite;
}
@keyframes cue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(12px)}}
section.tight{padding:64px 0}
.sec-head.slim{margin-bottom:38px}
.sec-head.slim h2.sec{margin-bottom:0}
.flow.lean .step{padding:24px 20px}
.flow.lean .step h4{font-size:16px;margin-bottom:0}
.flow.lean .step .tagb{margin-top:12px}
.morelink{margin-top:34px;text-align:center}
.morelink a{
  display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:700;color:var(--tx-2);
  border-bottom:1px solid var(--line-2);padding-bottom:5px;transition:.2s;
}
.morelink a::after{content:'→';transition:transform .2s}
.morelink a:hover{color:var(--or);border-color:var(--or)}
.morelink a:hover::after{transform:translateX(4px)}
a.card.bcard{display:block}
a.card.bcard h3{font-size:17px}
a.card.bcard p{font-size:13.5px}
@media(max-width:760px){
  .hero.hero-big{min-height:auto;padding:108px 0 52px}
  .scrollcue{display:none}
  .rotline.big{font-size:clamp(18px,5.5vw,24px)}
  .rotline.big .rot{min-width:6.2em}
  .rot > i{text-align:center}
}
@media(prefers-reduced-motion:reduce){.scrollcue span{animation:none}}

/* ---------- mobile hero polish ---------- */
@media(max-width:760px){
  .hero.hero-big h1{font-size:clamp(30px,8.4vw,40px);line-height:1.18;margin-bottom:18px}
  .hero.hero-big p.sub{font-size:15px;margin-bottom:28px;line-height:1.62}
  .rotline.big{margin:0 0 22px;gap:10px}
  .hero .eyebrow{margin-bottom:16px;font-size:11.5px}
  .hero-cta .btn{padding:12px 22px;font-size:14px}
}
@media(max-width:400px){
  .hero.hero-big h1{font-size:29px}
  .hero-robot{width:min(58vw,214px)}
}

/* desktop: give the robot more presence */
@media(min-width:761px){
  .hero.hero-big .hero-robot{width:clamp(300px,27vw,420px);right:2%}
  .hero.hero-big h1{font-size:clamp(40px,4.6vw,62px)}
  .hero.hero-big .hero-glow{width:900px;right:-10%}
}
@media(prefers-reduced-motion:reduce){.hero-robot{animation:none!important}}

/* ============================================================
   MEDIA-FIRST LAYER
   ============================================================ */

/* ---------- video hero ---------- */
.vhero{position:relative;min-height:96vh;display:flex;align-items:center;padding:150px 0 110px;overflow:hidden}
.vhero .vbg{position:absolute;inset:0;z-index:0}
.vhero .vbg video,.vhero .vbg img{width:100%;height:100%;object-fit:cover;display:block}
.vhero .shade{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(10,10,12,.62) 0%,rgba(10,10,12,.38) 42%,rgba(10,10,12,.86) 82%,var(--bg) 100%)}
.vhero .wrap{position:relative;z-index:3}
.vhero .hero-robot{z-index:2}

/* ---------- full-bleed media band ---------- */
.mband{position:relative;overflow:hidden;padding:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mband .mbg{position:absolute;inset:0}
.mband .mbg img,.mband .mbg video{width:100%;height:100%;object-fit:cover;display:block;
  animation:kenburns 18s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.08)}}
.mband .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,12,.72),rgba(10,10,12,.46) 50%,rgba(10,10,12,.78))}
.mband .wrap{position:relative;z-index:2;padding-top:120px;padding-bottom:120px}
.mband .sec-tag{margin-bottom:14px}
.mband h2{font-size:clamp(28px,4.4vw,52px);font-weight:800;letter-spacing:-.033em;line-height:1.2;max-width:22ch;margin-bottom:14px}
.mband h2 em{font-style:normal;color:var(--or)}
.mband p{font-size:clamp(15px,1.7vw,18px);color:rgba(244,244,246,.86);max-width:52ch;line-height:1.62}
.mband .kv{margin-top:26px}
.mband .kv > span{background:rgba(10,10,12,.55);backdrop-filter:blur(8px);border-color:rgba(255,255,255,.16)}
.mband.center{text-align:center}
.mband.center h2,.mband.center p{margin-left:auto;margin-right:auto}
.mband.center .kv{justify-content:center}

/* ---------- image cards ---------- */
.icard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  transition:.24s;display:block;position:relative}
.icard:hover{border-color:rgba(242,101,34,.4);transform:translateY(-4px)}
.icard .ph{position:relative;overflow:hidden;aspect-ratio:4/3;background:#131317}
.icard .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.icard:hover .ph img{transform:scale(1.06)}
.icard .ph .tagx{position:absolute;left:14px;top:14px;z-index:2;
  background:rgba(10,10,12,.62);backdrop-filter:blur(8px);color:#fff;
  font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.18)}
.icard .ph::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(10,10,12,.55))}
.icard .bd{padding:22px 24px 26px}
.icard .bd h3{font-size:19px;font-weight:800;letter-spacing:-.02em;margin-bottom:6px}
.icard .bd .sub{color:var(--or);font-size:13px;font-weight:700;margin-bottom:10px}
.icard .bd p{font-size:14px;color:var(--tx-2);line-height:1.62}
.icard .bd .kv{margin-top:14px}
.icard .bd .kv > span{padding:7px 12px;font-size:12.5px}
.icard.wide .ph{aspect-ratio:16/9}

/* ---------- split (media + text) ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.split .media{position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--line);background:#131317}
.split .media img,.split .media video{width:100%;height:auto;display:block}
.split .media .cap{position:absolute;left:16px;bottom:14px;z-index:2;
  background:rgba(10,10,12,.6);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.14);
  color:var(--tx-2);font-size:12px;font-weight:600;padding:7px 13px;border-radius:999px}
.split .media::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 60%,rgba(10,10,12,.38))}
.split.rev-order .media{order:2}
.split h2.sec{margin-bottom:14px}
.split .blist{margin-top:22px;display:grid;gap:12px}
.split .blist .bl{display:flex;gap:13px;align-items:flex-start;font-size:14.5px;color:var(--tx-2);line-height:1.6}
.split .blist .bl::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--or);flex:0 0 7px;margin-top:8px}
.split .blist .bl b{color:var(--tx);font-weight:700}

/* readability: bigger body, shorter blocks */
p.lead{font-size:clamp(15px,1.7vw,18px);max-width:56ch}
.card p{font-size:14.5px}

@media(max-width:960px){
  .split{grid-template-columns:1fr;gap:28px}
  .split.rev-order .media{order:0}
  .mband .wrap{padding-top:88px;padding-bottom:88px}
}
@media(max-width:760px){
  .vhero{min-height:auto;padding:110px 0 64px}
  .vhero .hero-robot{position:static;order:-1;width:200px;margin:0 auto 24px}
  .mband h2{max-width:none}
  .icard .ph{aspect-ratio:16/10}
}
@media(prefers-reduced-motion:reduce){
  .mband .mbg img,.mband .mbg video{animation:none}
  .icard:hover .ph img{transform:none}
}

/* ---------- media brand blocks ---------- */
.brand.bmedia{padding:0;display:grid;grid-template-columns:400px 1fr;overflow:hidden}
.brand.bmedia .bph{position:relative;min-height:280px;background:#131317}
.brand.bmedia .bph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.brand.bmedia:hover .bph img{transform:scale(1.05)}
.brand.bmedia .bph::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 60%,rgba(23,23,28,.5))}
.brand.bmedia .bph .tagx{position:absolute;left:18px;top:18px;margin:0;z-index:2;
  background:rgba(10,10,12,.62);backdrop-filter:blur(8px);color:#fff;border-color:rgba(255,255,255,.18)}
.brand.bmedia .bbd{padding:36px 40px}
@media(max-width:960px){
  .brand.bmedia{grid-template-columns:1fr}
  .brand.bmedia .bph{min-height:0;aspect-ratio:16/8;position:relative}
  .brand.bmedia .bph::after{background:linear-gradient(180deg,transparent 55%,rgba(23,23,28,.6))}
  .brand.bmedia .bbd{padding:26px}
}

/* ---------- logo tiles (light panel for dark logos) ---------- */
.ph.logo{background:#F4F3EF;display:flex;align-items:center;justify-content:center;padding:12%}
.ph.logo img{width:76%;height:auto;max-height:64%;object-fit:contain}
.ph.logo::after{display:none}
.icard:hover .ph.logo img{transform:scale(1.04)}
.brand.bmedia .bph.logo{background:#F4F3EF;display:flex;align-items:center;justify-content:center;padding:40px}
.brand.bmedia .bph.logo img{position:static;width:68%;height:auto;max-height:56%;object-fit:contain}
.brand.bmedia .bph.logo::after{display:none}
.brand.bmedia:hover .bph.logo img{transform:scale(1.03)}

/* 회원가입 아이콘 (네비) */
.nav-join{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px 0 9px;border:1px solid var(--line-2);
  border-radius:999px;color:var(--tx-2);font-size:12.5px;font-weight:700;white-space:nowrap;transition:.18s;flex:0 0 auto}
.nav-join svg{width:17px;height:17px;flex:0 0 17px}
.nav-join:hover,.nav-join.on{border-color:var(--or);color:var(--or)}
@media(max-width:760px){
  .nav-join{order:1;margin-left:auto;padding:0;width:36px;height:36px;justify-content:center;border-radius:50%}
  .nav-join span{display:none!important}
  .burger{margin-left:0;order:2}
}
.nav-links a.nav-test{color:var(--or-2)}
.nav-links a.nav-test:hover{color:var(--or)}

/* 우주데이터랩 드롭다운 */
.nav-dd{position:relative}
.nav-dd .caret{display:inline-block;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-left:7px;vertical-align:3px;opacity:.7}
.nav-dd .dd{position:absolute;top:100%;left:-14px;padding-top:12px;display:none;z-index:120}
.nav-dd .dd::before{content:'';position:absolute;top:12px;left:0;right:0;bottom:0;background:rgba(16,16,20,.97);backdrop-filter:blur(16px);border:1px solid var(--line-2);border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.nav-dd .dd a{position:relative;display:block;padding:12px 16px;min-width:230px;border-radius:10px;color:var(--tx);font-weight:700;font-size:14px;white-space:nowrap;margin:0 6px}
.nav-dd .dd a:first-child{margin-top:6px}
.nav-dd .dd a:hover{background:var(--or-dim);color:var(--or)}
.nav-dd .dd a small{display:block;font-size:12px;font-weight:500;color:var(--tx-3);margin-top:2px}
.nav-dd .dd a.all{font-size:12.5px;color:var(--or);border-top:1px solid var(--line);border-radius:0;margin:4px 6px 6px;padding:11px 16px 9px;font-weight:600}
.nav-dd:hover .dd,.nav-dd:focus-within .dd{display:block}
@media(max-width:760px){
  .nav-dd{width:100%}
  .nav-dd > a{display:block;width:100%}
  .nav-dd .caret{display:none}
  .nav-dd .dd{position:static;display:block;padding:0}
  .nav-dd .dd::before{display:none}
  .nav-dd .dd a{min-width:0;margin:0;padding:11px 0 11px 16px;border-radius:0;border-bottom:1px solid var(--line);font-size:14px;color:var(--tx-2);white-space:normal}
  .nav-dd .dd a:first-child{margin-top:0}
  .nav-dd .dd a small{display:none}
  .nav-dd .dd a.all{display:none}
}

/* ---------- typography: line breaks & emphasis ---------- */
h1,h2,h3,h4{text-wrap:balance}
p,li,.lead,.stat .l,.card p,.step p{text-wrap:pretty}
h1 [data-ko] em,h2 [data-ko] em,h3 [data-ko] em{white-space:nowrap}
h1 [data-ko] em.w,h2 [data-ko] em.w,h3 [data-ko] em.w{white-space:normal}
br.m{display:none}
.dsh{display:inline}
@media(max-width:640px){
  br.d{display:none}
  br.m{display:inline}
  .dsh{display:none}
  .hero h1{font-size:34px;max-width:none}
  .phero h1{font-size:30px;max-width:none}
  h2.sec{max-width:none}
  .band h2{max-width:none}
}