@import url("colors_and_type.css");
@font-face {font-family:"Satoshi"; src:url("Satoshi-Bold.woff") format("woff"); font-weight:700; font-style:normal; font-display:swap; unicode-range:U+0020-007E,U+00A0-00FF;}
@font-face {font-family:"Satoshi"; src:url("Satoshi-Black.woff") format("woff"); font-weight:900; font-style:normal; font-display:swap; unicode-range:U+0020-007E,U+00A0-00FF;}

/* =================================================================
   INNER INTERACTIVE — AI Native one-page site
   Deep-dark immersive theme, plan-az mood. Blue neon + lime/orange.
   ================================================================= */

:root{--ink: #05060a; --ink-2: #080a12; --ink-3: #0c0f1a; --line-faint: rgba(255,255,255,0.08); --line-soft: rgba(255,255,255,0.14); --txt: rgba(255,255,255,0.92); --txt-dim: rgba(255,255,255,0.56); --txt-faint: rgba(255,255,255,0.34); --blue: #0066FF; --blue-bright: #4F95FF; --blue-glow: #69A5FF; --lime: #88F03E; --orange: #FF9200; --maxw: 1320px; --pad: clamp(20px, 5vw, 96px);}

* { box-sizing: border-box; }

html { scroll-behavior: auto; }

html, body{margin: 0; padding: 0; background: var(--ink); color: var(--txt); -webkit-font-smoothing: antialiased; overflow-x: clip; word-break: keep-all;}

body { cursor: none; }
@media (hover: none), (max-width: 860px) { body { cursor: auto; } }

::selection { background: var(--blue); color: #fff; }

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

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

/* ---------- Fixed WebGL canvas ---------- */
#gl{position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; display: block;}
.bg-veil{position: fixed; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(120% 80% at 50% -10%, rgba(0,102,255,0.10), transparent 60%), linear-gradient(180deg, rgba(5,6,10,0.0) 40%, rgba(5,6,10,0.55) 100%);}
.grain{position: fixed; inset: -50%; z-index: 2; pointer-events: none; opacity: 0.04; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode: screen;}

main { position: relative; z-index: 3; }

/* ---------- Custom cursor ---------- */
.cursor-dot, .cursor-ring{position: fixed; top: 0; left: 0; border-radius: 50%; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); mix-blend-mode: difference;}
.cursor-dot { width: 6px; height: 6px; background: #fff; }
.cursor-ring{width: 38px; height: 38px; border: 1px solid rgba(255,255,255,0.7); transition: width .25s ease, height .25s ease, border-color .25s ease, background .25s ease;}
.cursor-ring.hover { width: 64px; height: 64px; background: rgba(255,255,255,0.08); border-color: transparent; }
@media (hover: none), (max-width: 860px) { .cursor-dot, .cursor-ring { display: none; } }

/* ---------- Navigation ---------- */
.nav{position: fixed; top: 0; left: 0; right: 0; z-index: 1000; display: flex; align-items: center; justify-content: space-between; padding: 18px var(--pad); transition: background .4s ease, backdrop-filter .4s ease, padding .4s ease, border-color .4s ease; border-bottom: 1px solid transparent;}
.nav.scrolled{background: rgba(5,6,10,0.6); backdrop-filter: blur(18px) saturate(140%); border-bottom-color: var(--line-faint); padding-block: 12px;}
.nav.scrolled.nav-light { background: rgba(255,255,255,0.75); border-bottom-color: rgba(0,0,0,0.08); }
.nav.scrolled.nav-light .brand .name b, .nav.scrolled.nav-light .brand .name span, .nav.scrolled.nav-light .nav-menu a { color: #14191E; }
.nav.scrolled.nav-light .nav-menu a:hover { color: #000; }
.nav.scrolled.nav-light .nav-cta { color: #fff !important; border-color: #0066FF; background: #0066FF; }
.nav.scrolled.nav-light .nav-cta:hover { background: #0052cc; border-color: #0052cc; }
.brand { display: flex; align-items: baseline; gap: 4px; }
.brand .sym{width: 26px; height: 26px; display: grid; place-items: center; color: var(--blue-bright);}
.brand .sym svg { width: 100%; height: 100%; }
.brand .name{font-family: var(--font-satoshi); font-weight: 800; font-size: clamp(16px, 1.5vw, 20px); letter-spacing: 0.02em; line-height: 1;}
.brand .name b { color: #fff; font-weight: 900; }
.brand .name span { color: var(--txt-dim); letter-spacing: -0.5px; }
.brand-sym { height: 20px; width: auto; display: block; flex-shrink: 0; }

.nav-menu { display: flex; align-items: center; gap: 4px; }
.nav-menu a{position: relative; padding: 8px 14px; font-family: var(--font-satoshi); font-size: 16px; font-weight: 700; letter-spacing: 0.04em; color: var(--txt-dim); transition: color .25s ease;}
.nav-menu a:hover { color: #fff; }
.nav-cta{margin-left: 10px; padding: 10px 18px !important; border: 1px solid #0066FF; border-radius: var(--radius-pill); color: #fff !important; background: #0066FF; transition: background .25s ease, border-color .25s ease !important;}
.nav-cta:hover { background: var(--blue); border-color: var(--blue); }
@media (max-width: 980px) { .nav-menu a:not(.nav-cta) { display: none; } }
@media (max-width: 860px) {
	.brand-sym {height: 16px;}
	.nav-cta {padding: 6px 18px !important;}
	.nav-menu a {font-size: 14px;}
}

/* ---------- Section scaffolding ---------- */
section { position: relative; }
.sec-pad { padding-block: clamp(96px, 14vh, 200px); }
.sec-pad > .wrap { text-align: center; }

.kicker{display: inline-flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--blue-bright);}
.kicker::before{content: ""; width: 28px; height: 1px; background: var(--blue-bright); display: inline-block;}
.kicker.lime { color: var(--lime); } .kicker.lime::before { background: var(--lime); }
.kicker.orange { color: var(--orange); } .kicker.orange::before { background: var(--orange); }

.display{font-family: var(--font-satoshi); font-weight: 800; letter-spacing: -0.03em; line-height: 0.98; color: #fff; text-wrap: balance;}

/* ---------- Reveal utility (visible by default; hidden only while JS-armed) ---------- */
.reveal { opacity: 1; }
.line-mask { overflow: hidden; display: block; padding-bottom: 0.06em; }
.line-mask > span { display: block; }
html.pre-armed .reveal { opacity: 0; transform: translateY(28px); }
html.pre-armed .line-mask > span { transform: translateY(110%); }

@media (prefers-reduced-motion: reduce) {
  html.pre-armed .reveal { opacity: 1; transform: none; }
  html.pre-armed .line-mask > span { transform: none; }
}

/* =================================================================
   HERO
   ================================================================= */
.hero{position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: 120px; padding-bottom: 60px; overflow: hidden;}
.hero-inner { position: relative; z-index: 3; width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; font-family: var(--font-satoshi); }
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-bg-fallback{position: absolute; inset: 0; z-index: 0; background: linear-gradient(135deg, #04060f 0%, #08142e 28%, #06243f 52%, #071a2e 74%, #04060f 100%); background-size: 300% 300%; animation: heroGrad 24s ease-in-out infinite;}
@keyframes heroGrad { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.hero-video { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.6s ease; }
.hero-rev { opacity: 0; }
.hero-bg::after{content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(130% 95% at 28% 25%, rgba(5,6,10,0) 30%, rgba(5,6,10,0.55) 100%), linear-gradient(180deg, rgba(5,6,10,0.30) 0%, rgba(5,6,10,0.30) 55%, rgba(5,6,10,0.70) 100%);}
.hero-eyebrow{display: flex; align-items: center; gap: 16px; margin-bottom: 38px; font-weight: 500; font-size: clamp(15px, 1.4vw, 20px); letter-spacing: 0.06em; color: var(--blue-bright); flex-wrap: wrap;}

.hero h1{font-weight: 800; font-size: clamp(44px, 9vw, 120px); line-height: 0.92; letter-spacing: -0.035em; color: #fff; margin: 0;}
.hero h1 .blue { color: var(--blue-bright); }
.hero h1 .out{color: transparent; -webkit-text-stroke: 1.4px rgba(255,255,255,0.5);}
.hero-sub { margin-top: 40px; text-align: center; }
.hero-sub .lead { font-size: clamp(18px, 2vw, 24px); line-height: 1.45; font-weight: 600; color: #fff; letter-spacing: -0.01em; max-width: 40ch; margin: 0 auto; }
.hero-sub .body { font-size: clamp(13px, 1.1vw, 15px); line-height: 1.7; color: var(--txt-dim); max-width: 46ch; margin: 12px auto 0; }

.scroll-cue{margin-top: 56px; display: inline-flex; flex-flow: column; align-items: center; gap: 12px; font-size: 11px; letter-spacing: 0.2em; color: var(--txt-faint); text-transform: uppercase;}
.scroll-cue .bar { width: 1px; height: 80px; background: linear-gradient(var(--blue-bright), transparent); position: relative; overflow: hidden; }
.scroll-cue .bar::after { content:""; position:absolute; top:-40px; left:0; width:1px; height:40px; background: var(--blue-glow); animation: scrolldown 1.8s ease-in-out infinite; }
@keyframes scrolldown { 0% { transform: translateY(0); } 100% { transform: translateY(80px); } }
@media (max-width:768px) {
	.scroll-cue span:not(.bar) {display: none;}
	.hero-sub {margin-top: 8px;}
}

/* Hero visual switcher */
.viz-switch{position: fixed; right: var(--pad); bottom: 28px; z-index: 900; display: flex; gap: 8px; padding: 8px; border: 1px solid var(--line-faint); border-radius: var(--radius-pill); background: rgba(8,10,18,0.66); backdrop-filter: blur(14px); transition: opacity .5s ease, transform .5s ease;}
.viz-switch .vlabel { font-size: 10px; letter-spacing: .12em; color: var(--txt-faint); align-self: center; padding-left: 8px; text-transform: uppercase; }
.viz-switch button{appearance: none; border: 0; cursor: none; font-size: 11px; letter-spacing: .04em; color: var(--txt-dim); padding: 8px 14px; border-radius: var(--radius-pill); background: transparent; transition: color .25s, background .25s;}
.viz-switch button:hover { color: #fff; }
.viz-switch button.on { color: #fff; background: var(--blue); }
.viz-switch.hide { opacity: 0; transform: translateY(20px); pointer-events: none; }
@media (max-width: 860px) { .viz-switch { display: none; } }

/* =================================================================
   ABOUT
   ================================================================= */
.about-grid{display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 100px); align-items: start;}
@media (max-width: 920px) { .about-grid { grid-template-columns: 1fr; gap: 48px; } }
.about-head h2{font-family: var(--font-satoshi); font-weight: 800; font-size: clamp(34px, 4.6vw, 72px); line-height: 1.02; letter-spacing: -0.03em; color: #fff; margin: 22px 0 0;}
.about-head h2 em { font-style: normal; color: var(--blue-bright); }
.about-kr { margin-top: 22px; font-size: clamp(16px, 1.5vw, 20px); font-weight: 600; color: #fff; line-height: 1.5; letter-spacing: -0.01em; }
.about-body p { margin: 0 0 22px; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.85; color: var(--txt-dim); }
.about-body p b { color: #fff; font-weight: 600; }
.about-body p .hl { color: var(--blue-bright); font-weight: 600; }

.stats{margin-top: 80px; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-faint);}
.stat{padding: 40px 20px 8px; border-right: 1px solid var(--line-faint);}
.stat:last-child { border-right: 0; }
.stat .num{font-family: var(--font-satoshi); font-weight: 800; font-size: clamp(48px, 7vw, 92px); line-height: 1; letter-spacing: -0.04em; color: #fff;}
.stat .num .suf { color: var(--blue-bright); }
.stat .lbl { margin-top: 14px; font-size: 12px; letter-spacing: .1em; color: var(--txt-dim); text-transform: uppercase; }

/* =================================================================
   MOCK UI — Reusable loop animations
   .mock-chart-line → SVG stroke path 자동 draw/redraw
   .yt-bar i        → 바 채우기 반복
   .yt-n            → 숫자 glow pulse
   .yt-line         → skeleton shimmer
   circle           → dot pulse (retention 차트)
   ================================================================= */
@keyframes mockLineReveal {
  0%   {stroke-dashoffset:1200; opacity:0;}
  6%   {opacity:1;}
  62%  {stroke-dashoffset:0; opacity:1;}
  82%  {stroke-dashoffset:0; opacity:1;}
  97%  {stroke-dashoffset:0; opacity:0;}
  100% {stroke-dashoffset:1200; opacity:0;}
}
@keyframes mockBarFill {
  0%,5%   {transform:scaleX(0);}
  55%,75% {transform:scaleX(1);}
  100%    {transform:scaleX(0);}
}
@keyframes mockNumPulse {
  0%,100% {color:#fff; text-shadow:none;}
  50% {color:#69A5FF; text-shadow:0 0 28px rgba(79,149,255,0.45);}
}
@keyframes mockSkeleton {
  0%,100% {opacity:0.20;}
  50% {opacity:1;}
}
@keyframes mockRowIn {
  from {opacity:0; transform:translateX(-10px);}
  to {opacity:1; transform:translateX(0);}
}
@keyframes mockDotPop {
  0%,70%,100% {transform:scale(1); opacity:0.8;}
  35% {transform:scale(1.7); opacity:1;}
}

/* Chart line */
.mock-chart-line {stroke-dasharray:1200; stroke-dashoffset:1200;}
.vs-state.active .mock-chart-line {animation:mockLineReveal 4.5s ease-in-out infinite;}

/* Bars */
.yt-bar i {transform-origin:left center;}
.vs-state.active .yt-bar i {animation:mockBarFill 2.8s ease-in-out infinite;}
.vs-state.active .yt-row:nth-child(1) .yt-bar i {animation-delay:0.00s;}
.vs-state.active .yt-row:nth-child(2) .yt-bar i {animation-delay:0.15s;}
.vs-state.active .yt-row:nth-child(3) .yt-bar i {animation-delay:0.30s;}
.vs-state.active .yt-row:nth-child(4) .yt-bar i {animation-delay:0.45s;}
.vs-state.active .yt-row:nth-child(5) .yt-bar i {animation-delay:0.60s;}

/* Trend row entrance */
.vs-state.active .yt-row {animation:mockRowIn 0.4s ease both;}
.vs-state.active .yt-row:nth-child(1) {animation-delay:0.05s;}
.vs-state.active .yt-row:nth-child(2) {animation-delay:0.12s;}
.vs-state.active .yt-row:nth-child(3) {animation-delay:0.19s;}
.vs-state.active .yt-row:nth-child(4) {animation-delay:0.26s;}
.vs-state.active .yt-row:nth-child(5) {animation-delay:0.33s;}

/* Stat number glow */
.vs-state.active .yt-n {animation:mockNumPulse 3s ease-in-out infinite;}
.vs-state.active .yt-stat:nth-child(2) .yt-n {animation-delay:1s;}
.vs-state.active .yt-stat:nth-child(3) .yt-n {animation-delay:2s;}

/* Skeleton shimmer */
.vs-state.active .yt-line {animation:mockSkeleton 1.8s ease-in-out infinite;}
.vs-state.active .yt-script:nth-child(2) .yt-line:nth-child(2) {animation-delay:0.2s; background:rgba(79,149,255,0.35);}
.vs-state.active .yt-script:nth-child(2) .yt-line:nth-child(3) {animation-delay:0.4s; background:rgba(105,165,255,0.22);}
.vs-state.active .yt-script:nth-child(2) .yt-line:nth-child(4) {animation-delay:0.6s; background:rgba(105,165,255,0.14);}

/* Retention dots — HTML overlay (정원 보장) */
.yt-reten-chart {position:relative;}
.yt-reten-chart svg {display:block; width:100%; height:220px;}
.yt-dot-marker{position:absolute; width:12px; height:12px; border-radius:50%; border:2px solid #0c0f1a; transform:translate(-50%,-50%); opacity:0;}
.yt-dot-green {background:#4F95FF; box-shadow:0 0 8px rgba(79,149,255,0.6);}
.yt-dot-red {background:#FF5A5A; box-shadow:0 0 8px rgba(255,90,90,0.6);}
.vs-state.active .yt-dot-marker {animation:mockDotFade 2.4s ease-in-out infinite;}
.vs-state.active .yt-dot-red {animation-delay:1.2s;}
@keyframes mockDotFade {
  0%,10% {opacity:0; transform:translate(-50%,-50%) scale(0.4);}
  30%,70% {opacity:1; transform:translate(-50%,-50%) scale(1);}
  90%,100% {opacity:0; transform:translate(-50%,-50%) scale(0.4);}
}

/* Infinity SVG draw animation */
.num-infinity {display: flex; align-items: center; gap: 4px;}
.inf-svg {height: clamp(48px, 7vw, 92px); width: auto; overflow: visible;}
.inf-path {stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 260; stroke-dashoffset: 260; animation: draw-inf 2.8s cubic-bezier(0.4,0,0.2,1) infinite;}
@keyframes draw-inf {
  0%   {stroke-dashoffset: 260; opacity: 0;}
  5%   {stroke-dashoffset: 260; opacity: 1;}
  65%  {stroke-dashoffset: 0;   opacity: 1;}
  82%  {stroke-dashoffset: 0;   opacity: 1;}
  97%  {stroke-dashoffset: 0;   opacity: 0;}
  100% {stroke-dashoffset: 260; opacity: 0;}
}

@media (max-width: 860px) { .stats { grid-template-columns: repeat(2, 1fr); } .stat:nth-child(even) { border-right: 0; } .stat:nth-child(n+3) { border-top: 1px solid var(--line-faint); } }
@media (max-width: 480px) { .stats { grid-template-columns: 1fr; } .stat { border-right: 0; border-bottom: 1px solid var(--line-faint); } }

/* =================================================================
   INAX — pinned horizontal scroll
   ================================================================= */
.inax-pin { height: 100vh; overflow: hidden; position: relative; }
.inax-track{touch-action: pan-y; display: flex; position: absolute; left: 35vw; top: 0; height: 100%; width: max-content; will-change: transform;}
.inax-intro{position: absolute; left: 0; top: 0; width: 35vw; height: 100%; display: flex; flex-direction: column; justify-content: center; padding-inline: var(--pad); background: var(--ink); z-index: 1;}
.inax-intro h2 .blue { color: var(--blue-bright); }
.inax-intro h2{font-family: var(--font-satoshi); font-weight: 800; font-size: clamp(38px, 5.2vw, 86px); line-height: 1; letter-spacing: -0.03em; color: #fff; word-break: keep-all; margin: 26px 0 0;}
.inax-intro p { margin-top: 28px; max-width: 44ch; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.7; color: var(--txt-dim); }
.inax-counter { margin-top: 40px; font-size: 12px; letter-spacing: .16em; color: var(--txt-faint); }

.inax-card{flex: 0 0 auto; width: min(560px, 80vw); height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 0 clamp(30px, 4vw, 64px); border-left: 1px solid var(--line-faint); position: relative;}
.inax-card .cnum { font-size: 13px; color: var(--blue-bright); letter-spacing: .1em; }
.inax-card .ico { width: 64px; height: 64px; margin: 28px 0 30px; color: var(--blue-glow); }
.inax-card .ico svg { width: 100%; height: 100%; }
.inax-card h3 { font-family: var(--font-satoshi); font-size: clamp(24px, 2.4vw, 36px); font-weight: 700; color: #fff; line-height: 1.12; letter-spacing: -0.02em; word-break: keep-all; }
.inax-card .en { display: block; font-size: 12px; letter-spacing: .1em; color: var(--txt-faint); margin-top: 12px; text-transform: uppercase; }
.inax-card p { margin-top: 24px; font-size: clamp(13px, 1.1vw, 15px); line-height: 1.75; color: var(--txt-dim); max-width: 42ch; }
.inax-card .tags { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px; }
.inax-card .tags span { font-size: 11px; letter-spacing: .04em; color: var(--txt-dim); padding: 6px 12px; border: 1px solid var(--line-faint); border-radius: var(--radius-pill); }
.inax-card .big-ghost{position: absolute; right: 24px; bottom: 6%; font-weight: 800; font-size: clamp(100px, 16vw, 200px); line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.05); pointer-events: none; z-index: -1;}
.inax-progress{position: absolute; left: var(--pad); bottom: 40px; z-index: 5; display: flex; align-items: center; gap: 14px; font-size: 12px; color: var(--txt-faint); letter-spacing: .1em;}
.inax-progress .track { width: 160px; height: 2px; background: rgba(255,255,255,0.12); position: relative; }
.inax-progress .fill { position: absolute; inset: 0 auto 0 0; width: 0%; background: var(--blue-bright); }

/* mobile fallback for INAX */
.inax-stack { display: none; }
@media (max-width: 860px) {
  .inax-pin { height: auto; overflow: visible; padding-top: 8vmin; }
  .inax-intro { position: static; width: 100%; height: auto; padding: 0 var(--pad) 48px; background: transparent; }
  .inax-intro h2 { font-size: clamp(32px, 7vw, 56px); }
  .inax-intro p { max-width: 100%; font-size: 16px; }
  .inax-counter { margin-top: 28px; }
  .inax-track { display: none; }
  .inax-stack { display: flex; flex-direction: column; gap: 20px; padding-bottom: 8vmin; }
  .inax-stack .inax-card { width: 100%; height: auto; border-left: 0; border: 1px solid rgba(255,255,255,0.10); border-radius: 16px; padding: 56px var(--pad); background: rgba(255,255,255,0.04); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); overflow: hidden; }
  .inax-stack .inax-card::after { content: ''; position: absolute; top: -150px; left: -150px; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(0,102,255,0.30) 0%, rgba(0,102,255,0.10) 45%, transparent 70%); filter: blur(24px); pointer-events: none; z-index: 0; }
  .inax-stack .inax-card > * { position: relative; z-index: 1; }
  .inax-stack .big-ghost { display: none; }
  .inax-progress { display: none; }
}
@media (max-width: 480px) {
  .inax-stack .inax-card {padding: 32px var(--pad);}
  .inax-stack .inax-card h3 {font-size: 20px;}
  .inax-stack .inax-card p {font-size: 16px;}
}

/* =================================================================
   AX — 4 step process
   ================================================================= */
.ax-head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; }
.ax-head h2 { font-weight: 800; font-size: clamp(34px, 4.6vw, 70px); line-height: 1.0; letter-spacing: -0.03em; color: #fff; margin: 22px 0 0; }
.ax-head p { font-size: clamp(14px, 1.2vw, 16px); line-height: 1.7; color: var(--txt-dim); max-width: 44ch; }
@media (max-width: 860px) { .ax-head { grid-template-columns: 1fr; gap: 20px; } }

.ax-steps { margin-top: 72px; border-top: 1px solid var(--line-faint); }
.ax-step{display: grid; grid-template-columns: 120px 1fr 1.2fr; gap: 32px; padding: 44px 0; border-bottom: 1px solid var(--line-faint); align-items: start; position: relative; transition: background .4s ease;}
.ax-step::before{content: ""; position: absolute; left: -100vw; right: -100vw; top: 0; bottom: 0; background: linear-gradient(90deg, transparent, rgba(0,102,255,0.05), transparent); opacity: 0; transition: opacity .4s ease; z-index: -1;}
.ax-step:hover::before { opacity: 1; }
.ax-step .snum{font-weight: 800; font-size: clamp(28px, 3.5vw, 46px); line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--blue-bright); transition: color .35s ease, -webkit-text-stroke-color .35s;}
.ax-step:hover .snum { color: var(--blue-bright); }
.ax-step h3 { font-size: clamp(22px, 2.2vw, 32px); font-weight: 700; color: #fff; letter-spacing: -0.02em; }
.ax-step h3 .en { display: block; font-size: 12px; color: var(--txt-faint); letter-spacing: .1em; margin-top: 8px; text-transform: uppercase; }
.ax-step p { font-size: clamp(13px, 1.1vw, 15px); line-height: 1.75; color: var(--txt-dim); }
@media (max-width: 860px) { .ax-step { grid-template-columns: 60px 1fr; } .ax-step p { grid-column: 1 / -1; } .ax-step .snum { font-size: 32px; } }

/* =================================================================
   SOLUTIONS
   ================================================================= */
.sol-head { display: flex; justify-content: space-between; align-items: end; gap: 30px; flex-wrap: wrap; }
.sol-head h2 { font-weight: 800; font-size: clamp(40px, 6vw, 104px); line-height: 0.96; letter-spacing: -0.035em; color: #fff; margin: 22px 0 0; }
.sol-head .note { font-size: 14px; color: var(--txt-dim); max-width: 30ch; line-height: 1.6; }

.sol-intro { padding-bottom: clamp(36px, 5vh, 64px) !important; }

.sol-sec{--acc: #4F95FF; position: relative; padding-block: clamp(72px, 11vh, 150px); /* border-top: 1px solid var(--line-faint); */ /* overflow: hidden; */}
.sol-sec::before{content: ""; position: absolute; width: clamp(360px, 45vw, 680px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--acc), transparent 62%); opacity: 0.13; filter: blur(30px); top: -18%; right: -8%; pointer-events: none; z-index: 0;}
.sol-sec .wrap { position: relative; z-index: 1; }
.sol-ghost{position: absolute; top: clamp(16px, 4vh, 48px); left: 0; font-weight: 800; font-size: clamp(220px, 38vw, 560px); line-height: 0.8; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.045); pointer-events: none; z-index: 0; white-space: nowrap;}
.sol-sec-top{display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(30px, 4vw, 72px); align-items: end;}
.sol-name{font-family: var(--font-satoshi); font-weight: 800; font-size: clamp(54px, 8.4vw, 132px); line-height: 0.9; letter-spacing: -0.04em; color: #fff; margin: 22px 0 0;}
.sol-name .kr2{display: block; font-weight: 600; font-size: clamp(14px, 1.3vw, 19px); color: var(--txt-dim); margin-top: 20px; letter-spacing: -0.01em; line-height: 1.45;}
.sol-lead{font-size: clamp(16px, 1.4vw, 20px); line-height: 1.6; color: var(--txt); font-weight: 600; letter-spacing: -0.01em; padding-bottom: 8px;}
.sol-lead .em { color: #0066FF; }
.sol-feats{margin-top: clamp(40px, 5vw, 72px); display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line-faint); border: 1px solid var(--line-faint);}
.sol-feat2 { background: var(--ink); padding: clamp(24px, 2.4vw, 36px); transition: background .4s ease; position: relative; }
.sol-feat2:hover { background: var(--ink-3); }
.sol-feat2 .fn { font-size: 12px; letter-spacing: .08em; color: var(--acc); }
.sol-feat2 h4 { margin-top: 14px; font-size: clamp(17px, 1.5vw, 20px); font-weight: 700; color: #fff; letter-spacing: -0.01em; }
.sol-feat2 p { margin-top: 12px; font-size: 14px; line-height: 1.75; color: var(--txt-dim); }
.sol-feat2 .punch { margin-top: 16px; font-size: 13px; font-weight: 600; color: var(--acc); }
.sol-who { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sol-who .wlbl { font-size: 11px; letter-spacing: .12em; color: var(--txt-faint); text-transform: uppercase; margin-right: 4px; }
.sol-who .chip { font-size: 13px; color: var(--txt-dim); padding: 9px 16px; border: 1px solid var(--line-faint); border-radius: var(--radius-pill); transition: border-color .3s, color .3s; }
.sol-who .chip:hover { border-color: var(--acc); color: #fff; }
@media (max-width: 860px) {
  .sol-sec-top { grid-template-columns: 1fr; gap: 18px; align-items: start; }
  .sol-feats { grid-template-columns: 1fr; }
  .sol-ghost { font-size: 170px; top: 8px; }
}

/* =================================================================
   VIEWSIGHT STATE 0 — Timeline RAG UI
   ================================================================= */
.yt-timeline-wrap {margin-bottom:20px;}
.yt-timeline-bar {height:12px; background:rgba(255,255,255,0.08); border-radius:6px; position:relative; overflow:hidden; margin-bottom:8px;}
.yt-zone {position:absolute; top:0; height:100%; border-radius:3px; opacity:0.55;}
.yt-zone.hook {background:#4F95FF;}
.yt-zone.drop {background:#FF5A5A;}
.yt-playhead {position:absolute; top:-2px; left:0; width:4px; height:16px; background:#fff; border-radius:2px; box-shadow:0 0 10px rgba(255,255,255,0.7);}
.yt-timeline-labels {display:flex; justify-content:space-between; font-size:10px; color:rgba(255,255,255,0.3);}
.yt-hook-lbl {color:#4F95FF;}
.yt-drop-lbl {color:#FF5A5A;}

.yt-rag-grid {display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:stretch;}
.yt-rag-grid > * {height:100%;}
.yt-scenes {display:flex; flex-direction:column; gap:10px;}
.yt-scene-head {font-size:10px; letter-spacing:.1em; color:rgba(255,255,255,0.3); text-transform:uppercase; margin-bottom:2px;}
.yt-scene {display:flex; gap:10px; background:rgba(255,255,255,0.04); border-radius:8px; padding:12px; border-left:3px solid transparent; height:-webkit-fill-available;}
.yt-scene-ts {font-size:11px; font-weight:700; flex-shrink:0; padding-top:2px;}
.yt-scene-ts.hook {color:#4F95FF;}
.yt-scene-ts.drop {color:#FF5A5A;}
.yt-scene-title {font-size:11px; font-weight:600; color:#fff; margin-bottom:4px;}
.yt-scene-text {font-size:11px; color:rgba(255,255,255,0.4); line-height:1.5;}

.yt-rag-panel {background:rgba(79,149,255,0.06); border-radius:8px; padding:14px; border:1px solid rgba(79,149,255,0.15); display:flex; flex-direction:column; gap:12px;}
.yt-rag-head {display:flex; align-items:center; gap:8px; font-size:12px; font-weight:600; color:var(--blue-bright); letter-spacing:.04em;}
.yt-rag-tag-row {display:flex; gap:6px; flex-wrap:wrap;}
.yt-rag-tag {font-size:10px; padding:3px 8px; border-radius:4px; background:rgba(79,149,255,0.12); color:var(--blue-bright); border:1px solid rgba(79,149,255,0.2);}
.yt-rag-tag.alert {background:rgba(255,90,90,0.12); color:#FF7A7A; border-color:rgba(255,90,90,0.25);}
.yt-rag-insight {display:flex; flex-direction:column; gap:8px;}
.yt-rag-score {display:flex; align-items:center; gap:8px;}
.yt-rag-score-lbl {font-size:10px; color:rgba(255,255,255,0.4); flex-shrink:0; white-space:nowrap;}
.yt-rag-score-bar {flex:1; height:5px; background:rgba(255,255,255,0.08); border-radius:3px; overflow:hidden;}
.yt-rag-score-bar i {display:block; height:100%; border-radius:3px; transform-origin:left center;}
.yt-rag-score-val {font-size:10px; font-weight:700; color:#FF7A7A; flex-shrink:0;}

/* State 0 animations */
@keyframes ytPlayhead {
  0%,2% {left:0%;}
  50%,53% {left:95%;}
  98%,100% {left:0%;}
}
.vs-state.active .yt-playhead {animation:ytPlayhead 7s ease-in-out infinite;}
.vs-state.active .yt-scene {animation:mockCardIn 0.4s ease both;}
.vs-state.active .yt-scene.drop-scene {animation-delay:0.18s;}
.vs-state.active .yt-rag-tag {animation:mockCardIn 0.35s ease both;}
.vs-state.active .yt-rag-tag:nth-child(2) {animation-delay:0.1s;}
.vs-state.active .yt-rag-tag:nth-child(3) {animation-delay:0.2s;}
.vs-state.active .yt-rag-score-bar i {animation:mockBarFill 3.5s ease-in-out 0.8s infinite;}

/* =================================================================
   INNER CMS — Mock UI styles
   ================================================================= */

/* State 0 — 공인 인증 */
.cms-cert-grid {display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:18px;}
.cms-cert-card {display:flex; align-items:center; gap:10px; background:rgba(255,255,255,0.04); border-radius:8px; padding:12px; border:1px solid rgba(255,255,255,0.06);}
.cms-cert-icon {font-size:18px; flex-shrink:0;}
.cms-cert-body {flex:1;}
.cms-cert-title {font-size:12px; font-weight:600; color:#fff; line-height:1.3;}
.cms-cert-sub {font-size:10px; color:rgba(255,255,255,0.4); margin-top:3px;}
.cms-cert-badge {font-size:10px; font-weight:700; padding:3px 8px; border-radius:4px; flex-shrink:0;}
.cms-cert-badge.pass {background:rgba(74,222,128,0.12); color:#4ADE80; border:1px solid rgba(74,222,128,0.25);}
.cms-compat-label {font-size:10px; color:rgba(255,255,255,0.35); letter-spacing:.08em; text-transform:uppercase; margin-bottom:10px;}
.cms-compat-rows {display:grid; gap:8px;}
.cms-compat-row {display:flex; align-items:center; gap:10px;}
.cms-compat-name {font-size:12px; color:rgba(255,255,255,0.6); width:140px; flex-shrink:0;}
.cms-compat-bar {flex:1; height:5px; background:rgba(255,255,255,0.08); border-radius:3px; overflow:hidden;}
.cms-compat-bar i {display:block; height:100%; background:linear-gradient(90deg,#0066FF,#4F95FF); border-radius:3px; transform-origin:left center;}
.cms-compat-val {font-size:11px; color:#0066FF; width:34px; text-align:right; flex-shrink:0;}

/* State 0 animations */
.vs-state.active .cms-cert-card {animation:mockCardIn 0.4s ease both;}
.vs-state.active .cms-cert-card:nth-child(1) {animation-delay:0.05s;}
.vs-state.active .cms-cert-card:nth-child(2) {animation-delay:0.12s;}
.vs-state.active .cms-cert-card:nth-child(3) {animation-delay:0.19s;}
.vs-state.active .cms-cert-card:nth-child(4) {animation-delay:0.26s;}
@keyframes cmsCompatFill {
  0%,3%    {transform:scaleX(0);}
  50%      {transform:scaleX(1);}
  88%      {transform:scaleX(1);}
  98%,100% {transform:scaleX(0);}
}
.vs-state.active .cms-compat-bar i {animation:cmsCompatFill 5s cubic-bezier(0.4,0,0.2,1) infinite;}
.vs-state.active .cms-compat-rows .cms-compat-row:nth-child(1) .cms-compat-bar i {animation-delay:0.1s;}
.vs-state.active .cms-compat-rows .cms-compat-row:nth-child(2) .cms-compat-bar i {animation-delay:0.4s;}
.vs-state.active .cms-compat-rows .cms-compat-row:nth-child(3) .cms-compat-bar i {animation-delay:0.7s;}

/* State 1 — 콘텐츠 관리 */
.cms-editor {display:flex; gap:0; height:300px; border-radius:8px; overflow:hidden; border:1px solid rgba(255,255,255,0.06);}
.cms-sidebar {width:140px; flex-shrink:0; background:rgba(255,255,255,0.03); border-right:1px solid rgba(255,255,255,0.06); display:flex; flex-direction:column;}
.cms-sidebar-head {font-size:10px; letter-spacing:.08em; color:rgba(255,255,255,0.3); padding:12px 12px 8px; text-transform:uppercase; border-bottom:1px solid rgba(255,255,255,0.06);}
.cms-menu-item {display:flex; align-items:center; gap:7px; padding:9px 12px; font-size:12px; color:rgba(255,255,255,0.5); cursor:default; border-left:2px solid transparent;}
.cms-menu-item.active {color:#0066FF; background:rgba(0,102,255,0.08); border-left-color:#0066FF;}
.cms-menu-ico {font-size:12px;}
.cms-menu-add {padding:9px 12px; font-size:11px; color:rgba(255,255,255,0.25); cursor:default; margin-top:auto; border-top:1px solid rgba(255,255,255,0.06);}
.cms-content-area {flex:1; display:flex; flex-direction:column; padding:12px; gap:10px; overflow:hidden;}
.cms-toolbar {display:flex; align-items:center; gap:4px; padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,0.06);}
.cms-tool {width:26px; height:26px; display:grid; place-items:center; border-radius:4px; font-size:11px; font-weight:700; color:rgba(255,255,255,0.4); cursor:default; background:rgba(255,255,255,0.04);}
.cms-tool.active {background:rgba(0,102,255,0.2); color:#0066FF;}
.cms-tool-sep {width:1px; height:16px; background:rgba(255,255,255,0.1); margin-inline:4px;}
.cms-tool.cms-pub {width:auto; padding:0 10px; font-size:10px; background:rgba(0,102,255,0.25); color:#0066FF; letter-spacing:.04em;}
.cms-canvas-block {border-radius:5px; background:rgba(255,255,255,0.07); flex-shrink:0;}
.cms-canvas-block.hero2 {height:80px;}
.cms-canvas-block.line-t {height:10px; width:80%;}
.cms-canvas-block.line-s1 {height:10px; width:95%;}
.cms-canvas-block.line-s2 {height:10px; width:65%;}

/* State 1 animations */
.vs-state.active .cms-canvas-block {animation:dtBlockLoop 3.2s ease-in-out infinite;}
.vs-state.active .cms-canvas-block:nth-child(1) {animation-delay:0s;}
.vs-state.active .cms-canvas-block:nth-child(2) {animation-delay:0.45s;}
.vs-state.active .cms-canvas-block:nth-child(3) {animation-delay:0.9s;}
.vs-state.active .cms-canvas-block:nth-child(4) {animation-delay:1.35s;}
.vs-state.active .cms-menu-item {animation:mockCardIn 0.35s ease both;}
.vs-state.active .cms-menu-item:nth-child(2) {animation-delay:0.08s;}
.vs-state.active .cms-menu-item:nth-child(3) {animation-delay:0.16s;}
.vs-state.active .cms-menu-item:nth-child(4) {animation-delay:0.24s;}
.vs-state.active .cms-menu-item:nth-child(5) {animation-delay:0.32s;}

/* State 2 — 데이터 표준화 */
.cms-std {display:flex; flex-direction:column; gap:14px;}
.cms-std-search {display:flex; align-items:center; gap:8px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:8px; padding:10px 14px;}
.cms-std-search-icon {font-size:14px; opacity:.5;}
.cms-std-search-text {font-size:13px; color:rgba(255,255,255,0.3); flex:1;}
.cms-std-table {background:rgba(255,255,255,0.03); border-radius:8px; overflow:hidden; border:1px solid rgba(255,255,255,0.06);}
.cms-std-thead {display:grid; grid-template-columns:2fr 2fr 1fr 1fr; gap:0; padding:8px 14px; background:rgba(255,255,255,0.04); font-size:10px; color:rgba(255,255,255,0.35); letter-spacing:.06em; text-transform:uppercase;}
.cms-std-row {display:grid; grid-template-columns:2fr 2fr 1fr 1fr; gap:0; padding:9px 14px; font-size:12px; color:rgba(255,255,255,0.6); border-top:1px solid rgba(255,255,255,0.04);}
.cms-std-row.highlight {background:rgba(0,102,255,0.06);}
.cms-std-ok {color:#4ADE80; font-size:11px; font-weight:600;}
.cms-std-review {color:#0066FF; font-size:11px; font-weight:600;}
.cms-std-stats {display:flex; gap:20px; font-size:12px; color:rgba(255,255,255,0.4); padding-left:4px;}
.cms-std-stats b {font-weight:700;}

/* State 2 animations */
.vs-state.active .cms-std-row {animation:mockCardIn 0.35s ease both;}
.vs-state.active .cms-std-row:nth-child(2) {animation-delay:0.06s;}
.vs-state.active .cms-std-row:nth-child(3) {animation-delay:0.12s;}
.vs-state.active .cms-std-row:nth-child(4) {animation-delay:0.18s;}
.vs-state.active .cms-std-row:nth-child(5) {animation-delay:0.24s;}
.vs-state.active .cms-std-row:nth-child(6) {animation-delay:0.30s;}
@keyframes cmsHighlight {
  0%,100% {background:rgba(0,102,255,0.04);}
  50% {background:rgba(0,102,255,0.12);}
}
.vs-state.active .cms-std-row.highlight {animation:mockCardIn 0.35s ease 0.18s both, cmsHighlight 2s ease-in-out 0.7s infinite;}

/* State 3 — 보안 */
.cms-sec {display:flex; flex-direction:column; gap:14px;}
.cms-sec-top {display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.cms-otp-panel, .cms-ip-panel {background:rgba(255,255,255,0.04); border-radius:8px; padding:14px; border:1px solid rgba(255,255,255,0.06);}
.cms-otp-title {display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:rgba(255,255,255,0.7); margin-bottom:12px;}
.cms-sec-ico {font-size:14px;}
.cms-otp-code {display:flex; gap:8px; margin-bottom:10px;}
.cms-otp-digit {width:32px; height:38px; background:rgba(255,255,255,0.06); border-radius:6px; border:1px solid rgba(255,255,255,0.12); display:grid; place-items:center; font-size:18px; font-weight:700; color:#fff;}
.cms-otp-digit.blink {color:#0066FF; border-color:rgba(0,102,255,0.4);}
.cms-otp-timer {height:4px; background:rgba(255,255,255,0.08); border-radius:2px; overflow:hidden; margin-bottom:6px;}
.cms-otp-fill {display:block; height:100%; background:linear-gradient(90deg,#0066FF,#4F95FF); border-radius:2px; transform-origin:left center;}
.cms-otp-lbl {font-size:10px; color:rgba(255,255,255,0.35);}
.cms-ip-rows {display:grid; gap:7px;}
.cms-ip-row {display:flex; align-items:center; gap:8px; padding:7px 10px; background:rgba(255,255,255,0.03); border-radius:6px;}
.cms-ip-dot {width:7px; height:7px; border-radius:50%; flex-shrink:0;}
.cms-ip-dot.allow {background:#4ADE80;}
.cms-ip-dot.block {background:#FF5A5A;}
.cms-ip-dot.pulsing {animation:pulse 1s ease-in-out infinite;}
.cms-ip-addr {flex:1; font-size:11px; color:rgba(255,255,255,0.5);}
.cms-ip-tag {font-size:10px; font-weight:700; padding:2px 7px; border-radius:3px;}
.cms-ip-tag.allow {background:rgba(74,222,128,0.1); color:#4ADE80;}
.cms-ip-tag.block {background:rgba(255,90,90,0.12); color:#FF7A7A;}
.cms-audit {background:rgba(255,255,255,0.03); border-radius:8px; border:1px solid rgba(255,255,255,0.06); overflow:hidden;}
.cms-audit-head {font-size:10px; letter-spacing:.08em; color:rgba(255,255,255,0.3); padding:9px 14px; border-bottom:1px solid rgba(255,255,255,0.06); text-transform:uppercase;}
.cms-audit-row {display:flex; align-items:center; gap:12px; padding:9px 14px; border-top:1px solid rgba(255,255,255,0.04); font-size:11px;}
.cms-audit-row:first-of-type {border-top:0;}
.cms-audit-time {font-size:10px; color:rgba(255,255,255,0.3); flex-shrink:0;}
.cms-audit-msg {color:rgba(255,255,255,0.6);}
.cms-audit-row.warn .cms-audit-msg {color:#FF9200;}
.cms-audit-row.ok .cms-audit-msg {color:rgba(255,255,255,0.65);}

/* State 3 animations */
@keyframes cmsOtpBlink {
  0%,49%,100% {opacity:1;}
  50%,98% {opacity:0;}
}
.vs-state.active .cms-otp-digit.blink {animation:cmsOtpBlink 1s step-start infinite;}
@keyframes cmsOtpTimer {
  0%,3% {width:100%;}
  85%,88% {width:0%;}
  89% {width:100%;}
  100% {width:100%;}
}
.vs-state.active .cms-otp-fill {animation:cmsOtpTimer 8s linear infinite;}
.vs-state.active .cms-ip-row {animation:mockCardIn 0.4s ease both;}
.vs-state.active .cms-ip-row:nth-child(1) {animation-delay:0.1s;}
.vs-state.active .cms-ip-row:nth-child(2) {animation-delay:0.18s;}
.vs-state.active .cms-ip-row:nth-child(3) {animation-delay:0.26s;}
.vs-state.active .cms-ip-row:nth-child(4) {animation-delay:0.34s;}
.vs-state.active .cms-audit-row {animation:mockCardIn 0.4s ease both;}
.vs-state.active .cms-audit-row:nth-child(2) {animation-delay:0.3s;}
.vs-state.active .cms-audit-row:nth-child(3) {animation-delay:0.5s;}
.vs-state.active .cms-audit-row:nth-child(4) {animation-delay:0.7s;}

@media (max-width:768px) {
	.cms-cert-grid {grid-template-columns:1fr;}
	.cms-editor {flex-direction:column; height:auto;}
	.cms-sidebar {width:100%; height:auto;}
	.cms-sec-top {grid-template-columns:1fr;}
	.cms-std-thead, .cms-std-row {grid-template-columns:2fr 2fr 1fr;}
	.cms-std-thead span:nth-child(3), .cms-std-row span:nth-child(3) {display:none;}
}

/* =================================================================
   DATAFLOW — Mock UI styles
   ================================================================= */

/* State 0 — KPI + Chart */
.df-kpis {display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:22px;}
.df-kpi {background:rgba(255,255,255,0.04); border-radius:8px; padding:16px;}
.df-kpi-n {font-family:"Pretendard Variable", "Pretendard", sans-serif; font-weight:800; font-size:clamp(20px,2.5vw,32px); color:#fff; letter-spacing:-0.03em; line-height:1;}
.df-kpi-k {font-size:11px; color:rgba(255,255,255,0.4); margin-top:5px;}
.df-kpi-up {font-size:11px; color:#4F95FF; font-weight:600; margin-top:3px;}
.df-chart-wrap {border-radius:8px; overflow:hidden; background:rgba(0,102,255,0.05); padding:10px 0 0;}
.df-chart-label {font-size:11px; color:rgba(255,255,255,0.35); padding:0 14px 8px; letter-spacing:.08em;}
.df-chart-wrap svg {display:block; width:100%; height:130px;}

/* State 0 animations */
.vs-state.active .df-kpi {animation:mockCardIn 0.4s ease both;}
.vs-state.active .df-kpi:nth-child(1) {animation-delay:0.05s;}
.vs-state.active .df-kpi:nth-child(2) {animation-delay:0.13s;}
.vs-state.active .df-kpi:nth-child(3) {animation-delay:0.21s;}
.vs-state.active .df-kpi-n {animation:mockNumPulse 3.5s ease-in-out infinite;}
.vs-state.active .df-kpi:nth-child(2) .df-kpi-n {animation-delay:1.1s;}
.vs-state.active .df-kpi:nth-child(3) .df-kpi-n {animation-delay:2.2s;}

/* State 1 — AI Prediction */
.df-pred-grid {display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.df-student-card {background:rgba(255,255,255,0.04); border-radius:8px; padding:16px; border:1px solid rgba(255,255,255,0.06);}
.df-student-card.df-safe {border-color:rgba(79,149,255,0.2);}
.df-student-head {display:flex; align-items:center; gap:10px; margin-bottom:14px;}
.df-student-avatar {width:32px; height:32px; border-radius:50%; background:rgba(255,90,90,0.25); flex-shrink:0;}
.df-student-avatar.safe {background:rgba(79,149,255,0.25);}
.df-student-name {font-size:12px; font-weight:600; color:#fff;}
.df-student-dept {font-size:11px; color:rgba(255,255,255,0.4); margin-top:2px;}
.df-risk-chip {font-size:10px; font-weight:700; padding:3px 8px; border-radius:4px; margin-left:auto; flex-shrink:0;}
.df-risk-chip.high {background:rgba(255,90,90,0.15); color:#FF7A7A; border:1px solid rgba(255,90,90,0.3);}
.df-risk-chip.safe {background:rgba(79,149,255,0.15); color:#4F95FF; border:1px solid rgba(79,149,255,0.3);}
.df-risk-bars {display:grid; gap:8px; margin-bottom:12px;}
.df-risk-row {display:flex; align-items:center; gap:8px;}
.df-risk-lbl {font-size:11px; color:rgba(255,255,255,0.4); width:52px; flex-shrink:0;}
.df-risk-bar {flex:1; height:5px; background:rgba(255,255,255,0.08); border-radius:3px; overflow:hidden;}
.df-risk-bar i {display:block; height:100%; border-radius:3px; transform-origin:left center;}
.df-risk-val {font-size:11px; color:rgba(255,255,255,0.5); width:36px; text-align:right; flex-shrink:0;}
.df-pathway {font-size:11px; color:rgba(255,255,255,0.4); display:flex; align-items:center; gap:6px;}
.df-pathway.safe-text {color:#4F95FF; font-weight:600;}

/* State 1 animations */
.vs-state.active .df-student-card {animation:mockCardIn 0.4s ease both;}
.vs-state.active .df-student-card:nth-child(2) {animation-delay:0.15s;}
.vs-state.active .df-risk-bar i {transform-origin:left center; animation:mockBarFill 2.6s ease-in-out infinite;}
.vs-state.active .df-student-card:nth-child(1) .df-risk-row:nth-child(1) .df-risk-bar i {animation-delay:0.1s;}
.vs-state.active .df-student-card:nth-child(1) .df-risk-row:nth-child(2) .df-risk-bar i {animation-delay:0.25s;}
.vs-state.active .df-student-card:nth-child(1) .df-risk-row:nth-child(3) .df-risk-bar i {animation-delay:0.4s;}
.vs-state.active .df-student-card:nth-child(2) .df-risk-row:nth-child(1) .df-risk-bar i {animation-delay:0.3s;}
.vs-state.active .df-student-card:nth-child(2) .df-risk-row:nth-child(2) .df-risk-bar i {animation-delay:0.45s;}
.vs-state.active .df-student-card:nth-child(2) .df-risk-row:nth-child(3) .df-risk-bar i {animation-delay:0.6s;}

/* State 2 — Unstructured Data */
.df-unst {display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.df-stt-block, .df-ocr-block {background:rgba(255,255,255,0.04); border-radius:8px; padding:14px; border:1px solid rgba(255,255,255,0.06);}
.df-stt-head {display:flex; align-items:center; gap:8px; margin-bottom:12px; font-size:12px; font-weight:600; color:rgba(255,255,255,0.7);}
.df-stt-icon {font-size:14px;}
.df-stt-status {font-size:10px; color:#4F95FF; margin-left:auto; letter-spacing:.04em;}
.df-stt-status.done {color:#4ADE80;}
.df-wave {display:flex; align-items:center; gap:3px; height:36px; margin-bottom:12px;}
.df-bar {display:block; width:4px; border-radius:2px; background:#4F95FF; opacity:0.7;}
.df-stt-lbl {display:flex; align-items:center; gap:6px; font-size:11px; color:rgba(255,255,255,0.4); margin-bottom:8px;}
.df-ocr-rows {display:grid; gap:8px;}
.df-ocr-row {display:flex; align-items:center; gap:8px; padding:8px 10px; background:rgba(255,255,255,0.03); border-radius:6px;}
.df-ocr-row.processing {background:rgba(0,102,255,0.08);}
.df-ocr-file {flex:1; font-size:11px; color:rgba(255,255,255,0.6);}
.df-ocr-ck {color:#4ADE80; font-weight:700; font-size:12px;}

/* State 2 animations */
@keyframes dfWaveBar {
  0%,100% {height:6px; opacity:0.4;}
  50% {height:28px; opacity:1;}
}
.vs-state.active .df-bar {animation:dfWaveBar 0.8s ease-in-out infinite;}
.vs-state.active .df-bar:nth-child(1)  {animation-delay:0.00s;}
.vs-state.active .df-bar:nth-child(2)  {animation-delay:0.08s;}
.vs-state.active .df-bar:nth-child(3)  {animation-delay:0.16s;}
.vs-state.active .df-bar:nth-child(4)  {animation-delay:0.24s;}
.vs-state.active .df-bar:nth-child(5)  {animation-delay:0.32s;}
.vs-state.active .df-bar:nth-child(6)  {animation-delay:0.40s;}
.vs-state.active .df-bar:nth-child(7)  {animation-delay:0.48s;}
.vs-state.active .df-bar:nth-child(8)  {animation-delay:0.40s;}
.vs-state.active .df-bar:nth-child(9)  {animation-delay:0.32s;}
.vs-state.active .df-bar:nth-child(10) {animation-delay:0.24s;}
.vs-state.active .df-bar:nth-child(11) {animation-delay:0.16s;}
.vs-state.active .df-bar:nth-child(12) {animation-delay:0.08s;}
.vs-state.active .yt-line {animation:mockSkeleton 1.8s ease-in-out infinite;}
.vs-state.active .df-ocr-row {animation:mockCardIn 0.4s ease both;}
.vs-state.active .df-ocr-row:nth-child(1) {animation-delay:0.1s;}
.vs-state.active .df-ocr-row:nth-child(2) {animation-delay:0.25s;}
.vs-state.active .df-ocr-row:nth-child(3) {animation-delay:0.4s;}

/* State 3 — Enterprise Reporting */
.df-report {display:flex; gap:16px; height:280px;}
.df-report-preview {flex:1; background:rgba(255,255,255,0.03); border-radius:8px; border:1px solid rgba(255,255,255,0.06); padding:16px; display:flex; flex-direction:column; gap:8px; overflow:hidden;}
.df-rp-title {height:14px; width:60%; background:rgba(255,255,255,0.15); border-radius:4px;}
.df-rp-line {height:8px; border-radius:4px; background:rgba(255,255,255,0.08);}
.df-rp-line.w1 {width:90%;}
.df-rp-line.w2 {width:75%;}
.df-rp-line.w3 {width:85%;}
.df-rp-chart-stub {height:60px; background:rgba(0,102,255,0.08); border-radius:6px; flex-shrink:0;}
.df-integrations {width:200px; flex-shrink:0; display:flex; flex-direction:column; gap:0;}
.df-intg-head {font-size:10px; letter-spacing:.1em; color:rgba(255,255,255,0.35); padding:0 0 10px; text-transform:uppercase; border-bottom:1px solid rgba(255,255,255,0.06); margin-bottom:8px;}
.df-intg-row {display:flex; align-items:center; gap:8px; padding:7px 0; border-bottom:1px solid rgba(255,255,255,0.04);}
.df-intg-row:last-of-type {border-bottom:0;}
.df-intg-dot {width:7px; height:7px; border-radius:50%; background:#4ADE80; flex-shrink:0;}
.df-intg-dot.pulsing {background:#4F95FF; animation:pulse 1.2s ease-in-out infinite;}
.df-intg-name {flex:1; font-size:11px; color:rgba(255,255,255,0.6);}
.df-intg-status {font-size:10px; color:#4ADE80;}
.df-intg-status.syncing {color:#4F95FF;}
.df-prog-lbl {display:flex; align-items:center; gap:6px; font-size:11px; color:rgba(255,255,255,0.4); margin-bottom:8px;}
.df-prog-wrap {margin-top: 14px;}
.df-progress {height:5px; background:rgba(255,255,255,0.08); border-radius:3px; overflow:hidden;}
.df-prog-fill {display:block; height:100%; width:0%; background:linear-gradient(90deg,#0066FF,#4F95FF); border-radius:3px; transform-origin:left center;}

/* State 3 animations */
.vs-state.active .df-rp-line, .vs-state.active .df-rp-title {animation:mockSkeleton 1.8s ease-in-out infinite;}
.vs-state.active .df-rp-line.w2 {animation-delay:0.3s;}
.vs-state.active .df-rp-line.w3 {animation-delay:0.6s;}
.vs-state.active .df-intg-row {animation:mockCardIn 0.4s ease both;}
.vs-state.active .df-intg-row:nth-child(2) {animation-delay:0.05s;}
.vs-state.active .df-intg-row:nth-child(3) {animation-delay:0.12s;}
.vs-state.active .df-intg-row:nth-child(4) {animation-delay:0.19s;}
.vs-state.active .df-intg-row:nth-child(5) {animation-delay:0.26s;}
@keyframes dfProgFill {
  0%,4%   {width:0%;}
  52%     {width:100%;}
  74%     {width:100%;}
  90%,100% {width:0%;}
}
.vs-state.active .df-prog-fill {animation:dfProgFill 8s cubic-bezier(0.4,0,0.6,1) 0.5s infinite;}
.vs-state.active .df-rp-chart-stub {animation:dtAiGen 2.8s ease-in-out infinite;}

@media (max-width:768px) {
  .df-kpis {grid-template-columns:repeat(2,1fr);}
  .df-pred-grid {grid-template-columns:1fr;}
  .df-unst {grid-template-columns:1fr;}
  .df-report {flex-direction:column; height:auto;}
  .df-integrations {width:100%;}
}

/* =================================================================
   DETAILY — Mock UI styles
   ================================================================= */

/* badge accent */

/* State 0 — Template Library */
.dt-cats {display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap;}
.dt-cat {font-size:12px; padding:5px 14px; border-radius:20px; border:1px solid rgba(255,255,255,0.1); color:rgba(255,255,255,0.45); cursor:default;}
.dt-cat.active {border-color:rgba(0,102,255,0.55); color:#0066FF; background:rgba(0,102,255,0.08);}

.dt-tpl-grid {display:grid; grid-template-columns:repeat(4,1fr); gap:12px;}
.dt-tpl {border-radius:8px; overflow:hidden; border:2px solid transparent; position:relative; background:rgba(255,255,255,0.03);}
.dt-tpl-active {border-color:#0066FF;}
.dt-tpl-rec {position:relative;}
.dt-rec-tag {position:absolute; top:8px; left:8px; font-size:10px; font-weight:700; background:#0066FF; color:#fff; padding:2px 7px; border-radius:4px; z-index:1; letter-spacing:.04em;}
.dt-tpl-thumb {height:90px; border-radius:0;}
.dt-tpl-thumb.modern {background:linear-gradient(135deg,rgba(100,120,180,0.25),rgba(60,80,160,0.1));}
.dt-tpl-thumb.warm {background:linear-gradient(135deg,rgba(255,160,80,0.25),rgba(220,100,50,0.1));}
.dt-tpl-thumb.vivid {background:linear-gradient(135deg,rgba(100,200,255,0.25),rgba(80,100,255,0.15));}
.dt-tpl-thumb.simple {background:linear-gradient(135deg,rgba(0,102,255,0.18),rgba(0,47,204,0.08));}
.dt-tpl-name {display:block; font-size:11px; color:rgba(255,255,255,0.45); padding:7px 10px; text-align:center; letter-spacing:.04em;}

/* State 0 animations — template cycling (JS로 제어, CSS는 전환 효과만) */
.dt-tpl {transition: border-color 0.4s ease, box-shadow 0.4s ease;}
.dt-tpl-active {border-color:#0066FF; box-shadow:0 0 0 0 rgba(0,102,255,0);}
.vs-state.active .dt-tpl {animation:mockCardIn 0.4s ease both;}
.vs-state.active .dt-tpl:nth-child(1) {animation-delay:0.05s;}
.vs-state.active .dt-tpl:nth-child(2) {animation-delay:0.12s;}
.vs-state.active .dt-tpl:nth-child(3) {animation-delay:0.19s;}
.vs-state.active .dt-tpl:nth-child(4) {animation-delay:0.26s;}
@keyframes dtTplGlowCycle {
  0%,100% {box-shadow:0 0 0 2px rgba(0,102,255,0.3);}
  50% {box-shadow:0 0 0 3px rgba(0,102,255,0.7), 0 0 20px rgba(0,102,255,0.2);}
}
.dt-tpl.dt-tpl-active {animation:dtTplGlowCycle 1.6s ease-in-out infinite !important;}

/* State 1 — AI Image Studio */
.dt-img-studio {display:flex; align-items:center; gap:16px; margin-bottom:20px;}
.dt-img-panel {flex:1; text-align:center;}
.dt-img-box {height:160px; border-radius:8px; border:1px solid rgba(255,255,255,0.08);}
.dt-img-orig {background:rgba(255,255,255,0.06); position:relative; overflow:hidden;}
.dt-img-orig::after {content:""; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,0.04) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.04) 50%,rgba(255,255,255,0.04) 75%,transparent 75%); background-size:16px 16px;}
.dt-img-ai {background:linear-gradient(135deg,rgba(0,102,255,0.15),rgba(0,47,204,0.08)); position:relative; overflow:hidden;}
.dt-img-lbl {display:block; font-size:11px; color:rgba(255,255,255,0.35); margin-top:8px; letter-spacing:.06em; text-transform:uppercase;}
.dt-img-arrow {flex-shrink:0; width:40px; color:rgba(255,255,255,0.25);}
.dt-img-arrow svg {width:40px; height:24px;}
.dt-img-opts {display:flex; gap:8px; flex-wrap:wrap;}
.dt-opt {font-size:12px; padding:6px 14px; border-radius:20px; border:1px solid rgba(255,255,255,0.1); color:rgba(255,255,255,0.45); cursor:default;}
.dt-opt-active {border-color:rgba(0,102,255,0.55); color:#0066FF; background:rgba(0,102,255,0.08);}

/* State 1 animations — AI image reveal */
.dt-img-orig {background-size:cover; background-position:center;}
.dt-img-ai {background-size:cover; background-position:center; position:relative; overflow:hidden;}
.dt-ai-overlay{position:absolute; inset:0; background:linear-gradient(135deg,rgba(0,102,255,0.18),rgba(0,47,204,0.1)); animation:dtAiReveal 4s ease-in-out infinite;}
@keyframes dtAiReveal {
  0%,5%  {opacity:1; background:rgba(5,6,10,0.85);}
  15%    {opacity:1; background:linear-gradient(135deg,rgba(0,102,255,0.4),rgba(79,149,255,0.2)); filter:blur(4px);}
  30%,75% {opacity:0; filter:blur(0);}
  85%,100% {opacity:1; background:rgba(5,6,10,0.85);}
}
.vs-state.active .dt-img-orig {animation:mockCardIn 0.5s ease both;}
.vs-state.active .dt-img-panel:last-child {animation:mockCardIn 0.5s ease 0.3s both;}
.vs-state.active .dt-opt {animation:mockCardIn 0.35s ease both;}
.vs-state.active .dt-opt:nth-child(1) {animation-delay:0.4s;}
.vs-state.active .dt-opt:nth-child(2) {animation-delay:0.48s;}
.vs-state.active .dt-opt:nth-child(3) {animation-delay:0.56s;}
.vs-state.active .dt-opt:nth-child(4) {animation-delay:0.64s;}

/* State 2 — Layer Editor */
.dt-editor {display:flex; gap:16px; height:260px;}
.dt-canvas {flex:1; background:rgba(255,255,255,0.03); border-radius:8px; border:1px solid rgba(255,255,255,0.06); padding:16px; position:relative; display:flex; flex-direction:column; gap:10px;}
.dt-canvas-hero {height:80px; background:rgba(255,255,255,0.06); border-radius:6px;}
.dt-canvas-line {height:10px; border-radius:5px; background:rgba(255,255,255,0.08);}
.dt-canvas-line.t {width:75%;}
.dt-canvas-line.s1 {width:90%;}
.dt-canvas-line.s2 {width:60%;}
.dt-sel-box {position:absolute; top:16px; left:16px; right:16px; height:80px; border:2px dashed rgba(0,102,255,0.7); border-radius:6px; pointer-events:none;}
.dt-layers {width:160px; flex-shrink:0; background:rgba(255,255,255,0.03); border-radius:8px; border:1px solid rgba(255,255,255,0.06); overflow:hidden;}
.dt-layer-head {font-size:10px; letter-spacing:.1em; color:rgba(255,255,255,0.35); padding:10px 12px 8px; text-transform:uppercase; border-bottom:1px solid rgba(255,255,255,0.06);}
.dt-layer {display:flex; align-items:center; gap:8px; padding:10px 12px; font-size:12px; color:rgba(255,255,255,0.45); border-bottom:1px solid rgba(255,255,255,0.04);}
.dt-layer:last-child {border-bottom:0;}
.dt-layer-active {background:rgba(0,102,255,0.1); color:#0066FF;}
.dt-layer-ico {font-size:10px; width:16px; text-align:center; opacity:.6;}

/* State 2 animations — sequential block appearance loop */
.dt-canvas-block {opacity:0; transform:translateY(6px);}
@keyframes dtBlockLoop {
  0%,8%  {opacity:0; transform:translateY(6px);}
  18%,72% {opacity:1; transform:translateY(0);}
  82%,100% {opacity:0; transform:translateY(0);}
}
.vs-state.active .dt-canvas-block {animation:dtBlockLoop 3.6s ease-in-out infinite;}
.vs-state.active .dt-canvas-block:nth-child(1) {animation-delay:0s;}
.vs-state.active .dt-canvas-block:nth-child(2) {animation-delay:0.5s;}
.vs-state.active .dt-canvas-block:nth-child(3) {animation-delay:1.0s;}
.vs-state.active .dt-canvas-block:nth-child(4) {animation-delay:1.5s;}
.vs-state.active .dt-sel-box {animation:dtSelPulse 2s ease-in-out infinite;}
@keyframes dtSelPulse {
  0%,100% {border-color:rgba(0,102,255,0.4); box-shadow:none;}
  50% {border-color:rgba(0,102,255,0.9); box-shadow:0 0 12px rgba(0,102,255,0.2);}
}
.vs-state.active .dt-layer {animation:mockCardIn 0.35s ease both;}
.vs-state.active .dt-layer:nth-child(2) {animation-delay:0.1s;}
.vs-state.active .dt-layer:nth-child(3) {animation-delay:0.18s;}
.vs-state.active .dt-layer:nth-child(4) {animation-delay:0.26s;}
.vs-state.active .dt-layer:nth-child(5) {animation-delay:0.34s;}

/* State 3 — Export */
.dt-export {display:flex; flex-direction:column; gap:24px;}
.dt-plats {display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.dt-plat {display:flex; align-items:center; gap:10px; padding:14px 16px; background:rgba(255,255,255,0.04); border-radius:8px; border:1px solid rgba(255,255,255,0.06);}
.dt-plat-mk {width:8px; height:8px; border-radius:2px; background:#0066FF; flex-shrink:0;}
.dt-plat-name {flex:1; font-size:13px; color:rgba(255,255,255,0.7);}
.dt-ck {font-size:12px; color:#0066FF; font-weight:700;}
.dt-prog-wrap {background:rgba(255,255,255,0.04); border-radius:8px; padding:16px 18px;}
.dt-prog-lbl {display:flex; align-items:center; gap:8px; font-size:12px; color:rgba(255,255,255,0.5); margin-bottom:14px;}
.dt-progress {height:6px; background:rgba(255,255,255,0.08); border-radius:3px; overflow:hidden;}
.dt-prog-fill {display:block; height:100%; width:72%; background:linear-gradient(90deg,#0066FF,#4F95FF); border-radius:3px; transform-origin:left center;}

/* State 3 animations — sequential checkmarks + progress loop */
.dt-ck {opacity:0; display:inline-block;}
@keyframes dtCkAppear {
  0%,4%  {opacity:0; transform:scale(0.3);}
  7%,80% {opacity:1; transform:scale(1);}
  90%,100% {opacity:0; transform:scale(1);}
}
.vs-state.active .dt-ck {animation:dtCkAppear 8s ease-in-out infinite;}
.vs-state.active .dt-plat:nth-child(1) .dt-ck {animation-delay:0.4s;}
.vs-state.active .dt-plat:nth-child(2) .dt-ck {animation-delay:1.0s;}
.vs-state.active .dt-plat:nth-child(3) .dt-ck {animation-delay:1.6s;}
.vs-state.active .dt-plat:nth-child(4) .dt-ck {animation-delay:2.2s;}
.vs-state.active .dt-plat {animation:mockCardIn 0.4s ease both;}
.vs-state.active .dt-plat:nth-child(1) {animation-delay:0.05s;}
.vs-state.active .dt-plat:nth-child(2) {animation-delay:0.12s;}
.vs-state.active .dt-plat:nth-child(3) {animation-delay:0.19s;}
.vs-state.active .dt-plat:nth-child(4) {animation-delay:0.26s;}
@keyframes dtProgLoop {
  0%,4%   {width:0%;}
  52%     {width:100%;}
  74%     {width:100%;}
  90%,100% {width:0%;}
}
.vs-state.active .dt-prog-fill {animation:dtProgLoop 8s cubic-bezier(0.4,0,0.6,1) 0.5s infinite;}

@media (max-width:768px) {
	.dt-tpl-grid {grid-template-columns:repeat(2,1fr);}
	.dt-img-studio {flex-direction:column;}
	.dt-editor {height:auto; flex-direction:column;}
	.dt-layers {width:100%;}
	.dt-plats {grid-template-columns:1fr;}
}

/* =================================================================
   INNER AI BOT — Mock UI styles
   ================================================================= */

/* State 0 — Hybrid Chat */
.bot-chat {display:flex; flex-direction:column; gap:14px;}
.bot-msg {display:flex; align-items:flex-start; gap:10px;}
.bot-msg.user {flex-direction:row-reverse;}
.bot-avatar {font-size:18px; flex-shrink:0; margin-top:2px;}
.bot-bubble {font-size:12px; line-height:1.6; color:rgba(255,255,255,0.75); background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); border-radius:12px; padding:10px 14px; max-width:75%;}
.bot-bubble.user {background:rgba(0,102,255,0.18); border-color:rgba(0,102,255,0.3); color:rgba(255,255,255,0.85); text-align:right;}
.bot-tag {display:inline-block; font-size:9px; font-weight:700; letter-spacing:.06em; padding:2px 7px; border-radius:4px; margin-bottom:6px; text-transform:uppercase;}
.bot-tag.rule {background:rgba(0,102,255,0.15); color:#4F95FF;}
.bot-tag.ai {background:rgba(0,102,255,0.18); color:#4F95FF;}
.bot-chips {display:flex; gap:6px; flex-wrap:wrap; margin-top:8px;}
.bot-chip {font-size:11px; padding:4px 10px; border-radius:20px; border:1px solid rgba(0,102,255,0.35); color:#4F95FF; cursor:default;}

/* Typing bubble */
.bot-typing-bubble {min-width:48px; transition:min-width 0.1s ease;}
.bot-typing-text {display:inline;}
.bot-typing-cursor {display:inline-block; width:2px; height:0.9em; background:#4F95FF; vertical-align:text-bottom; margin-left:2px; animation:botCursorBlink 0.65s step-start infinite;}
@keyframes botCursorBlink {0%,49%{opacity:1;} 50%,100%{opacity:0;}}

/* State 0 animations */
.vs-state.active .bot-msg {animation:mockCardIn 0.4s ease both;}
.vs-state.active .bot-msg:nth-child(1) {animation-delay:0.05s;}
.vs-state.active .bot-msg:nth-child(2) {animation-delay:0.2s;}
.vs-state.active .bot-msg:nth-child(3) {animation-delay:0.38s;}
.vs-state.active .bot-msg:nth-child(4) {animation-delay:0.58s;}
.vs-state.active #bot-typing-msg {animation-delay:0.78s;}

/* State 1 — System Integration */
.bot-intg {display:flex; flex-direction:column; gap:16px;}
.bot-intg-hub {display:flex; align-items:center; gap:20px;}
.bot-intg-core {width:72px; height:72px; border-radius:50%; background:rgba(5,6,10,0.95); border:1.5px solid rgba(0,102,255,0.45); display:grid; place-items:center; font-size:10px; font-weight:700; color:#4F95FF; text-align:center; line-height:1.3; flex-shrink:0; position:relative; overflow:visible;}
.bot-intg-core::before {content:''; position:absolute; inset:-4px; border-radius:50%; background:conic-gradient(rgba(0,102,255,0.9) 0deg, rgba(79,149,255,0.55) 40deg, transparent 75deg, transparent 285deg, rgba(0,102,255,0.85) 360deg); animation:botCoreRotate 2.2s linear infinite; filter:blur(4px); z-index:-1; pointer-events:none;}
.bot-intg-core::after {content:''; position:absolute; inset:-4px; border-radius:50%; border:2px solid transparent; border-top-color:rgba(79,149,255,0.85); border-right-color:rgba(0,102,255,0.4); animation:botCoreRotate 2.2s linear infinite; z-index:-1; pointer-events:none;}
@keyframes botCoreRotate {from{transform:rotate(0deg);} to{transform:rotate(360deg);}}
.vs-state.active .bot-intg-core {animation:botCoreSonar 2.2s ease-out infinite;}
@keyframes botCoreSonar {
  0%   {box-shadow:0 0 0 0 rgba(0,102,255,0.7), 0 0 0 0 rgba(0,102,255,0.35);}
  40%  {box-shadow:0 0 0 10px rgba(0,102,255,0.22), 0 0 0 0 rgba(0,102,255,0.6);}
  80%  {box-shadow:0 0 0 22px rgba(0,102,255,0), 0 0 0 10px rgba(0,102,255,0.12);}
  100% {box-shadow:0 0 0 22px rgba(0,102,255,0), 0 0 0 22px rgba(0,102,255,0);}
}
.bot-intg-items {flex:1; display:grid; gap:7px;}
.bot-intg-item {display:flex; align-items:center; gap:8px; padding:7px 10px; background:rgba(255,255,255,0.03); border-radius:6px;}
#sol-aibot .bot-intg-dot {width:7px; height:7px; border-radius:50%; flex-shrink:0; background:rgba(255,255,255,0.12); box-shadow:none;}
.bot-intg-name {flex:1; font-size:11px; color:rgba(255,255,255,0.55);}
#sol-aibot .bot-intg-st {font-size:10px; color:#4ADE80; opacity:0; transform:translateX(-4px);}
.bot-intg-log {background:rgba(255,255,255,0.03); border-radius:8px; border:1px solid rgba(255,255,255,0.06); overflow:hidden;}

/* State 1 animations — accumulating sequential, all off together */
/* 7.5s cycle: items activate one by one (every ~16%), all go dark at 86%, reset */
@keyframes botDot1 {0%,1%{background:rgba(255,255,255,0.12);box-shadow:none;} 3%,84%{background:#4ADE80;box-shadow:0 0 8px rgba(74,222,128,0.65);} 87%,100%{background:rgba(255,255,255,0.12);box-shadow:none;}}
@keyframes botDot2 {0%,15%{background:rgba(255,255,255,0.12);box-shadow:none;} 18%,84%{background:#4ADE80;box-shadow:0 0 8px rgba(74,222,128,0.65);} 87%,100%{background:rgba(255,255,255,0.12);box-shadow:none;}}
@keyframes botDot3 {0%,31%{background:rgba(255,255,255,0.12);box-shadow:none;} 34%,84%{background:#4ADE80;box-shadow:0 0 8px rgba(74,222,128,0.65);} 87%,100%{background:rgba(255,255,255,0.12);box-shadow:none;}}
@keyframes botDot4 {0%,47%{background:rgba(255,255,255,0.12);box-shadow:none;} 50%,84%{background:#4ADE80;box-shadow:0 0 8px rgba(74,222,128,0.65);} 87%,100%{background:rgba(255,255,255,0.12);box-shadow:none;}}
@keyframes botDot5 {0%,63%{background:rgba(255,255,255,0.12);box-shadow:none;} 66%,84%{background:#4ADE80;box-shadow:0 0 8px rgba(74,222,128,0.65);} 87%,100%{background:rgba(255,255,255,0.12);box-shadow:none;}}
@keyframes botSt1 {0%,2%{opacity:0;transform:translateX(-4px);} 5%,84%{opacity:1;transform:translateX(0);} 87%,100%{opacity:0;transform:translateX(0);}}
@keyframes botSt2 {0%,16%{opacity:0;transform:translateX(-4px);} 20%,84%{opacity:1;transform:translateX(0);} 87%,100%{opacity:0;transform:translateX(0);}}
@keyframes botSt3 {0%,32%{opacity:0;transform:translateX(-4px);} 36%,84%{opacity:1;transform:translateX(0);} 87%,100%{opacity:0;transform:translateX(0);}}
@keyframes botSt4 {0%,48%{opacity:0;transform:translateX(-4px);} 52%,84%{opacity:1;transform:translateX(0);} 87%,100%{opacity:0;transform:translateX(0);}}
@keyframes botSt5 {0%,64%{opacity:0;transform:translateX(-4px);} 68%,84%{opacity:1;transform:translateX(0);} 87%,100%{opacity:0;transform:translateX(0);}}
#sol-aibot .vs-state.active .bot-intg-item {animation:mockCardIn 0.4s ease both;}
#sol-aibot .vs-state.active .bot-intg-item:nth-child(1) {animation-delay:0.08s;}
#sol-aibot .vs-state.active .bot-intg-item:nth-child(2) {animation-delay:0.16s;}
#sol-aibot .vs-state.active .bot-intg-item:nth-child(3) {animation-delay:0.24s;}
#sol-aibot .vs-state.active .bot-intg-item:nth-child(4) {animation-delay:0.32s;}
#sol-aibot .vs-state.active .bot-intg-item:nth-child(5) {animation-delay:0.40s;}
#sol-aibot .vs-state.active .bot-intg-item:nth-child(1) .bot-intg-dot {animation:botDot1 5s ease-out 0.5s infinite both;}
#sol-aibot .vs-state.active .bot-intg-item:nth-child(2) .bot-intg-dot {animation:botDot2 5s ease-out 0.5s infinite both;}
#sol-aibot .vs-state.active .bot-intg-item:nth-child(3) .bot-intg-dot {animation:botDot3 5s ease-out 0.5s infinite both;}
#sol-aibot .vs-state.active .bot-intg-item:nth-child(4) .bot-intg-dot {animation:botDot4 5s ease-out 0.5s infinite both;}
#sol-aibot .vs-state.active .bot-intg-item:nth-child(5) .bot-intg-dot {animation:botDot5 5s ease-out 0.5s infinite both;}
#sol-aibot .vs-state.active .bot-intg-item:nth-child(1) .bot-intg-st  {animation:botSt1  5s ease-out 0.5s infinite both;}
#sol-aibot .vs-state.active .bot-intg-item:nth-child(2) .bot-intg-st  {animation:botSt2  5s ease-out 0.5s infinite both;}
#sol-aibot .vs-state.active .bot-intg-item:nth-child(3) .bot-intg-st  {animation:botSt3  5s ease-out 0.5s infinite both;}
#sol-aibot .vs-state.active .bot-intg-item:nth-child(4) .bot-intg-st  {animation:botSt4  5s ease-out 0.5s infinite both;}
#sol-aibot .vs-state.active .bot-intg-item:nth-child(5) .bot-intg-st  {animation:botSt5  5s ease-out 0.5s infinite both;}

/* State 2 — RAG Knowledge Engine */
.bot-rag {display:flex; flex-direction:column; gap:16px;}
.bot-rag-docs {display:grid; gap:7px;}
.bot-rag-doc {display:flex; align-items:center; gap:10px; padding:8px 12px; background:rgba(255,255,255,0.03); border-radius:6px; border:1px solid rgba(255,255,255,0.06);}
.bot-rag-doc.processing {border-color:rgba(0,102,255,0.3); background:rgba(0,102,255,0.06);}
.bot-rag-ico {font-size:14px;}
.bot-rag-name {flex:1; font-size:11px; color:rgba(255,255,255,0.55);}
.bot-rag-flow {display:flex; align-items:center; gap:8px; padding:14px; background:rgba(255,255,255,0.03); border-radius:8px; border:1px solid rgba(255,255,255,0.06);}
.bot-rag-step {display:flex; align-items:center; gap:6px; font-size:11px; color:rgba(255,255,255,0.45); flex:1; justify-content:center;}
.bot-rag-step.active {color:#4F95FF;}
.bot-rag-num {font-size:10px; font-weight:700; color:#4F95FF; background:rgba(0,102,255,0.15); border-radius:4px; padding:2px 6px;}
.bot-rag-arrow {font-size:12px; color:rgba(255,255,255,0.2); flex-shrink:0;}
.bot-rag-result {padding:12px 14px; background:rgba(0,102,255,0.07); border-radius:8px; border:1px solid rgba(0,102,255,0.2);}

/* State 2 animations */
.vs-state.active .bot-rag-doc {animation:mockCardIn 0.4s ease both;}
.vs-state.active .bot-rag-doc:nth-child(1) {animation-delay:0.05s;}
.vs-state.active .bot-rag-doc:nth-child(2) {animation-delay:0.15s;}
.vs-state.active .bot-rag-doc:nth-child(3) {animation-delay:0.25s;}
@keyframes botRagStepCycle {
  0%,32%   {background:rgba(0,102,255,0.15); color:#4F95FF; box-shadow:0 0 10px rgba(0,102,255,0.3);}
  33%,100% {background:rgba(0,102,255,0.08); color:rgba(255,255,255,0.45); box-shadow:none;}
}
.vs-state.active .bot-rag-step:nth-child(1) {animation:botRagStepCycle 3.6s ease-in-out 0s infinite;}
.vs-state.active .bot-rag-step:nth-child(3) {animation:botRagStepCycle 3.6s ease-in-out 1.2s infinite;}
.vs-state.active .bot-rag-step:nth-child(5) {animation:botRagStepCycle 3.6s ease-in-out 2.4s infinite;}
.bot-rag-step {transition:background 0.4s, color 0.4s, box-shadow 0.4s; border-radius:6px; padding:4px 8px;}
@keyframes ragLineLoop {
  0%,8%    {opacity:0;}
  20%,70%  {opacity:1;}
  86%,100% {opacity:0;}
}
.vs-state.active .bot-rag-result .yt-line {animation:ragLineLoop 4s ease-in-out infinite;}
.vs-state.active .bot-rag-result .yt-line:nth-child(2) {animation-delay:0.4s;}
.vs-state.active .bot-rag-result .yt-line:nth-child(3) {animation-delay:0.7s;}
.vs-state.active .bot-rag-result .yt-line:nth-child(4) {animation-delay:1.0s;}

/* State 3 — Analytics & Security */
.bot-analytics {display:flex; flex-direction:column; gap:14px;}
.bot-kpis {display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
.bot-sec-row {display:grid; gap:10px;}
/* KPI stagger */
.vs-state.active .bot-kpis .df-kpi {animation:mockCardIn 0.4s ease both;}
.vs-state.active .bot-kpis .df-kpi:nth-child(1) {animation-delay:0.05s;}
.vs-state.active .bot-kpis .df-kpi:nth-child(2) {animation-delay:0.18s;}
.vs-state.active .bot-kpis .df-kpi:nth-child(3) {animation-delay:0.31s;}
/* audit-time 순차 등장 — 누적 활성, 동시 소멸 (5s 사이클) */
#sol-aibot .bot-sec-row .cms-audit-time {color:#4ADE80; opacity:0;}
@keyframes botAuditTime1 {0%,3%{opacity:0;} 7%,82%{opacity:1;} 86%,100%{opacity:0;}}
@keyframes botAuditTime2 {0%,29%{opacity:0;} 33%,82%{opacity:1;} 86%,100%{opacity:0;}}
@keyframes botAuditTime3 {0%,57%{opacity:0;} 61%,82%{opacity:1;} 86%,100%{opacity:0;}}
#sol-aibot .vs-state.active .bot-sec-row .cms-otp-panel > .cms-audit-row {animation:mockCardIn 0.4s ease both;}
#sol-aibot .vs-state.active .bot-sec-row .cms-otp-panel > .cms-audit-row:nth-child(2) {animation-delay:0.45s;}
#sol-aibot .vs-state.active .bot-sec-row .cms-otp-panel > .cms-audit-row:nth-child(3) {animation-delay:0.58s;}
#sol-aibot .vs-state.active .bot-sec-row .cms-otp-panel > .cms-audit-row:nth-child(4) {animation-delay:0.71s;}
#sol-aibot .vs-state.active .bot-sec-row .cms-otp-panel > .cms-audit-row:nth-child(2) .cms-audit-time {animation:botAuditTime1 3s ease-out 0.8s infinite both;}
#sol-aibot .vs-state.active .bot-sec-row .cms-otp-panel > .cms-audit-row:nth-child(3) .cms-audit-time {animation:botAuditTime2 3s ease-out 0.8s infinite both;}
#sol-aibot .vs-state.active .bot-sec-row .cms-otp-panel > .cms-audit-row:nth-child(4) .cms-audit-time {animation:botAuditTime3 3s ease-out 0.8s infinite both;}

@media (max-width:768px) {
	.bot-kpis {grid-template-columns:1fr 1fr;}
	.bot-intg-hub {flex-direction:column; align-items:flex-start;}
	.bot-rag-flow {flex-direction:column; align-items:flex-start; gap:6px;}
	.bot-rag-arrow {transform:rotate(90deg);}
}

/* =================================================================
   VIEWSIGHT — Tabs + Mockup
   ================================================================= */

/* Tab nav */
.vs-tabs-wrap {margin-top: clamp(40px,5vw,72px);}
.vs-tabs {display: flex; border-bottom: 1px solid var(--line-faint); gap: 0; overflow-x: auto; scrollbar-width: none;}
.vs-tabs::-webkit-scrollbar {display: none;}
.vs-tab{flex: 1; min-width: 180px; position: relative; background: none; border: none; border-bottom: none; padding: 18px 20px 16px 0; text-align: left; cursor: pointer; margin-bottom: 0;}
.vs-tab::after {content:""; position:absolute; left:0; bottom:0; width:100%; height:2px; background:#0066FF; transform:scaleX(0); transform-origin:left; transition:transform .3s ease;}
.vs-tab:hover::after {transform:scaleX(1);}
.vs-tab.active::after {transform:scaleX(1); transition:none;}
.vs-tab-num {display: none;}
.vs-tab-name {display: block; font-weight: 700; font-size: 14px; color: var(--txt); letter-spacing: -0.01em; line-height: 1.3;}
.vs-tab-kr {display: block; font-size: 12px; color: var(--txt-dim); margin-top: 4px; line-height: 1.4;}
.vs-tab.active .vs-tab-name {color: #0066FF;}

/* Info row */
.vs-info-row {position: relative; min-height: 100px; margin-top: 28px;}
.vs-info {display: none; animation: vsFadeUp .35s ease;}
.vs-info.active {display: block;}
.vs-info h4 {font-size: clamp(17px,1.6vw,22px); font-weight: 700; color: var(--txt); letter-spacing: -0.01em; margin-bottom: 10px;}
.vs-info p {font-size: 14px; line-height: 1.75; color: var(--txt-dim); max-width: 60ch;}
.vs-punch {display: none;}
#sol-dataflow .vs-punch {color: #1AACF0;}
#sol-cms .vs-punch {color: #F59E0B;}
@keyframes vsFadeUp {from {opacity:0; transform:translateY(10px);} to {opacity:1; transform:translateY(0);}}

/* Mockup frame */
.vs-mockup{margin-top: 28px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line-faint); box-shadow: 0 24px 64px rgba(0,0,0,0.18);}
.vs-bar{display: flex; align-items: center; gap: 6px; padding: 12px 18px; background: #1a1d2a; border-bottom: 1px solid rgba(255,255,255,0.06);}
.vs-dot {width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.15);}
.vs-dot:nth-child(1) {background:#FF5F57;}
.vs-dot:nth-child(2) {background:#FFBD2E;}
.vs-dot:nth-child(3) {background:#28CA41;}
.vs-url {margin-left: 10px; font-size: 12px; color: rgba(255,255,255,0.4); letter-spacing:.02em;}
.vs-screen{background: #0c0f1a; min-height: 500px; padding: 32px 36px; position: relative;}

/* Mock states */
.vs-state {display: none;}
.vs-state.active {display: block; animation: vsFadeUp .4s ease;}

/* yt-head */
.yt-head {display: flex; align-items: center; gap: 12px; margin-bottom: 24px;}
.yt-t {font-weight: 700; font-size: 16px; color: #fff; letter-spacing:-0.01em;}
.yt-badge {font-size: 10px; letter-spacing:.1em; color: #0066FF; border: 1px solid rgba(0,102,255,.4); padding: 3px 8px; border-radius: 4px;}

/* State 0 — 채널 인텔리전스 */
.yt-stats {display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 28px;}
.yt-stat {background: rgba(255,255,255,0.04); border-radius: 8px; padding: 18px;}
.yt-n {font-weight: 800; font-size: clamp(24px,3vw,40px); color: #fff; letter-spacing:-0.03em; line-height:1;}
.yt-k {font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 6px;}
.yt-up {font-size: 12px; color: #4F95FF; font-weight: 600; margin-top: 4px;}
.yt-chart {border-radius: 8px; overflow: hidden; background: rgba(0,102,255,0.04); padding: 8px 0 0;}
.yt-chart svg {display: block; width: 100%; height: 140px;}

/* State 1 — 급상승 트렌드 */
.yt-trend {display: grid; gap: 10px;}
.yt-row {display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: rgba(255,255,255,0.03); border-radius: 8px;}
.yt-rk {font-size: 11px; color: rgba(255,255,255,.4); width: 20px; flex-shrink:0;}
.yt-kw {font-size: 13px; font-weight: 600; color: #fff; width: 140px; flex-shrink:0;}
.yt-bar {flex: 1; height: 4px; background: rgba(255,255,255,0.08); border-radius: 2px; overflow:hidden;}
.yt-bar i {display: block; height: 100%; background: #0066FF; border-radius: 2px;}
.yt-delta {font-size: 11px; color: #4F95FF; flex-shrink:0; width: 60px; text-align:right;}

/* State 2 — 리텐션 분석 */
.yt-reten svg {display: block; width: 100%; height: 220px;}
.yt-reten-legend {display: flex; gap: 24px; margin-top: 16px; flex-wrap: wrap;}
.yt-reten-legend span {display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(255,255,255,.6);}
.yt-ldot {width: 8px; height: 8px; border-radius: 50%; display: inline-block;}

/* State 3 — AI 원고 생성 */
.yt-script {background: rgba(255,255,255,0.04); border-radius: 8px; padding: 16px 18px;}
.yt-script + .yt-script {margin-top: 18px;}
.yt-script-lbl {display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(255,255,255,.5); margin-bottom: 14px;}
.yt-typing-dot {width: 10px; height: 10px; border-radius: 50%; background: #4F95FF; display: inline-block; animation: typingGlow 1.0s ease-in-out infinite; flex-shrink:0;}
@keyframes typingGlow {
  0%,100% {transform:scale(1); box-shadow:0 0 6px 2px rgba(79,149,255,0.5);}
  50% {transform:scale(1.5); box-shadow:0 0 16px 6px rgba(79,149,255,0.9), 0 0 32px 10px rgba(79,149,255,0.3);}
}
.yt-line {height: 10px; border-radius: 5px; background: rgba(255,255,255,0.12); margin-bottom: 10px;}
.yt-line.w1 {width: 85%;}
.df-stt-text .yt-line.w1 {margin-top: 8px;}
.yt-line.w2 {width: 70%;}
.yt-line.w3 {width: 55%;}

@media (max-width:768px) {
	.vs-tab-kr {display: none;}
	.vs-tab {min-width: 100px; padding: 12px 10px 10px; flex: 0 0 auto;}
	.vs-tab-name {font-size: 12px;}
	.vs-tabs {-webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory;}
	.vs-tab {scroll-snap-align: start;}
	.vs-screen {min-height: 360px; padding: 20px;}
	.yt-stats {grid-template-columns: 1fr 1fr;}
}

/* =================================================================
   PORTFOLIO + CTA + FOOTER
   ================================================================= */
.marquee { overflow: hidden; white-space: nowrap; border-block: 1px solid var(--line-faint); padding-block: 30px; margin-top: 70px; }
.port-marquee-bottom {margin-top: 48px;}
.marquee-inner { display: inline-flex; gap: 60px; animation: marq 28s linear infinite; }
.marquee span { font-family: var(--font-satoshi); font-weight: 800; font-size: clamp(28px, 4vw, 56px); letter-spacing: -0.02em; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.28); }
.marquee span.fill { color: #fff; -webkit-text-stroke: 0; }
.marquee span .star { color: var(--blue-bright); -webkit-text-stroke: 0; }
@keyframes marq { to { transform: translateX(-50%); } }

/* Portfolio background transition (GSAP scrub target) */
#portfolio {background-color: #fff;}
#portfolio .display {line-height: 1.1;}
#portfolio .display .blue {color: var(--blue-bright);}
/* Global cursor glow — mix-blend-mode:screen으로 다크 배경에서만 자연스럽게 발광 */
.cursor-glow {position: fixed; top: 0; left: 0; width: 900px; height: 900px; border-radius: 50%; pointer-events: none; z-index: 9999; will-change: transform; filter: blur(60px); background: radial-gradient(ellipse at center, rgba(0,102,255,0.28) 0%, rgba(0,102,255,0.10) 40%, transparent 72%); mix-blend-mode: screen; opacity: 0;}
#portfolio .display {color: #fff; font-size: clamp(34px,5vw,80px); margin-top: 22px;}
#portfolio .kicker::before {background: var(--blue-bright);}
#portfolio .marquee span {-webkit-text-stroke:1px rgba(255,255,255,0.28); color:transparent;}
#portfolio .marquee span.fill {color:#fff; -webkit-text-stroke:0;}
#portfolio .marquee span .star {color:var(--blue-bright); -webkit-text-stroke:0;}

/* Portfolio — 3-column infinite scroll */
.port-columns{margin-top: 60px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; height: min(580px, 70vh); overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%);}
.port-col {overflow: hidden;}
.port-col-inner {display: flex; flex-direction: column; gap: 14px; will-change: transform;}
@keyframes portScrollUp {from {transform: translateY(0);} to {transform: translateY(-50%);}}
.port-col-1 .port-col-inner {animation: portScrollUp 22s linear infinite;}
.port-col-2 .port-col-inner {animation: portScrollUp 28s linear infinite;}
.port-col-3 .port-col-inner {animation: portScrollUp 18s linear infinite;}

/* Portfolio card — white */
.port-card{background: #fff; border: 1px solid rgba(20,25,30,0.08); border-radius: 12px; padding: 22px 24px 20px; flex-shrink: 0; position: relative; overflow: hidden; transition: box-shadow .3s;}
.port-card:hover {box-shadow: 0 6px 24px rgba(20,25,30,0.1);}
.port-card::after{content: attr(data-num); position: absolute; right: 14px; bottom: -8px; font-family: var(--font-satoshi); font-weight: 800; font-size: 72px; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(20,25,30,0.06); pointer-events: none; user-select: none;}

.pc-cat, .pc-tags {display: none;}

.pc-logo {width: auto; max-height: 90px; object-fit: contain; object-position: left center; margin: 0 auto; display: block;}
.pc-tags span {font-size: 10px; letter-spacing: .04em; padding: 4px 10px; border-radius: 20px; border: 1px solid rgba(20,25,30,0.1); color: rgba(20,25,30,0.45);}

@media (max-width: 768px) {.port-columns {grid-template-columns: 1fr 1fr; height: 480px;} .port-col-3 {display: none;}}

.cta{text-align: center; padding-block: clamp(80px, 14vh, 240px); position: relative;}
.cta-bg { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100vw; height: 100%; z-index: 0; overflow: hidden; opacity: 0; transition: opacity 1.4s ease; }
.cta-bg::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 180px; background: linear-gradient(to bottom, #05060a 0%, transparent 100%); z-index: 2; pointer-events: none; }
.cta-bg.visible { opacity: 1; }
.cta-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta-bg-overlay { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(5,6,10,0.6) 0%, rgba(5,6,10,0.4) 50%, rgba(5,6,10,0.75) 100%); }
.cta > *:not(.cta-bg) { position: relative; z-index: 1; }
.cta h2{font-family: var(--font-satoshi); font-weight: 800; font-size: clamp(36px, 6.4vw, 100px); line-height: 0.98; letter-spacing: -0.035em; color: #fff; margin: 26px auto 0; max-width: 16ch;}
.cta h2 .blue { color: var(--blue-bright); }
.cta .kicker {justify-content: center;}
.cta .quote { margin: 40px auto 0; max-width: 50ch; font-size: clamp(15px, 1.3vw, 18px); line-height: 1.7; color: var(--txt-dim); }
.cta-btn{margin-top: 56px; display: inline-flex; align-items: center; gap: 16px; padding: 20px 36px; border-radius: var(--radius-pill); background: var(--blue); color: #fff; font-size: clamp(14px, 1.2vw, 16px); font-weight: 700; letter-spacing: -0.01em; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, background .35s;}
.cta-btn:hover { transform: translateY(-3px); background: var(--blue-bright); box-shadow: 0 20px 50px rgba(0,102,255,0.4); }
.cta-btn svg { width: 20px; height: 20px; }

/* Contact Form */
.contact-form { width: 100%; max-width: 780px; margin: 72px auto 0; text-align: left; }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cf-field { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.cf-field label { font-size: clamp(14px, 1.2vw, 16px); font-weight: 600; color: var(--txt-dim); letter-spacing: 0.03em; }
.cf-opt { font-weight: 400; opacity: .6; }
.cf-field input, .cf-field textarea { background: rgba(255,255,255,0.06); border: 1px solid var(--line-soft); border-radius: 14px; padding: 18px 22px; color: #fff; font-size: clamp(15px, 1.4vw, 18px); font-family: inherit; resize: none; transition: border-color .25s, background .25s; }
.cf-field input::placeholder, .cf-field textarea::placeholder { color: var(--txt-faint); }
.cf-field input:focus, .cf-field textarea:focus { outline: none; border-color: var(--blue-bright); background: rgba(0,102,255,0.07); }
.cf-submit-wrap { text-align: center; margin-top: 12px; }
.cf-submit { display: inline-flex; align-items: center; gap: 14px; padding: 20px 64px; border-radius: var(--radius-pill); background: var(--blue); color: #fff; font-size: clamp(15px, 1.4vw, 18px); font-weight: 700; letter-spacing: -0.01em; border: none; cursor: pointer; transition: background .35s, box-shadow .35s; }
.cf-submit:hover { background: #0052cc; box-shadow: 0 20px 50px rgba(0,102,255,0.4); }
.cf-success { margin-top: 24px; font-size: clamp(14px, 1.2vw, 16px); color: var(--blue-bright); min-height: 24px; text-align: center; }
@media (max-width:768px) {
	.cf-row { grid-template-columns: 1fr; gap: 0; }
}

/* Top Button */
.top-btn { position: fixed; bottom: 32px; right: 32px; width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,0.1); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.15); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .4s ease, background .25s, border-color .25s, color .25s; z-index: 900; }
.top-btn.visible { opacity: 1; pointer-events: auto; }
.top-btn:hover { background: rgba(255,255,255,0.2); }
.top-btn.on-light { background: transparent; border-color: rgb(0 109 255); color: #0066ff; }
.top-btn.on-light:hover { background: rgba(0,102,255,0.08); }
.top-btn svg { width: 20px; height: 20px; }

footer { border-top: 1px solid var(--line-faint); padding: 64px var(--pad) 40px; }
.foot-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.foot-brand .name { font-family: var(--font-satoshi); font-weight: 700; font-size: clamp(18px, 1.8vw, 24px); color: #fff; letter-spacing: -0.5px; display: flex; align-items: baseline; gap: 4px; }
.foot-sym { height: 24px; width: auto; display: block; flex-shrink: 0; }
.foot-brand .name b { font-weight: 900; }
.foot-brand p { margin-top: 18px; font-size: 14px; line-height: 1.7; color: var(--txt-dim); max-width: 40ch; }
.foot-info { margin-top: 20px; display: flex; flex-direction: column; gap: 5px; font-style: normal; }
.foot-info span { font-size: 12px; color: var(--txt-faint); line-height: 1.6; }
.foot-info b { color: var(--txt-dim); font-weight: 600; }
.foot-col h5 { font-size: 11px; letter-spacing: .14em; color: var(--txt-faint); text-transform: uppercase; }
.foot-col ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.foot-col a { font-size: 14px; color: var(--txt-dim); transition: color .25s; }
.foot-col a:hover { color: #fff; }
.foot-bottom { margin-top: 60px; padding-top: 28px; border-top: 1px solid var(--line-faint); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 12px; color: var(--txt-faint); letter-spacing: .04em; }
@media (max-width: 860px) { .foot-top { grid-template-columns: 1fr; gap: 36px; } }

/* section index label */
.sec-label { font-size: 12px; letter-spacing: .16em; color: var(--txt-faint); }

/* =================================================================
   SECTION BACKGROUND BANDS — hero(video) → black → white → black
   ================================================================= */
#about, #inax { background: var(--ink); }

.band-light{background: #ffffff; color: #14191E; --txt: #14191E; --txt-dim: rgba(20,25,30,0.62); --txt-faint: rgba(20,25,30,0.42); --line-faint: rgba(20,25,30,0.12); --line-soft: rgba(20,25,30,0.22); --ink: #ffffff; --ink-2: #f6f7f9; --ink-3: #eef0f3; --blue-bright: #0066FF;}
/* flip hardcoded white text to ink within the light band */
.band-light h2, .band-light h3, .band-light h4, .band-light .display, .band-light .sol-name, .band-light .sol-feat2 h4, .band-light .port-cat h4, .band-light .sol-lead, .band-light .note b { color: #14191E; }
.band-light .sol-name .kr2, .band-light .note, .band-light .sol-feat2 p, .band-light .port-cat p { color: var(--txt-dim); }
.band-light .sol-feat2 { background: #ffffff; }
.band-light .sol-feat2:hover { background: #f4f6f9; }
.band-light .port-cat { background: #ffffff; }
.band-light .port-cat:hover { background: #f4f6f9; }
.band-light .sol-ghost { -webkit-text-stroke-color: rgba(20,25,30,0.055); }
.band-light .sol-who .chip { color: var(--txt-dim); border-color: var(--line-faint); }
.band-light .sol-who .chip:hover { color: #14191E; }
/* marquee outlined text on white */
.band-light .marquee span { -webkit-text-stroke: 1px rgba(20,25,30,0.28); color: transparent; }
.band-light .marquee span.fill { color: #14191E; -webkit-text-stroke: 0; }
/* soften the per-section glow blob on white */
.band-light .sol-sec::before { opacity: 0.10; }

/* ==============================
   WB Sticky Wrap
============================== */
.wb-sticky-wrap {height: 500vh; position: relative;}
.wb-stage {position: sticky; top: 0; height: 100vh; overflow: hidden; background: #fff;}
#wbSvg {position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1;}
#wbMediaSlot {display: none;}
#wbVideoCanvas {position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; display: none;}
#wbCanvas {position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none;}
.wb-overlay {position: absolute; inset: 0; z-index: 4; opacity: 0; pointer-events: none; will-change: opacity; overflow: hidden;}
.wb-overlay.active {pointer-events: auto;}
.wb-pf-wrapper {position: relative; width: 100%; height: 100vh; overflow: hidden; padding-top: 25vh;}
.wb-pf-wrapper::after {content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 200px; background: linear-gradient(to bottom, transparent, #000); z-index: 10; pointer-events: none;}
.wb-portfolio {display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0;}
.wb-pf-item {position: relative; width: 44vw; height: 50vh; margin: 0 auto; flex-shrink: 0;}
.wb-pf-img-box {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 44vw; height: 44vh; border-radius: 20px; overflow: hidden; display: block; background: rgba(255,255,255,0.06); opacity: 0.5; transition: opacity 0.5s ease;}
.wb-pf-item.pf-active .wb-pf-img-box {opacity: 1;}
.wb-pf-img-box img, .wb-pf-img-box video {width: 100%; height: 100%; object-fit: cover; display: block;}
.wb-pf-text-layer {position: absolute; top: 50vh; left: 0; width: 100%; height: 0; pointer-events: none;}
.wb-pf-text-box {position: absolute; top: 0; left: 0; width: 100%; padding: 0 8vw; transform: translateY(-50%);}
.wb-pf-en.line {overflow: hidden; font-size: 13px; font-weight: 700; line-height: 1.4; color: rgba(255,255,255,0.55); font-family: 'Satoshi', sans-serif; text-transform: uppercase; letter-spacing: 0.1em;}
.wb-pf-ko.line {overflow: hidden; font-size: clamp(28px, 3.2vw, 48px); font-weight: 900; line-height: 1.1; color: #fff; font-family: 'Satoshi', sans-serif; letter-spacing: -0.02em;}
.wb-pf-to {display: block; transform: translateY(100%);}
.wb-pf-en .wb-pf-to {padding: 4px 0;}
.wb-pf-ko .wb-pf-to {padding: 8px 0;}
.wb-pf-desc {overflow: hidden; margin-top: 20px; max-width: 560px;}
.wb-pf-desc .wb-pf-to {font-size: clamp(13px, 1.1vw, 15px); color: rgba(255,255,255,0.6); line-height: 1.8; font-weight: 400; padding: 4px 0;}
.wb-pf-desc strong {display: block; font-size: clamp(13px, 1.1vw, 15px); font-weight: 700; color: rgba(255,255,255,0.9); margin-bottom: 7px;}
#portfolio {background-color: #05060a !important;}
@media (max-width:768px) {
	.wb-sticky-wrap {height: 600vh;}
	.wb-pf-wrapper {padding-top: 25vh; padding-bottom: 0;}
	.wb-pf-text-layer {top: 42vh;}
	.wb-pf-item {width: 84vw; height: 34vh;}
	.wb-pf-img-box {width: 84vw; height: 30vh;}
	.wb-pf-text-box {padding: 0 5vw;}
	.wb-pf-ko.line {font-size: 26px;}
	.wb-pf-desc {display: none;}
}

/* ==============================
   Noti Bar
============================== */
.noti-bar {position: fixed; top: 0; left: 0; right: 0; z-index: 1001; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 0 48px; height: 44px; background: linear-gradient(90deg, rgba(0,35,110,0.97), rgba(0,75,195,0.95)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(105,165,255,0.15); text-decoration: none; color: inherit; cursor: pointer; transition: transform .4s cubic-bezier(.22,1,.36,1), opacity .4s ease;}
.noti-bar.hide {transform: translateY(-100%); opacity: 0; pointer-events: none;}
/* 바텀 라이팅 — 베이스 */
.noti-bar::before {content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 1px; background: rgba(105,165,255,0.12); pointer-events: none;}
/* 바텀 라이팅 — 트래블링 */
.noti-bar::after {content: ''; position: absolute; bottom: -1px; left: 0; width: 280px; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(105,165,255,0.05) 8%, rgba(160,210,255,0.22) 25%, rgba(210,235,255,0.52) 42%, rgba(240,250,255,0.68) 49%, rgba(255,255,255,0.72) 50%, rgba(240,250,255,0.68) 51%, rgba(210,235,255,0.52) 58%, rgba(160,210,255,0.22) 75%, rgba(105,165,255,0.05) 92%, transparent 100%); animation: noti-light 9s linear infinite;}
@keyframes noti-light {0% {transform: translateX(-280px);} 100% {transform: translateX(100vw);}}
/* wave icon */
.noti-wave {width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg,#001a66,#0066ff); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 0 10px rgba(0,102,255,0.4);}
.noti-msg {font-size: 13px; color: rgba(255,255,255,0.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.noti-msg strong {color: #fff; font-weight: 700;}
.noti-accent {color: #00e5ff;}
.noti-msg-short {display: none;}
.noti-cta {font-size: 12px; font-weight: 700; color: #fff; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.22); padding: 5px 14px; border-radius: 20px; white-space: nowrap;}
.noti-bar:hover .noti-cta {background: rgba(255,255,255,0.25);}
.noti-close {position: absolute; right: 12px; width: 28px; height: 28px; border: none; background: none; color: rgba(255,255,255,0.35); font-size: 14px; cursor: pointer; border-radius: 50%; transition: color .2s, background .2s; display: flex; align-items: center; justify-content: center;}
.noti-close:hover {color: #fff; background: rgba(255,255,255,0.1);}

/* nav 아래로 밀기 */
.noti-bar:not(.hide) ~ .nav {top: 44px;}
.nav {transition: top .4s cubic-bezier(.22,1,.36,1);}

@media (max-width:768px) {
	.noti-bar {height: auto; padding: 8px 44px 8px 14px;}
	.noti-msg {font-size: 11px; white-space: normal; line-height: 1.2;}
	.noti-msg-full {display: none;}
	.noti-msg-short {display: inline;}
	.noti-cta {display: none;}
}

/* ==============================
   CS Banner
============================== */
@property --ba {syntax: '<angle>'; initial-value: 0deg; inherits: false;}

.cs-banner {--ba: 0deg; position: fixed; bottom: 28px; right: 26px; z-index: 9000; display: flex; align-items: center; gap: 0; padding: 11px 12px; border-radius: 100px; background: rgba(10,12,18,0.88); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); text-decoration: none; color: inherit; cursor: pointer; width: 60px; transition: transform .25s ease, box-shadow .25s ease, bottom .4s ease, width .45s cubic-bezier(.22,1,.36,1), padding .45s cubic-bezier(.22,1,.36,1);}
.cs-banner.is-open, .cs-banner:hover {width: 196px; padding: 11px 18px 11px 12px; transform: translateY(-3px); box-shadow: 0 14px 44px rgb(0 0 0 / 38%), 0 0 60px rgba(0,102,255,0.16);}
.top-btn.visible ~ .cs-banner {bottom: 88px;}
.cs-banner::before {content: ''; position: absolute; inset: -1px; border-radius: 100px; padding: 1px; background: conic-gradient(from var(--ba), transparent 0%, transparent 55%, rgba(105,165,255,0.5) 70%, rgba(180,220,255,0.9) 80%, rgba(105,165,255,0.5) 90%, transparent 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: cs-border-spin 3s linear infinite;}
.cs-banner::after {content: ''; position: absolute; inset: 0; border-radius: 100px; border: 1px solid rgba(102,153,255,0.14); pointer-events: none;}
@keyframes cs-border-spin {to {--ba: 360deg;}}

/* Pulse dot */
.cs-pulse {position: absolute; top: -2px; right: 14px; width: 8px; height: 8px; background: #68ceff; border-radius: 50%; animation: cs-pulse-dot 2.2s ease infinite;}
@keyframes cs-pulse-dot {0%,100% {box-shadow: 0 0 0 0 rgba(74,222,128,0.5);} 60% {box-shadow: 0 0 0 6px rgba(74,222,128,0);}}

/* Waveform icon */
.cs-wave-ico {width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg,#001a66,#0066ff); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 0 14px rgba(0,102,255,0.4);}
.cs-wave-bars {display: flex; align-items: center; gap: 2px;}
.cs-wave-bars span {display: block; width: 2px; background: #69a5ff; border-radius: 2px; animation: cs-wave 1.2s ease-in-out infinite;}
.cs-wave-bars span:nth-child(1) {height: 5px; animation-delay: 0s;}
.cs-wave-bars span:nth-child(2) {height: 11px; animation-delay: .15s;}
.cs-wave-bars span:nth-child(3) {height: 7px; animation-delay: .3s;}
.cs-wave-bars span:nth-child(4) {height: 13px; animation-delay: .08s;}
.cs-wave-bars span:nth-child(5) {height: 5px; animation-delay: .22s;}
@keyframes cs-wave {0%,100% {transform: scaleY(1);} 50% {transform: scaleY(.3);}}

/* Text */
.cs-txt {margin-left: 12px; opacity: 0; transition: opacity .2s ease; pointer-events: none; flex-shrink: 0;}
.cs-banner.is-open .cs-txt, .cs-banner:hover .cs-txt {opacity: 1; transition: opacity .25s ease .18s;}
.cs-txt .label {font-size: 10px; letter-spacing: .12em; color: #69a5ff; text-transform: uppercase; margin-bottom: 2px;}
.cs-txt .main {font-size: 14px; font-weight: 600; color: #fff; white-space: nowrap; letter-spacing: -0.01em;}

@media (max-width:768px) {
	.cs-banner {bottom: 20px; right: 26px;}
	.top-btn.visible ~ .cs-banner {bottom: 88px;}
}