/* =========================================================
   Geniworks · Prism-inspired refresh
   Pastel mesh hero, big display type with period,
   floating pill nav, horizontal marquees, spatial tile grid.
   Single light theme. Locked accent: violet.
   ========================================================= */

:root {
  /* Surface */
  --bg: #FBFAF0;
  --bg-cream: #FFF8E0;
  --bg-peach: #FFEBDC;
  --bg-pink: #FDE2EE;
  --bg-card: #FFFFFF;

  /* Text */
  --text: #0E0E12;
  --text-2: #5A5A66;
  --text-3: #9A9AA8;

  /* Logo brand colors (extracted from genieworks "g" gradient) */
  --brand-orange: #EE5E2A;
  --brand-teal:   #1FB6C1;
  --brand-blue:   #2E5BA8;
  --brand-purple: #5E3B9A;

  /* Accent (locked): anchored on logo purple */
  --violet-500: var(--brand-purple);
  --violet-600: #4A2D7F;
  --violet-300: #8C6FBE;
  --violet-100: #EFE9F7;

  /* Tile colors (spatial grid): single family, lavender dominant + peach warm note */
  --tile-lavender-light: #E8E0F5;
  --tile-lavender:       #D4C7EE;
  --tile-lavender-strong:#B49CE0;
  --tile-peach-light:    #FFE2CC;
  --tile-peach:          #FFCBA8;
  --tile-cream:          #FFF1D6;
  /* Backwards-compat aliases (preserve old class names) */
  --tile-coral:          var(--tile-peach);
  --tile-coral-strong:   var(--tile-peach);
  --tile-teal:           var(--tile-lavender-light);
  --tile-teal-strong:    var(--tile-lavender);
  --tile-blue:           var(--tile-lavender-light);
  --tile-blue-strong:    var(--tile-lavender);
  --tile-pink:           var(--tile-peach-light);
  --tile-pink-strong:    var(--tile-peach);

  /* Border */
  --border: #ECE9DA;
  --border-strong: #DAD5C0;

  /* Type — Pretendard handles both Korean and Latin glyphs, so we use it
     for every "kr" and "en" reference across the site. */
  --font-kr: "Pretendard Variable", "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --font-en: "Pretendard Variable", "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --font-sans: var(--font-kr);

  /* Radius */
  --r-tile: 14px;
  --r-card: 22px;
  --r-pill: 999px;

  /* Container */
  --container: 1240px;
  --container-narrow: 940px;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  /* Slight negative tracking to match the tighter Pretendard Variable tone
     (headings set their own letter-spacing and are unaffected). */
  letter-spacing: -0.015em;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "ss02";
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }
::selection { background: var(--violet-100); }

/* ---- Container ---- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 28px; }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 28px; }

/* ---- Floating Pill Nav ---- */
.nav-shell {
  position: fixed; top: 18px; left: 0; right: 0; z-index: 60;
  display: flex; justify-content: center; pointer-events: none;
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.nav-shell.nav-hidden { transform: translateY(-160%); }
@media (prefers-reduced-motion: reduce) {
  .nav-shell { transition: none; }
}
.nav-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 6px 6px 22px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--r-pill);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 6px 22px rgba(70,40,130,0.08), 0 1px 2px rgba(0,0,0,0.04);
  pointer-events: auto;
}
.nav-logo { display: inline-flex; align-items: center; padding-right: 28px; }
.nav-logo img { height: 18px; }
.nav-menu { display: inline-flex; gap: 36px; padding: 0 28px; }
.nav-link {
  font-size: 13.5px; font-weight: 600; color: var(--text-2);
  letter-spacing: -0.005em; transition: color 0.15s ease;
}
.nav-link:hover { color: var(--text); }
.nav-cta {
  display: inline-flex; align-items: center; padding: 10px 20px;
  background: var(--text); color: #fff;
  font-size: 13.5px; font-weight: 500; letter-spacing: -0.005em;
  border-radius: var(--r-pill);
  transition: background 0.18s ease, transform 0.18s ease;
}
.nav-cta:hover { background: #2A2A35; transform: translateY(-1px); }

/* ---- Nav submenu (Company dropdown) ---- */
.nav-link-wrap { position: relative; display: inline-flex; align-items: center; }
.nav-link-has-sub { padding-right: 0; }
.nav-link-has-sub::after {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-left: 6px;
  margin-bottom: 2px;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}
.nav-link-wrap:hover .nav-link-has-sub::after { opacity: 1; }
.nav-sub {
  position: absolute;
  top: calc(100% + 6px); left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 8px;
  min-width: 168px;
  box-shadow: 0 16px 36px rgba(94,59,154,0.10), 0 0 0 1px rgba(0,0,0,0.02);
  opacity: 0; visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  pointer-events: none;
  display: flex; flex-direction: column; gap: 2px;
  z-index: 70;
}
/* Invisible hover bridge above the submenu card.
   Covers the 6px visual gap (plus buffer) so the mouse can travel from
   the parent link to the dropdown without crossing a non-hovered area.
   It inherits pointer-events from .nav-sub, so it only catches hover
   while the submenu is actually visible — no false triggers when not. */
.nav-sub::before {
  content: "";
  position: absolute;
  top: -14px;
  left: -8px; right: -8px;
  height: 14px;
}
.nav-link-wrap:hover .nav-sub,
.nav-link-wrap:focus-within .nav-sub {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.nav-sub-item {
  display: block; padding: 10px 14px;
  font-size: 13px; font-weight: 500;
  color: var(--text-2);
  letter-spacing: -0.005em;
  border-radius: 10px;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.nav-sub-item:hover { background: var(--bg-subtle); color: var(--text); }

/* ---- Business dropdown: simple vertical list (한글 기능명 + 영문 브랜드) ---- */
.nav-mega {
  left: 0;
  transform: translateX(0) translateY(6px);
  min-width: 0;
  width: 236px;
  max-width: calc(100vw - 48px);
  padding: 7px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.nav-link-wrap:hover .nav-mega,
.nav-link-wrap:focus-within .nav-mega {
  transform: translateX(0) translateY(0);
}
.nav-mega-div { height: 1px; background: var(--border); margin: 6px 12px; }
.nav-mega-item {
  display: block;
  position: relative;
  padding: 9px 14px;
  border-radius: 9px;
  transition: background 0.15s ease;
}
.nav-mega-item:hover { background: rgba(94,59,154,0.055); }
.nav-mega-body { display: block; min-width: 0; }
.nav-mega-name { display: block; font-family: var(--font-kr); font-size: 13.5px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; transition: color 0.15s ease; }
.nav-mega-item:hover .nav-mega-name { color: var(--violet-600); }
.nav-mega-brand { display: block; font-family: var(--font-en); font-size: 10.5px; font-weight: 500; color: var(--text-3); margin-top: 2px; letter-spacing: 0.01em; }
.nav-new {
  display: inline-block;
  margin-left: 6px;
  font-family: var(--font-en);
  font-size: 8.5px; font-weight: 700; letter-spacing: 0.06em;
  color: #fff; background: var(--violet-500);
  padding: 1px 5px 0; border-radius: 999px;
  vertical-align: middle; transform: translateY(-1px);
}
.nav-mega-desc { display: block; font-size: 12px; line-height: 1.55; color: var(--text-3); word-break: keep-all; margin-top: 6px; }

/* Distribution feature card — the visual accent of the menu */
.nav-mega-feature {
  display: flex; flex-direction: column;
  padding: 20px 20px 18px;
  border-radius: 16px;
  border: 1px solid rgba(94,59,154,0.20);
  background:
    radial-gradient(120% 82% at 100% 0%, rgba(94,59,154,0.16) 0%, transparent 58%),
    linear-gradient(158deg, var(--violet-100) 0%, var(--bg-cream) 100%);
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  overflow: hidden;
}
.nav-mega-feature:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(94,59,154,0.16); }
.nav-mega-feature-ico {
  width: 44px; height: 44px;
  border-radius: 13px;
  background: #fff; color: var(--violet-500);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(94,59,154,0.16);
  margin-bottom: 16px;
}
.nav-mega-feature-ico svg { width: 23px; height: 23px; }
.nav-mega-feature-head { font-family: var(--font-en); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: var(--violet-500); }
.nav-mega-feature-name { font-family: var(--font-kr); font-size: 18px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); margin: 4px 0 9px; }
.nav-mega-feature-desc { font-size: 12.5px; line-height: 1.6; color: var(--text-2); word-break: keep-all; flex: 1; }
.nav-mega-feature-go { margin-top: 15px; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--violet-600); }
.nav-mega-feature-go .arw { transition: transform 0.2s ease; }
.nav-mega-feature:hover .nav-mega-feature-go .arw { transform: translateX(3px); }
@media (max-width: 1160px) {
  .nav-mega { width: 620px; }
}

/* Mobile drawer collapsible group */
.drawer-nav-group { border-bottom: 0; }
.drawer-nav-group[open] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 20px; row-gap: 0;
  padding: 8px 0 6px;
}
.drawer-nav-group > summary {
  grid-column: 1 / -1;
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  padding: 0 0 10px;
  font-family: var(--font-kr);
  font-size: 22px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--text);
}
.drawer-nav-group > summary::-webkit-details-marker { display: none; }
.drawer-nav-subitem {
  display: block;
  padding: 6px 0;
  font-family: var(--font-kr);
  font-size: 15.5px; font-weight: 500;
  color: var(--text-2);
  transition: color 0.15s ease;
}
.drawer-nav-subitem:hover { color: var(--text); }

