/* PIONEER LABS — company site. Dark, type-led, one accent (the blue dot in the logo). */

:root {
  --bg: #08090b;
  --bg-2: #0e1014;
  --surface: #13161b;
  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.16);
  --ink: #f3f3f1;
  --ink-2: #a3a7ae;
  --ink-3: #6b7078;
  --accent: #2f7dff;      /* logo dot blue, lifted for dark backgrounds */
  --accent-2: #8fc2ff;
  --wrap: 1280px;
  --gut: clamp(20px, 4vw, 48px);
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: -0.01em;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }

/* ---------- small type ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-2);
}
.eyebrow .num { color: var(--accent-2); letter-spacing: 0.1em; }
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 52px; padding: 0 26px; border-radius: 999px;
  background: var(--ink); color: var(--bg);
  font: inherit; font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
  border: 1px solid var(--ink); cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn:active { transform: scale(0.98); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.06); border-color: var(--ink); color: var(--ink); }
.btn--small { height: 40px; padding: 0 18px; font-size: 14px; }
.btn--block { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: progress; }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50;
  transition: background 0.3s, border-color 0.3s, backdrop-filter 0.3s;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled { background: rgba(8, 9, 11, 0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-color: var(--line); }
.nav__inner { display: flex; align-items: center; gap: 24px; height: 72px; }
.nav__logo img { height: 22px; width: auto; }
.nav__links { display: flex; gap: 30px; margin-left: auto; font-size: 14px; color: var(--ink-2); }
.nav__links a { transition: color 0.2s; }
.nav__links a:hover { color: var(--ink); }
.nav__end { display: flex; align-items: center; gap: 14px; }
.lang { display: flex; padding: 3px; border: 1px solid var(--line-2); border-radius: 999px; }
.lang button {
  font: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  padding: 5px 10px; border: 0; border-radius: 999px; background: none; color: var(--ink-3); cursor: pointer;
}
.lang button[aria-pressed='true'] { background: var(--ink); color: var(--bg); }

/* ---------- hero ---------- */
.hero {
  position: relative; min-height: 100svh; overflow: hidden;
  display: flex; align-items: flex-end;
  padding: 140px 0 clamp(48px, 8vh, 96px);
  isolation: isolate;
}
/* --cx / --cy: where the boundary and the horizon cross. js/site.js eases it toward the mouse (or lets it wander on touch screens). */
@property --cx { syntax: '<percentage>'; inherits: true; initial-value: 72%; }
@property --cy { syntax: '<percentage>'; inherits: true; initial-value: 31%; }
.hero__light {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; transform: translate3d(0, var(--py, 0), 0);
  --cx: 72%; --cy: 31%;
}

/* aurora: soft bands of light. Each band drifts, leans a little and "blooms": it spreads out while it
   brightens, then gathers in and dims. The loops have lengths that do not line up, so the light keeps
   shifting from one part of the sky to another and the picture never quite repeats. */
.hero__light { animation: fade-in 2.6s var(--ease) both; }
.beam {
  position: absolute; border-radius: 50%; filter: blur(60px); opacity: var(--o); will-change: transform;
  animation:
    drift var(--d1) ease-in-out var(--k1) infinite alternate,
    turn var(--d2) ease-in-out var(--k2) infinite alternate,
    bloom var(--d3) ease-in-out var(--k3) infinite alternate;
}
.beam--1 { width: 95vw; height: 30vw; right: -26vw; top: -6vh; background: radial-gradient(closest-side, rgba(47, 125, 255, 1), rgba(47, 125, 255, 0) 72%); transform: rotate(-28deg); --o: 0.95;
  --tx: -3vw; --ty: 3vh; --rot: 1.5deg; --sx: 1.3; --sy: 1.45; --d1: 41s; --d2: 29s; --d3: 17s; --k1: -7s; --k2: -13s; --k3: -4s; }
.beam--2 { width: 70vw; height: 4.5vw; right: -10vw; top: 15vh; filter: blur(26px); background: radial-gradient(closest-side, rgba(220, 236, 255, 0.95), rgba(120, 180, 255, 0) 75%); transform: rotate(-28deg); --o: 0.75;
  --tx: -4vw; --ty: 2vh; --rot: -1deg; --sx: 1.25; --sy: 2.2; --d1: 31s; --d2: 43s; --d3: 13s; --k1: -21s; --k2: -5s; --k3: -11s; }
