:root {
  --ink: #090b0f;
  --paper: #f4f5f7;
  --muted: #727780;
  --line: rgba(9, 11, 15, .14);
  --electric: #6257ff;
  --cyan: #7cf7ff;
  --max: 1440px;
}

* { box-sizing: border-box; }
html, body { overflow-x: clip; }
[hidden] { display: none !important; }
html { scroll-behavior: auto; }
body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--paper);
  font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
.section-pad { max-width: var(--max); margin: 0 auto; padding: 132px 6vw; }
main > section[id] { scroll-margin-top: 72px; }

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  padding: 0 5vw;
  color: white;
  background: linear-gradient(to bottom, rgba(7,8,12,.78), transparent);
  transition: background .25s ease, color .25s ease;
}
.site-header.scrolled { color: var(--ink); background: rgba(244,245,247,.9); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; color: inherit; }
.wordmark { display: inline-flex; align-items: baseline; gap: 0; white-space: nowrap; line-height: .82; font-family: Inter, "Arial Black", Arial, sans-serif; filter: drop-shadow(0 4px 14px rgba(0,0,0,.12)); }
.wordmark b,
.wordmark strong { display: inline-block; font-size: 27px; font-weight: 900; font-style: normal; letter-spacing: -.075em; transform: scaleX(.93); transform-origin: center bottom; }
.wordmark b { color: #f7f8ff; transition: color .25s ease; }
.wordmark strong { margin-left: 0; color: transparent; background: linear-gradient(120deg, #52efff 0%, #8d72ff 52%, #6957ff 100%); -webkit-background-clip: text; background-clip: text; text-shadow: 0 0 28px rgba(98,87,255,.16); }
.site-header.scrolled .wordmark b { color: var(--ink); }
.site-nav { display: flex; align-items: center; gap: clamp(13px, 1.65vw, 30px); font-size: 12px; font-weight: 750; letter-spacing: .08em; }
.site-nav a { transition: opacity .2s; }
.site-nav a:hover { opacity: .55; }
.nav-cta { padding: 12px 17px; border: 1px solid currentColor; border-radius: 999px; }
.header-phone { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .035em; white-space: nowrap; transition: background .2s, border-color .2s, transform .2s; }
.header-phone:hover { opacity: 1 !important; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.56); transform: translateY(-1px); }
.header-phone svg { width: 13px; height: 13px; flex: 0 0 auto; fill: currentColor; }
.site-header.scrolled .header-phone { background: rgba(9,11,15,.035); border-color: var(--line); }
.site-header.scrolled .header-phone:hover { background: rgba(9,11,15,.075); border-color: rgba(9,11,15,.28); }
.menu-toggle { display: none; color: inherit; background: none; border: 0; font: inherit; font-size: 12px; font-weight: 800; }
.language-switcher { display: flex; gap: 2px; padding: 3px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; }
.site-header.scrolled .language-switcher { border-color: var(--line); }
.language-switcher button { display: grid; place-items: center; width: auto; height: 31px; padding: 0 10px; color: inherit; background: transparent; border: 0; border-radius: 999px; font-size: 10px; font-weight: 800; line-height: 1; cursor: pointer; white-space: nowrap; transition: background .2s, transform .2s; }
.language-switcher button:hover { transform: translateY(-1px); }
.language-switcher button.active { color: white; background: rgba(98,87,255,.92); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.social-dock { display: flex; align-items: center; gap: 6px; padding-left: 4px; }
.social-dock-mobile { display: none; }
.social-item { position: relative; }
.social-trigger { display: grid; place-items: center; width: 25px; height: 25px; padding: 0; color: inherit; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22); border-radius: 7px; cursor: pointer; transition: color .2s, background .2s, border-color .2s, transform .2s; }
.site-header.scrolled .social-trigger { background: rgba(9,11,15,.035); border-color: var(--line); }
.social-trigger:hover, .social-trigger:focus-visible, .social-item.is-open .social-trigger { border-color: rgba(255,255,255,.7); outline: none; transform: translateY(-2px) scale(1.04); }
.social-trigger svg { width: 12px; height: 12px; overflow: visible; fill: white; }
.social-item[data-social="instagram"] .social-trigger { background: radial-gradient(circle at 31% 106%,#ffd600 0 22%,#ff7a00 32%,#ff0169 58%,#d300c5 72%,#7638fa 100%); border-color: transparent; }
.social-item[data-social="tiktok"] .social-trigger { background: #090909; border-color: rgba(255,255,255,.22); }
.social-item[data-social="tiktok"] .tiktok-mark { width: 15px; height: 15px; }
.social-item[data-social="tiktok"] .tik-cyan { fill: #25f4ee; transform: translate(-.65px,.25px); }
.social-item[data-social="tiktok"] .tik-pink { fill: #fe2c55; transform: translate(.65px,-.15px); }
.social-item[data-social="tiktok"] .tik-white { fill: white; }
.social-item[data-social="youtube"] .social-trigger { background: white; border-color: #ff0033; }
.social-item[data-social="youtube"] .social-trigger svg { fill: #ff0033; width: 15px; height: 15px; }
.social-kakao .social-trigger { background: #fee500; border-color: #fee500; }
.social-kakao .social-trigger svg { fill: #191600; width: 15px; height: 15px; }
.site-header.scrolled .social-kakao .social-trigger { background: #fee500; border-color: #fee500; }
.site-header.scrolled .social-kakao .social-trigger svg { fill: #191600; }
.social-popover { position: absolute; top: calc(100% + 17px); right: 0; width: 224px; padding: 18px; color: var(--ink); background: rgba(255,255,255,.97); border: 1px solid rgba(9,11,15,.12); border-radius: 18px; box-shadow: 0 24px 70px rgba(5,8,18,.22); opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.97); transform-origin: top right; pointer-events: none; transition: opacity .18s ease, transform .18s ease, visibility .18s; }
.social-popover::before { content: ""; position: absolute; top: -6px; right: 12px; width: 11px; height: 11px; background: white; border-top: 1px solid rgba(9,11,15,.12); border-left: 1px solid rgba(9,11,15,.12); transform: rotate(45deg); }
.social-item:hover .social-popover, .social-item:focus-within .social-popover, .social-item.is-open .social-popover { opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto; }
.social-popover-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
.social-popover-head b { font-size: 12px; letter-spacing: .02em; }
.social-popover-head span { color: var(--electric); font-size: 12px; }
.social-id { display: block; min-height: 19px; margin-bottom: 13px; color: var(--muted); font-size: 12px; font-weight: 650; letter-spacing: 0; overflow-wrap: anywhere; }
.social-qr { display: grid; place-items: center; width: 100%; aspect-ratio: 1; overflow: hidden; background: linear-gradient(135deg,#f0f1f4,#fff); border: 1px solid var(--line); border-radius: 12px; }
.social-qr img { width: 100%; height: 100%; object-fit: contain; padding: 9px; background: white; }
.social-qr-placeholder { display: grid; place-items: center; width: 72%; aspect-ratio: 1; color: rgba(9,11,15,.28); border: 2px dashed rgba(9,11,15,.18); border-radius: 12px; font-size: 11px; font-weight: 900; letter-spacing: .16em; }
.social-profile-link { display: block; margin-top: 12px; color: var(--electric); font-size: 11px; font-weight: 850; text-align: center; letter-spacing: 0; }

.hero {
  position: relative;
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  align-items: center;
  gap: 7vw;
  max-width: none;
  min-height: 100vh;
  overflow: hidden;
  color: white;
  background:
    radial-gradient(circle at 70% 35%, rgba(98,87,255,.28), transparent 38%),
    linear-gradient(120deg, #08090d 0%, #111421 58%, #080a0e 100%);
}
.hero-copy { max-width: 690px; margin-left: max(0px, calc((100vw - var(--max)) / 2)); }
.hero-copy, .hero-visual { min-width: 0; }
.eyebrow { margin: 0 0 28px; color: var(--electric); font-size: 12px; font-weight: 850; letter-spacing: .18em; }
.hero .eyebrow { color: var(--cyan); }
.hero h1 { margin: 0; font-size: clamp(72px, 10vw, 164px); line-height: .83; letter-spacing: -.085em; }
.hero h1 span { color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.76); }
.hero-lead { max-width: 620px; margin: 40px 0 0; color: rgba(255,255,255,.72); font-size: clamp(16px, 1.35vw, 21px); line-height: 1.8; word-break: keep-all; }
.hero-actions { display: flex; gap: 12px; margin-top: 38px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 24px; border: 1px solid transparent; border-radius: 999px; font-size: 13px; font-weight: 800; cursor: pointer; transition: transform .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: white; background: var(--electric); }
.button-ghost { color: white; border-color: rgba(255,255,255,.35); }
.hero-visual { position: relative; height: min(68vh, 760px); }
.visual-card { position: absolute; overflow: hidden; border: 1px solid rgba(255,255,255,.16); box-shadow: 0 30px 80px rgba(0,0,0,.4); }
.visual-main { inset: 12% 5% 8% 18%; border-radius: 38% 4% 34% 4%; }
.visual-top { top: 1%; right: 0; width: 36%; height: 29%; border-radius: 4px 50px 4px 4px; }
.visual-bottom { bottom: 0; left: 0; width: 34%; height: 27%; border-radius: 4px 4px 4px 50px; }
.orbit { position: absolute; border: 1px solid rgba(124,247,255,.34); border-radius: 50%; pointer-events: none; animation: spin 14s linear infinite; }
.orbit-one { inset: 5% -6% 4% 10%; transform: rotate(-18deg); }
.orbit-two { inset: 19% 8% 18% -2%; transform: rotate(25deg); animation-direction: reverse; animation-duration: 19s; }
.hero-index { position: absolute; right: 2.5vw; bottom: 2vw; color: rgba(255,255,255,.18); font-size: 13px; letter-spacing: .2em; }
@keyframes spin { to { rotate: 360deg; } }

.business-nav-shell { position: sticky; top: 76px; z-index: 22; padding: 0 5vw; color: white; background: rgba(11,13,19,.97); border-top: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1); box-shadow: 0 12px 30px rgba(5,7,12,.12); backdrop-filter: blur(14px); }
.business-nav-shell + .work { padding-top: 84px; }
.business-nav-shell + .work > .section-heading { display: none; }
.business-nav-shell + .work > .showcase-panel { margin-top: 0; }
.business-nav { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); max-width: var(--max); margin: 0 auto; }
.business-nav button { position: relative; display: grid; align-content: space-between; min-width: 0; min-height: 126px; padding: 20px 18px; overflow: hidden; color: rgba(255,255,255,.64); background: transparent; border: 0; border-right: 1px solid rgba(255,255,255,.1); font: inherit; text-align: left; cursor: pointer; transition: color .22s ease, background .22s ease; }
.business-nav button:first-child { border-left: 1px solid rgba(255,255,255,.1); }
.business-nav button::after { content: ""; position: absolute; inset: auto 0 0; height: 3px; background: linear-gradient(90deg,var(--cyan),var(--electric)); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.business-nav button:hover { color: white; background: rgba(255,255,255,.045); }
.business-nav button.active { color: white; background: linear-gradient(145deg,rgba(98,87,255,.3),rgba(124,247,255,.05)); }
.business-nav button.active::after { transform: scaleX(1); }
.business-nav small { display: block; color: var(--cyan); font-size: 15px; font-weight: 900; line-height: 1; letter-spacing: .1em; }
.business-nav span { font-size: 18px; font-weight: 850; line-height: 1.28; letter-spacing: -.035em; word-break: keep-all; }

.service-hub { background: #f4f5f7; }
.service-hub-head { display: grid; grid-template-columns: .45fr 1.15fr .65fr; align-items: end; gap: 4vw; margin-bottom: 56px; }
.service-hub-head h2 { margin: 0; font-size: clamp(44px, 5.4vw, 78px); line-height: .98; letter-spacing: -.065em; word-break: keep-all; }
.service-hub-head h2 span { color: var(--muted); }
.service-hub-head > p:last-child { margin: 0; color: var(--muted); line-height: 1.75; word-break: keep-all; }
.service-pillar { overflow: hidden; border: 1px solid var(--line); }
.video-pillar { color: white; background: #0b0d13; }
.pillar-intro { display: grid; grid-template-columns: 115px .8fr 1fr; align-items: end; gap: 3vw; padding: 38px 42px; border-bottom: 1px solid rgba(255,255,255,.14); }
.pillar-intro > span { align-self: start; color: var(--cyan); font-size: 10px; font-weight: 850; letter-spacing: .16em; }
.pillar-intro h3 { margin: 0; font-size: clamp(34px, 4.5vw, 66px); letter-spacing: -.06em; }
.pillar-intro p { margin: 0; color: rgba(255,255,255,.58); line-height: 1.75; word-break: keep-all; }
.video-service-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.video-service-grid a { min-height: 210px; padding: 28px; border-right: 1px solid rgba(255,255,255,.13); border-bottom: 1px solid rgba(255,255,255,.13); transition: background .22s ease, transform .22s ease; }
.video-service-grid a:nth-child(3n) { border-right: 0; }
.video-service-grid a:hover { background: linear-gradient(145deg, rgba(98,87,255,.3), rgba(124,247,255,.06)); }
.video-service-grid b { color: var(--cyan); font-size: 10px; letter-spacing: .16em; }
.video-service-grid h4 { margin: 64px 0 12px; font-size: clamp(21px, 2vw, 30px); letter-spacing: -.04em; }
.video-service-grid p { margin: 0; color: rgba(255,255,255,.54); font-size: 13px; line-height: 1.65; word-break: keep-all; }
.remake-service { background: radial-gradient(circle at 100% 0, rgba(98,87,255,.3), transparent 52%); }
.remake-explainer { display: grid; grid-template-columns: 180px 1fr; gap: 3vw; padding: 32px 42px; background: #151824; }
.remake-explainer strong { color: var(--cyan); font-size: 15px; }
.remake-explainer p { margin: 0; color: rgba(255,255,255,.76); line-height: 1.75; word-break: keep-all; }
.remake-explainer small { grid-column: 2; padding-top: 18px; color: rgba(255,255,255,.42); border-top: 1px solid rgba(255,255,255,.12); font-size: 11px; line-height: 1.7; word-break: keep-all; }
.image-pillar { display: grid; grid-template-columns: 1.15fr 1fr auto; align-items: center; gap: 4vw; margin-top: 16px; padding: 40px 42px; background: white; }
.image-pillar .pillar-intro { display: block; padding: 0; border: 0; }
.image-pillar .pillar-intro > span { display: block; margin-bottom: 24px; color: var(--electric); }
.image-pillar .pillar-intro h3 { color: var(--ink); }
.image-pillar .pillar-intro p { margin-top: 14px; color: var(--muted); }
.image-pillar ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.image-pillar li { padding-bottom: 11px; color: #454a53; border-bottom: 1px solid var(--line); font-size: 13px; }
.button-dark { color: white; background: var(--ink); white-space: nowrap; }
.service-advantages { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 16px; color: white; background: var(--electric); }
.service-advantages div { display: grid; gap: 9px; min-height: 150px; padding: 25px; border-right: 1px solid rgba(255,255,255,.22); }
.service-advantages div:last-child { border-right: 0; }
.service-advantages b { color: var(--cyan); font-size: 10px; }
.service-advantages strong { margin-top: auto; font-size: 18px; }
.service-advantages span { color: rgba(255,255,255,.68); font-size: 11px; line-height: 1.5; }

.production-standard { background: #e9ebf2; }
.standard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.standard-card { position: relative; min-height: 320px; padding: 30px; overflow: hidden; color: white; background: #10131b; border: 1px solid rgba(255,255,255,.08); }
.standard-card::after { content: ""; position: absolute; width: 180px; height: 180px; right: -75px; bottom: -90px; background: radial-gradient(circle, rgba(124,247,255,.22), transparent 68%); }
.standard-card > span { color: var(--cyan); font-size: 11px; font-weight: 850; letter-spacing: .15em; }
.standard-card h3 { margin: 115px 0 18px; font-size: clamp(24px, 2.4vw, 36px); letter-spacing: -.05em; }
.standard-card p { position: relative; z-index: 1; margin: 0; color: rgba(255,255,255,.62); line-height: 1.75; word-break: keep-all; }

.section-heading { display: grid; grid-template-columns: .55fr 1.2fr .7fr; align-items: end; gap: 4vw; margin-bottom: 64px; }
.section-heading h2, .white-label h2, .contact h2 { margin: 0; font-size: clamp(42px, 6vw, 88px); line-height: 1.03; letter-spacing: -.065em; word-break: keep-all; }
.section-heading > p:last-child { margin: 0; color: var(--muted); line-height: 1.7; word-break: keep-all; }
.showcase-panel { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(300px,.85fr); gap: 5vw; margin: -18px 0 18px; padding: clamp(28px,4vw,54px); color: white; background: radial-gradient(circle at 90% 0,rgba(98,87,255,.4),transparent 35%),#0b0d13; border: 1px solid rgba(255,255,255,.08); }
.showcase-kicker { margin: 0 0 22px; color: var(--cyan); font-size: 10px; font-weight: 850; letter-spacing: .18em; }
.showcase-title { margin: 0; font-size: clamp(34px,4vw,58px); line-height: 1; letter-spacing: -.055em; word-break: keep-all; }
.showcase-description { max-width: 720px; margin: 24px 0 0; color: rgba(255,255,255,.65); font-size: 15px; line-height: 1.8; word-break: keep-all; }
.showcase-deliverables { display: grid; align-content: center; gap: 0; margin: 0; padding: 0; list-style: none; }
.showcase-deliverables li { display: flex; gap: 14px; padding: 13px 0; color: rgba(255,255,255,.78); border-bottom: 1px solid rgba(255,255,255,.12); font-size: 12px; line-height: 1.5; }
.showcase-deliverables li::before { content: "↗"; color: var(--cyan); font-weight: 900; }
.work-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 52px 22px; }
.work-filters { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); margin: 0 0 38px; border: 1px solid var(--line); }
.work-filters { display: none !important; }
.work-filters button { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; min-height: 62px; padding: 11px 13px; color: var(--muted); background: white; border: 0; border-right: 1px solid var(--line); font-size: 11px; font-weight: 800; text-align: left; cursor: pointer; transition: color .2s,background .2s; }
.work-filters button:last-child { border-right: 0; }
.work-filters button span { min-width: 0; line-height: 1.35; word-break: keep-all; }
.work-filters button b { color: #a2a6ae; font-size: 9px; }
.work-filters button.active { color: white; background: var(--electric); }
.work-filters button.active b { color: var(--cyan); }
.work-card.filtered-out { display: none; }
.work-card { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: start; margin: 0; cursor: pointer; outline: none; }
.work-card:focus-visible { box-shadow: 0 0 0 3px var(--electric); }
.work-card > img { grid-column: 1 / -1; grid-row: 1; width: 100%; height: auto; aspect-ratio: 16/10; filter: saturate(.9); transition: transform .55s ease, filter .55s ease; }
.work-card:hover > img { transform: scale(.985); filter: saturate(1.12); }
.work-tags { position: absolute; left: 18px; top: 18px; display: flex; gap: 6px; pointer-events: none; }
.work-tags span { padding: 7px 9px; color: white; background: rgba(9,11,15,.72); border: 1px solid rgba(255,255,255,.2); border-radius: 999px; backdrop-filter: blur(9px); font-size: 9px; font-weight: 850; letter-spacing: .08em; }
.play-button { position: static; grid-column: 2; grid-row: 2; align-self: start; display: inline-flex; align-items: center; gap: 9px; min-height: 42px; margin-top: 16px; padding: 6px 14px 6px 7px; color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; transition: color .2s ease, background .2s ease, transform .2s ease; }
.play-button:hover { color: white; background: var(--ink); transform: translateY(-2px); }
.play-button span { display: grid; place-items: center; width: 28px; height: 28px; padding-left: 2px; color: white; background: var(--electric); border-radius: 50%; font-size: 10px; }
.play-button em { font-style: normal; font-size: 11px; font-weight: 800; }
.work-wide { grid-column: span 2; }
.work-wide > img { aspect-ratio: 2.2/1; }
.work-vertical > img { object-position: center 35%; }
.work-meta { grid-column: 1; grid-row: 2; display: flex; justify-content: space-between; gap: 20px; min-width: 0; min-height: 64px; padding: 18px 24px 0 0; border-top: 1px solid var(--line); margin-top: 16px; }
.work-meta span { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.work-meta h3 { margin: 7px 0 0; font-size: 19px; letter-spacing: -.03em; }
.work-meta b { color: var(--muted); font-size: 11px; }
.work-empty { min-height: 390px; padding: clamp(44px,7vw,90px); color: white; background: radial-gradient(circle at 75% 25%,rgba(124,247,255,.16),transparent 25%),linear-gradient(135deg,#0b0d13,#171a2a); border: 1px solid rgba(255,255,255,.09); }
.work-empty > span { color: var(--cyan); font-size: 10px; font-weight: 850; letter-spacing: .2em; }
.work-empty h3 { max-width: 760px; margin: 70px 0 18px; font-size: clamp(34px,5vw,72px); line-height: 1; letter-spacing: -.06em; word-break: keep-all; }
.work-empty p { max-width: 680px; margin: 0 0 28px; color: rgba(255,255,255,.62); line-height: 1.75; word-break: keep-all; }

.services { max-width: none; color: white; background: var(--ink); }
.services > * { max-width: calc(var(--max) - 12vw); margin-left: auto; margin-right: auto; }
.section-heading.light .eyebrow { color: var(--cyan); }
.service-row { display: grid; grid-template-columns: 80px .8fr 1fr; align-items: center; gap: 3vw; padding: 32px 0; border-top: 1px solid rgba(255,255,255,.16); }
.service-row:last-child { border-bottom: 1px solid rgba(255,255,255,.16); }
.service-row span { color: var(--cyan); font-size: 11px; }
.service-row h3 { margin: 0; font-size: clamp(23px, 3vw, 42px); letter-spacing: -.05em; }
.service-row p { margin: 0; color: rgba(255,255,255,.58); line-height: 1.7; }

.scale { background: #eef0f5; }
.scale-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.scale-card { position: relative; min-height: 330px; padding: 30px; background: white; border: 1px solid var(--line); }
.scale-card.featured { color: white; background: var(--electric); border-color: var(--electric); }
.scale-card b { color: var(--electric); font-size: 11px; }
.scale-card.featured b { color: var(--cyan); }
.scale-card > span { position: absolute; top: 24px; right: 24px; padding: 7px 10px; color: var(--electric); background: white; border-radius: 999px; font-size: 10px; font-weight: 850; }
.scale-card h3 { margin: 116px 0 18px; font-size: clamp(25px,2.5vw,38px); letter-spacing: -.055em; }
.scale-card p { margin: 0; color: var(--muted); line-height: 1.8; word-break: keep-all; }
.scale-card.featured p { color: rgba(255,255,255,.72); }
.advantage-grid { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 54px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.advantage-grid div { display: grid; gap: 8px; padding: 25px 22px; border-right: 1px solid var(--line); }
.advantage-grid div:last-child { border-right: 0; }
.advantage-grid strong { font-size: 15px; }
.advantage-grid span { color: var(--muted); font-size: 12px; }

.white-label { position: relative; display: grid; grid-template-columns: 1.2fr .62fr; gap: 9vw; overflow: hidden; }
.white-label-number { position: absolute; top: 35px; right: -20px; color: rgba(98,87,255,.06); font-size: min(30vw, 420px); font-weight: 900; letter-spacing: -.1em; }
.white-label-copy { position: relative; max-width: 760px; }
.white-label-copy > p:not(.eyebrow) { max-width: 680px; margin: 34px 0; color: var(--muted); font-size: 18px; line-height: 1.9; word-break: keep-all; }
.white-label ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px 25px; padding: 0; list-style: none; }
.white-label li { padding: 16px 0; border-top: 1px solid var(--line); font-size: 14px; }
.partner-card { position: relative; align-self: end; padding: 34px; color: white; background: var(--electric); aspect-ratio: 1/1; display: flex; flex-direction: column; justify-content: space-between; }
.partner-card p { margin: 0; font-size: clamp(24px, 3vw, 44px); line-height: 1.08; font-weight: 850; letter-spacing: -.055em; }
.partner-card a { display: flex; justify-content: space-between; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.4); font-size: 13px; font-weight: 750; }

.process { border-top: 1px solid var(--line); }
.process-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 1px; padding: 0; background: var(--line); list-style: none; }
.process-grid li { min-height: 300px; padding: 28px; background: var(--paper); }
.process-grid b { color: var(--electric); font-size: 11px; }
.process-grid h3 { margin: 80px 0 18px; font-size: clamp(23px, 2.2vw, 30px); letter-spacing: -.05em; }
.process-grid p { color: var(--muted); line-height: 1.75; word-break: keep-all; }

.faq { border-top: 1px solid var(--line); background: white; }
.faq-list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { position: relative; padding: 28px 64px 28px 0; cursor: pointer; list-style: none; font-size: clamp(18px, 2vw, 27px); font-weight: 800; letter-spacing: -.035em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 8px; top: 22px; color: var(--electric); font-size: 32px; font-weight: 400; }
.faq details[open] summary::after { content: "−"; }
.faq details p { max-width: 820px; margin: -2px 0 28px; color: var(--muted); line-height: 1.8; word-break: keep-all; }

.contact { display: grid; grid-template-columns: .8fr 1.1fr; gap: 9vw; max-width: none; color: white; background: linear-gradient(135deg, #5146f4, #6a5cff 55%, #3039c9); }
.contact-copy { margin-left: max(0px, calc((100vw - var(--max)) / 2)); }
.contact .eyebrow { color: var(--cyan); }
.contact-copy > p:last-child { max-width: 540px; color: rgba(255,255,255,.72); line-height: 1.8; word-break: keep-all; }
.contact-channels { display: grid; gap: 10px; max-width: 460px; margin-top: 34px; }
.contact-channel { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 0; border-top: 1px solid rgba(255,255,255,.32); }
.contact-channel span { color: var(--cyan); font-size: 10px; font-weight: 850; letter-spacing: .16em; }
.contact-channel strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.contact-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px 18px; max-width: 760px; padding: clamp(24px,3vw,38px); background: rgba(18,20,51,.16); border-radius: 20px; }
.contact-form label { display: grid; align-content: start; gap: 9px; min-width: 0; font-size: 12px; font-weight: 700; }
.field-label { display: flex; align-items: center; gap: 4px; }
.required-mark { color: #fff28a; font-size: 14px; font-style: normal; font-weight: 900; line-height: 1; }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; min-height: 48px; color: white; background: rgba(255,255,255,.1); border: 1px solid transparent; border-radius: 10px; padding: 13px 14px; outline: none; font: inherit; transition: background .2s,border-color .2s,box-shadow .2s; }
.contact-form select { color-scheme: dark; }
.contact-form select option {
  color: #fbf7ff;
  background: #190827;
}
.contact-form select option:checked {
  color: #08020e;
  background: #b8f23d;
}
.contact-form textarea { min-height: 112px; resize: vertical; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { background: rgba(255,255,255,.15); border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(124,247,255,.12); }
.contact-form .button { border: 0; background: var(--ink); }
.form-wide { grid-column: span 2; }
.form-note { margin: -10px 0 0; color: rgba(255,255,255,.58); font-size: 11px; }
.consent-row { display: flex !important; grid-template-columns: 20px 1fr; align-items: center; gap: 10px !important; font-weight: 500 !important; }
.consent-row input { width: 17px; height: 17px; margin: 0; accent-color: var(--cyan); }
.contact-methods { min-width: 0; margin: 4px 0 0; padding: 22px 0 0; border: 0; border-top: 1px solid rgba(255,255,255,.22); }
.contact-methods legend { display: flex; align-items: center; gap: 4px; padding: 0 10px 0 0; font-size: 12px; font-weight: 800; }
.contact-methods > p { margin: 0 0 16px; color: rgba(255,255,255,.65); font-size: 11px; line-height: 1.55; }
.contact-method-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.contact-method-error { margin: 12px 0 0 !important; color: #fff6a8 !important; font-weight: 750; }
.project-details { overflow: hidden; margin-top: 2px; border: 0; border-top: 1px solid rgba(255,255,255,.22); border-bottom: 1px solid rgba(255,255,255,.22); }
.project-details summary { position: relative; display: grid; gap: 5px; padding: 18px 44px 18px 0; cursor: pointer; list-style: none; font-size: 13px; font-weight: 800; }
.project-details summary::-webkit-details-marker { display: none; }
.project-details summary::after { content: "+"; position: absolute; top: 13px; right: 20px; color: var(--cyan); font-size: 24px; font-weight: 400; }
.project-details[open] summary::after { content: "−"; }
.project-details summary small { color: rgba(255,255,255,.6); font-size: 10px; font-weight: 500; }
.project-details-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 22px 18px; padding: 6px 0 22px; }
.privacy-row { display: grid !important; grid-template-columns: 20px minmax(0,1fr); align-items: start; justify-items: start; gap: 11px !important; color: rgba(255,255,255,.76); font-size: 10px !important; font-weight: 500 !important; line-height: 1.65; }
.contact-form .privacy-row input[type="checkbox"] { grid-column: 1; align-self: start; justify-self: start; box-sizing: border-box; width: 17px; min-width: 17px; height: 17px; margin: 2px 0 0; padding: 0; accent-color: var(--cyan); }
.privacy-row span { grid-column: 2; min-width: 0; }

footer { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 30px; padding: 38px 5vw; color: rgba(255,255,255,.6); background: var(--ink); font-size: 12px; }
footer .brand { color: white; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 50; max-width: 360px; padding: 16px 20px; color: white; background: var(--ink); border-left: 3px solid var(--cyan); opacity: 0; pointer-events: none; transform: translateY(15px); transition: .25s ease; }
.toast.show { opacity: 1; transform: none; }
.back-to-top { position: fixed; right: clamp(16px,2.1vw,30px); bottom: clamp(18px,2.3vw,32px); z-index: 44; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; color: #08020e; background: var(--cyan); border: 1px solid rgba(255,255,255,.2); border-radius: 50%; box-shadow: 0 13px 38px rgba(0,0,0,.38),0 0 0 5px rgba(184,242,61,.07); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(16px) scale(.9); cursor: pointer; transition: opacity .22s ease,visibility .22s ease,transform .28s cubic-bezier(.16,1,.3,1),box-shadow .2s ease; }
.back-to-top svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.back-to-top.visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); }
.back-to-top:hover,.back-to-top:focus-visible { outline: none; transform: translateY(-3px) scale(1.03); box-shadow: 0 17px 44px rgba(0,0,0,.45),0 0 0 6px rgba(184,242,61,.12); }
.inquiry-modal { width: min(720px, calc(100vw - 36px)); max-width: none; padding: 0; color: var(--ink); background: var(--paper); border: 0; border-radius: 20px; box-shadow: 0 40px 120px rgba(0,0,0,.45); }
.inquiry-modal::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(8px); }
.inquiry-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px 28px; border-bottom: 1px solid var(--line); }
.inquiry-modal-head p { margin: 0 0 6px; color: var(--electric); font-size: 9px; font-weight: 850; letter-spacing: .15em; }
.inquiry-modal-head h2 { margin: 0; font-size: clamp(22px, 3vw, 32px); letter-spacing: -.045em; }
.inquiry-close { width: 42px; height: 42px; color: var(--ink); background: white; border: 1px solid var(--line); border-radius: 50%; font-size: 26px; cursor: pointer; }
.inquiry-summary { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; margin: 0 28px; background: var(--line); }
.inquiry-summary div { min-width: 0; padding: 18px; background: white; }
.inquiry-summary div.wide { grid-column: span 2; }
.inquiry-summary small { display: block; margin-bottom: 7px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.inquiry-summary p { margin: 0; overflow-wrap: anywhere; line-height: 1.55; white-space: pre-wrap; }
.inquiry-status { margin: 18px 28px 0; color: var(--muted); font-size: 12px; }
.inquiry-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 24px 28px 28px; }
.inquiry-edit { color: var(--ink); background: white; border-color: var(--line); }
.inquiry-send[disabled] { opacity: .55; cursor: wait; }
.video-modal { width: min(1120px, calc(100vw - 48px)); max-width: none; padding: 0; color: white; background: #090b0f; border: 1px solid rgba(255,255,255,.2); border-radius: 20px; box-shadow: 0 40px 120px rgba(0,0,0,.65); }
.video-modal::backdrop { background: rgba(0,0,0,.82); backdrop-filter: blur(9px); }
.video-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 24px; }
.video-modal-head p { margin: 0 0 5px; color: var(--cyan); font-size: 9px; font-weight: 850; letter-spacing: .15em; }
.video-modal-head h2 { margin: 0; font-size: 21px; letter-spacing: -.03em; }
.video-close { width: 42px; height: 42px; color: white; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 50%; font-size: 26px; line-height: 1; cursor: pointer; }
.video-modal video { position: relative; z-index: 1; display: block; width: 100%; max-height: 72vh; background: black; pointer-events: auto; touch-action: manipulation; }
.video-caption { margin: 0; padding: 16px 24px 20px; color: rgba(255,255,255,.56); font-size: 12px; }
.reveal { opacity: .08; filter: blur(10px); transform: translateY(42px) scale(.988); transition: opacity .85s cubic-bezier(.22,1,.36,1), transform .85s cubic-bezier(.22,1,.36,1), filter .75s ease; will-change: opacity, transform, filter; }
.reveal.visible { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
.reveal:not(.visible) img { filter: blur(8px) saturate(.65); transform: scale(1.025); }
.reveal.visible img { transition: filter .9s ease, transform .9s cubic-bezier(.22,1,.36,1); }

@media (max-width: 1500px) and (min-width: 901px) {
  .site-header { padding-inline: 3vw; }
  .site-nav { gap: 9px; }
  .site-nav > a:not(.nav-cta):not(.header-phone) { display: none; }
  .language-switcher button { padding-inline: 7px; font-size: 9px; }
}

@media (max-width: 900px) {
  .site-header { width: 100vw; min-height: 64px; }
  .menu-toggle { display: block; position: fixed; top: 24px; left: calc(100vw - 72px); width: 50px; z-index: 41; color: white; text-align: right; }
  .site-header.scrolled .menu-toggle { color: var(--ink); }
  .site-nav { position: absolute; top: 64px; left: 0; right: 0; display: none; padding: 24px 5vw; color: var(--ink); background: rgba(244,245,247,.98); flex-direction: column; align-items: flex-start; }
  .site-nav.open { display: flex; }
  .site-nav > a:not(.nav-cta) { display: inline-flex; }
  .header-phone { width: 100%; justify-content: center; padding: 11px 14px; color: var(--ink); background: white; border-color: var(--line); font-size: 12px; }
  .site-nav > .social-dock { display: none; }
  .social-dock-mobile { position: fixed; top: 20px; right: 78px; z-index: 42; display: flex; width: auto; gap: 4px; padding: 0; border: 0; }
  .social-dock-mobile .social-trigger { width: 23px; height: 23px; border-radius: 6px; }
  .social-dock-mobile .social-trigger svg { width: 11px; height: 11px; }
  .social-dock-mobile .social-popover { top: 58px; }
  .social-trigger { color: var(--ink); background: white; border-color: var(--line); }
  .social-kakao .social-trigger, .site-header.scrolled .social-kakao .social-trigger { background: #fee500; border-color: #fee500; }
  .social-kakao .social-trigger svg, .site-header.scrolled .social-kakao .social-trigger svg { fill: #191600; }
  .social-popover { position: fixed; top: 126px; right: 5vw; left: 5vw; width: auto; max-width: 280px; margin-left: auto; }
  .social-popover::before { display: none; }
  .back-to-top { right: 14px; bottom: 16px; width: 40px; height: 40px; }
  .hero { grid-template-columns: 1fr; padding-top: 120px; }
  .hero-copy { margin-left: 0; }
  .hero-visual { height: 52vh; }
  .service-hub-head { grid-template-columns: 1fr; align-items: start; }
  .pillar-intro { grid-template-columns: 80px 1fr; }
  .pillar-intro p { grid-column: 2; }
  .video-service-grid { grid-template-columns: repeat(2,1fr); }
  .video-service-grid a:nth-child(3n) { border-right: 1px solid rgba(255,255,255,.13); }
  .video-service-grid a:nth-child(2n) { border-right: 0; }
  .image-pillar { grid-template-columns: 1fr 1fr; }
  .image-pillar .button { grid-column: 1 / -1; justify-self: start; }
  .service-advantages { grid-template-columns: repeat(2,1fr); }
  .service-advantages div:nth-child(2) { border-right: 0; }
  .business-nav-shell { top: 64px; padding-inline: 0; overflow-x: auto; scrollbar-width: thin; }
  .business-nav-shell + .work { padding-top: 58px; }
  .business-nav { width: max-content; min-width: 100%; grid-template-columns: repeat(6, minmax(155px,1fr)); }
  .business-nav button { min-height: 108px; padding: 16px 15px; }
  .section-heading { grid-template-columns: 1fr; align-items: start; }
  .showcase-panel { grid-template-columns: 1fr; }
  .work-filters { display: flex; overflow-x: auto; scrollbar-width: thin; }
  .work-filters button { flex: 0 0 142px; border-bottom: 0; }
  .work-grid { gap-top: 32px; }
  .white-label, .contact { grid-template-columns: 1fr; }
  .partner-card { max-width: 440px; }
  .contact-copy { margin-left: 0; }
  .process-grid { grid-template-columns: repeat(2,1fr); }
  .standard-grid { grid-template-columns: 1fr; }
  .standard-card { min-height: 260px; }
  .standard-card h3 { margin-top: 75px; }
  .scale-grid { grid-template-columns: 1fr; }
  .scale-card { min-height: 260px; }
  .scale-card h3 { margin-top: 70px; }
  .advantage-grid { grid-template-columns: repeat(2,1fr); }
  .advantage-grid div:nth-child(2) { border-right: 0; }
  footer { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .section-pad { padding: 90px 22px; }
  .hero { padding-top: 110px; }
  .hero h1 { font-size: 64px; }
  .hero-lead { max-width: 335px; font-size: 14px; line-height: 1.85; word-break: normal; overflow-wrap: anywhere; }
  .hero-visual { height: 390px; }
  .visual-main { inset: 10% 0 5% 9%; }
  .visual-top, .visual-bottom { width: 42%; }
  .business-nav { grid-template-columns: repeat(6, 145px); }
  .business-nav button { min-height: 104px; padding: 15px 14px; }
  .business-nav small { font-size: 13px; }
  .business-nav span { font-size: 15px; }
  .service-hub-head h2 { font-size: 48px; }
  .pillar-intro { grid-template-columns: 1fr; padding: 28px 22px; }
  .pillar-intro p { grid-column: auto; }
  .video-service-grid { grid-template-columns: 1fr; }
  .video-service-grid a, .video-service-grid a:nth-child(3n) { min-height: 175px; border-right: 0; }
  .video-service-grid h4 { margin-top: 42px; }
  .remake-explainer { grid-template-columns: 1fr; padding: 28px 22px; }
  .remake-explainer small { grid-column: auto; }
  .image-pillar { grid-template-columns: 1fr; padding: 30px 22px; }
  .image-pillar .button { grid-column: auto; justify-self: stretch; }
  .service-advantages { grid-template-columns: 1fr; }
  .service-advantages div { min-height: 125px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.22); }
  .work-grid { grid-template-columns: 1fr; }
  .work-card { grid-template-columns: 1fr; }
  .work-meta { grid-column: 1; grid-row: 2; padding-right: 0; }
  .play-button { grid-column: 1; grid-row: 3; justify-self: start; margin-top: 14px; }
  .showcase-panel { padding: 30px 22px; }
  .showcase-title { font-size: 38px; }
  .showcase-description { font-size: 13px; }
  .work-filters { margin-inline: -22px; padding-left: 22px; border-left: 0; border-right: 0; }
  .work-wide { grid-column: auto; }
  .work-wide > img, .work-card > img { aspect-ratio: 16/11; }
  .service-row { grid-template-columns: 42px 1fr; }
  .service-row p { grid-column: 2; }
  .white-label ul { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: 1fr; }
  .process-grid li { min-height: 230px; }
  .contact-form { grid-template-columns: 1fr; }
  .form-wide { grid-column: auto; }
  .contact-method-grid, .project-details-grid { grid-template-columns: 1fr; }
  .project-details-grid .form-wide { grid-column: auto; }
  .inquiry-summary { grid-template-columns: 1fr; margin: 0 18px; }
  .inquiry-summary div.wide { grid-column: auto; }
  .inquiry-modal-head { padding: 22px 18px; }
  .inquiry-actions { padding: 20px 18px 22px; }
  .work-tags { left: 12px; top: 12px; max-width: calc(100% - 105px); flex-wrap: wrap; }
  .video-modal { width: calc(100vw - 20px); border-radius: 14px; }
  .wordmark { gap: 0; }
  .wordmark strong, .wordmark b { font-size: 24px; }
  .advantage-grid { grid-template-columns: 1fr; }
  .advantage-grid div { border-right: 0; border-bottom: 1px solid var(--line); }
  .advantage-grid div:last-child { border-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; filter: none; transform: none; }
}

/* Bright retail-inspired theme: violet + fresh lime. */
:root {
  --ink: #25113f;
  --paper: #fffdf6;
  --muted: #756b7d;
  --line: rgba(71, 32, 99, .15);
  --electric: #6c2bbf;
  --cyan: #b9ee39;
}

body { background: var(--paper); }
.site-header { background: linear-gradient(to bottom, rgba(52,16,85,.68), transparent); }
.site-header.scrolled { color: var(--ink); background: rgba(255,253,246,.94); border-bottom-color: rgba(108,43,191,.14); box-shadow: 0 8px 30px rgba(73,32,104,.08); }
.wordmark b { color: #fffdf8; }
.wordmark strong { background: linear-gradient(120deg,#dfff61 0%,#b9ee39 55%,#7edb45 100%); -webkit-background-clip: text; background-clip: text; text-shadow: 0 0 24px rgba(185,238,57,.22); }
.site-header.scrolled .wordmark b { color: #3d175e; }
.language-switcher button.active { color: #35124f; background: var(--cyan); box-shadow: none; }
.nav-cta { color: #31104e; background: var(--cyan); border-color: var(--cyan); }

.hero {
  color: white;
  background:
    radial-gradient(circle at 83% 17%,rgba(200,247,74,.88) 0 8%,rgba(185,238,57,.22) 9% 24%,transparent 25%),
    radial-gradient(circle at 12% 92%,rgba(255,114,194,.28),transparent 31%),
    linear-gradient(128deg,#421266 0%,#6c2bbf 50%,#8d3fd1 100%);
}
.hero::before { content: ""; position: absolute; inset: 0; opacity: .16; pointer-events: none; background-image: radial-gradient(circle,white 1.2px,transparent 1.3px); background-size: 24px 24px; mask-image: linear-gradient(115deg,black,transparent 62%); }
.hero .eyebrow { color: var(--cyan); }
.hero h1 span { color: var(--cyan); -webkit-text-stroke: 0; }
.hero-lead { color: rgba(255,255,255,.84); }
.button-primary { color: #2d1047; background: var(--cyan); box-shadow: 0 10px 30px rgba(73,32,104,.16); }
.button-ghost { color: white; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.55); }
.visual-card { border: 4px solid rgba(255,255,255,.92); box-shadow: 0 28px 70px rgba(45,12,74,.35); }
.visual-main { border-radius: 34px; transform: rotate(-1.5deg); }
.visual-top { border-radius: 24px; transform: rotate(4deg); }
.visual-bottom { border-radius: 24px; transform: rotate(-4deg); }
.orbit { border: 2px dashed rgba(217,255,101,.55); }

.business-nav-shell { color: var(--ink); background: rgba(255,253,246,.96); border-color: rgba(108,43,191,.13); box-shadow: 0 12px 34px rgba(72,26,103,.1); }
.business-nav button { color: rgba(50,21,72,.62); border-right-color: rgba(108,43,191,.12); }
.business-nav button:first-child { border-left-color: rgba(108,43,191,.12); }
.business-nav button:hover { color: var(--electric); background: rgba(185,238,57,.16); }
.business-nav button.active { color: #32104d; background: var(--cyan); }
.business-nav button::after { height: 4px; background: var(--electric); }
.business-nav small { color: var(--electric); }

.service-hub { background: linear-gradient(180deg,#fffdf6,#f7f2ff); }
.service-hub-head h2 span { color: var(--electric); }
.service-pillar { border-color: rgba(108,43,191,.16); border-radius: 24px; box-shadow: 0 18px 55px rgba(75,31,105,.07); }
.video-pillar { background: linear-gradient(135deg,#381052,#5d2390); }
.pillar-intro { border-bottom-color: rgba(255,255,255,.17); }
.pillar-intro > span,.video-service-grid b,.remake-explainer strong { color: var(--cyan); }
.video-service-grid a { border-color: rgba(255,255,255,.14); }
.video-service-grid a:hover { background: rgba(185,238,57,.14); transform: translateY(-3px); }
.remake-service { background: radial-gradient(circle at 100% 0,rgba(185,238,57,.2),transparent 54%); }
.remake-explainer { background: #48186d; }
.image-pillar { background: #fff; }
.button-dark { color: #30104a; background: var(--cyan); }
.service-advantages { overflow: hidden; color: var(--ink); background: var(--cyan); border-radius: 22px; }
.service-advantages div { border-right-color: rgba(61,23,89,.15); }
.service-advantages b { color: var(--electric); }
.service-advantages span { color: rgba(49,17,73,.68); }

.showcase-panel { background: radial-gradient(circle at 88% 10%,rgba(185,238,57,.35),transparent 28%),linear-gradient(135deg,#471568,#742db2); border: 0; border-radius: 26px; box-shadow: 0 24px 64px rgba(70,23,101,.18); }
.showcase-kicker,.showcase-deliverables li::before { color: var(--cyan); }
.work-filters { overflow: hidden; border-color: rgba(108,43,191,.17); border-radius: 16px; box-shadow: 0 10px 34px rgba(69,25,98,.06); }
.work-filters button { border-right-color: rgba(108,43,191,.13); }
.work-filters button.active { color: #32104d; background: var(--cyan); }
.work-filters button.active b { color: var(--electric); }
.work-card > img { border-radius: 22px; }
.work-tags span { background: rgba(74,23,108,.82); }
.play-button { border-color: rgba(108,43,191,.22); }
.play-button span { color: #32104d; background: var(--cyan); }
.play-button:hover { color: white; background: var(--electric); }

.production-standard { background: #efffc4; }
.standard-card { color: var(--ink); background: rgba(255,255,255,.86); border: 0; border-radius: 22px; box-shadow: 0 18px 48px rgba(66,39,67,.08); }
.standard-card::after { background: radial-gradient(circle,rgba(108,43,191,.16),transparent 68%); }
.standard-card > span { color: var(--electric); }
.standard-card p { color: var(--muted); }
.scale { background: #f3eaff; }
.scale-card { border: 0; border-radius: 22px; box-shadow: 0 16px 45px rgba(74,31,105,.07); }
.scale-card.featured { color: white; background: linear-gradient(145deg,#552080,#7b31bd); }
.scale-card.featured b { color: var(--cyan); }
.advantage-grid { overflow: hidden; background: white; border: 0; border-radius: 18px; box-shadow: 0 14px 42px rgba(74,31,105,.07); }

.white-label { background: #fffdf6; }
.white-label-number { color: rgba(108,43,191,.07); }
.partner-card { color: #30104a; background: var(--cyan); border-radius: 28px; transform: rotate(1deg); }
.partner-card a { border-top-color: rgba(50,16,77,.25); }
.process { background: #fffdf6; }
.process-grid { gap: 10px; background: transparent; }
.process-grid li { background: white; border-radius: 18px; box-shadow: 0 12px 34px rgba(74,31,105,.06); }
.process-grid b { color: var(--electric); }
.faq { background: #f8f3ff; }

.contact { background: radial-gradient(circle at 6% 90%,rgba(185,238,57,.34),transparent 28%),linear-gradient(135deg,#4b176e,#772dbc 62%,#8b3ac7); }
.contact .eyebrow { color: var(--cyan); }
.contact-form { background: rgba(45,13,70,.3); box-shadow: 0 22px 70px rgba(42,10,64,.22); }
.contact-form input,.contact-form select,.contact-form textarea { background: rgba(255,255,255,.13); }
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(185,238,57,.16); }
.required-mark,.project-details summary::after { color: var(--cyan); }
.contact-form .button { color: #2d1047; background: var(--cyan); }
footer { background: #2e0e45; }

@media (max-width: 900px) {
  .site-nav { background: rgba(255,253,246,.98); }
  .site-header.scrolled .menu-toggle { color: var(--ink); }
  .social-trigger { color: var(--ink); }
}

@media (max-width: 560px) {
  .contact-form { padding: 24px 18px; border-radius: 16px; }
  .visual-main { transform: rotate(-1deg); }
  .visual-top { transform: rotate(3deg); }
  .visual-bottom { transform: rotate(-3deg); }
}

/* Deep-violet refinement: creative studio first, lime only as an accent. */
:root {
  --ink: #f8f4ff;
  --paper: #210b35;
  --muted: #b8a9c5;
  --line: rgba(255,255,255,.14);
  --electric: #8a42d1;
  --cyan: #b9ef3b;
}

body { color: var(--ink); background: #210b35; }
.site-header.scrolled { color: white; background: rgba(32,9,52,.94); border-bottom-color: rgba(185,239,59,.12); box-shadow: 0 10px 35px rgba(11,2,20,.25); }
.site-header.scrolled .wordmark b { color: white; }
.site-header.scrolled .header-phone { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); }
.site-header.scrolled .language-switcher { border-color: rgba(255,255,255,.2); }
.site-header.scrolled .social-trigger { border-color: rgba(255,255,255,.2); }

.business-nav-shell { color: white; background: rgba(39,10,62,.97); border-color: rgba(255,255,255,.1); box-shadow: 0 15px 40px rgba(10,2,18,.3); }
.business-nav button { color: rgba(255,255,255,.62); border-color: rgba(255,255,255,.1); }
.business-nav button:first-child { border-left-color: rgba(255,255,255,.1); }
.business-nav button:hover { color: white; background: rgba(185,239,59,.08); }
.business-nav button.active { color: #2e1044; background: var(--cyan); }
.business-nav small { color: var(--cyan); }
.business-nav button.active small { color: #602190; }

.work,.service-hub,.white-label,.process { background: #210b35; }
.service-hub { background: radial-gradient(circle at 90% 8%,rgba(134,57,196,.22),transparent 28%),linear-gradient(180deg,#210b35,#2b0d43); }
.service-hub-head h2 span { color: var(--cyan); }
.service-hub-head > p:last-child,.section-heading > p:last-child { color: var(--muted); }
.service-pillar { border-color: rgba(255,255,255,.12); box-shadow: 0 24px 64px rgba(9,2,16,.28); }
.video-pillar { background: linear-gradient(140deg,#32104c,#511a77); }
.image-pillar { color: white; background: #35124f; }
.image-pillar .pillar-intro h3 { color: white; }
.image-pillar .pillar-intro p,.image-pillar li { color: #cbbdd5; }
.image-pillar li { border-bottom-color: rgba(255,255,255,.13); }
.image-pillar .pillar-intro > span { color: var(--cyan); }
.service-advantages { color: #2b0d42; background: var(--cyan); }

.showcase-panel { background: radial-gradient(circle at 90% 0,rgba(185,239,59,.25),transparent 30%),linear-gradient(135deg,#3a1157,#682799); }
.work-filters { background: #301048; border-color: rgba(255,255,255,.13); box-shadow: 0 14px 42px rgba(8,2,15,.24); }
.work-filters button { color: rgba(255,255,255,.7); background: transparent; border-right-color: rgba(255,255,255,.1); }
.work-filters button.active { color: #2e1044; background: var(--cyan); }
.work-meta { border-top-color: rgba(255,255,255,.13); }
.work-meta span,.work-meta b { color: #b6a5c4; }
.play-button { color: white; border-color: rgba(255,255,255,.22); }
.play-button:hover { color: #2d1043; background: var(--cyan); }
.work-empty { background: radial-gradient(circle at 75% 25%,rgba(185,239,59,.12),transparent 25%),linear-gradient(135deg,#2a0c40,#41145f); }

.production-standard { background: #2b0d43; }
.standard-card { color: white; background: #3a1255; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 18px 48px rgba(8,2,15,.22); }
.standard-card p { color: #c5b6cf; }
.standard-card > span { color: var(--cyan); }
.standard-card::after { background: radial-gradient(circle,rgba(185,239,59,.16),transparent 68%); }

.scale { background: #210b35; }
.scale-card { color: white; background: #34114e; box-shadow: 0 18px 48px rgba(8,2,15,.2); }
.scale-card p { color: #bfaecb; }
.scale-card b { color: var(--cyan); }
.scale-card.featured { background: linear-gradient(145deg,#5a2081,#7c31af); }
.scale-card > span { color: #2e1044; background: var(--cyan); }
.advantage-grid { background: #32104b; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 15px 45px rgba(8,2,15,.2); }
.advantage-grid div { border-right-color: rgba(255,255,255,.1); }
.advantage-grid span { color: #bbaac8; }

.white-label { background: radial-gradient(circle at 100% 40%,rgba(134,57,196,.16),transparent 32%),#260c3b; }
.white-label-copy > p:not(.eyebrow) { color: #bfafca; }
.white-label li { border-top-color: rgba(255,255,255,.14); }
.white-label-number { color: rgba(185,239,59,.05); }
.partner-card { color: #2c0e42; background: var(--cyan); }

.process { background: #210b35; border-top-color: rgba(255,255,255,.12); }
.process-grid li { color: white; background: #32104a; box-shadow: 0 14px 38px rgba(8,2,15,.2); }
.process-grid p { color: #bfaecb; }
.process-grid b { color: var(--cyan); }
.faq { background: #2a0d41; border-top-color: rgba(255,255,255,.12); }
.faq-list,.faq details { border-color: rgba(255,255,255,.13); }
.faq details p { color: #bfafca; }
.faq summary::after { color: var(--cyan); }

.contact { background: radial-gradient(circle at 5% 92%,rgba(185,239,59,.2),transparent 26%),linear-gradient(135deg,#32104d,#5c2186 64%,#70299e); }
.contact-form { background: rgba(26,7,42,.42); }

.social-popover { color: #28103c; background: #fffdf8; }
.social-popover::before { background: #fffdf8; }
.social-id { color: #76667f; }
.social-profile-link,.social-popover-head span { color: #6c2bbf; }
.inquiry-modal { color: white; background: #260c3b; }
.inquiry-modal-head { border-bottom-color: rgba(255,255,255,.12); }
.inquiry-close { color: white; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); }
.inquiry-summary { background: rgba(255,255,255,.11); }
.inquiry-summary div { background: #35114f; }
.inquiry-summary small,.inquiry-status { color: #bba9c8; }
.inquiry-edit { color: white; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.17); }
footer { background: #160621; }

@media (max-width: 900px) {
  .site-nav { color: white; background: rgba(36,10,56,.98); }
  .site-header.scrolled .menu-toggle,.header-phone { color: white; }
  .social-trigger { color: white; }
}

/* V2 final direction: deeper, desaturated violet-grey technology palette. */
:root {
  --ink: #f4f1f7;
  --paper: #19161f;
  --muted: #aaa4b2;
  --line: rgba(255,255,255,.12);
  --electric: #65547b;
  --cyan: #b6ef3a;
}
body { background: #19161f; }
.site-header.scrolled { background: rgba(24,21,30,.95); }
.hero { background: radial-gradient(circle at 82% 20%,rgba(182,239,58,.13),transparent 24%),radial-gradient(circle at 12% 88%,rgba(103,83,126,.22),transparent 30%),linear-gradient(132deg,#121016,#211c29 54%,#2d2637); }
.hero::before { opacity: .13; background-image: linear-gradient(rgba(255,255,255,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.14) 1px,transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(115deg,black,transparent 68%); }
.business-nav-shell { background: rgba(25,22,31,.97); }
.business-nav button.active { color: #19161f; }
.work,.service-hub,.white-label,.process,.scale { background: #19161f; }
.service-hub { background: radial-gradient(circle at 88% 8%,rgba(111,91,134,.14),transparent 30%),linear-gradient(180deg,#19161f,#211c29); }
.video-pillar { background: linear-gradient(140deg,#201a28,#33293f); }
.remake-explainer { background: #292131; }
.image-pillar { background: #24202b; }
.showcase-panel { background: radial-gradient(circle at 90% 0,rgba(182,239,58,.16),transparent 30%),linear-gradient(135deg,#211b29,#3b3048); }
.work-filters { background: #24202b; }
.production-standard { background: #211d28; }
.standard-card,.scale-card,.process-grid li { background: #292330; }
.scale-card.featured { background: linear-gradient(145deg,#3b3048,#514161); }
.advantage-grid { background: #25202c; }
.white-label { background: radial-gradient(circle at 100% 40%,rgba(108,88,130,.12),transparent 34%),#1c1822; }
.faq { background: #211c28; }
.contact { background: radial-gradient(circle at 5% 92%,rgba(182,239,58,.13),transparent 26%),linear-gradient(135deg,#1c1822,#32293c 66%,#40334d); }
.contact-form { background: rgba(9,8,12,.32); }
footer { background: #0f0d12; }
@media (max-width: 900px) { .site-nav { background: rgba(25,22,31,.99); } }

/* V2 color correction: clean, saturated deep purple without grey cast. */
:root {
  --ink: #fbf7ff;
  --paper: #0d0516;
  --muted: #bca9cf;
  --line: rgba(220,194,255,.13);
  --electric: #7636b5;
  --cyan: #b8f23d;
}
body { background: #0d0516; }
.site-header.scrolled { background: rgba(13,5,22,.96); border-bottom-color: rgba(184,242,61,.13); }
.hero { background: radial-gradient(circle at 82% 20%,rgba(184,242,61,.12),transparent 23%),radial-gradient(circle at 12% 88%,rgba(112,43,177,.25),transparent 31%),linear-gradient(132deg,#09020f,#150622 52%,#260d3b); }
.hero::before { opacity: .16; background-image: linear-gradient(rgba(206,170,255,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(206,170,255,.14) 1px,transparent 1px); }
.business-nav-shell { background: rgba(14,5,23,.98); }
.work,.service-hub,.white-label,.process,.scale { background: #0d0516; }
.service-hub { background: radial-gradient(circle at 88% 8%,rgba(117,51,181,.18),transparent 30%),linear-gradient(180deg,#0d0516,#160723); }
.video-pillar { background: linear-gradient(140deg,#160721,#2a0d40); }
.remake-explainer { background: #230b35; }
.image-pillar { background: #1b092a; }
.showcase-panel { background: radial-gradient(circle at 90% 0,rgba(184,242,61,.15),transparent 30%),linear-gradient(135deg,#170722,#32104b); }
.work-filters { background: #190827; }
.production-standard { background: #140620; }
.standard-card,.scale-card,.process-grid li { background: #1d0a2c; }
.scale-card.featured { background: linear-gradient(145deg,#33104d,#552078); }
.advantage-grid { background: #1a0828; }
.white-label { background: radial-gradient(circle at 100% 40%,rgba(118,48,182,.15),transparent 34%),#100519; }
.faq { background: #150721; }
.contact { background: radial-gradient(circle at 5% 92%,rgba(184,242,61,.12),transparent 26%),linear-gradient(135deg,#100519,#27103a 66%,#3a1553); }
.contact-form { background: rgba(7,2,12,.38); }
.inquiry-modal { background: #12061c; }
.inquiry-summary div { background: #1e0a2d; }
footer { background: #08020d; }
@media (max-width: 900px) { .site-nav { background: rgba(13,5,22,.99); } }

/* V2 technology pass: purple-only depth, restrained lime signals. */
:root {
  --paper: #08020e;
  --electric: #6f2eaa;
  --cyan: #b8f23d;
  --tech-scroll: 0px;
}
body { background: #08020e; }
.hero { background: radial-gradient(circle at 82% 22%,rgba(101,37,158,.18),transparent 29%),radial-gradient(circle at 15% 88%,rgba(60,18,96,.2),transparent 32%),linear-gradient(135deg,#06010a,#0d0316 56%,#160722); }
.hero::before { opacity: .18; background-position: 0 var(--tech-scroll),var(--tech-scroll) 0; }
.site-header.scrolled { background: rgba(8,2,14,.97); }
.business-nav-shell { background: rgba(9,2,15,.985); }
.business-nav button.active { color: white; background: linear-gradient(145deg,#261036,#160720); }
.business-nav button.active small { color: var(--cyan); }
.business-nav button.active::after { background: var(--cyan); box-shadow: 0 0 15px rgba(184,242,61,.36); }

.work,.service-hub,.white-label,.process,.scale { background: #08020e; }
.service-hub { background: radial-gradient(circle at 86% 6%,rgba(91,30,143,.13),transparent 31%),linear-gradient(180deg,#08020e,#0d0315); }
.video-pillar { background: linear-gradient(145deg,#0d0315,#180824); }
.remake-explainer { background: #16071f; }
.image-pillar { background: #11051a; }
.showcase-panel { background: radial-gradient(circle at 91% 3%,rgba(100,34,154,.17),transparent 31%),linear-gradient(137deg,#0e0316,#1b0928); }
.work-filters { background: #100419; }
.work-filters button.active { color: white; background: #271038; }
.work-filters button.active b { color: var(--cyan); }
.production-standard { background: linear-gradient(180deg,#0b0212,#100419); }
.standard-card,.scale-card,.process-grid li { background: #13051c; }
.scale { background: #09020f; }
.scale-card.featured { background: linear-gradient(145deg,#1d0a2b,#321147); }
.service-advantages { color: white; background: #160720; border: 1px solid rgba(184,242,61,.14); }
.service-advantages div { border-right-color: rgba(255,255,255,.1); }
.service-advantages b,.service-advantages strong { color: var(--cyan); }
.service-advantages span { color: #bca9ca; }
.advantage-grid { background: #100418; }
.white-label { background: radial-gradient(circle at 100% 40%,rgba(92,31,142,.12),transparent 35%),#08020e; }
.partner-card { color: white; background: linear-gradient(145deg,#1b0928,#28103a); border: 1px solid rgba(184,242,61,.32); box-shadow: 0 0 45px rgba(91,30,143,.16); }
.partner-card p,.partner-card a span:last-child { color: var(--cyan); }
.partner-card a { border-top-color: rgba(184,242,61,.25); }
.faq { background: #0d0315; }
.contact { background: radial-gradient(circle at 8% 90%,rgba(80,25,125,.14),transparent 29%),linear-gradient(137deg,#09020f,#15071f 68%,#1c0a29); }
.contact-form { background: rgba(4,1,8,.46); }
footer { background: #040107; }

.theme-bright .service-hub,.theme-bright .production-standard,.theme-bright .scale,.theme-bright .process,.theme-bright .white-label { position: relative; isolation: isolate; }
.theme-bright .service-hub::before,.theme-bright .production-standard::before,.theme-bright .scale::before,.theme-bright .process::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .09; background-image: linear-gradient(rgba(205,164,255,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(205,164,255,.22) 1px,transparent 1px); background-size: 56px 56px; background-position: 0 var(--tech-scroll),var(--tech-scroll) 0; mask-image: linear-gradient(90deg,transparent,black 18%,black 82%,transparent); }
.theme-bright .service-hub::after,.theme-bright .production-standard::after,.theme-bright .scale::after { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 6vw; width: 1px; pointer-events: none; background: linear-gradient(transparent,rgba(184,242,61,.55),transparent); box-shadow: 0 0 15px rgba(184,242,61,.2); animation: techRail 5.5s ease-in-out infinite; }
@keyframes techRail { 0%,100% { opacity: .15; transform: scaleY(.35); } 50% { opacity: .7; transform: scaleY(.82); } }

.theme-bright .reveal { opacity: 0; filter: blur(7px); clip-path: inset(0 0 22% 0); transform: translate3d(0,52px,0) scale(.985); transition: opacity .72s cubic-bezier(.2,.8,.2,1),transform .86s cubic-bezier(.16,1,.3,1),filter .62s ease,clip-path .84s cubic-bezier(.16,1,.3,1); }
.theme-bright .reveal.visible { opacity: 1; filter: blur(0); clip-path: inset(0 0 0 0); transform: translate3d(0,0,0) scale(1); }
.theme-bright .mechanical-item { opacity: .06; filter: saturate(.55); clip-path: inset(0 0 28% 0); transform: translate3d(0,34px,0) scale(.975); transition: opacity .56s ease var(--mechanical-delay,0ms),transform .72s cubic-bezier(.16,1,.3,1) var(--mechanical-delay,0ms),clip-path .72s cubic-bezier(.16,1,.3,1) var(--mechanical-delay,0ms),filter .65s ease var(--mechanical-delay,0ms); }
.theme-bright .mechanical-item.locked { opacity: 1; filter: saturate(1); clip-path: inset(0 0 0 0); transform: translate3d(0,0,0) scale(1); }
.theme-bright .mechanical-item.locked::before { animation: signalFlash .7s ease both; }
@keyframes signalFlash { 0% { box-shadow: inset 3px 0 0 rgba(184,242,61,0); } 35% { box-shadow: inset 3px 0 0 rgba(184,242,61,.75); } 100% { box-shadow: inset 3px 0 0 rgba(184,242,61,0); } }
.theme-bright .work-card:hover>img { transform: translateY(-4px) scale(.99); box-shadow: 0 18px 55px rgba(0,0,0,.38),0 0 0 1px rgba(184,242,61,.2); }
.theme-bright .button,.theme-bright .business-nav button,.theme-bright .work-filters button { transition-timing-function: steps(6,end); }

@media (prefers-reduced-motion: reduce) {
  .theme-bright .reveal,.theme-bright .mechanical-item { opacity: 1; filter: none; clip-path: none; transform: none; }
  .theme-bright .service-hub::after,.theme-bright .production-standard::after,.theme-bright .scale::after { animation: none; }
}