/* Mobile hamburger sits inside pill */
.hamburger { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 999px; }
/* All three bars are painted from ONE element's background, so their thickness
   is always identical (no element-vs-pseudo rendering difference). */
.hamburger-icon {
  width: 20px; height: 18px;
  background:
    linear-gradient(var(--text), var(--text)) left top,
    linear-gradient(var(--text), var(--text)) left center,
    linear-gradient(var(--text), var(--text)) left bottom;
  background-size: 20px 2px;
  background-repeat: no-repeat;
}
.drawer-toggle { display: none; }
.drawer-overlay { display: none; position: fixed; inset: 0; background: rgba(20,15,35,0.4); z-index: 90; }
.drawer {
  position: fixed; top: 0; right: 0; width: min(430px, 92vw); height: 100vh;
  background: #fff; z-index: 100;
  padding: 12px 26px 24px;
  overflow-y: auto;
  /* Closed state = display:none so the off-canvas panel never extends the
     page width (an off-canvas translateX(100%) panel adds horizontal scroll
     on mobile and pushes the fixed hamburger off-screen). It slides in only
     when opened. */
  display: none; flex-direction: column; gap: 8px;
}
.drawer-toggle:checked ~ .drawer-overlay { display: block; }
.drawer-toggle:checked ~ .drawer { display: flex; animation: drawerIn 0.28s ease; }
@keyframes drawerIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
.drawer-header { display: flex; align-items: center; justify-content: flex-end; }
.drawer-header img { height: 20px; }
.drawer-nav-en {
  display: block;
  font-family: var(--font-en);
  font-size: 11.5px; font-weight: 400;
  color: var(--text-3);
  letter-spacing: 0;
  margin-top: 1px;
}
.drawer-close { font-size: 28px; line-height: 1; cursor: pointer; color: var(--text); }
.drawer-cta { width: 100%; }
.drawer-nav { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.drawer-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0;
  font-family: var(--font-kr);
  font-size: 22px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--text);
  border-bottom: 0;
}
.drawer-arrow { color: var(--text-3); font-size: 17px; font-weight: 400; }
/* Group expand/collapse toggle rendered as a right-aligned button with a chevron */
.drawer-nav-group > summary .drawer-arrow {
  margin-left: auto;
  flex: none;
  width: 32px; height: 32px;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0; color: transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.drawer-nav-group > summary .drawer-arrow::after {
  content: "";
  width: 8px; height: 8px;
  border-right: 2px solid var(--text-2);
  border-bottom: 2px solid var(--text-2);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease;
}
.drawer-nav-group[open] > summary .drawer-arrow::after {
  transform: translateY(2px) rotate(225deg);
}
.drawer-nav-group > summary:hover .drawer-arrow {
  border-color: var(--violet-300);
  background: var(--violet-100);
}
.drawer-footer { margin-top: auto; font-size: 13px; color: var(--text-3); line-height: 1.7; }

/* ---- Reveal motion ---- */
[data-reveal] {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.85s cubic-bezier(0.16,1,0.3,1), transform 0.85s cubic-bezier(0.16,1,0.3,1);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .marquee-track, .mesh-bg { animation: none !important; }
}

/* ---- Buttons (pill style) ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 14px 26px;
  font-size: 14.5px; font-weight: 500; letter-spacing: -0.005em;
  border-radius: var(--r-pill); white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-primary {
  background: var(--violet-500); color: #fff;
  box-shadow: 0 6px 18px rgba(124,92,250,0.32);
}
.btn-primary:hover { background: var(--violet-600); box-shadow: 0 10px 28px rgba(124,92,250,0.42); transform: translateY(-1px); }
.btn-secondary { background: #fff; color: var(--text); border: 1px solid rgba(0,0,0,0.08); }
.btn-secondary:hover { background: #FAFAF5; transform: translateY(-1px); }
.btn-dark { background: var(--text); color: #fff; }
.btn-dark:hover { background: #2A2A35; transform: translateY(-1px); }
.btn-lg { padding: 16px 30px; font-size: 15px; }

/* ---- Mesh Hero ---- */
.hero {
  position: relative; overflow: hidden;
  padding: 180px 0 140px;
  text-align: center;
  --mx: 0;
  --my: 0;
}
.hero-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
}
/* Lift text+CTAs above the wave (which sits inside .container at z-3).
   Without this the cream wave fill covers the primary button. */
.hero-content {
  position: relative; z-index: 5;
  max-width: 780px;
  margin: 0 auto;
}
/* Phone area is now an anchor → /product. Strip link affordances so the
   surrounding layout/visual is unchanged, but let the whole frame act
   as the click target (iframe blocks bubbling by default — disabling
   its pointer-events lets the click reach the parent <a>). */
.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 0.32s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.hero-visual:hover { transform: translateY(-4px); }
.hero-visual .phone-iframe,
.hero-visual .phone-loader { pointer-events: none; }

/* CSS phone-frame mockup with live iframe inside.
   The iframe is rendered at a wider virtual viewport (460px) and CSS-scaled
   to the screen size, so the embedded page reads as a denser mobile view.
   Sized smaller (290x550) so the phone height tracks closer to the hero
   text content (~365px), reducing the "phone alone at the top" feeling. */
.phone-frame {
  --phone-w: 290px;
  --phone-h: 550px;
  --bezel: 10px;
  --iframe-w: 460px;
  --iframe-h: 7000px;
  /* scale = screen-width / iframe-width = (290 - 20) / 460 = 0.587 */
  --scale: 0.587;
  /* scroll-end = -(iframe-h * scale - screen-h) = -(7000*0.587 - 530) = -3579 */
  --scroll-end: -3579px;

  position: relative;
  width: var(--phone-w);
  height: var(--phone-h);
  background: #15151a;
  border-radius: 38px;
  padding: var(--bezel);
  box-shadow:
    0 36px 64px -22px rgba(94,59,154,0.30),
    0 14px 28px -8px rgba(94,59,154,0.15),
    0 0 0 2px rgba(255,255,255,0.08) inset,
    0 0 0 1px rgba(0,0,0,0.50);
}
.phone-frame::before,
.phone-frame::after {
  /* Side buttons: power right, volume left */
  content: ""; position: absolute; background: #15151a;
  border-radius: 2px;
}
.phone-frame::before { right: -2px; top: 140px; width: 3px; height: 60px; }
.phone-frame::after  { left:  -2px; top: 110px; width: 3px; height: 40px;
  box-shadow: 0 60px 0 #15151a, 0 110px 0 #15151a; /* extra volume buttons */
}

.phone-screen {
  position: relative;
  width: 100%; height: 100%;
  background: #fff;
  border-radius: 30px;
  overflow: hidden;
}