.beam--3 { width: 60vw; height: 30vw; left: -20vw; bottom: -14vw; background: radial-gradient(closest-side, rgba(40, 70, 160, 0.6), rgba(40, 70, 160, 0) 70%); --o: 0.75;
  --tx: 4vw; --ty: -3vh; --rot: 2deg; --sx: 1.4; --sy: 1.35; --d1: 53s; --d2: 37s; --d3: 23s; --k1: -30s; --k2: -9s; --k3: -17s; }
.beam--4 { width: 80vw; height: 12vw; right: -18vw; top: 26vh; filter: blur(48px); mix-blend-mode: screen; background: radial-gradient(closest-side, rgba(56, 198, 255, 0.75), rgba(56, 198, 255, 0) 72%); transform: rotate(-22deg); --o: 0.65;
  --tx: -5vw; --ty: 2.5vh; --rot: 1.5deg; --sx: 1.35; --sy: 1.9; --d1: 37s; --d2: 47s; --d3: 19s; --k1: -12s; --k2: -33s; --k3: -8s; }
.beam--5 { width: 70vw; height: 22vw; left: 8vw; top: -12vh; filter: blur(70px); mix-blend-mode: screen; background: radial-gradient(closest-side, rgba(106, 92, 255, 0.6), rgba(106, 92, 255, 0) 72%); transform: rotate(-14deg); --o: 0.55;
  --tx: 5vw; --ty: 3vh; --rot: 2deg; --sx: 1.3; --sy: 1.4; --d1: 47s; --d2: 31s; --d3: 29s; --k1: -19s; --k2: -26s; --k3: -3s; }
@keyframes drift {
  0% { translate: 0 0; }
  27% { translate: calc(var(--tx) * -0.5) calc(var(--ty) * 0.6); }
  64% { translate: calc(var(--tx) * 0.7) calc(var(--ty) * -0.4); }
  100% { translate: var(--tx) var(--ty); }
}
@keyframes turn { 0% { rotate: 0deg; } 41% { rotate: var(--rot); } 100% { rotate: calc(var(--rot) * -0.6); } }
@keyframes bloom {
  0% { scale: 0.88; opacity: calc(var(--o) * 0.4); }
  42% { scale: var(--sx) var(--sy); opacity: var(--o); }
  71% { scale: calc(var(--sx) * 1.06) calc(var(--sy) * 1.08); opacity: calc(var(--o) * 0.62); }
  100% { scale: 1 1.05; opacity: calc(var(--o) * 0.5); }
}
/* a soft glow around the crossing point that swells and fades, so light seems to spread from it */
.cross-glow {
  position: absolute; left: var(--cx); top: var(--cy); width: 46vw; height: 46vw; margin: -23vw 0 0 -23vw; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(110, 170, 255, 0.55), rgba(47, 125, 255, 0.18) 45%, rgba(47, 125, 255, 0) 72%);
  filter: blur(30px); mix-blend-mode: screen; --o: 0.9; --sx: 1.35; --sy: 1.35;
  animation: bloom 15s ease-in-out -6s infinite alternate;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
/* aurora curtain: faint vertical streaks that slide slowly while the curtain leans a little */
.curtain {
  position: absolute; left: 18vw; right: -12vw; top: -14vh; height: 78vh; opacity: 0.8; overflow: hidden;
  mix-blend-mode: screen; filter: blur(28px);
  -webkit-mask-image: radial-gradient(60% 55% at 62% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(60% 55% at 62% 40%, #000 20%, transparent 75%);
  transform-origin: 50% 0; animation: curtain 46s ease-in-out -11s infinite alternate, curtain-glow 21s ease-in-out -8s infinite alternate;
}
.curtain::before, .curtain::after {
  content: ''; position: absolute; inset: 0 -100% 0 0;
  background: repeating-linear-gradient(90deg, rgba(80, 150, 255, 0) 0, rgba(80, 150, 255, 0.5) 6vw, rgba(56, 198, 255, 0.12) 11vw, rgba(80, 150, 255, 0) 14vw, rgba(140, 120, 255, 0.28) 19vw, rgba(80, 150, 255, 0) 24vw, rgba(80, 150, 255, 0) 30vw);
  animation: shimmer 90s linear infinite;
}
.curtain::after { opacity: 0.35; background-size: 47vw 100%; background-position: 17vw 0; animation-duration: 131s; animation-direction: reverse; }
@keyframes curtain {
  0% { transform: skewX(-22deg) scaleY(1) translateX(0); }
  31% { transform: skewX(-18deg) scaleY(1.04) translateX(-1.5vw); }
  73% { transform: skewX(-24deg) scaleY(0.97) translateX(1vw); }
  100% { transform: skewX(-19deg) scaleY(1.02) translateX(-2.5vw); }
}
@keyframes curtain-glow { 0% { opacity: 0.25; } 45% { opacity: 0.95; } 100% { opacity: 0.5; } }
@keyframes shimmer { to { transform: translateX(-50%); } }

/* a boundary (vertical) and the horizon line that runs through it and on past the edge */
.edge {
  position: absolute; top: 0; bottom: 0; left: var(--cx); width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.14) 30%, rgba(255, 255, 255, 0.14) 70%, transparent);
  transform: scaleY(0); transform-origin: top; animation: grow-y 1.6s var(--ease) 0.3s forwards;
}
.horizon {
  position: absolute; left: 0; right: 0; top: 31%; height: 1px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.25) 30%, rgba(143, 194, 255, 0.9) 72%, rgba(47, 125, 255, 0.6) 88%, rgba(47, 125, 255, 0));
  transform: scaleX(0); transform-origin: left; animation: grow-x 2.2s var(--ease) 0.6s forwards;
}
.horizon__spark {
  position: absolute; top: -1px; left: 0; width: 160px; height: 3px; border-radius: 3px;
  background: linear-gradient(to right, transparent, #fff, transparent);
  filter: blur(0.5px); box-shadow: 0 0 18px 2px rgba(143, 194, 255, 0.8);
  animation: spark 5.5s cubic-bezier(0.5, 0, 0.3, 1) 2.6s infinite; opacity: 0;
}
.hero__light .horizon { top: var(--cy); }
.cross {
  position: absolute; left: var(--cx); top: var(--cy); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 6px rgba(47, 125, 255, 0.18), 0 0 30px 8px rgba(47, 125, 255, 0.7);
  opacity: 0; animation: pop 0.8s var(--ease) 2.2s forwards, pulse 3.2s ease-in-out 3s infinite;
}
@keyframes grow-x { to { transform: scaleX(1); } }
@keyframes grow-y { to { transform: scaleY(1); } }
@keyframes spark { 0% { left: -10%; opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { left: 105%; opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: scale(0.2); } to { opacity: 1; transform: scale(1); } }
@keyframes pulse { 50% { box-shadow: 0 0 0 12px rgba(47, 125, 255, 0.06), 0 0 44px 12px rgba(47, 125, 255, 0.55); } }

.grain {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero__inner { position: relative; }
.hero__eyebrow { opacity: 0; animation: fade-up 1s var(--ease) 0.2s forwards; }
.hero__title {
  margin: 22px 0 clamp(36px, 6vh, 64px);
  font-size: clamp(56px, 11.2vw, 160px); font-weight: 800; line-height: 0.92; letter-spacing: -0.045em;
}
.hero__title .line { display: block; overflow: hidden; padding-bottom: 0.04em; }
.hero__title .line > span { display: inline-block; transform: translateY(105%); animation: rise 1.2s var(--ease) forwards; }
.hero__title .line:nth-child(2) > span { animation-delay: 0.12s; }
.hero__title em { font-style: normal; color: var(--accent); }
@keyframes rise { to { transform: translateY(0); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.hero__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; opacity: 0; animation: fade-up 1s var(--ease) 0.7s forwards; }
.hero__lead { font-size: clamp(20px, 2vw, 26px); font-weight: 600; line-height: 1.45; letter-spacing: -0.025em; }
.hero__body { margin-top: 14px; color: var(--ink-2); font-size: 16px; }
.hero__cta { display: flex; gap: 10px; flex-wrap: wrap; }
.hero__scroll {
  position: absolute; left: 50%; bottom: 22px; width: 22px; height: 36px; margin-left: -11px;
  border: 1px solid var(--line-2); border-radius: 12px; opacity: 0; animation: fade-up 1s var(--ease) 1.4s forwards;
}
.hero__scroll span { position: absolute; left: 50%; top: 7px; width: 2px; height: 7px; margin-left: -1px; border-radius: 2px; background: var(--ink-2); animation: wheel 1.8s ease-in-out infinite; }
@keyframes wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(10px); opacity: 0; } 100% { opacity: 0; } }

/* ---------- running band ---------- */
.band { border-block: 1px solid var(--line); overflow: hidden; padding: 26px 0; }
.band__track { display: flex; align-items: center; gap: 40px; width: max-content; animation: marquee 36s linear infinite; }
.band span {
  font-size: clamp(40px, 6vw, 88px); font-weight: 700; letter-spacing: 0.01em; line-height: 1.1; white-space: nowrap;
  /* Outline only: draw a 2px stroke first, then fill with the page colour on top. The fill hides the inner half
     of the stroke and every line where a letter's own strokes cross (t, f, k…), leaving one clean contour. */
  color: var(--bg); -webkit-text-stroke: 2px rgba(255, 255, 255, 0.55); paint-order: stroke fill;
}
.band i { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); flex: none; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- sections ---------- */
section { position: relative; }
.about, .biz, .plat { padding: clamp(96px, 16vh, 180px) 0; }
.sec-head { display: grid; gap: 22px; margin-bottom: clamp(48px, 8vh, 88px); }
.sec-title { font-size: clamp(34px, 5vw, 68px); font-weight: 700; line-height: 1.12; letter-spacing: -0.04em; }
.sec-sub { color: var(--ink-2); font-size: clamp(16px, 1.4vw, 19px); }

/* about: the statement lights up word by word as it scrolls past */
.about__title {
  margin: 28px 0 clamp(48px, 8vh, 80px);
  font-size: clamp(40px, 7.4vw, 112px); font-weight: 700; line-height: 1.08; letter-spacing: -0.045em;
}
.about__title .w { opacity: 0.18; transition: opacity 0.35s linear; }
.about__title .w.on { opacity: 1; }
/* the path: a line of light draws itself as the section scrolls by, and a dot travels from the first
   paragraph to the second. --p (0–1) is set by js/site.js. */
.about { --g: clamp(24px, 6vw, 96px); --p: 0; }
.about__path { position: relative; height: 24px; margin-bottom: 26px; }
.about__line {
  position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.35), var(--accent-2) 55%, var(--accent) 90%, rgba(47, 125, 255, 0));
  transform: scaleX(var(--p)); transform-origin: left;
}
.about__node {
  position: absolute; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%;
  border: 1px solid var(--line-2); background: var(--bg); transition: border-color 0.5s, background 0.5s, box-shadow 0.5s;
}
.about__node.n1 { left: 0; }
.about__node.n2 { left: calc(50% + var(--g) / 2); }
.about__node.is-lit { border-color: var(--accent-2); background: var(--accent); box-shadow: 0 0 14px rgba(47, 125, 255, 0.8); }
.about__dot {
  position: absolute; top: 50%; left: calc(var(--p) * 100%); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 5px rgba(47, 125, 255, 0.2), 0 0 26px 6px rgba(47, 125, 255, 0.75);
  opacity: min(1, calc(var(--p) * 20));
}
.about__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--g); font-size: clamp(17px, 1.45vw, 20px); line-height: 1.7; }
.about__p { color: var(--ink-3); transition: color 0.8s var(--ease); }
.about__p.is-lit { color: var(--ink); }