/* Loading overlay shown for 3s before the iframe is revealed. */
.phone-loader {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 18px;
  background: linear-gradient(180deg, #FDFBF5 0%, var(--bg-cream) 100%);
  opacity: 1;
  animation: phoneLoaderHide 0.6s ease-out 3s forwards;
}
.phone-loader-dots {
  display: flex; gap: 7px;
}
.phone-loader-dots span {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--violet-500);
  animation: dotPulse 1.2s ease-in-out infinite;
}
.phone-loader-dots span:nth-child(2) { animation-delay: 0.15s; }
.phone-loader-dots span:nth-child(3) { animation-delay: 0.30s; }
.phone-loader-text {
  font-size: 12.5px; font-weight: 500;
  color: var(--text-2); text-align: center;
  letter-spacing: -0.01em;
  padding: 0 24px;
}
@keyframes phoneLoaderHide {
  to { opacity: 0; visibility: hidden; }
}
@keyframes dotPulse {
  0%, 100% { transform: scale(0.7); opacity: 0.45; }
  50%      { transform: scale(1.15); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .phone-loader { animation-duration: 0.1s; animation-delay: 2s; }
  .phone-loader-dots span { animation: none; }
}
.phone-notch {
  position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: 38%; height: 22px;
  background: #15151a;
  border-radius: 0 0 14px 14px;
  z-index: 3;
}
.phone-iframe {
  position: absolute; top: 0; left: 0;
  width: var(--iframe-w);
  height: var(--iframe-h);
  border: 0; background: #fff;
  transform-origin: top left;
  /* Delay scroll start until the loader fades, so the iframe is at
     translateY(0) when revealed (no mid-scroll snap). */
  animation: phoneScroll 55s ease-in-out 3s infinite alternate;
  will-change: transform;
}
@keyframes phoneScroll {
  from { transform: translateY(0) scale(var(--scale)); }
  to   { transform: translateY(var(--scroll-end)) scale(var(--scale)); }
}
@media (prefers-reduced-motion: reduce) {
  .phone-iframe { animation: none; }
}
.mesh-bg {
  position: absolute; inset: -10% -10% 0 -10%; z-index: 0;
  background:
    /* top-left: light lavender */
    radial-gradient(46% 56% at calc(20% + var(--mx) * 2%) calc(24% + var(--my) * 2%),
      rgba(190,170,225,0.78) 0%, rgba(190,170,225,0) 70%),
    /* top-right: brand purple lavender */
    radial-gradient(42% 50% at calc(80% + var(--mx) * -2.5%) calc(20% + var(--my) * 2%),
      rgba(160,125,210,0.72) 0%, rgba(160,125,210,0) 70%),
    /* right: soft peach (from logo orange) */
    radial-gradient(44% 52% at calc(90% + var(--mx) * -2%) calc(60% + var(--my) * -1.5%),
      rgba(255,190,150,0.60) 0%, rgba(255,190,150,0) 70%),
    /* bottom center: cream bridge */
    radial-gradient(58% 60% at 50% 100%, rgba(255,240,205,1) 0%, rgba(255,240,205,0) 75%),
    var(--bg);
  filter: saturate(100%);
  animation: mesh-drift 22s ease-in-out infinite;
  transition: background 0.18s linear;
}
@keyframes mesh-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-1.5%, 1%) scale(1.02); }
  66% { transform: translate(1.5%, -1%) scale(1.01); }
}
/* No z-index on the hero container so descendants (hero-content z-5,
   agent floats z-5) participate directly in the hero's stacking context
   and can sit above the wave at z-3. */
.hero > .container { position: relative; }

/* Wavy bottom transition into page background.
   Sibling of .container inside .hero, fills the full hero width with
   simple left:0/right:0 (no width:110% overflow trick — that was leaving
   a gap on the right edge in some browsers). The path uses matching
   y=90 at both endpoints so the visible left and right edges share the
   same cream baseline and read as continuous, not cut. */
.hero-wave {
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 220px;
  z-index: 3;
  pointer-events: none;
  display: block;
}
.hero-wave path { fill: var(--bg); }

/* Agent overlay labels around the phone */
.agent-float {
  position: absolute; z-index: 5;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px 10px 12px;
  background: #fff;
  border-radius: 14px;
  box-shadow:
    0 18px 36px -10px rgba(94,59,154,0.25),
    0 4px 10px -2px rgba(94,59,154,0.10),
    0 0 0 1px rgba(0,0,0,0.04);
  white-space: nowrap;
  animation: agentFloat 3.6s ease-in-out infinite alternate;
  will-change: transform;
}
.agent-float-num {
  font-family: var(--font-en); font-weight: 700; font-size: 13px;
  color: var(--violet-500);
  background: var(--violet-100);
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px;
  flex: none;
}
.agent-float-text { display: flex; flex-direction: column; line-height: 1.15; }
.agent-float-title { font-weight: 700; font-size: 12.5px; color: var(--text); letter-spacing: -0.005em; }
.agent-float-desc  { font-size: 10.5px; color: var(--text-2); margin-top: 3px; }

.agent-float-1 { top: 6%;    right: -14%;  animation-delay: 0s; }
.agent-float-2 { top: 42%;   left:  -20%;  animation-delay: 1.2s; }
.agent-float-3 { bottom: 28%; right: -10%; animation-delay: 2.4s; }

@keyframes agentFloat {
  from { transform: translateY(0); }
  to   { transform: translateY(-9px); }
}
@media (prefers-reduced-motion: reduce) {
  .agent-float { animation: none; }
}
@media (max-width: 1024px) {
  .agent-float { display: none; }
}
@media (max-width: 768px) {
  .hero { padding: 110px 0 40px; }
  .hero-wave { height: 180px; }
}

.eyebrow-pill {
  display: inline-block; padding: 6px 14px; border-radius: var(--r-pill);
  background: var(--violet-100); color: var(--violet-600);
  font-family: var(--font-en); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: none;
  margin-bottom: 28px;
}
.display-hero {
  /* Pretendard (Korean) first for the Korean headline; Inter falls back
     for any Latin characters. */
  font-family: var(--font-kr), var(--font-en);
  font-weight: 800;
  /* Korean 2-line headline: "고객이 머무는 모든 곳에, / 커머스를 더합니다."
     First line is ~10.7em wide in Pretendard 700; at 52px that's ~560px,
     fitting comfortably in the ~592px left column at 1280-1920 viewports. */
  font-size: clamp(30px, 3.4vw, 52px);
  line-height: 1.16;
  letter-spacing: -0.028em;
  color: var(--text);
  margin: 0 0 26px;
  word-break: keep-all;
}
.display-hero .ko { font-family: var(--font-kr), var(--font-en); }
.display-hero .period { color: var(--violet-500); }
.hero-sub {
  font-size: clamp(15px, 1.4vw, 17px); line-height: 1.6;
  color: var(--text-2); max-width: 56ch; margin: 0 auto 28px;
  word-break: keep-all;
}
.hero-actions { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ---- Marquee ticker ---- */
.marquee {
  background: var(--text);
  color: #fff;
  padding: 10px 0;
  overflow: hidden;
  border-top: 1px solid rgba(0,0,0,0.04);
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.marquee.marquee-light { background: var(--bg-cream); color: var(--text); }
.marquee-track {
  display: flex; gap: 48px; width: max-content;
  animation: scroll-left 38s linear infinite;
  white-space: nowrap;
  font-family: var(--font-en);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.06em;
}
.marquee-track > span { display: inline-flex; align-items: center; gap: 56px; }
.marquee-track > span::after {
  content: "●"; color: var(--violet-300); font-size: 10px;
}
.marquee.marquee-light .marquee-track > span::after { color: var(--violet-500); }
@keyframes scroll-left { to { transform: translateX(-50%); } }
.marquee:hover .marquee-track { animation-play-state: paused; }

/* ---- Sections ---- */
.section { padding: 110px 0; position: relative; }
.section-tight { padding: 72px 0; position: relative; }

.section-head { margin-bottom: 60px; max-width: 780px; }
.section-tag {
  display: inline-block; padding: 6px 12px; border-radius: 6px;
  background: rgba(0,0,0,0.06); color: var(--text);
  font-family: var(--font-en); font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: none;
  margin-bottom: 22px;
}
.display-section {
  /* One step below .display-hero (52px) so the hero stays the visual
     anchor of the page. ~77% of hero size = ~40px max desktop. */
  font-family: var(--font-en), var(--font-kr);
  font-weight: 700;
  font-size: clamp(26px, 2.8vw, 40px);
  line-height: 1.18; letter-spacing: -0.025em;
  color: var(--text); max-width: 20ch;
}
.display-section .period { color: var(--violet-500); }
.section-sub { margin-top: 18px; font-size: 17px; line-height: 1.6; color: var(--text-2); max-width: 56ch; word-break: keep-all; }

/* ---- Spatial / Agent tile grid section ---- */
.spatial {
  position: relative;
  overflow: hidden;
  padding: 110px 0;
  background:
    radial-gradient(60% 80% at 90% 0%, rgba(190,170,225,0.22) 0%, transparent 60%),
    radial-gradient(50% 70% at 10% 100%, rgba(255,200,160,0.20) 0%, transparent 65%),
    linear-gradient(180deg, var(--bg-cream) 0%, var(--bg-pink) 100%);
}
.spatial > .container { position: relative; z-index: 2; }

/* ---- Brand decoration assets (g element echoes) ---- */
.deco {
  position: absolute;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  z-index: 1;
}
/* Hero: large blue ring drifting in from top-right.
   z-index 0 (same level as mesh-bg) so it sits behind container content
   like the phone, instead of tinting it. */
.deco-hero-tr {
  top: -120px; right: -150px;
  width: 380px; height: auto;
  opacity: 0.16;
  z-index: 0;
  animation: deco-spin 90s linear infinite;
  filter: blur(0.3px);
}
/* Spatial: purple arc swooping from bottom-left */
.deco-spatial-bl {
  bottom: -70px; left: -70px;
  width: 280px; height: auto;
  opacity: 0.14;
  transform: rotate(-12deg);
}
/* Spatial: small orange rect floating top-right */
.deco-spatial-tr {
  top: 60px; right: 4%;
  width: 100px; height: auto;
  opacity: 0.55;
  transform: rotate(-18deg);
  border-radius: 12px;
}
/* CTA: orange rect bottom-left */
.deco-cta-bl {
  bottom: 50px; left: 4%;
  width: 130px; height: auto;
  opacity: 0.30;
  transform: rotate(20deg);
  border-radius: 14px;
}
/* CTA: purple arc top-right */
.deco-cta-tr {
  top: -50px; right: -50px;
  width: 220px; height: auto;
  opacity: 0.16;
  transform: rotate(140deg);
}
/* Footer: tiny blue ring */
.deco-footer-r {
  top: -30px; right: -40px;
  width: 140px; height: auto;
  opacity: 0.18;
  animation: deco-spin 120s linear infinite reverse;
}
@keyframes deco-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .deco-hero-tr, .deco-footer-r { animation: none; }
}
@media (max-width: 1024px) {
  .deco-hero-tr { width: 280px; top: -80px; right: -100px; }
  .deco-spatial-bl { width: 200px; bottom: -50px; left: -50px; }
  .deco-spatial-tr { width: 80px; }
  .deco-cta-bl { width: 100px; }
  .deco-cta-tr { width: 160px; }
}
@media (max-width: 768px) {
  .deco-hero-tr { width: 220px; top: -60px; right: -80px; }
  .deco-spatial-bl { width: 150px; }
  .deco-spatial-tr { display: none; }
  .deco-cta-bl { width: 80px; bottom: 24px; left: 6%; }
  .deco-cta-tr { width: 120px; }
  .deco-footer-r { width: 100px; }
}
/* ---- Stats (refreshed for light theme — left-aligned head, icon-led cells) ---- */
.stats-section {
  padding: 110px 0;
  background:
    linear-gradient(180deg,
      var(--bg) 0%,
      #EDE5F6 50%,
      var(--bg) 100%);
}
.stats-section .section-head { margin-bottom: 56px; }
.stats-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
/* Legacy bordered band style — preserved for any other consumer */
.section-tight .stats-row {
  padding: 56px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.stat-item {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.stat-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px;
  margin-bottom: 18px;
  background: var(--violet-100);
  color: var(--violet-500);
  border-radius: 15px;
  transition: transform 0.3s ease, background 0.3s ease;
}
.stat-icon svg { width: 26px; height: 26px; display: block; }
.stat-item:hover .stat-icon {
  transform: translateY(-2px);
  background: #E3D8F6;
}
.stat-value {
  font-family: var(--font-en); font-weight: 700;
  font-size: clamp(34px, 4.4vw, 56px); letter-spacing: -0.035em;
  color: var(--text); line-height: 1;
}
.stat-value sub { font-size: 0.42em; vertical-align: baseline; color: var(--violet-500); font-weight: 600; margin-left: 3px; }
.stat-label { margin-top: 12px; font-size: 13.5px; color: var(--text-2); }

/* ---- Sub-page hero (used by /product, /ai-tech, /cases, /newsroom, /contact, /careers) ---- */
.page-hero {
  position: relative;
  padding: 160px 0 80px;
  background:
    radial-gradient(60% 80% at 20% 20%, rgba(190,170,225,0.45) 0%, transparent 60%),
    radial-gradient(50% 60% at 85% 15%, rgba(255,200,160,0.35) 0%, transparent 60%),
    var(--bg);
}
.page-hero-inner { max-width: 760px; }
.page-hero-title {
  font-family: var(--font-kr), var(--font-en);
  font-weight: 700;
  font-size: clamp(34px, 4.4vw, 64px);
  line-height: 1.14;
  letter-spacing: -0.03em;
  color: var(--text);
  margin: 20px 0 22px;
  word-break: keep-all;
}
.page-hero-title .period { color: var(--violet-500); }
.page-hero-sub {
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.65;
  color: var(--text-2);
  max-width: 56ch;
  word-break: keep-all;
}
@media (max-width: 768px) {
  .page-hero { padding: 130px 0 56px; }
}

/* ---- Page hero accent bits — used by /product, /ai-tech.
   Eyebrow pill above the title, dual CTA row below the sub copy. ---- */
.page-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: none;
  color: var(--violet-500);
  padding: 7px 14px;
  border: 1px solid rgba(94,59,154,0.22);
  background: rgba(94,59,154,0.06);
  border-radius: 999px;
  margin-bottom: 4px;
}
.page-hero-eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--violet-500);
}
.page-hero-cta {
  display: flex;
  gap: 12px;
  margin-top: 30px;
  flex-wrap: wrap;
}

/* ---- Mallpie Intro (What we build) — 3 pillar grid ---- */
.mallpie-intro { background: var(--bg); padding: 110px 0; }
.mallpie-intro .section-head { margin-bottom: 24px; }
.mallpie-intro .section-sub { margin-top: 12px; word-break: keep-all; }
.mallpie-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 0;
}
.mallpie-pillar {
  position: relative;
  padding: 38px 32px 36px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.mallpie-pillar:hover {
  border-color: var(--violet-300);
  box-shadow: 0 20px 44px rgba(94,59,154,0.10);
  transform: translateY(-3px);
}
.mallpie-pillar-num {
  font-family: var(--font-en);
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--violet-500);
  margin-bottom: 4px;
}
.mallpie-pillar-title {
  font-size: clamp(22px, 1.8vw, 26px);
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.22;
  color: var(--text);
}
.mallpie-pillar-body {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-2);
  word-break: keep-all;
}
@media (max-width: 1024px) {
  .mallpie-pillars { grid-template-columns: 1fr; gap: 16px; }
}

/* ---- Mallpie network-flow diagram (IGAWorks-style horizontal pipeline) ---- */
.mallpie-flow {
  display: grid;
  grid-template-columns: 1fr 100px 1.05fr 100px 1fr;
  align-items: stretch;
  gap: 0;
  margin: 32px 0 36px;
  padding: 8px 0;
}
.flow-node {
  padding: 20px 26px 20px;
  background: var(--bg-card);
  border: 1px dashed var(--border-strong);
  border-radius: 22px;
  text-align: center;
  display: flex; flex-direction: column;
  justify-content: center;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.flow-node:hover {
  border-style: solid;
  border-color: var(--violet-300);
  box-shadow: 0 12px 28px rgba(94,59,154,0.10);
  transform: translateY(-2px);
}
.flow-node-center {
  background: linear-gradient(135deg, var(--violet-100) 0%, var(--bg-cream) 100%);
  border: 1px solid var(--violet-300);
  box-shadow: 0 14px 36px rgba(94,59,154,0.14);
  position: relative;
}
.flow-node-center::before {
  /* Subtle inner glow ring */
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px dashed rgba(94,59,154,0.18);
  border-radius: 18px;
  pointer-events: none;
}
.flow-node-label {
  display: block;
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: none;
  color: var(--violet-500);
  margin-bottom: 12px;
}
.flow-node-num {
  font-family: var(--font-en);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1;
  margin-bottom: 14px;
}
.flow-node-num sub {
  font-size: 0.4em;
  vertical-align: baseline;
  margin-left: 2px;
  color: var(--violet-500);
  font-weight: 700;
}
.flow-node-title {
  font-family: var(--font-kr);
  font-size: clamp(15px, 1.4vw, 17px);
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--text);
  margin: 0 0 6px;
  line-height: 1.35;
}
.flow-node-meta {
  font-family: var(--font-kr);
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.55;
  margin: 0;
  word-break: keep-all;
}