/* business: numbered rows, a line of light sweeps under the row in focus */
.biz__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); }
.biz__item {
  position: relative; display: grid; grid-template-columns: 80px minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px; align-items: start;
  padding: clamp(28px, 4.5vh, 48px) 0; border-bottom: 1px solid var(--line-2);
}
.biz__item::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(to right, transparent, var(--accent-2) 40%, var(--accent) 80%, transparent);
  transform: scaleX(0); transform-origin: left; transition: transform 0.9s var(--ease);
}
.biz__item:hover::after { transform: scaleX(1); }
.biz__num { padding-top: 0.9em; font-size: 13px; font-weight: 600; letter-spacing: 0.12em; color: var(--accent-2); }
.biz__name { font-size: clamp(36px, 5.6vw, 84px); font-weight: 700; line-height: 1; letter-spacing: -0.045em; transition: transform 0.6s var(--ease), color 0.4s; }
.biz__item:hover .biz__name { transform: translateX(10px); }
.biz__text { padding-top: 0.4em; color: var(--ink-2); }
.biz__tag { margin-bottom: 10px; color: var(--ink); font-size: clamp(17px, 1.5vw, 20px); font-weight: 600; letter-spacing: -0.02em; }

/* platforms: two large cards */
.plat__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pcard {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; min-height: clamp(420px, 56vh, 560px); --pad: clamp(28px, 3.4vw, 48px); padding: var(--pad);
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 28px;
  transition: border-color 0.4s, transform 0.6s var(--ease);
}
.pcard:hover { border-color: var(--line-2); transform: translateY(-4px); }
/* behind each card: a light in the product's colour that slowly blooms (same motion as the hero aurora) */
.pcard__glow {
  position: absolute; z-index: -2; width: 120%; height: 80%; right: -40%; top: -30%; border-radius: 50%; filter: blur(70px);
  --o: 0.75; --sx: 1.18; --sy: 1.3; animation: bloom 16s ease-in-out infinite alternate;
  transition: transform 1.4s var(--ease);
}
.pcard--food .pcard__glow { background: radial-gradient(closest-side, rgba(110, 200, 170, 0.75), transparent); }
.pcard--assist .pcard__glow { background: radial-gradient(closest-side, rgba(47, 125, 255, 0.85), transparent); --o: 0.85; animation-duration: 19s; animation-delay: -7s; }
.pcard:hover .pcard__glow { transform: translate(-10%, 12%); }