/* Connector line + traveling dots */
.flow-connector {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.flow-connector::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 8px;
  right: 8px;
  height: 1.5px;
  background-image: linear-gradient(to right, var(--border-strong) 50%, transparent 50%);
  background-size: 10px 1.5px;
  background-repeat: repeat-x;
  transform: translateY(-50%);
}
.flow-dot {
  position: absolute;
  top: 50%;
  width: 8px; height: 8px;
  background: var(--violet-500);
  border-radius: 50%;
  margin-left: -4px; margin-top: -4px;
  box-shadow: 0 0 0 4px rgba(94,59,154,0.12);
  animation: flowDotTravel 2.6s linear infinite;
  animation-delay: var(--d, 0s);
  pointer-events: none;
}
@keyframes flowDotTravel {
  0%   { left: 0%;   opacity: 0; transform: scale(0.6); }
  8%   { opacity: 1; transform: scale(1); }
  92%  { opacity: 1; transform: scale(1); }
  100% { left: 100%; opacity: 0; transform: scale(0.6); }
}
@media (prefers-reduced-motion: reduce) {
  .flow-dot { animation: none; left: 50%; opacity: 0.6; transform: scale(0.85); }
}

/* Stack vertically below 1024px with vertical connectors */
@media (max-width: 1024px) {
  .mallpie-flow {
    grid-template-columns: 1fr;
    margin: 24px 0 28px;
  }
  .flow-node-center::before { inset: 4px; }
  .flow-connector {
    width: auto;
    height: 56px;
  }
  .flow-connector::before {
    top: 8px;
    bottom: 8px;
    left: 50%;
    right: auto;
    width: 1.5px;
    height: auto;
    background-image: linear-gradient(to bottom, var(--border-strong) 50%, transparent 50%);
    background-size: 1.5px 10px;
    background-repeat: repeat-y;
    background-position: center;
    transform: translateX(-50%);
  }
  .flow-dot {
    animation: flowDotTravelVert 2.6s linear infinite;
    animation-delay: var(--d, 0s);
    left: 50% !important;   /* override horizontal animation's left */
  }
  @keyframes flowDotTravelVert {
    0%   { top: 0%;   opacity: 0; transform: scale(0.6); }
    8%   { opacity: 1; transform: scale(1); }
    92%  { opacity: 1; transform: scale(1); }
    100% { top: 100%; opacity: 0; transform: scale(0.6); }
  }
}

/* ---- Mallpie product showcase (dark callout card) ---- */
.mallpie-showcase {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 40px;
  margin-top: 20px;
  padding: 28px 44px;
  background:
    radial-gradient(120% 200% at 100% 50%, rgba(94,59,154,0.32) 0%, transparent 55%),
    linear-gradient(135deg, #1c2034 0%, #0e1220 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  box-shadow: 0 14px 44px rgba(20,15,40,0.12);
  position: relative;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.32s ease, box-shadow 0.32s ease, border-color 0.32s ease;
}
.mallpie-showcase::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, transparent 45%);
  pointer-events: none;
}
.mallpie-showcase:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 60px rgba(20,15,40,0.22);
  border-color: rgba(201,183,242,0.28);
}
.mallpie-showcase-text {
  position: relative;
  z-index: 1;
}
.mallpie-showcase-tagline {
  font-family: var(--font-kr);
  font-weight: 700;
  font-size: clamp(18px, 1.9vw, 23px);
  line-height: 1.34;
  letter-spacing: -0.018em;
  color: #fff;
  margin: 0 0 6px;
  word-break: keep-all;
}
.mallpie-showcase-desc {
  font-family: var(--font-kr);
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,0.66);
  margin: 0;
  word-break: keep-all;
  max-width: 62ch;
}
.mallpie-showcase-cta {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-top: 12px;
  font-family: var(--font-kr);
  font-size: 13.5px; font-weight: 600;
  color: #C9B7F2;
  white-space: nowrap;
  transition: color 0.28s ease;
}
.mallpie-showcase-cta-arrow {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(201,183,242,0.5);
  background: rgba(201,183,242,0.10);
  color: #C9B7F2;
  font-size: 14px; line-height: 1;
  transition: background 0.28s ease, border-color 0.28s ease, color 0.28s ease, transform 0.28s ease;
}
.mallpie-showcase:hover .mallpie-showcase-cta { color: #E3D6FB; }
.mallpie-showcase:hover .mallpie-showcase-cta-arrow {
  background: #C9B7F2;
  border-color: #C9B7F2;
  color: #1c2034;
  transform: translateX(3px);
}
.mallpie-showcase-logo {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 32px;
}
.mallpie-showcase-logo img {
  height: 44px;
  width: auto;
  display: block;
}
@media (max-width: 768px) {
  .mallpie-showcase {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 24px 24px;
    margin-top: 24px;
    border-radius: 16px;
  }
  .mallpie-showcase-logo {
    padding-left: 0;
    justify-content: flex-start;
  }
  .mallpie-showcase-logo img { height: 34px; }
}

/* ---- How it works (3-illustration grid) ---- */
.howitworks { background: var(--bg); position: relative; }
.howitworks-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
/* Sub-header introducing the 3-card row inside the merged Agent Architecture section */
.howitworks-subhead {
  text-align: center;
  max-width: 720px;
  margin: 100px auto 40px;
}
.howitworks-subhead .section-tag { margin-bottom: 14px; }
.howitworks-subtitle {
  font-family: var(--font-kr);
  font-weight: 700;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.28;
  letter-spacing: -0.022em;
  color: var(--text);
  margin: 0 0 12px;
  word-break: keep-all;
}
.howitworks-subtitle .period { color: var(--violet-500); }
.howitworks-sublead {
  font-size: 15.5px; line-height: 1.7; color: var(--text-2);
  margin: 0;
  word-break: keep-all;
}
@media (max-width: 768px) {
  .howitworks-subhead { margin: 64px auto 32px; }
}
.agent-card-illus {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-card); padding: 28px;
  display: flex; flex-direction: column; gap: 18px;
  transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}
.agent-card-illus:hover {
  border-color: var(--violet-300);
  box-shadow: 0 20px 44px rgba(94,59,154,0.10);
  transform: translateY(-4px);
}
.agent-card-illus .illus-frame {
  border-radius: var(--r-tile);
  overflow: hidden;
  background: transparent;     /* SVG illustration owns its own cream backdrop */
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 0.88;
}
.agent-card-illus .illus-frame img {
  width: 100%; height: 100%;
  max-width: 280px;
  display: block;
  object-fit: contain;
}
.agent-card-illus .step-meta {
  font-family: var(--font-en); font-size: 14px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: none; color: var(--violet-500);
}
.agent-card-illus h3 {
  font-size: clamp(20px, 1.8vw, 24px); font-weight: 700;
  letter-spacing: -0.018em; line-height: 1.2; color: var(--text);
}
.agent-card-illus p { font-size: 15px; line-height: 1.65; color: var(--text-2); word-break: keep-all; }

/* Product attribute stage — real product photo with AI-extracted
   attribute chips floating around it. Used in the first Agent card
   ("01 · Product: 상품을 읽고 의미를 부여합니다") on the home page. */
.product-attr-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--violet-100) 0%, var(--bg-cream) 100%);
  border-radius: var(--r-tile);
}
.agent-card-illus .illus-frame .product-attr-stage img {
  width: 48%;
  max-width: none;
  height: auto;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.10);
  background: #fff;
  box-shadow: 0 14px 30px rgba(0,0,0,0.10);
  position: relative;
  z-index: 1;
}
/* Dashed connector lines fanning from the product to each attribute chip,
   illustrating the AI's read → tag mapping. SVG stretches to fill the
   stage so its viewBox coordinates align with the chip --ax/--ay system. */
.product-attr-stage .attr-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.product-attr-stage .attr-lines line {
  stroke: rgba(94,59,154,0.34);
  stroke-width: 1;
  stroke-dasharray: 2 2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.product-attr-stage .attr-chip {
  position: absolute;
  left: var(--ax);
  top: var(--ay);
  font-family: var(--font-kr);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  background: #fff;
  color: var(--text);
  border: 1px solid rgba(94,59,154,0.18);
  padding: 5px 10px;
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(94,59,154,0.10);
  white-space: nowrap;
  z-index: 2;
  animation: attrChipFloat 4.5s ease-in-out infinite;
}
@keyframes attrChipFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
@media (prefers-reduced-motion: reduce) {
  .product-attr-stage .attr-chip { animation: none; }
}

@media (max-width: 1024px) {
  .howitworks-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* ---- Cases (pastel cards) ---- */
/* Featured row: large case card on the left, single partners accordion on
   the right. grid-template-rows is explicit so the row height stays
   constant regardless of which partner tab is open — without this, the
   accordion expanding/collapsing would push the whole row up and down. */
.featured-row {
  display: grid;
  grid-template-columns: 1.85fr 1fr;
  grid-template-rows: 470px;
  gap: 22px;
  align-items: stretch;
}
.case-card.case-partners-card {
  padding: 22px 26px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.case-card.case-partners-card .case-tag { margin-bottom: 4px; }
.case-card.case-partners-card .case-partners-card-title {
  font-family: var(--font-kr);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 12px;
}
.case-card.case-partners-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 14px;
}
.case-card.case-partners-card li {
  font-family: var(--font-kr);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.case-card.case-partners-card li::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--violet-500);
  flex: none;
}

/* Partners accordion — single side card with collapsible media entries */
.case-card.case-partners-accordion {
  padding: 22px 26px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0;
}
.case-card.case-partners-accordion .case-tag { margin-bottom: 4px; }
.case-card.case-partners-accordion .case-partners-card-title {
  font-family: var(--font-kr);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 8px;
}
/* Hover-driven exclusive tabs — only one panel open at a time. The
   trigger is a button (works for click + mouseenter), and JS swaps
   .is-active. CSS handles the panel slide and the chevron rotation. */
.partners-tabs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.partner-tab {
  position: relative;
  border-top: 1px solid var(--border);
}
.partner-tab:last-child { border-bottom: 1px solid var(--border); }
.partner-tab::before {
  content: "";
  position: absolute;
  left: -26px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  background: var(--violet-500);
  border-radius: 2px;
  opacity: 0;
  transform: scaleY(0.4);
  transform-origin: center;
  transition: opacity 0.18s ease, transform 0.2s ease;
}
.partner-tab.is-active::before { opacity: 1; transform: scaleY(1); }
.partner-label {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}
.partner-ico {
  width: 30px;
  height: 30px;
  flex: none;
  object-fit: contain;
  border-radius: 7px;
}
.partner-tab-trigger {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 10px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-kr);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: color 0.15s ease;
}
.partner-tab-trigger:hover { color: var(--violet-500); }
.partner-tab.is-active .partner-tab-trigger {
  color: var(--violet-500);
  font-weight: 700;
}
.partner-chev {
  position: relative;
  width: 12px;
  height: 12px;
  flex: none;
  color: var(--violet-500);
}
.partner-chev::before,
.partner-chev::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 9px;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
  transform: translate(-50%, -50%);
}
.partner-chev::after {
  transform: translate(-50%, -50%) rotate(90deg);
  transition: transform 0.22s ease;
}
.partner-tab.is-active .partner-chev::after {
  transform: translate(-50%, -50%) rotate(0deg);
}
.partner-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s cubic-bezier(.4,.0,.2,1);
}
.partner-tab.is-active .partner-panel { grid-template-rows: 1fr; }
.partner-panel-inner {
  overflow: hidden;
  padding-left: 10px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-2);
}
.partner-tab.is-active .partner-panel-inner {
  padding-bottom: 12px;
}
@media (min-width: 1280px) {
  .featured-row { grid-template-rows: 510px; }
}
@media (max-width: 1024px) {
  .featured-row {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
}
.case-card {
  position: relative; overflow: hidden;
  padding: 38px 36px; border-radius: var(--r-card);
  background: var(--bg-card); border: 1px solid var(--border);
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 360px;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.case-card:hover { box-shadow: 0 18px 40px rgba(70,40,130,0.10); transform: translateY(-3px); }
.case-card.is-feature {
  background: var(--violet-500); color: #fff; border-color: transparent;
}
.case-card.is-feature::before {
  content: ""; position: absolute; right: -30%; top: -40%; width: 80%; height: 120%;
  background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, transparent 60%);
}
.case-card.is-feature > * { position: relative; }
.case-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-en); font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: none;
  color: var(--violet-500); margin-bottom: 18px;
}
.case-card.is-feature .case-tag { color: rgba(255,255,255,0.85); }
.case-name {
  font-family: var(--font-en), var(--font-kr);
  font-size: clamp(26px, 2.6vw, 36px); font-weight: 700;
  letter-spacing: -0.025em; line-height: 1.1; margin-bottom: 14px;
}
.case-desc { font-size: 15px; line-height: 1.65; color: var(--text-2); max-width: 42ch; word-break: keep-all; }
.case-card.is-feature .case-desc { color: rgba(255,255,255,0.86); word-break: keep-all; }
.case-stats { display: flex; gap: 28px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--border); }
.case-card.is-feature .case-stats { border-top-color: rgba(255,255,255,0.18); }
.case-stat-value {
  font-family: var(--font-en); font-size: 26px; font-weight: 700;
  letter-spacing: -0.025em; line-height: 1; color: var(--text);
}
.case-card.is-feature .case-stat-value { color: #fff; }
.case-stat-label { font-size: 12px; color: var(--text-3); margin-top: 6px; }
.case-card.is-feature .case-stat-label { color: rgba(255,255,255,0.7); }
.case-quote {
  margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--border);
  font-size: 14px; line-height: 1.65; color: var(--text-2); font-style: italic;
  word-break: keep-all;
}
.case-quote-cite { display: block; margin-top: 8px; font-style: normal; color: var(--text-3); font-size: 12px; letter-spacing: 0.04em; }

/* Featured case with a phone screenshot anchored to the right edge.
   Image is pre-cropped at the bottom (2000×1609, ~1.24:1) so the card
   doesn't need to clip — phone sits vertically centered on the right. */
/* Featured case as a flex row: phone area on the left takes a fixed
   share of the card width (flex-basis %), text area takes the rest.
   The phone img inside fills its area's width and sits at the bottom,
   so its visual size scales with the card and the bottom edge of the
   phone meets the bottom edge of the card. */
.case-card.has-phone {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  padding: 0;
  min-height: 420px;
}
/* Phone area: relative box. The phone img is absolutely positioned with
   an explicit left inset and width:calc — that way the phone actually
   shrinks (which width:100% wouldn't, since the img would follow the
   padding-box width instead of the content-box width). */
.case-feature-phone-area {
  --phone-margin-left: 40px;
  flex: 0 0 240px;
  position: relative;
  min-width: 0;
  overflow: hidden;
}
.case-feature-phone-area .case-feature-phone {
  position: absolute;
  left: var(--phone-margin-left);
  /* Phone grounded at the card's bottom edge (no gap below) and enlarged a
     touch so more of the screen reads (grows upward from the bottom). */
  bottom: 0;
  width: calc(100% - var(--phone-margin-left));
  height: auto;
  max-width: none;
  display: block;
  transform-origin: bottom center;
  transform: scale(1.08);
  pointer-events: none;
}
.case-feature-text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 40px 24px 24px;
  min-width: 0;
}
.case-card.has-phone .case-stats { margin-top: 28px; }
@media (min-width: 1280px) {
  .case-card.has-phone { min-height: 430px; }
  .case-feature-phone-area { --phone-margin-left: 48px; flex-basis: 290px; }
  .case-feature-text { padding: 28px 48px 28px 32px; }
}
@media (max-width: 1024px) {
  .case-card.has-phone { min-height: 400px; }
  .case-feature-phone-area { --phone-margin-left: 40px; flex-basis: 270px; }
}
@media (max-width: 768px) {
  .case-card.has-phone { min-height: 320px; }
  .case-feature-phone-area { --phone-margin-left: 28px; flex-basis: 210px; }
  .case-feature-text { padding: 20px 22px 20px 16px; }
}
@media (max-width: 540px) {
  .case-card.has-phone { flex-direction: column; min-height: 0; }
  .case-feature-phone-area {
    flex: 0 0 auto;
    width: 100%;
    align-items: center;
    justify-content: center;
    order: 2;
  }
  .case-feature-phone-area .case-feature-phone {
    /* On stacked mobile the phone flows as a normal centred image (the
       desktop absolute lift/scale is reset here). */
    position: static;
    bottom: auto; left: auto;
    transform: none;
    width: auto;
    max-width: 300px;
    margin: 0 auto;
  }
  .case-feature-text { padding: 28px 26px; order: 1; }
}