/* flowing keywords: rows of what the product handles drift sideways; now and then one word lights up */
/* the keyword area sits in the card's flow between the label and the name and takes whatever height is left,
   so a longer description (English) pushes rows out of view instead of letting them run under the name */
.pcard__words {
  position: relative; z-index: -1; flex: 1 1 auto; min-height: 96px; overflow: hidden;
  margin: 18px calc(var(--pad) * -1) 18px; display: flex; flex-direction: column; gap: 10px;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%), linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, #000 55%, transparent 100%), linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); mask-composite: intersect;
}
.kw-row { overflow: hidden; flex: none; }
.kw-track { display: flex; align-items: center; gap: 22px; width: max-content; animation: marquee var(--kd, 60s) linear infinite; }
.kw-row.r1 .kw-track { --kd: 64s; }
.kw-row.r2 .kw-track { --kd: 52s; animation-direction: reverse; }
.kw-row.r3 .kw-track { --kd: 71s; }
.kw-row.r4 .kw-track { --kd: 58s; animation-direction: reverse; }
.kw { font-size: clamp(22px, 2.3vw, 32px); font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; color: rgba(255, 255, 255, 0.13); transition: color 1.4s var(--ease), text-shadow 1.4s var(--ease); }
.kw-track i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); flex: none; }
.pcard--food .kw.on { color: #9ff0cf; text-shadow: 0 0 18px rgba(126, 226, 184, 0.7); }
.pcard--assist .kw.on { color: #b9d6ff; text-shadow: 0 0 18px rgba(47, 125, 255, 0.8); }
.pcard:hover .kw-track { animation-play-state: paused; }

.pcard__for { font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2); }
.pcard__name { font-size: clamp(42px, 5.4vw, 80px); font-weight: 700; line-height: 1; letter-spacing: -0.045em; }
.pcard__desc { margin-top: 16px; max-width: 26em; color: var(--ink-2); font-size: clamp(15px, 1.2vw, 17px); }
.pcard__go {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: 28px;
  padding: 11px 18px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 14px; font-weight: 600;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.pcard__go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.4s var(--ease); }
.pcard:hover .pcard__go { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pcard:hover .pcard__go svg { transform: translate(2px, -2px); }

/* contact */
.contact { padding: clamp(96px, 16vh, 180px) 0; border-top: 1px solid var(--line); overflow: hidden; isolation: isolate; }
.contact__light { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.contact__light::before {
  content: ''; position: absolute; width: 70vw; height: 40vw; left: -20vw; top: -16vw; border-radius: 50%; filter: blur(80px);
  background: radial-gradient(closest-side, rgba(47, 125, 255, 0.35), transparent);
}
.contact__light .horizon { top: auto; bottom: 0; animation: none; transform: none; opacity: 0.6; }
.contact__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.contact__copy { display: grid; gap: 22px; }
.contact__mail { color: var(--ink-2); font-size: 15px; }
.contact__mail a { margin-left: 8px; color: var(--ink); border-bottom: 1px solid var(--line-2); }
.contact__mail a:hover { border-color: var(--ink); }

.form { display: grid; gap: 16px; padding: clamp(24px, 3vw, 36px); background: rgba(19, 22, 27, 0.7); border: 1px solid var(--line); border-radius: 24px; backdrop-filter: blur(10px); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form label { display: grid; gap: 8px; font-size: 13px; color: var(--ink-2); }
.form input, .form textarea {
  width: 100%; padding: 13px 14px; font: inherit; font-size: 16px; color: var(--ink);
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line-2); border-radius: 12px; outline: none;
  transition: border-color 0.2s, background 0.2s;
}
.form textarea { resize: vertical; min-height: 120px; }
.form input:focus, .form textarea:focus { border-color: var(--accent); background: rgba(47, 125, 255, 0.06); }
.form [aria-invalid='true'] { border-color: #ff6b6b; }
.form__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.form__chips legend { width: 100%; margin-bottom: 8px; padding: 0; font-size: 13px; color: var(--ink-2); }
.form__chips label { display: block; }
.form__chips input { position: absolute; opacity: 0; pointer-events: none; }
.form__chips span {
  display: inline-block; padding: 8px 14px; border: 1px solid var(--line-2); border-radius: 999px;
  font-size: 14px; color: var(--ink-2); cursor: pointer; transition: all 0.2s;
}
.form__chips input:checked + span { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.form__chips input:focus-visible + span { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.form .btn { margin-top: 6px; }
.form__status { min-height: 1.4em; font-size: 14px; color: var(--ink-2); }
.form__status.ok { color: #7ee2b8; }
.form__status.err { color: #ff8c8c; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* footer: the wordmark runs edge to edge */
.foot { padding: 56px 0 40px; border-top: 1px solid var(--line); }
.foot__top { display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; margin-bottom: 40px; }
.foot__logo { height: 26px; width: auto; }
.foot__links { display: flex; flex-wrap: wrap; gap: 10px 28px; font-size: 14px; color: var(--ink-2); }
.foot__links a:hover { color: var(--ink); }
.foot__info { display: grid; gap: 4px; font-size: 13px; color: var(--ink-3); }

/* ---------- reveal on scroll ---------- */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
.biz__item.reveal:nth-child(2) { transition-delay: 0.06s; }
.biz__item.reveal:nth-child(3) { transition-delay: 0.12s; }
.biz__item.reveal:nth-child(4) { transition-delay: 0.18s; }
.pcard.reveal:nth-child(2) { transition-delay: 0.1s; }

/* ---------- smaller screens ---------- */
@media (max-width: 960px) {
  .nav__links { display: none; }
  .nav__end { margin-left: auto; }
  .about__cols, .plat__grid, .contact__inner { grid-template-columns: 1fr; }
  .about__node.n2 { left: 50%; }
  .biz__item { grid-template-columns: 1fr; gap: 12px; }
  .biz__num { padding-top: 0; }
  .hero__light { --cx: 82%; }
}
@media (max-width: 560px) {
  .nav__inner { height: 64px; gap: 12px; }
  .nav__logo img { height: 18px; }
  .nav__end .btn { display: none; }
  .hero { padding-top: 120px; }
  .hero__lead br, .hero__body br, .sec-sub br { display: none; }
  .hero__cta { width: 100%; }
  .hero__cta .btn { flex: 1; padding: 0 16px; }
  .form__row { grid-template-columns: 1fr; }
  .beam--1 { width: 120vw; height: 50vw; }
  .beam--2 { width: 100vw; height: 9vw; top: 12vh; }
  .curtain { left: -10vw; right: -30vw; height: 60vh; }
  .hero__scroll { display: none; }
  .hero__light { --cy: 20%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: 0.01ms !important; }
  .horizon__spark { display: none; }
  .curtain { opacity: 0.6; }
  .band__track { animation: none; }
  .about__title .w { opacity: 1; }
  .about { --p: 1; }
  .about__p { color: var(--ink); }
  .about__node { border-color: var(--accent-2); background: var(--accent); }
}

/* Korean labels read badly with wide tracking */
html[data-lang='ko'] .eyebrow span:not(.num), html[data-lang='ko'] .pcard__for { letter-spacing: 0.04em; }