/* ---- Logo strip — two parallel infinite marquees of partner app icons ---- */
.logo-marquee {
  padding: 90px 0;
  background: #F5F6F8;
  overflow: hidden;
}
.logo-marquee-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 48px;
  padding: 0 24px;
}
.logo-marquee-title {
  font-family: var(--font-kr);
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.3;
  letter-spacing: -0.024em;
  color: var(--text);
  margin: 0 0 14px;
  word-break: keep-all;
}
.logo-marquee-title .period { color: var(--violet-500); }
.logo-marquee-sub {
  font-family: var(--font-kr);
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text-2);
  margin: 0;
  word-break: keep-all;
}
.logo-marquee-track-wrap {
  position: relative;
  overflow: hidden;
  /* Soft fade on both edges so icons dissolve in/out at the rails */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.logo-marquee-track-wrap + .logo-marquee-track-wrap { margin-top: 22px; }

.logo-marquee-track {
  display: flex;
  align-items: center;
  gap: 48px;
  width: max-content;
  animation: logoMarqueeScroll 56s linear infinite;
}
.logo-marquee-track--reverse {
  animation-name: logoMarqueeScrollReverse;
  animation-duration: 64s;
}
/* (Marquee keeps streaming on hover — no pause-on-hover.) */
@keyframes logoMarqueeScroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@keyframes logoMarqueeScrollReverse {
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-marquee-track { animation: none; }
}

.logo-marquee-track img {
  height: 88px;
  width: auto;
  max-width: 260px;
  object-fit: contain;
  display: block;
  flex: none;
  -webkit-user-drag: none;
  user-select: none;
  /* Intentionally no per-icon hover effect — icons should feel like a passive stream. */
  pointer-events: none;
}

@media (max-width: 768px) {
  .logo-marquee { padding: 48px 0; }
  .logo-marquee-head { margin-bottom: 36px; }
  .logo-marquee-track { gap: 32px; }
  .logo-marquee-track-wrap + .logo-marquee-track-wrap { margin-top: 18px; }
  .logo-marquee-track img { height: 68px; max-width: 200px; }
}

/* ---- CTA (pastel mesh again) ---- */
.cta {
  position: relative; overflow: hidden;
  padding: 120px 0; text-align: center;
}
.cta::before {
  content: ""; position: absolute; inset: -10%;
  background: #F5F6F8;
  z-index: 0;
}
.cta > .container { position: relative; z-index: 1; }
.cta-row {
  display: grid; grid-template-columns: 0.85fr 1fr;
  gap: 56px; align-items: center; text-align: left;
}
.cta-visual img {
  width: 100%; max-width: 420px; margin-inline: auto; display: block;
  filter: drop-shadow(0 24px 48px rgba(94,59,154,0.12));
}
.cta-content { max-width: 520px; }
.cta-title {
  font-family: var(--font-en), var(--font-kr); font-weight: 700;
  font-size: clamp(34px, 4.6vw, 60px); line-height: 1.04; letter-spacing: -0.03em;
  margin: 0 0 22px;
}
.cta-title .period { color: var(--violet-500); }
.cta-sub { font-size: 17px; color: var(--text-2); margin: 0 0 32px; max-width: 42ch; line-height: 1.6; word-break: keep-all; }
.cta-buttons { display: inline-flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 1024px) {
  .cta-row { grid-template-columns: 1fr; gap: 32px; text-align: center; }
  .cta-visual img { max-width: 280px; }
  .cta-content { max-width: none; }
  .cta-title { margin-inline: auto; }
  .cta-sub { margin-inline: auto; word-break: keep-all; }
  .cta-buttons { justify-content: center; }
}

/* ---- Home News teaser (latest 3 articles on landing) ---- */
.home-news { background: var(--bg-cream); }
.home-news .section-head { margin-bottom: 40px; max-width: none; }
/* Cases section sits between the violet stats band and the cream logo
   strip — give it a clean off-white to separate the case cards visually. */
#cases.section { background: #FAF7EE; }
.section-head--row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.section-head--row .display-section { margin-bottom: 0; }
.home-news-all {
  font-family: var(--font-kr);
  font-size: 14px; font-weight: 600;
  color: var(--violet-500);
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: gap 0.2s ease, color 0.18s ease, letter-spacing 0.22s ease;
}
.home-news-all:hover { color: var(--violet-600); letter-spacing: 0.005em; }

.home-news-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.home-news-card {
  display: flex; flex-direction: column; gap: 12px;
  min-width: 0;
  transition: opacity 0.2s ease;
}
.home-news-card:hover { opacity: 0.78; }
.home-news-card:hover .home-news-card-thumb { box-shadow: 0 14px 32px rgba(94,59,154,0.10); }
.home-news-card-thumb {
  position: relative;
  width: 100%; aspect-ratio: 16/10;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--violet-100) 0%, var(--bg-pink) 100%);
  overflow: hidden;
  transition: box-shadow 0.25s ease;
  display: block;
}
.home-news-card-thumb img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
.home-news-card-thumb.is-empty::before {
  content: "NEWS"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--violet-500); font-family: var(--font-en); font-weight: 700; font-size: 16px; letter-spacing: 0.12em;
}
.home-news-card-source {
  font-size: 13px; color: var(--text-3); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.home-news-card-title {
  font-family: var(--font-kr); font-weight: 600;
  font-size: 16px; line-height: 1.45; letter-spacing: -0.012em;
  color: var(--text); margin: 0;
  word-break: break-word; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden;
}
.home-news-card-excerpt {
  font-size: 13.5px; line-height: 1.65; color: var(--text-2);
  margin: 0;
  word-break: keep-all; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.home-news-card-date {
  font-family: var(--font-en); font-size: 12.5px; color: var(--text-3);
}
.home-news-status {
  grid-column: 1 / -1;
  padding: 60px 0; text-align: center; color: var(--text-3); font-size: 14px;
}
.home-news-status.error { color: #C44; }
@media (max-width: 1024px) {
  .home-news-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .section-head--row { align-items: flex-start; }
}
@media (max-width: 600px) {
  .home-news-grid { grid-template-columns: 1fr; }
}

/* ---- Footer (simplified: brand left + Family Sites select right) ---- */
.footer {
  position: relative;
  /* overflow: hidden removed — the Family Sites dropdown panel opens
     upward via position:absolute and was getting clipped by the
     footer's box. Deco PNGs that previously relied on this footer-
     level clip now get wrapped by .footer-deco-clip instead. */
  padding: 44px 0 28px;
  background: #15151a;        /* matches the dark manifesto band on /company */
  color: rgba(255, 255, 255, 0.78);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.footer > .container { position: relative; z-index: 2; }

/* Per-footer deco containment — keeps the rotating g_o PNG (only
   used on the home page footer) from bleeding above/right of the
   footer band now that the parent no longer clips. */
.footer-deco-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.footer-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 48px;
  align-items: start;
  margin-bottom: 28px;
}
.footer-nav { display: flex; gap: 56px; }
.footer-nav-col { display: flex; flex-direction: column; gap: 11px; }
.footer-nav-title {
  font-family: var(--font-en); font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; color: rgba(255,255,255,0.45);
  margin: 0 0 6px;
}
.footer-nav-col a {
  font-family: var(--font-kr); font-size: 13.5px; color: rgba(255,255,255,0.72);
  transition: color 0.15s ease;
}
.footer-nav-col a:hover { color: #fff; }
/* Standalone footer nav links whose header IS the link (mirrors GNB top-level: AI Tech, Careers) */
a.footer-nav-title { transition: color 0.15s ease; }
a.footer-nav-title:hover { color: #fff; }
@media (max-width: 900px) {
  .footer-row { grid-template-columns: 1fr; }
  .footer-nav { flex-wrap: wrap; gap: 40px; }
}

.footer-family { min-width: 280px; }
.footer-family-label {
  display: block;
  font-family: var(--font-en);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: none;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 14px;
}

/* Custom layered select — built on <details>/<summary> so the open/close
   toggle is free of JS but the visual is fully designed. */
.footer-family-dropdown {
  position: relative;
}
.footer-family-trigger {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  padding: 14px 22px;
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  font-family: var(--font-kr);
  font-size: 14px; font-weight: 500;
  color: var(--text);
  letter-spacing: -0.005em;
  cursor: pointer;
  list-style: none;       /* hide native disclosure marker */
  user-select: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.footer-family-trigger::-webkit-details-marker { display: none; }
.footer-family-trigger:hover {
  border-color: var(--violet-300);
  box-shadow: 0 4px 12px rgba(94,59,154,0.08);
}
.footer-family-dropdown[open] .footer-family-trigger {
  border-color: var(--violet-500);
  box-shadow: 0 0 0 3px rgba(94,59,154,0.12);
}
.footer-family-trigger-chevron {
  width: 8px; height: 8px;
  border-right: 1.5px solid var(--text-2);
  border-bottom: 1.5px solid var(--text-2);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.footer-family-dropdown[open] .footer-family-trigger-chevron {
  transform: translateY(2px) rotate(-135deg);
  border-color: var(--violet-500);
}

.footer-family-panel {
  position: absolute;
  /* Footer sits at the bottom of the page, so the layer opens UPWARD
     to avoid pushing content off-canvas. */
  bottom: calc(100% + 8px);
  left: 0; right: 0;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-card);
  box-shadow: 0 -8px 28px rgba(94,59,154,0.14), 0 -2px 4px rgba(0,0,0,0.04);
  display: flex; flex-direction: column;
  gap: 2px;
  z-index: 5;
  animation: footerFamilyPanelIn 0.16s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes footerFamilyPanelIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.footer-family-option {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  text-decoration: none;
  transition: background 0.15s ease;
}
.footer-family-option:hover {
  background: var(--violet-100);
}
.footer-family-option-text {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.footer-family-option-name {
  font-family: var(--font-kr);
  font-size: 14px; font-weight: 700;
  color: var(--text);
  letter-spacing: -0.012em;
  line-height: 1.32;
}
.footer-family-option-desc {
  font-family: var(--font-kr);
  font-size: 11.5px;
  color: var(--text-3);
  letter-spacing: -0.005em;
  word-break: keep-all;
}
.footer-family-option-arrow {
  font-family: var(--font-en);
  font-size: 14px;
  font-weight: 600;
  color: var(--violet-500);
  transition: transform 0.18s ease;
}
.footer-family-option:hover .footer-family-option-arrow {
  transform: translate(2px, -2px);
}

/* Legacy classes — left in for compat, unused in current footer markup */
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr; gap: 36px; margin-bottom: 56px; }
.footer-brand img { height: 20px; margin-bottom: 14px; }
.footer-tagline { font-size: 13.5px; color: rgba(255, 255, 255, 0.72); margin-bottom: 16px; word-break: keep-all; }
.footer-company-info { font-size: 12px; line-height: 1.75; color: rgba(255, 255, 255, 0.5); }
.footer-col-title { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: none; color: #fff; margin-bottom: 16px; }
.footer-col-list { display: flex; flex-direction: column; gap: 10px; }
.footer-col-list a { font-size: 14px; color: rgba(255, 255, 255, 0.6); transition: color 0.15s ease; }
.footer-col-list a:hover { color: #fff; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12px; color: rgba(255, 255, 255, 0.4);
}

/* Footer marquee (giant repeating copyright) */
.footer-marquee {
  background: var(--bg-peach);
  overflow: hidden; padding: 14px 0;
  border-top: 1px solid var(--border);
}
.footer-marquee .marquee-track {
  font-family: var(--font-en);
  font-size: 12.5px; font-weight: 500; letter-spacing: 0.12em;
  color: var(--text-3); text-transform: none;
  animation-duration: 52s;
}
.footer-marquee .marquee-track > span::after { color: rgba(124,92,250,0.4); }

/* ---- Responsive ---- */
.desktop-only { display: inline; }
.mobile-only { display: none; }

@media (max-width: 1024px) {
  .spatial-grid-row { grid-template-columns: 1fr; gap: 48px; }
  .hero { text-align: center; }
  .hero-row { grid-template-columns: 1fr; gap: 24px; }
  .hero-visual { order: 2; }
  .hero-visual img { max-width: 320px; }
  .phone-frame {
    --phone-w: 220px;
    --phone-h: 420px;
    --bezel: 8px;
    --iframe-w: 460px;
    --iframe-h: 7000px;
    /* scale = (220 - 16) / 460 = 0.443 */
    --scale: 0.443;
    /* scroll-end = -(7000*0.443 - 404) = -2697 */
    --scroll-end: -2697px;
    border-radius: 30px;
  }
  .phone-screen { border-radius: 22px; }
  .phone-notch { width: 40%; height: 16px; }
  .phone-loader-text { font-size: 11px; }
  .display-hero { margin: 0 auto 26px; max-width: 14ch; }
  .hero-sub { margin: 0 auto 32px; }
  .hero-actions { justify-content: center; }
  .hero-meta { justify-content: center; }
}

@media (max-width: 768px) {
  /* Mobile nav: solid white bar pinned to top (no floating pill) */
  .nav-shell {
    top: 0;
    justify-content: stretch;
  }
  .nav-pill {
    display: flex;
    width: 100%;
    padding: 12px 18px;
    background: #fff;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .nav-logo {
    padding-right: 0;
    margin-right: auto;        /* keep logo left, push hamburger to right */
  }
  .nav-menu { display: none; }
  .nav-cta { display: none; }
  .hamburger { display: inline-flex; }
  .desktop-only { display: none; }
  .mobile-only { display: inline; }

  .hero { padding: 130px 0 70px; }
  .section { padding: 72px 0; }
  .mallpie-intro,
  .stats-section,
  .home-news { padding: 72px 0; }
  .spatial { padding: 72px 0; }
  .logo-marquee { padding: 60px 0; }
  .cta { padding: 84px 0; }
  .stats-row { grid-template-columns: repeat(2, 1fr); gap: 32px 16px; padding: 32px 0; }
  .case-card { min-height: 0; padding: 28px 26px; }
  .case-stats { gap: 18px; }
  .footer-row { grid-template-columns: 1fr; gap: 32px; }
  .footer-family { width: 100%; min-width: 0; }
  .footer-family-grid { grid-template-columns: 1fr; gap: 8px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; gap: 8px; align-items: flex-start; }
  .hero-actions, .cta-buttons { flex-direction: column; width: 100%; }
  .hero-actions .btn, .cta-buttons .btn { width: 100%; }
}

@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ══════════ Mallpie sub-page hero (shared across service pages) ══════════
   Copy on the left (vertically centred), visual anchored to the hero's
   bottom edge on the right. Consistent padding / type scale for all of
   Connect / Welfare / Solution / MyMall / Distribution. */
.svc-hero {
  position: relative;
  padding: 130px 0 0;
  background:
    radial-gradient(58% 58% at 82% 30%, rgba(94,59,154,0.34) 0%, transparent 64%),
    linear-gradient(180deg, #17171f 0%, #0E0E14 100%);
  overflow: hidden;
  isolation: isolate;
}
.svc-hero-video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 1; pointer-events: none;
}
.svc-hero-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: rgba(6, 6, 10, 0.5);
}
.svc-hero > .container { position: relative; z-index: 2; }
.svc-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  align-items: end;
  gap: 56px;
  min-height: 468px;
}
.svc-hero-copy { max-width: 540px; align-self: center; }
.svc-hero-eyebrow {
  display: block; font-family: var(--font-kr);
  font-size: clamp(18px, 1.9vw, 24px); font-weight: 600;
  color: #C9B7F2; letter-spacing: -0.015em; margin-bottom: 16px; word-break: keep-all;
}
.svc-hero-title {
  font-family: var(--font-en), var(--font-kr);
  font-size: clamp(40px, 5vw, 66px); font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.02em; color: #fff; margin: 14px 0 20px;
}
.svc-hero-sub {
  font-size: clamp(16px, 1.4vw, 18px); line-height: 1.65;
  color: rgba(255,255,255,0.72); word-break: keep-all; margin: 0 0 30px; max-width: 56ch;
}
.svc-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.svc-hero-cta .btn-secondary {
  background: rgba(255,255,255,0.10); color: #fff;
  border: 1px solid rgba(255,255,255,0.30);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.svc-hero-cta .btn-secondary:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.46); }
.svc-hero-visual { align-self: end; min-width: 0; display: flex; justify-content: flex-end; }
.svc-hero-visual img { width: 100%; height: auto; display: block; border-radius: 14px 14px 0 0; }
/* Placeholder visual for service pages whose capture isn't in yet */
.svc-hero-ph {
  width: 100%; aspect-ratio: 16 / 10;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(160deg, rgba(201,183,242,0.14) 0%, rgba(255,255,255,0.03) 70%);
  border: 1px solid rgba(255,255,255,0.10); border-bottom: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
}
.svc-hero-ph svg { width: 40px; height: 40px; color: #C9B7F2; opacity: 0.6; }
.svc-hero-ph span { font-family: var(--font-en); font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; color: rgba(255,255,255,0.5); }
@media (max-width: 900px) {
  .svc-hero { padding: 114px 0 0; text-align: center; }
  .svc-hero-grid { grid-template-columns: 1fr; gap: 30px; justify-items: center; min-height: 0; }
  .svc-hero-copy { max-width: 560px; align-self: auto; padding: 0; }
  .svc-hero-eyebrow, .svc-hero-sub { margin-left: auto; margin-right: auto; }
  .svc-hero-cta { justify-content: center; }
  .svc-hero-visual { width: 100%; justify-content: center; }
  .svc-hero-ph { aspect-ratio: 16/11; }
}