/* ============================================================
   U+SASE Landing Page — Core Stylesheet
   ============================================================ */

:root{
  --brand: #ec008b;
  --brand-rgb: 236, 0, 139;
  --brand-2: #6a2fe0;
  --brand-2-rgb: 106, 47, 224;
  --cyan: #00d4d4;

  /* Dark theme (default) */
  --bg: #07070c;
  --bg-alt: #0c0c14;
  --surface: #12121c;
  --surface-2: #17172444;
  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.16);
  --text: #f2f2f7;
  --text-dim: #a6a6b8;
  --text-faint: #6f6f82;
  --shadow: 0 20px 60px -20px rgba(0,0,0,0.6);

  --grad-brand: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
  --font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;

  --header-h: 76px;
}

html[data-theme="light"]{
  --bg: #f7f7fb;
  --bg-alt: #ffffff;
  --surface: #ffffff;
  --surface-2: #f0f0f8aa;
  --border: rgba(20,20,40,0.08);
  --border-strong: rgba(20,20,40,0.14);
  --text: #17171f;
  --text-dim: #55556a;
  --text-faint: #8a8a9c;
  --shadow: 0 20px 60px -20px rgba(30,30,60,0.15);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top: var(--header-h); }
body{
  margin:0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  overflow-x:hidden;
  transition: background .4s ease, color .4s ease;
  line-height:1.6;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input,textarea{ font-family:inherit; }
h1,h2,h3,h4,p{ margin:0; }

.container{ width:100%; max-width:1240px; margin:0 auto; padding:0 24px; position:relative; z-index:2; }
.container-narrow{ max-width:820px; }
.hide-mobile{ display:inline; }

/* ============ Background layers ============ */
/* 딥블루 앰비언트 글로우 — 야경·회로기판 레퍼런스의 푸른 빛 무드 */
.bg-ambient{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 55% 45% at 18% 22%, rgba(30,90,220,0.16), transparent 70%),
    radial-gradient(ellipse 50% 40% at 82% 12%, rgba(0,180,230,0.10), transparent 70%),
    radial-gradient(ellipse 60% 50% at 75% 85%, rgba(var(--brand-rgb),0.08), transparent 70%),
    radial-gradient(ellipse 45% 40% at 12% 80%, rgba(60,120,255,0.10), transparent 70%);
  animation: ambientBreathe 12s ease-in-out infinite alternate;
}
@keyframes ambientBreathe{
  0%{ opacity:.75; filter:hue-rotate(0deg); }
  100%{ opacity:1; filter:hue-rotate(-8deg); }
}
html[data-theme="light"] .bg-ambient{ opacity:.3; }

#network-canvas{
  position:fixed; inset:0; width:100%; height:100%; z-index:0;
  pointer-events:none;
}

/* 회로 기판 트레이스 + 흐르는 빛 펄스 (보안 회로 이미지 감성) */
.circuit-layer{
  position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none;
  opacity:.9;
}
.circuit-layer .trace{
  fill:none; stroke: rgba(90,140,255,0.13); stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round;
}
.circuit-layer .pulse{
  fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray: 90 1400;
  stroke-dashoffset: 1490;
  animation: circuitPulse 7s linear infinite;
  filter: drop-shadow(0 0 6px currentColor);
}
.circuit-layer .pulse-blue{ stroke:#4d8dff; color:#4d8dff; }
.circuit-layer .pulse-cyan{ stroke:#00d4d4; color:#00d4d4; animation-duration:8.5s; animation-delay:-3s; }
.circuit-layer .pulse-brand{ stroke: var(--brand); color: var(--brand); animation-duration:10s; animation-delay:-5.5s; }
.circuit-layer .pulse:nth-of-type(9){ animation-delay:-1.5s; }
.circuit-layer .pulse:nth-of-type(11){ animation-delay:-4.5s; }
.circuit-layer .pulse:nth-of-type(13){ animation-delay:-6.5s; animation-duration:9s; }
@keyframes circuitPulse{
  to{ stroke-dashoffset: 0; }
}
.circuit-layer .cnode{
  fill: rgba(120,170,255,0.5);
  animation: cnodeBlink 3.6s ease-in-out infinite;
}
.circuit-layer .cnode:nth-of-type(even){ animation-delay:-1.2s; fill: rgba(0,212,212,0.45); }
.circuit-layer .cnode:nth-of-type(3n){ animation-delay:-2.4s; }
@keyframes cnodeBlink{
  0%,100%{ opacity:.25; }
  50%{ opacity:1; }
}
html[data-theme="light"] .circuit-layer{ opacity:.35; }
@media (prefers-reduced-motion: reduce){
  .circuit-layer .pulse{ animation:none; opacity:0; }
  .circuit-layer .cnode{ animation:none; }
  .bg-ambient{ animation:none; }
}
.grid-overlay{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(90,140,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90,140,255,0.06) 1px, transparent 1px),
    linear-gradient(rgba(0,212,212,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,212,0.05) 1px, transparent 1px);
  background-size: 44px 44px, 44px 44px, 132px 132px, 132px 132px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 40%, transparent 92%);
  opacity:.75;
}
html[data-theme="light"] .grid-overlay{ opacity:.35; }
.noise-overlay{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.03; mix-blend-mode:overlay;
  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' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 대각선으로 은은하게 흐르는 사이버 스윕 빛줄기 — KT Enterprise류 네트워크 배경 감성 */
.cyber-sweep{
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}
.cyber-sweep::before,
.cyber-sweep::after{
  content:''; position:absolute; top:-50%; left:-20%;
  width:60%; height:200%;
  background: linear-gradient(100deg, transparent 40%, rgba(77,141,255,0.07) 48%, rgba(0,212,212,0.09) 50%, rgba(77,141,255,0.07) 52%, transparent 60%);
  transform: rotate(8deg);
  animation: cyberSweep 11s linear infinite;
}
.cyber-sweep::after{
  left:-60%;
  animation-duration: 15s;
  animation-delay: -5s;
  background: linear-gradient(100deg, transparent 40%, rgba(var(--brand-rgb),0.05) 48%, rgba(120,170,255,0.07) 50%, rgba(var(--brand-rgb),0.05) 52%, transparent 60%);
}
html[data-theme="light"] .cyber-sweep::before,
html[data-theme="light"] .cyber-sweep::after{ opacity:.5; }
@keyframes cyberSweep{
  0%{ transform: translateX(0) rotate(8deg); }
  100%{ transform: translateX(220vw) rotate(8deg); }
}
@media (prefers-reduced-motion: reduce){
  .cyber-sweep::before, .cyber-sweep::after{ animation:none; opacity:0; }
}

.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background: var(--grad-brand); z-index:1000; transition: width .1s ease-out;
}

/* ============ Reveal Animation ============ */
.reveal-up{ opacity:0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); transition-delay: var(--delay,0s); }
.reveal-up.in-view{ opacity:1; transform:none; }

/* ============ Header ============ */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:200;
  height: var(--header-h);
  display:flex; align-items:center;
  background: rgba(7,7,12,0.55);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom:1px solid transparent;
  transition: border-color .3s ease, background .3s ease;
}
html[data-theme="light"] .site-header{ background: rgba(247,247,251,0.7); }
.site-header.scrolled{ border-bottom-color: var(--border); }

.header-inner{
  width:100%; max-width:1240px; margin:0 auto; padding:0 24px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand{ display:flex; align-items:center; gap:2px; font-weight:800; font-size:1.4rem; letter-spacing:-0.02em; }
.brand-text{ display:inline-flex; align-items:baseline; font-family: var(--font); font-weight:800; font-size:1.5rem; letter-spacing:-0.01em; line-height:1; }
.brand-u{ color: var(--brand); }
.brand-plus{ color: var(--brand); margin:0 1px; }
.brand-sase{ color:#8a8a96; }
html[data-theme="light"] .brand-sase{ color:#6e6e78; }

.main-nav{ display:flex; gap:8px; }
.nav-link{
  position:relative; padding:10px 14px; font-size:.92rem; font-weight:500; color:var(--text-dim);
  border-radius:8px; transition: color .25s ease, background .25s ease;
  display:flex; align-items:center; gap:6px; white-space:nowrap;
}
.nav-link span{ font-size:.72rem; color: var(--brand); font-weight:700; opacity:.8; }
.nav-link:hover{ color:var(--text); background: rgba(var(--brand-rgb),0.08); }

.header-actions{ display:flex; align-items:center; gap:14px; }

.theme-toggle{
  position:relative; width:52px; height:28px; border-radius:99px;
  background: var(--surface); border:1px solid var(--border-strong);
  display:flex; align-items:center; padding:3px;
}
.theme-toggle i{ font-size:.72rem; width:20px; text-align:center; z-index:1; }
.icon-moon{ color:#cfcfe6; }
.icon-sun{ color:#f5a623; }
.toggle-thumb{
  position:absolute; top:2px; left:2px; width:22px; height:22px; border-radius:50%;
  background: var(--grad-brand); transition: transform .35s cubic-bezier(.68,-0.4,.27,1.4);
}
html[data-theme="light"] .toggle-thumb{ transform: translateX(24px); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-weight:700; font-size:.9rem; padding:11px 22px; border-radius:10px;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
  white-space:nowrap; border:1px solid transparent;
}
.btn-sm{ padding:9px 16px; font-size:.82rem; }
.btn-lg{ padding:15px 30px; font-size:1rem; border-radius:12px; }
.btn-block{ width:100%; }
.btn-primary{
  background: var(--grad-brand); color:#fff;
  box-shadow: 0 8px 24px -8px rgba(var(--brand-rgb),0.6);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 12px 32px -8px rgba(var(--brand-rgb),0.75); }
.btn-ghost{
  background: transparent; color: var(--text); border-color: var(--border-strong);
}
.btn-ghost:hover{ background: rgba(var(--brand-rgb),0.08); border-color: var(--brand); }

.hamburger{ display:none; flex-direction:column; gap:5px; width:28px; }
.hamburger span{ height:2px; width:100%; background: var(--text); border-radius:2px; transition: all .3s ease; }
.hamburger.active span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2){ opacity:0; }
.hamburger.active span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.mobile-nav{
  display:none; flex-direction:column; padding:12px 24px 24px;
  background: var(--bg-alt); border-bottom:1px solid var(--border);
  position:absolute; top:var(--header-h); left:0; right:0;
  max-height:0; overflow:hidden; transition: max-height .35s ease;
}
.mobile-nav.open{ display:flex; max-height:500px; }
.mobile-nav .nav-link{ padding:12px 4px; border-bottom:1px solid var(--border); border-radius:0; }

/* ============ Hero ============ */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:center;
  padding-top: var(--header-h);
  overflow:hidden;
}
.hero-glow{ position:absolute; border-radius:50%; filter:blur(90px); pointer-events:none; z-index:1; }
.hero-glow-1{ width:520px; height:520px; background: radial-gradient(circle, rgba(var(--brand-rgb),0.35), transparent 70%); top:-120px; right:-100px; animation: float1 12s ease-in-out infinite; }
.hero-glow-2{ width:420px; height:420px; background: radial-gradient(circle, rgba(var(--brand-2-rgb),0.28), transparent 70%); bottom:-100px; left:-80px; animation: float2 14s ease-in-out infinite; }
@keyframes float1{ 0%,100%{ transform:translate(0,0);} 50%{ transform:translate(-30px,40px);} }
@keyframes float2{ 0%,100%{ transform:translate(0,0);} 50%{ transform:translate(40px,-30px);} }

.hero-inner{ text-align:center; padding: 60px 24px 40px; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; margin:0 auto 24px;
  padding:8px 18px; border-radius:99px; border:1px solid var(--border-strong);
  background: var(--surface); font-size:.82rem; font-weight:600; color:var(--text-dim);
}
.pulse-dot{ width:8px; height:8px; border-radius:50%; background: var(--brand); position:relative; }
.pulse-dot::after{
  content:''; position:absolute; inset:0; border-radius:50%; background: var(--brand);
  animation: pulse 1.8s ease-out infinite;
}
@keyframes pulse{ 0%{ transform:scale(1); opacity:.7;} 100%{ transform:scale(2.8); opacity:0; } }

.hero-title{
  font-size: clamp(2.4rem, 5.6vw, 4.4rem); font-weight:800; letter-spacing:-0.03em;
  line-height:1.18; margin-bottom:26px;
}
.text-gradient{
  background: var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size:200% auto; animation: gradientShift 5s ease infinite;
}
@keyframes gradientShift{ 0%,100%{ background-position:0% 50%;} 50%{ background-position:100% 50%;} }

.hero-desc{ font-size: clamp(1rem, 1.6vw, 1.2rem); color: var(--text-dim); max-width:680px; margin:0 auto 40px; }
.hero-desc strong{ color: var(--text); font-weight:700; }

.hero-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-bottom:64px; }

.hero-stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
  max-width:820px; margin:0 auto; padding-top:36px; border-top:1px solid var(--border);
}
.stat-item p{ font-size:.82rem; color: var(--text-faint); margin-top:6px; }
.stat-num, .stat-suffix{ font-size:clamp(1.6rem,3vw,2.2rem); font-weight:800; }
.stat-suffix{ color:var(--brand); }

.scroll-cue{
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  font-size:.7rem; letter-spacing:.15em; color:var(--text-faint); z-index:2;
  animation: bounce 2s ease-in-out infinite;
}
@keyframes bounce{ 0%,100%{ transform:translate(-50%,0);} 50%{ transform:translate(-50%,8px);} }

/* ============ Trust bar ============ */
.trust-bar{ padding:28px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background: var(--surface); position:relative; z-index:2; }
.trust-label{ text-align:center; font-size:.82rem; color:var(--text-faint); margin-bottom:16px; }
.trust-marquee{ overflow:hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.trust-track{ display:flex; gap:40px; width:max-content; animation: marquee 26s linear infinite; }
.trust-track span{ display:flex; align-items:center; gap:10px; font-size:.9rem; font-weight:600; color: var(--text-dim); white-space:nowrap; }
.trust-track i{ color: var(--brand); }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ============ Section generic ============ */
.section{ position:relative; z-index:2; padding: 120px 0; }
.section-alt{ background: var(--bg-alt); }
.section-head{ max-width:720px; margin:0 auto 60px; text-align:center; }
.section-tag{
  display:inline-flex; align-items:center; gap:8px; font-size:.82rem; font-weight:700; color: var(--brand);
  letter-spacing:.04em; margin-bottom:16px; justify-content:center; width:100%;
}
.section-title{ font-size: clamp(1.9rem, 3.6vw, 2.6rem); font-weight:800; letter-spacing:-0.02em; margin-bottom:18px; line-height:1.3; }
.section-desc{ color: var(--text-dim); font-size:1.02rem; }

/* ============ Summary (00) ============ */
.summary-section{ padding-bottom:80px; }
.summary-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.summary-card{
  background: var(--surface); border:1px solid var(--border); border-radius:18px; padding:32px 28px;
  transition: transform .3s ease, border-color .3s ease;
}
.summary-card:hover{ transform:translateY(-6px); border-color:rgba(var(--brand-rgb),0.4); }
.summary-num{ font-size:2rem; font-weight:800; color:rgba(var(--brand-rgb),0.35); margin-bottom:10px; }
.summary-card h3{ font-size:1.05rem; font-weight:700; margin-bottom:12px; display:flex; align-items:center; gap:10px; }
.summary-card h3 i{ color: var(--brand); }
.summary-card p{ font-size:.9rem; color: var(--text-dim); }
.summary-card strong{ color: var(--text); }

/* ============ Evolution Timeline (1988 -> 2019) ============ */
.evolution-timeline{ background: var(--surface); border:1px solid var(--border); border-radius:24px; padding:44px 32px; margin-bottom:32px; }
.evolution-track{ display:flex; align-items:center; gap:20px; }
.evolution-point{ flex:0 0 auto; text-align:center; }
.evolution-year{ font-size:1.6rem; font-weight:800; color: var(--text-faint); margin-bottom:14px; }
.evolution-new .evolution-year{ color: var(--brand); }
.evolution-card{
  background: var(--bg-alt); border:1px solid var(--border-strong); border-radius:16px; padding:22px 26px; min-width:170px;
}
.evolution-card h4{ font-size:1.05rem; font-weight:700; display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:8px; }
.evolution-card-primary{ background: var(--grad-brand); border-color:transparent; box-shadow:0 12px 30px -10px rgba(var(--brand-rgb),0.5); }
.evolution-card-primary h4, .evolution-card-primary .evolution-sub, .evolution-card-primary .evolution-tail{ color:#fff; }
.evolution-sub{ font-size:.78rem; color: var(--text-faint); }
.evolution-tail{ font-size:.72rem; margin-top:6px; opacity:.85; }
.evolution-line{ flex:1; position:relative; padding:10px 0; }
.evolution-line::before{
  content:''; position:absolute; top:50%; left:0; right:0; height:2px;
  background: linear-gradient(90deg, var(--border-strong), var(--brand));
  transform: translateY(-50%);
}
.evolution-tags{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; position:relative; z-index:1; }
.evolution-tags span{
  font-size:.7rem; font-weight:600; color: var(--text-dim); background: var(--bg-alt);
  border:1px solid var(--border); padding:5px 10px; border-radius:99px;
}

/* +α note */
.alpha-note{ background: var(--surface); border:1px solid var(--border); border-radius:20px; padding:32px; margin-bottom:70px; }
.alpha-note > p{ text-align:center; color: var(--text-dim); font-size:.94rem; margin-bottom:24px; }
.alpha-note > p i{ color: var(--brand); margin-right:6px; }
.alpha-note strong{ color: var(--brand); }
.alpha-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.alpha-item{
  background: var(--bg-alt); border:1px solid var(--border); border-radius:14px; padding:18px 12px; text-align:center;
  transition: transform .25s ease, border-color .25s ease;
}
.alpha-item:hover{ transform:translateY(-4px); border-color:rgba(var(--brand-rgb),0.4); }
.alpha-item b{ display:block; font-size:1.05rem; font-weight:800; color: var(--brand); margin-bottom:8px; }
.alpha-item span{ font-size:.78rem; color: var(--text-dim); line-height:1.5; display:block; }
.alpha-item em{ color: var(--text-faint); font-style:normal; }

/* Bridge quote */
.bridge-quote{
  max-width:760px; margin:0 auto 60px; text-align:center; position:relative; padding:0 20px;
}
.bridge-quote i{ font-size:1.6rem; color:rgba(var(--brand-rgb),0.4); margin-bottom:16px; display:inline-block; }
.bridge-quote p{ font-size:1.15rem; font-weight:600; line-height:1.6; }
.bridge-quote strong{ color: var(--brand); }

/* ============ Compare (Intro) ============ */
.compare-grid{ display:grid; grid-template-columns:1fr auto 1fr; gap:20px; align-items:center; margin-bottom:70px; }
.compare-card{
  background: var(--surface); border:1px solid var(--border); border-radius:20px; padding:32px;
  transition: transform .3s ease, border-color .3s ease;
}
.compare-card:hover{ transform:translateY(-4px); }
.compare-before{ opacity:.85; }
.compare-after{ border-color: rgba(var(--brand-rgb),0.4); box-shadow: 0 0 0 1px rgba(var(--brand-rgb),0.1), var(--shadow); }
.compare-badge{
  display:inline-block; font-size:.72rem; font-weight:800; padding:5px 12px; border-radius:99px;
  background: var(--border); color: var(--text-dim); margin-bottom:16px; letter-spacing:.05em;
}
.compare-badge-primary{ background: var(--grad-brand); color:#fff; }
.compare-card h3{ font-size:1.2rem; font-weight:700; margin-bottom:20px; display:flex; align-items:center; gap:10px; }
.compare-card h3 i{ color: var(--brand); }
.compare-card ul{ display:flex; flex-direction:column; gap:14px; }
.compare-card li{ display:flex; align-items:flex-start; gap:10px; font-size:.92rem; color:var(--text-dim); }
.compare-card li i{ margin-top:3px; font-size:.8rem; }
.compare-before li i{ color:#ff5c7a; }
.compare-after li i{ color:#2ee6a8; }
.compare-arrow{ display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--brand); font-size:1.6rem; }
.compare-arrow span{ font-size:.72rem; font-weight:700; color:var(--text-faint); }

/* Concept diagram */
.concept-diagram{ background: var(--surface); border:1px solid var(--border); border-radius:24px; padding:48px 32px; }
.diagram-title{ text-align:center; font-size:1.15rem; font-weight:700; margin-bottom:40px; display:flex; align-items:center; justify-content:center; gap:10px; }
.diagram-title i{ color: var(--brand); }
.diagram-wrap{ display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.diagram-col{ flex:1; min-width:180px; display:flex; flex-direction:column; gap:12px; }
.diagram-col-title{ font-size:.78rem; font-weight:700; color:var(--text-faint); text-align:center; margin-bottom:4px; text-transform:uppercase; letter-spacing:.05em; }
.diagram-node{
  background: var(--bg-alt); border:1px solid var(--border); border-radius:12px; padding:14px 16px;
  font-size:.86rem; font-weight:600; display:flex; align-items:center; gap:10px;
  transition: transform .25s ease, border-color .25s ease;
}
.diagram-node i{ color:var(--brand); width:18px; }
.diagram-node:hover{ transform:translateX(4px); border-color:rgba(var(--brand-rgb),0.5); }
.diagram-beam{
  flex:0 0 60px; height:2px; background: linear-gradient(90deg, transparent, var(--brand), transparent);
  position:relative; align-self:center; overflow:visible; min-width:40px;
}
.diagram-beam::after{
  content:''; position:absolute; top:-3px; width:8px; height:8px; border-radius:50%; background: var(--brand);
  box-shadow:0 0 12px var(--brand); animation: beamMove 2.4s linear infinite;
}
@keyframes beamMove{ 0%{ left:0%; opacity:0;} 10%{opacity:1;} 90%{opacity:1;} 100%{ left:100%; opacity:0;} }
.diagram-core{ flex:0 0 auto; align-items:center; }
.core-orb{
  position:relative; width:150px; height:150px; border-radius:50%;
  background: var(--grad-brand); display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:#fff; box-shadow: 0 0 60px rgba(var(--brand-rgb),0.5);
}
.core-orb i{ font-size:2rem; margin-bottom:8px; }
.core-orb p{ font-size:.76rem; font-weight:700; text-align:center; line-height:1.4; }
.core-orb-ring{ position:absolute; inset:-16px; border:1.5px solid rgba(var(--brand-rgb),0.4); border-radius:50%; animation: ringPulse 3s ease-out infinite; }
.core-orb-ring2{ animation-delay:1.5s; }
@keyframes ringPulse{ 0%{ transform:scale(0.85); opacity:1;} 100%{ transform:scale(1.35); opacity:0;} }

/* ============ Feature grid ============ */
.feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-bottom:60px; }
.feature-card{
  background: var(--surface); border:1px solid var(--border); border-radius:18px; padding:32px 26px;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
  position:relative; overflow:hidden;
}
.feature-card::before{
  content:''; position:absolute; inset:0; background: radial-gradient(circle at 30% 0%, rgba(var(--brand-rgb),0.12), transparent 60%);
  opacity:0; transition: opacity .3s ease;
}
.feature-card:hover{ transform:translateY(-6px); border-color:rgba(var(--brand-rgb),0.4); box-shadow: var(--shadow); }
.feature-card:hover::before{ opacity:1; }
.feature-icon{
  width:56px; height:56px; border-radius:14px; background: rgba(var(--brand-rgb),0.12);
  display:flex; align-items:center; justify-content:center; font-size:1.4rem; color: var(--brand); margin-bottom:20px;
  position:relative; z-index:1;
}
.feature-card h3{ font-size:1.1rem; font-weight:700; margin-bottom:12px; position:relative; z-index:1; display:flex; flex-direction:column; gap:4px; }
.feature-card h3 span{ font-size:.74rem; font-weight:500; color:var(--text-faint); }
.feature-card p{ font-size:.9rem; color: var(--text-dim); position:relative; z-index:1; }

/* Console highlight */
.console-highlight{
  display:grid; grid-template-columns:1fr 1.1fr; gap:48px; align-items:center;
  background: var(--surface); border:1px solid var(--border); border-radius:24px; padding:48px;
}
.console-text h3{ font-size:1.5rem; font-weight:800; margin-bottom:18px; display:flex; align-items:center; gap:12px; }
.console-text h3 i{ color: var(--brand); }
.console-text p{ color: var(--text-dim); margin-bottom:22px; }
.console-list{ display:flex; flex-direction:column; gap:12px; }
.console-list li{ display:flex; align-items:center; gap:10px; font-size:.92rem; font-weight:600; }
.console-list i{ color:#2ee6a8; }

.mock-console{ background: var(--bg-alt); border:1px solid var(--border-strong); border-radius:16px; overflow:hidden; box-shadow: var(--shadow); }
.mock-console-bar{ display:flex; gap:6px; padding:12px 16px; background: var(--surface); }
.mock-console-bar span{ width:10px; height:10px; border-radius:50%; background: var(--border-strong); }
.mock-console-bar span:nth-child(1){ background:#ff5f57; }
.mock-console-bar span:nth-child(2){ background:#febc2e; }
.mock-console-bar span:nth-child(3){ background:#28c840; }
.mock-console-shot-body{ padding:0; line-height:0; }
.mock-console-shot-body img{ width:100%; height:auto; display:block; }

/* ============ ZTNA VS table ============ */
.vs-table{ display:grid; grid-template-columns:1fr auto 1fr; gap:24px; align-items:stretch; margin-bottom:70px; }
.vs-col{ background: var(--surface); border:1px solid var(--border); border-radius:20px; padding:32px; position:relative; }
.vs-col-new{ border-color: rgba(var(--brand-rgb),0.4); box-shadow:0 0 0 1px rgba(var(--brand-rgb),0.1), var(--shadow); }
.vs-badge{ position:absolute; top:-14px; left:32px; background: var(--grad-brand); color:#fff; font-size:.72rem; font-weight:800; padding:5px 14px; border-radius:99px; }
.vs-col h3{ font-size:1.2rem; font-weight:700; margin-bottom:22px; display:flex; align-items:center; gap:10px; }
.vs-col-old h3 i{ color: var(--text-faint); }
.vs-col-new h3 i{ color: var(--brand); }
.vs-col ul{ display:flex; flex-direction:column; gap:16px; }
.vs-col li{ display:flex; flex-direction:column; gap:4px; padding-bottom:14px; border-bottom:1px solid var(--border); font-size:.88rem; }
.vs-col li:last-child{ border-bottom:none; padding-bottom:0; }
.vs-key{ font-size:.72rem; font-weight:700; color: var(--text-faint); text-transform:uppercase; letter-spacing:.04em; }
.vs-val{ color: var(--text-dim); font-weight:500; }
.vs-val.vs-good{ color: var(--text); font-weight:700; }
.vs-vs{
  display:flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:50%;
  background: var(--grad-brand); color:#fff; font-weight:800; font-size:.9rem; align-self:center; box-shadow:0 0 30px rgba(var(--brand-rgb),0.5);
}

/* Timeline */
.process-timeline{ background: var(--surface); border:1px solid var(--border); border-radius:24px; padding:48px 32px; }
.timeline-track{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; position:relative; }
.timeline-track::before{
  content:''; position:absolute; top:26px; left:12%; right:12%; height:2px;
  background: linear-gradient(90deg, transparent, var(--brand), var(--brand), transparent);
}
.timeline-step{ text-align:center; position:relative; }
.timeline-num{
  width:52px; height:52px; border-radius:50%; background: var(--bg-alt); border:2px solid var(--brand);
  display:flex; align-items:center; justify-content:center; font-weight:800; color: var(--brand);
  margin:0 auto 18px; position:relative; z-index:1; font-size:1rem;
}
.timeline-step h4{ font-size:1.02rem; font-weight:700; margin-bottom:8px; }
.timeline-step p{ font-size:.84rem; color: var(--text-dim); }

/* ============ AX Security ============ */
.ax-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:center; }
.ax-visual{ display:flex; align-items:center; justify-content:center; }
.ax-radar{
  position:relative; width:320px; height:320px; border-radius:50%;
  background: radial-gradient(circle, rgba(var(--brand-rgb),0.08), transparent 70%);
  display:flex; align-items:center; justify-content:center;
}
.ax-radar-ring{ position:absolute; border:1px solid rgba(var(--brand-rgb),0.25); border-radius:50%; }
.r1{ inset:0; }
.r2{ inset:50px; }
.r3{ inset:100px; }
.ax-radar-sweep{
  position:absolute; inset:0; border-radius:50%;
  background: conic-gradient(from 0deg, rgba(var(--brand-rgb),0.5), transparent 40%);
  animation: sweep 4s linear infinite;
}
@keyframes sweep{ to{ transform:rotate(360deg); } }
.ax-radar-core{ font-size:2.4rem; color: var(--brand); z-index:2; filter: drop-shadow(0 0 14px rgba(var(--brand-rgb),0.7)); }
.ax-blip{
  position:absolute; width:38px; height:38px; border-radius:50%; background: var(--surface);
  border:1px solid var(--border-strong); display:flex; align-items:center; justify-content:center;
  font-size:.9rem; color:var(--brand); animation: blipFloat 3s ease-in-out infinite;
}
.b1{ top:14%; left:18%; }
.b2{ top:20%; right:12%; animation-delay:.5s; }
.b3{ bottom:16%; left:14%; animation-delay:1s; }
.b4{ bottom:10%; right:20%; animation-delay:1.5s; }
@keyframes blipFloat{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-8px);} }

.ax-content{ display:flex; flex-direction:column; gap:28px; }
.ax-item{ display:flex; gap:18px; align-items:flex-start; }
.ax-item-icon{
  flex:0 0 48px; height:48px; border-radius:12px; background: rgba(var(--brand-rgb),0.12);
  display:flex; align-items:center; justify-content:center; color: var(--brand); font-size:1.1rem;
}
.ax-item h3{ font-size:1.05rem; font-weight:700; margin-bottom:6px; }
.ax-item p{ font-size:.88rem; color: var(--text-dim); }

/* ============ Reference ============ */
.ref-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:56px; }
.ref-card{
  background: var(--surface); border:1px solid var(--border); border-radius:18px; padding:30px;
  text-align:center; transition: transform .3s ease, border-color .3s ease;
}
.ref-card:hover{ transform:translateY(-6px); border-color:rgba(var(--brand-rgb),0.4); }
.ref-icon{
  width:64px; height:64px; margin:0 auto 18px; border-radius:50%; background: rgba(var(--brand-rgb),0.12);
  display:flex; align-items:center; justify-content:center; font-size:1.5rem; color:var(--brand);
}
.ref-card h3{ font-size:1.1rem; font-weight:700; margin-bottom:10px; }
.ref-card p{ font-size:.86rem; color: var(--text-dim); }

.metric-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.metric-box{
  background: var(--surface); border:1px solid var(--border); border-radius:16px; padding:26px 16px; text-align:center;
}
.metric-icon{ color: var(--brand); font-size:1.3rem; margin-bottom:10px; }
.metric-box b{ display:block; font-size:1.8rem; font-weight:800; }
.metric-box span{ font-size:.78rem; color:var(--text-faint); }

/* ============ FAQ ============ */
.faq-list{ display:flex; flex-direction:column; gap:14px; }
.faq-item{ background: var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden; transition: border-color .3s ease; }
.faq-item:has(.faq-question[aria-expanded="true"]){ border-color: rgba(var(--brand-rgb),0.4); }
.faq-question{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:20px 24px; text-align:left; font-size:.98rem; font-weight:600;
}
.faq-question i{ color: var(--brand); transition: transform .3s ease; flex-shrink:0; }
.faq-question[aria-expanded="true"] i{ transform: rotate(45deg); }
.faq-answer{ max-height:0; overflow:hidden; transition: max-height .35s ease, padding .35s ease; padding:0 24px; }
.faq-answer p{ color: var(--text-dim); font-size:.9rem; padding-bottom:22px; }
.faq-answer .faq-link{ color: var(--brand); font-weight:700; text-decoration:underline; text-underline-offset:2px; }
.faq-answer .faq-link:hover{ color: var(--brand-2); }
.faq-item:has(.faq-question[aria-expanded="true"]) .faq-answer{ max-height:300px; }

/* ============ CTA / Contact ============ */
.cta-section{ position:relative; text-align:center; overflow:hidden; }
.cta-glow{
  position:absolute; top:0; left:50%; transform:translateX(-50%); width:900px; height:500px;
  background: radial-gradient(ellipse, rgba(var(--brand-rgb),0.22), transparent 70%); pointer-events:none;
}
.cta-inner{ max-width:680px; }
.cta-title{ font-size: clamp(1.9rem,3.6vw,2.6rem); font-weight:800; margin-bottom:20px; line-height:1.35; }
.cta-desc{ color:var(--text-dim); margin-bottom:44px; }
.cta-form{ background: var(--surface); border:1px solid var(--border); border-radius:20px; padding:36px; text-align:left; box-shadow: var(--shadow); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
.cta-form input, .cta-form textarea{
  width:100%; background: var(--bg-alt); border:1px solid var(--border-strong); border-radius:10px;
  padding:13px 16px; color: var(--text); font-size:.9rem; transition: border-color .25s ease;
}
.cta-form textarea{ margin-bottom:20px; resize:vertical; }
.cta-form input:focus, .cta-form textarea:focus{ outline:none; border-color: var(--brand); }
.cta-form input::placeholder, .cta-form textarea::placeholder{ color: var(--text-faint); }
.form-note{ text-align:center; font-size:.78rem; color: var(--text-faint); margin-top:16px; }
.form-success{
  display:none; align-items:center; justify-content:center; gap:10px;
  text-align:center; font-size:.94rem; font-weight:700; color:#2ee6a8;
  margin-top:18px; padding:14px; background: rgba(46,230,168,0.1); border:1px solid rgba(46,230,168,0.3);
  border-radius:12px; animation: panelFade .4s ease;
}
.form-success.visible{ display:flex; }
.form-success i{ font-size:1.05rem; }

/* ============ Footer ============ */
.site-footer{ background: var(--bg-alt); border-top:1px solid var(--border); padding:64px 0 0; position:relative; z-index:2; }
.footer-inner{ display:grid; grid-template-columns:1fr 2fr; gap:48px; padding-bottom:48px; }
.footer-brand .brand-text{ font-size:1.8rem; }
.footer-brand p{ color: var(--text-dim); font-size:.88rem; margin:16px 0 20px; }
.footer-links{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.footer-col h4{ font-size:.86rem; font-weight:700; margin-bottom:16px; color: var(--text-faint); text-transform:uppercase; letter-spacing:.05em; }
.footer-col a{ display:block; font-size:.88rem; color: var(--text-dim); margin-bottom:12px; transition: color .2s ease; }
.footer-col a:hover{ color: var(--brand); }
.footer-bottom{ border-top:1px solid var(--border); padding:22px 24px; text-align:center; }
.footer-bottom p{ font-size:.78rem; color: var(--text-faint); }

.back-to-top{
  position:fixed; bottom:28px; right:28px; width:48px; height:48px; border-radius:50%;
  background: var(--grad-brand); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px -6px rgba(var(--brand-rgb),0.6); opacity:0; visibility:hidden; transform:translateY(10px);
  transition: all .3s ease; z-index:150;
}
.back-to-top.visible{ opacity:1; visibility:visible; transform:translateY(0); }

/* ============================================================
   Subtab navigation (chapters 01~04)
   ============================================================ */
.subtab-nav{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
  margin: 40px 0 36px;
}
.subtab-btn{
  padding:11px 20px; border-radius:99px; font-size:.86rem; font-weight:600;
  background: var(--surface); border:1px solid var(--border); color: var(--text-dim);
  transition: all .25s ease; white-space:nowrap;
}
.subtab-btn:hover{ border-color: rgba(var(--brand-rgb),0.4); color: var(--text); }
.subtab-btn.active{
  background: var(--grad-brand); color:#fff; border-color:transparent;
  box-shadow: 0 8px 20px -8px rgba(var(--brand-rgb),0.6);
}
.subtab-panels{ position:relative; }
.subtab-panel{ display:none; animation: panelFade .5s ease; }
.subtab-panel.active{ display:block; }
@keyframes panelFade{ from{ opacity:0; transform:translateY(12px);} to{ opacity:1; transform:none; } }

.panel-title{ font-size:1.35rem; font-weight:800; text-align:center; margin-bottom:12px; line-height:1.4; }
.panel-title i{ color: var(--brand); margin-right:8px; }
.panel-title-sub{ font-size:.8rem; font-weight:600; color: var(--text-faint); margin-left:8px; }
.panel-sub{ text-align:center; color: var(--text-dim); font-size:.94rem; margin-bottom:36px; }

/* ============================================================
   Intro video (01. U+SASE 소개 최상단 유튜브 영상)
   ============================================================ */
.intro-video{ margin-bottom:40px; }
.intro-video-frame{
  position:relative; width:100%; aspect-ratio:16/9; border-radius:24px; overflow:hidden;
  background:#000; border:1px solid var(--border-strong); box-shadow: var(--shadow); cursor:pointer;
}
.intro-video-thumb{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .5s ease; }
.intro-video-frame:hover .intro-video-thumb{ transform:scale(1.04); }
.intro-video-scrim{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.05) 40%, rgba(0,0,0,0.55) 100%);
}
.intro-video-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:88px; height:88px; border-radius:50%;
  background: var(--grad-brand); color:#fff; font-size:1.6rem;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 0 0 0 rgba(var(--brand-rgb), 0.5); z-index:2;
  transition: transform .25s ease;
  animation: introPlayPulse 2.4s ease-out infinite;
}
.intro-video-play i{ margin-left:4px; }
.intro-video-frame:hover .intro-video-play{ transform:translate(-50%,-50%) scale(1.08); }
@keyframes introPlayPulse{
  0%{ box-shadow: 0 0 0 0 rgba(var(--brand-rgb), 0.45); }
  70%{ box-shadow: 0 0 0 22px rgba(var(--brand-rgb), 0); }
  100%{ box-shadow: 0 0 0 0 rgba(var(--brand-rgb), 0); }
}
.intro-video-badge{
  position:absolute; left:20px; bottom:18px; z-index:2;
  display:inline-flex; align-items:center; gap:8px;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(6px);
  color:#fff; font-size:.85rem; font-weight:700;
  padding:8px 16px; border-radius:999px; border:1px solid rgba(255,255,255,0.18);
}
.intro-video-badge i{ color:#ff0033; font-size:1rem; }
.intro-video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; z-index:3; }
.intro-video-yt{
  display:inline-flex; align-items:center; gap:8px; margin-top:16px;
  font-size:.92rem; font-weight:700; color: var(--text-dim);
  border:1px solid var(--border-strong); border-radius:999px; padding:10px 20px;
  transition: all .25s ease;
}
.intro-video-yt i{ color:#ff0033; font-size:1.1rem; }
.intro-video-yt:hover{ color:#fff; background:#ff0033; border-color:#ff0033; }
.intro-video-yt:hover i{ color:#fff; }

/* ============================================================
   Evolution 5-stage diagram
   ============================================================ */
.evo5-wrap{ background: var(--surface); border:1px solid var(--border); border-radius:24px; padding:44px 32px; margin-bottom:20px; }
.evo5-track{ display:flex; align-items:stretch; gap:10px; flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px; }
.evo5-item{
  flex:1 1 0; min-width:150px; background: var(--bg-alt); border:1px solid var(--border-strong);
  border-radius:16px; padding:24px 14px; text-align:center; transition: transform .3s ease;
}
.evo5-item:hover{ transform:translateY(-6px); }
.evo5-item .evo5-icon{
  width:52px; height:52px; margin:0 auto 14px; border-radius:14px; background: rgba(var(--brand-rgb),0.12);
  display:flex; align-items:center; justify-content:center; font-size:1.3rem; color: var(--brand);
}
.evo5-item h4{ font-size:1.02rem; font-weight:800; margin-bottom:4px; }
.evo5-item p{ font-size:.76rem; color: var(--text-faint); margin-bottom:10px; }
.evo5-item span{ font-size:.72rem; color: var(--text-dim); line-height:1.4; display:block; }
.evo5-primary{ background: var(--grad-brand); border-color:transparent; box-shadow:0 14px 34px -12px rgba(var(--brand-rgb),0.6); transform:scale(1.05); }
.evo5-primary .evo5-icon{ background: rgba(255,255,255,0.2); color:#fff; }
.evo5-primary h4, .evo5-primary p, .evo5-primary span{ color:#fff; }
.evo5-primary p{ opacity:.85; }
.evo5-arrow{ flex:0 0 auto; display:flex; align-items:center; color: var(--text-faint); font-size:.9rem; }
.evo5-quote{ text-align:center; margin-top:32px; font-size:.96rem; font-weight:600; color: var(--text-dim); }

/* ============================================================
   01. Past / Now grid (2)
   ============================================================ */
.past-now-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:20px; }
.pn-card{ background: var(--surface); border:1px solid var(--border); border-radius:18px; padding:30px; }
.pn-badge{ display:inline-block; font-size:.72rem; font-weight:800; padding:5px 14px; border-radius:99px; background: var(--border); color: var(--text-dim); margin-bottom:16px; letter-spacing:.04em; }
.pn-badge-primary{ background: var(--grad-brand); color:#fff; }
.pn-card p{ font-size:.92rem; color: var(--text-dim); line-height:1.7; }

/* ============================================================
   01. 업무 환경 변화 - 네트워크 구조 다이어그램 (과거 vs 현재)
   ============================================================ */
.envdiag-grid{ display:grid; grid-template-columns:1fr auto 1fr; gap:14px; align-items:center; }
.envdiag{
  background: var(--surface); border:1px solid var(--border); border-radius:18px;
  padding:26px 20px; display:flex; flex-direction:column; align-items:center; gap:14px; position:relative;
}
.envdiag-badge{
  position:absolute; top:-12px; left:20px; font-size:.7rem; font-weight:800; padding:5px 14px;
  border-radius:99px; background: var(--border); color: var(--text-dim); letter-spacing:.04em;
}
.envdiag-badge-primary{ background: var(--grad-brand); color:#fff; }
.envdiag-hub{
  display:flex; flex-direction:column; align-items:center; gap:4px; color: var(--text-dim);
  font-size:.72rem; font-weight:700;
}
.envdiag-hub i{ font-size:1.5rem; color: var(--text-faint); }
.envdiag-line{ width:2px; height:26px; background: var(--border-strong); position:relative; }
.envdiag-block{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:22px; height:22px; border-radius:50%; background: var(--grad-brand); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:.7rem;
}
.envdiag-row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.envdiag-row-top{ margin-bottom:2px; }
.envdiag-node{
  display:flex; flex-direction:column; align-items:center; gap:6px; min-width:78px;
  background: var(--bg-alt); border:1px solid var(--border); border-radius:12px; padding:12px 10px;
}
.envdiag-node i{ font-size:1.1rem; color: var(--text-dim); }
.envdiag-node small{ font-size:.66rem; font-weight:700; color: var(--text-dim); white-space:nowrap; }
.envdiag-node-primary{ border-color: rgba(var(--brand-rgb),0.5); background: rgba(var(--brand-rgb),0.08); }
.envdiag-node-primary i{ color: var(--brand); }
.envdiag-node-primary small{ color: var(--brand); }
.envdiag-now .envdiag-hub i{ color: var(--brand); }
.envdiag-arrow{ color: var(--brand); font-size:1.6rem; display:flex; align-items:center; justify-content:center; }
.pn-now{ border-color: rgba(var(--brand-rgb),0.35); }

/* ============================================================
   01. AS-IS / TO-BE (3)
   ============================================================ */
.asis-tobe-grid{ display:grid; grid-template-columns:1fr auto 1fr; gap:24px; align-items:center; }
.at-card{ background: var(--surface); border:1px solid var(--border); border-radius:18px; padding:30px; }
.at-badge{ display:inline-block; font-size:.72rem; font-weight:800; padding:5px 14px; border-radius:99px; background: var(--border); color: var(--text-dim); margin-bottom:16px; letter-spacing:.04em; }
.at-badge-primary{ background: var(--grad-brand); color:#fff; }
.at-desc{ font-size:.9rem; color: var(--text-dim); margin-bottom:18px; line-height:1.7; }
.at-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.at-tags span{ font-size:.7rem; font-weight:600; color: var(--text-faint); background: var(--bg-alt); border:1px solid var(--border); padding:5px 10px; border-radius:99px; }
.at-card-primary{ border-color: rgba(var(--brand-rgb),0.35); }
.at-arrow{ font-size:1.4rem; color: var(--brand); }
.at-orb{ position:relative; width:220px; height:220px; margin:20px auto 0; }
.at-orb-center{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:96px; height:96px; border-radius:50%; background: var(--grad-brand); color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  font-size:1.4rem; box-shadow:0 0 40px rgba(var(--brand-rgb),0.5); z-index:2;
}
.at-orb-center span{ font-size:.66rem; font-weight:700; }
.at-orb::before{
  content:''; position:absolute; inset:20px; border:1.5px dashed var(--border-strong); border-radius:50%;
}
.at-orb-node{
  position:absolute; width:64px; height:64px; border-radius:50%; background: var(--bg-alt);
  border:1px solid var(--border-strong); display:flex; align-items:center; justify-content:center;
  font-size:.78rem; font-weight:700; color: var(--brand); animation: blipFloat 3s ease-in-out infinite;
}
.at-orb-node.n1{ top:0; left:50%; transform:translateX(-50%); }
.at-orb-node.n2{ bottom:12px; left:6px; animation-delay:.6s; }
.at-orb-node.n3{ bottom:12px; right:6px; animation-delay:1.2s; }

/* ============================================================
   01. Zone grid (5)
   ============================================================ */
.zone-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-bottom:20px; }
.zone-card{ background: var(--surface); border:1px solid var(--border); border-radius:18px; padding:26px; }
.zone-card h4{ font-size:1rem; font-weight:700; margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.zone-card h4 i{ color: var(--brand); }
.zone-sub{ font-size:.78rem; font-weight:700; color: var(--text-faint); margin-bottom:10px; }
.zone-desc{ font-size:.82rem; color: var(--text-dim); line-height:1.7; }
.zone-card-primary{ border-color: rgba(var(--brand-rgb),0.4); box-shadow: 0 0 0 1px rgba(var(--brand-rgb),0.12), var(--shadow); }
.zone-card-primary .zone-sub{ color: var(--brand); }
.zone-footer{ text-align:center; font-weight:700; color: var(--brand); font-size:.92rem; }

/* ============================================================
   01. Diff grid (6)
   ============================================================ */
.diff-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; }
.diff-card{ background: var(--surface); border:1px solid var(--border); border-radius:16px; padding:24px 18px; transition: transform .3s ease; }
.diff-card:hover{ transform:translateY(-6px); }
.diff-card i{ font-size:1.3rem; color: var(--brand); margin-bottom:14px; display:block; }
.diff-card h4{ font-size:.94rem; font-weight:700; margin-bottom:8px; }
.diff-card p{ font-size:.8rem; color: var(--text-dim); line-height:1.6; }
.diff-dark{ background: var(--bg-alt); }
.diff-award{ border-color: var(--brand); box-shadow:0 0 0 1px rgba(var(--brand-rgb),0.2), var(--shadow); }

/* ============================================================
   01. Customer grid (7)
   ============================================================ */
.customer-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; }
.cust-card{ background: var(--surface); border:1px solid var(--border); border-radius:16px; padding:26px 18px; text-align:center; transition: transform .3s ease, border-color .3s ease; }
.cust-card:hover{ transform:translateY(-6px); border-color: rgba(var(--brand-rgb),0.4); }
.cust-card i{ font-size:1.5rem; color: var(--brand); margin-bottom:14px; display:block; }
.cust-card h4{ font-size:.92rem; font-weight:700; margin-bottom:8px; }
.cust-card p{ font-size:.78rem; color: var(--text-dim); line-height:1.6; }

/* ============================================================
   01. Roadmap (8)
   ============================================================ */
.roadmap-track{ display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:16px; align-items:stretch; margin-bottom:16px; }
.roadmap-card{ background: var(--surface); border:1px solid var(--border); border-radius:18px; padding:28px 22px; }
.roadmap-phase{ display:inline-block; font-size:.7rem; font-weight:800; letter-spacing:.05em; color: var(--text-faint); text-transform:uppercase; margin-bottom:14px; }
.roadmap-card h4{ font-size:1.05rem; font-weight:700; margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.roadmap-card h4 i{ color: var(--brand); }
.roadmap-card > p{ font-size:.84rem; color: var(--text-dim); margin-bottom:16px; }
.roadmap-card ul{ display:flex; flex-direction:column; gap:8px; }
.roadmap-card li{ font-size:.8rem; color: var(--text-dim); padding:8px 10px; background: var(--bg-alt); border-radius:8px; border:1px solid var(--border); }
.roadmap-arrow{ display:flex; align-items:center; color: var(--text-faint); font-size:1.2rem; }
.roadmap-future{ border-color: var(--brand); box-shadow:0 0 0 1px rgba(var(--brand-rgb),0.2), var(--shadow); position:relative; }
.roadmap-future .roadmap-phase{ color: var(--brand); }
.roadmap-future .roadmap-phase i{ margin-left:6px; }
.roadmap-note{ text-align:center; font-size:.78rem; color: var(--text-faint); }

/* ============================================================
   00. 왜 LG유플러스인가 (경쟁사 대비 차별화 / Single Vendor SASE)
   ============================================================ */
.edge3-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-bottom:28px; align-items:stretch; }
.edge3-card{ background: var(--surface); border:1px solid var(--border); border-radius:20px; padding:26px; display:flex; flex-direction:column; }
.edge3-head{ display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.edge3-badge{ flex:0 0 30px; height:30px; border-radius:50%; background: var(--grad-brand); color:#fff; font-weight:800; font-size:.86rem; display:flex; align-items:center; justify-content:center; }
.edge3-head h4{ font-size:.96rem; font-weight:700; line-height:1.4; }
.edge3-list{ display:flex; flex-direction:column; gap:8px; margin:18px 0 16px; }
.edge3-list li{ font-size:.8rem; color: var(--text-dim); line-height:1.6; padding-left:14px; position:relative; }
.edge3-list li::before{ content:'•'; position:absolute; left:0; color: var(--text-faint); }
.edge3-list li.edge3-strong{ color: var(--text); font-weight:700; }
.edge3-list li.edge3-strong::before{ color: var(--brand); }
.edge3-tag{ margin-top:auto; font-size:.84rem; font-weight:800; color: var(--brand); display:flex; align-items:center; gap:6px; }

/* IDC diagram */
.idc-diagram{ background: var(--bg-alt); border:1px solid var(--border); border-radius:16px; padding:20px 14px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.idc-sources{ display:flex; flex-direction:column; gap:8px; }
.idc-src{ font-size:.68rem; font-weight:600; color: var(--text-dim); background: var(--surface); border:1px solid var(--border); border-radius:8px; padding:6px 8px; display:flex; align-items:center; gap:6px; white-space:nowrap; }
.idc-src i{ color: var(--brand); }
.idc-arrow{ color: var(--text-faint); font-size:.9rem; flex:0 0 auto; }
.idc-core{ flex:0 0 auto; background: var(--grad-brand); border-radius:14px; padding:14px 12px; text-align:center; color:#fff; display:flex; flex-direction:column; align-items:center; gap:6px; box-shadow:0 10px 26px -10px rgba(var(--brand-rgb),0.5); }
.idc-core-label{ font-size:.72rem; font-weight:800; }
.idc-core i{ font-size:1rem; }
.idc-core-name{ font-size:.68rem; font-weight:600; line-height:1.4; }
.idc-line{ font-size:.68rem; font-weight:700; color: var(--text-dim); text-align:center; white-space:nowrap; }
.idc-line i{ color: var(--brand); display:block; margin-bottom:4px; font-size:1rem; }
.idc-line small{ font-weight:500; color: var(--text-faint); }

/* Growth diagram */
.growth-diagram{ background: var(--bg-alt); border:1px solid var(--border); border-radius:16px; padding:18px; }
.growth-title{ font-size:.74rem; font-weight:700; color: var(--text-faint); text-align:center; margin-bottom:10px; }
.growth-chart{ position:relative; height:120px; color: var(--text-faint); }
.growth-zone-early{ position:absolute; left:0; top:0; bottom:0; width:32%; background: rgba(var(--brand-rgb),0.08); border-radius:8px; font-size:.62rem; font-weight:700; color: var(--brand); display:flex; align-items:flex-start; justify-content:center; padding-top:8px; text-align:center; }
.growth-svg{ width:100%; height:100%; }
.growth-dash{ opacity:.5; }
.growth-label{ position:absolute; font-size:.62rem; font-weight:700; line-height:1.4; }
.growth-label-lg{ top:0; right:0; color: var(--brand); text-align:right; }
.growth-label-gen{ bottom:22px; right:6px; color: var(--text-faint); font-weight:600; }
.growth-stages{ display:flex; justify-content:space-between; font-size:.66rem; color: var(--text-faint); margin-top:6px; }
.growth-flow{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:14px; flex-wrap:wrap; }
.growth-flow-step{ font-size:.7rem; font-weight:700; color: var(--text-dim); background: var(--bg-alt); border:1px solid var(--border); border-radius:10px; padding:8px 10px; display:flex; align-items:center; gap:6px; }
.growth-flow-step i{ color: var(--brand); }
.growth-flow > i{ color: var(--text-faint); font-size:.8rem; }

/* Squad diagram */
.squad-diagram{ position:relative; background: var(--bg-alt); border:1px solid var(--border); border-radius:16px; padding:20px; min-height:230px; display:flex; align-items:center; justify-content:center; }
.squad-core{ width:96px; height:96px; border-radius:50%; background: var(--grad-brand); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center; font-size:.66rem; font-weight:700; box-shadow:0 0 30px rgba(var(--brand-rgb),0.5); z-index:2; }
.squad-core i{ font-size:1.1rem; }
.squad-role{ position:absolute; font-size:.62rem; font-weight:700; color: var(--text-dim); background: var(--surface); border:1px solid var(--border); border-radius:10px; padding:6px 8px; text-align:center; line-height:1.35; }
.squad-role i{ color: var(--brand); display:block; margin-bottom:3px; }
.squad-role small{ font-weight:500; color: var(--text-faint); }
.role-1{ top:6px; left:14px; }
.role-2{ top:6px; right:14px; }
.role-3{ bottom:6px; right:6px; }
.role-4{ bottom:6px; left:6px; }
.role-5{ top:50%; left:0; transform:translateY(-50%); }
.squad-partners{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:14px; }
.squad-partners span{ font-size:.68rem; font-weight:600; color: var(--text-faint); background: var(--bg-alt); border:1px solid var(--border); border-radius:99px; padding:5px 12px; }

.dark-callout{ text-align:center; font-size:.98rem; font-weight:700; color:#fff; padding:26px 24px; background: #0c0c14; border-radius:16px; line-height:1.7; }
html[data-theme="light"] .dark-callout{ background:#17171f; }
.dark-callout-thin{ font-size:.9rem; padding:18px 24px; margin-bottom:28px; }

/* Vendor compare (Single Vendor SASE) */
.vendor-compare{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-bottom:24px; }
.vendor-col{ border-radius:20px; padding:26px; border:1px solid var(--border); }
.vendor-col-multi{ background: var(--surface); }
.vendor-col-single{ background: rgba(var(--brand-rgb),0.06); border-color: rgba(var(--brand-rgb),0.3); }
.vendor-col-title{ text-align:center; font-size:.98rem; font-weight:800; margin-bottom:4px; }
.vendor-col-single .vendor-col-title{ color: var(--brand); }
.vendor-col-sub{ text-align:center; font-size:.74rem; color: var(--text-faint); margin-bottom:18px; }
.vendor-chain{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.vendor-chain i, .vendor-single-flow > i{ color: var(--text-faint); font-size:.7rem; }
.vc-node{ font-size:.66rem; font-weight:700; color: var(--text-dim); background: var(--bg-alt); border:1px solid var(--border); border-radius:10px; padding:8px 6px; text-align:center; min-width:56px; }
.vc-node small{ display:block; }
.vc-vendor span{ display:block; font-size:.58rem; font-weight:600; color: var(--text-faint); margin-top:2px; }
.vendor-warn{ text-align:center; font-size:.76rem; font-weight:700; color:#ff5c7a; margin-bottom:14px; }
.vendor-note-row{ display:flex; gap:10px; margin-bottom:14px; }
.vendor-note-row p{ flex:1; font-size:.7rem; color: var(--text-faint); background: var(--bg-alt); border:1px solid var(--border); border-radius:10px; padding:10px; text-align:center; line-height:1.5; }
.vendor-col-footer{ text-align:center; font-size:.82rem; font-weight:700; color: var(--text-dim); padding-top:14px; border-top:1px dashed var(--border-strong); }
.vendor-col-footer-primary{ color: var(--brand); }

.vendor-single-flow{ display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:14px; }
.vendor-single-engine{ display:flex; gap:6px; background: var(--surface); border:1px solid rgba(var(--brand-rgb),0.35); border-radius:12px; padding:10px; }
.vendor-single-engine span{ font-size:.64rem; font-weight:700; color: var(--brand); background: rgba(var(--brand-rgb),0.12); border-radius:8px; padding:6px 8px; }
.single-packet-bar{ text-align:center; font-size:.78rem; font-weight:800; color:#fff; background: var(--grad-brand); border-radius:99px; padding:10px; margin-bottom:16px; letter-spacing:.02em; }
.vendor-check-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
.vendor-check-grid span{ font-size:.76rem; font-weight:600; color: var(--text-dim); display:flex; align-items:center; gap:6px; }
.vendor-check-grid i{ color: var(--brand); }

.vendor-necessity-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-bottom:28px; }
.necessity-box{ background: var(--surface); border:1px solid var(--border); border-radius:16px; padding:22px; text-align:center; }
.necessity-box-alt{ background: rgba(var(--brand-rgb),0.06); border-color: rgba(var(--brand-rgb),0.3); }
.necessity-title{ font-size:.88rem; font-weight:800; margin-bottom:14px; }
.necessity-tags{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.necessity-tags span{ font-size:.76rem; font-weight:600; color: var(--text-dim); background: var(--bg-alt); border:1px solid var(--border); border-radius:99px; padding:8px 14px; display:flex; align-items:center; gap:6px; }
.necessity-tags i{ color: var(--brand); }

/* ============================================================
   01. Edge grid (9) / Global (10) / Reason (11)
   ============================================================ */
.edge-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-bottom:24px; }
.edge-card{ background: var(--surface); border:1px solid var(--border); border-radius:18px; padding:28px; position:relative; }
.edge-num{ display:block; font-size:1.6rem; font-weight:800; color: rgba(var(--brand-rgb),0.35); margin-bottom:14px; }
.edge-card h4{ font-size:1rem; font-weight:700; margin-bottom:10px; }
.edge-card p{ font-size:.86rem; color: var(--text-dim); line-height:1.65; }
.edge-quote{ text-align:center; font-size:.98rem; font-weight:700; padding:24px; background: var(--surface); border:1px solid var(--border); border-radius:16px; }

.global-table{ background: var(--surface); border:1px solid var(--border); border-radius:18px; overflow:hidden; margin-bottom:28px; }
.gt-row{ display:grid; grid-template-columns:1.1fr 1.6fr 1.6fr; gap:16px; padding:18px 22px; border-bottom:1px solid var(--border); font-size:.86rem; align-items:center; }
.gt-row:last-child{ border-bottom:none; }
.gt-head{ background: var(--bg-alt); font-weight:800; font-size:.8rem; color: var(--text-faint); text-transform:uppercase; letter-spacing:.03em; }
.gt-row div:first-child{ font-weight:700; }
.gt-row div:nth-child(2){ color: var(--text-dim); }
.gt-good{ color: var(--brand); font-weight:700; }
.global-summary{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.global-summary div{ background: var(--surface); border:1px solid var(--border); border-radius:14px; padding:22px; text-align:center; }
.global-summary i{ color: var(--brand); font-size:1.3rem; margin-bottom:10px; display:block; }
.global-summary b{ display:block; font-size:.96rem; margin-bottom:6px; }
.global-summary span{ font-size:.78rem; color: var(--text-faint); }

.reason-example{ display:flex; align-items:center; justify-content:center; gap:24px; margin-bottom:28px; flex-wrap:wrap; }
.reason-stat{ background: var(--surface); border:1px solid var(--border); border-radius:16px; padding:26px 30px; text-align:center; min-width:180px; }
.reason-num, .reason-stat > span{ font-size:1.8rem; font-weight:800; }
.reason-stat p{ font-size:.78rem; color: var(--text-faint); margin-top:8px; }
.reason-arrow{ color: var(--text-faint); font-size:1.2rem; }
.reason-highlight{ border-color: var(--brand); box-shadow:0 0 0 1px rgba(var(--brand-rgb),0.2), var(--shadow); }
.reason-highlight .reason-num{ color: var(--brand); }

/* ============================================================
   02. Architecture diagram
   ============================================================ */
.arch-diagram{ background: var(--surface); border:1px solid var(--border); border-radius:24px; padding:44px 32px; margin-bottom:20px; }
.arch-grid{ display:flex; align-items:stretch; gap:8px; flex-wrap:wrap; justify-content:center; }
.arch-col{ flex:1 1 220px; min-width:200px; display:flex; flex-direction:column; gap:10px; }
.arch-col-title{ font-size:.76rem; font-weight:700; color: var(--text-faint); text-align:center; margin-bottom:6px; text-transform:uppercase; letter-spacing:.04em; }
.arch-node{ background: var(--bg-alt); border:1px solid var(--border); border-radius:12px; padding:12px 14px; font-size:.82rem; font-weight:600; display:flex; align-items:center; gap:10px; }
.arch-node i{ color: var(--brand); width:16px; }
.arch-node-primary{ background: rgba(var(--brand-rgb),0.1); border-color: rgba(var(--brand-rgb),0.35); }
.arch-col-main{ background: var(--bg-alt); border:1px solid var(--border-strong); border-radius:16px; padding:16px; }
.arch-caption{ text-align:center; font-size:.72rem; color: var(--text-faint); margin-top:8px; padding-top:10px; border-top:1px dashed var(--border-strong); }
.arch-beam{ flex:0 0 34px; align-self:center; height:2px; background: linear-gradient(90deg, transparent, var(--brand), transparent); position:relative; min-width:24px; }
.arch-beam::after{ content:''; position:absolute; top:-3px; width:8px; height:8px; border-radius:50%; background: var(--brand); box-shadow:0 0 10px var(--brand); animation: beamMove 2.2s linear infinite; }
.arch-footer{ text-align:center; margin-top:24px; font-size:.9rem; font-weight:600; color: var(--text-dim); }

/* ============================================================
   02. Feature detail grid / CASB / ZTNA / RBI / GenAI / TI
   ============================================================ */
.feature-detail-grid{ display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:center; margin-bottom:24px; }
.fd-list{ display:flex; flex-direction:column; gap:20px; }
.fd-item{ display:flex; gap:16px; align-items:flex-start; }
.fd-item i{ flex:0 0 44px; height:44px; border-radius:12px; background: rgba(var(--brand-rgb),0.12); color: var(--brand); display:flex; align-items:center; justify-content:center; font-size:1.05rem; }
.fd-item h4{ font-size:.98rem; font-weight:700; margin-bottom:4px; }
.fd-item p{ font-size:.84rem; color: var(--text-dim); }
.fd-footer{ text-align:center; font-size:.86rem; font-weight:600; color: var(--text-dim); padding-top:20px; border-top:1px solid var(--border); }

.fd-visual{ background: var(--bg-alt); border:1px solid var(--border); border-radius:18px; padding:32px; min-height:280px; position:relative; }
.casb-visual{ display:flex; align-items:center; justify-content:center; }
.casb-hub{
  width:88px; height:88px; border-radius:50%; background: var(--grad-brand); color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  font-size:1.3rem; box-shadow:0 0 40px rgba(var(--brand-rgb),0.5); position:relative; z-index:2;
}
.casb-hub span{ font-size:.68rem; font-weight:700; }
.casb-app{
  position:absolute; background: var(--surface); border:1px solid var(--border-strong); border-radius:99px;
  padding:8px 14px; font-size:.72rem; font-weight:700; display:flex; align-items:center; gap:6px;
  animation: blipFloat 3.4s ease-in-out infinite;
}
.casb-app.a1{ top:14%; left:20%; }
.casb-app.a2{ top:50%; left:6%; transform:translateY(-50%); animation-delay:.3s; }
.casb-app.a3{ bottom:14%; left:20%; animation-delay:.6s; }
.casb-app.a4{ top:14%; right:18%; animation-delay:.9s; }
.casb-app.a5{ top:50%; right:4%; transform:translateY(-50%); animation-delay:1.2s; }
.casb-app.a6{ bottom:14%; right:18%; animation-delay:1.5s; }

.ztna-flow{ display:flex; align-items:stretch; gap:14px; flex-wrap:wrap; justify-content:center; margin-bottom:24px; }
.ztna-stage{ flex:1 1 220px; background: var(--surface); border:1px solid var(--border); border-radius:16px; padding:20px; display:flex; flex-direction:column; gap:10px; }
.ztna-stage h5{ font-size:.82rem; font-weight:700; text-align:center; color: var(--text-faint); margin-bottom:6px; text-transform:uppercase; letter-spacing:.03em; }
.ztna-chip{ font-size:.8rem; font-weight:600; padding:10px 12px; border-radius:10px; background: var(--bg-alt); border:1px solid var(--border); display:flex; align-items:center; gap:8px; }
.ztna-chip-primary{ background: rgba(var(--brand-rgb),0.1); border-color: rgba(var(--brand-rgb),0.35); color: var(--brand); }
.ztna-gate{ border-color: var(--brand); box-shadow:0 0 0 1px rgba(var(--brand-rgb),0.2); }
.ztna-arrow{ align-self:center; color: var(--text-faint); font-size:1.2rem; }
.ztna-allow{ color:#2ee6a8; }
.ztna-allow i{ color:#2ee6a8; }
.ztna-deny{ color: var(--text-faint); opacity:.7; }
.ztna-deny i{ color:#ff5c7a; }

.triple-note{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:20px; }
.triple-note > div{ background: var(--surface); border:1px solid var(--border); border-radius:14px; padding:20px; }
.triple-note b{ display:block; font-size:.9rem; margin-bottom:8px; color: var(--brand); }
.triple-note p{ font-size:.82rem; color: var(--text-dim); }

/* ---- RBI 동작 원리 다이어그램 ---- */
.rbi-diagram-title{ text-align:center; font-size:.9rem; font-weight:700; color: var(--text-dim); margin-bottom:18px; }
.rbi-diagram-title i{ color: var(--brand); margin-right:6px; }
.rbi-diagram{
  display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap;
  background: var(--surface); border:1px solid var(--border); border-radius:20px; padding:36px 24px; margin-bottom:24px;
}
.rbi-node{ display:flex; flex-direction:column; align-items:center; gap:8px; min-width:130px; text-align:center; }
.rbi-node-icon{
  width:64px; height:64px; border-radius:16px; background: var(--bg-alt); border:1px solid var(--border-strong);
  display:flex; align-items:center; justify-content:center; font-size:1.6rem; color: var(--text-dim); position:relative;
}
.rbi-node-icon-badge{ position:absolute; bottom:-6px; right:-6px; font-size:.85rem; background: var(--surface); border:1px solid var(--border-strong); border-radius:50%; width:24px; height:24px; display:flex; align-items:center; justify-content:center; color: var(--brand); }
.rbi-node-label{ font-size:.92rem; font-weight:800; }
.rbi-node-desc{ font-size:.72rem; color: var(--text-faint); }
.rbi-node-danger .rbi-node-icon{ color:#ff5c7a; border-color: rgba(255,92,122,0.4); }

.rbi-links{ display:flex; flex-direction:column; gap:14px; align-items:flex-start; min-width:150px; }
.rbi-link{ display:flex; align-items:center; gap:8px; font-size:.74rem; font-weight:700; color: var(--text-faint); white-space:nowrap; }
.rbi-link i{ color: var(--brand); font-size:.9rem; }

.rbi-container{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.rbi-container-tag{ font-size:.78rem; font-weight:800; color: var(--text-dim); }
.rbi-container-inner{
  position:relative; width:150px; height:120px; border-radius:14px;
  background: linear-gradient(155deg, rgba(var(--brand-rgb),0.22), rgba(var(--brand-rgb),0.08));
  border:1.5px solid var(--brand); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  box-shadow:0 0 0 1px rgba(var(--brand-rgb),0.15), var(--shadow);
}
.rbi-container-inner-tag{ position:absolute; top:8px; left:10px; font-size:.62rem; font-weight:700; color: var(--brand); letter-spacing:.03em; }
.rbi-threat-icon{ width:42px; height:42px; border-radius:12px; background: var(--surface); border:1px solid var(--border-strong); display:flex; align-items:center; justify-content:center; font-size:1.2rem; color:#ffb020; }
.rbi-virus{ position:absolute; font-size:1rem; color:#ff5c7a; opacity:.85; }
.rbi-virus-1{ bottom:14px; left:18px; }
.rbi-virus-2{ bottom:16px; right:16px; }
.rbi-container-caption{ font-size:.8rem; font-weight:800; color: var(--brand); text-align:center; line-height:1.5; }
.rbi-container-caption small{ font-size:.68rem; font-weight:600; color: var(--text-faint); }

.rbi-keyfeatures{
  background: rgba(var(--brand-rgb),0.08); border:1px solid rgba(var(--brand-rgb),0.3); border-radius:16px;
  padding:22px 26px; margin:0 auto 32px; max-width:720px;
}
.rbi-keyfeatures-title{ font-size:.9rem; font-weight:800; color: var(--brand); margin-bottom:12px; text-align:center; }
.rbi-keyfeatures-title i{ margin-right:6px; }
.rbi-keyfeatures ul{ list-style:none; display:flex; flex-direction:column; gap:8px; }
.rbi-keyfeatures li{ font-size:.84rem; color: var(--text-dim); text-align:center; }
.rbi-keyfeatures li::before{ content:'•'; color: var(--brand); margin-right:8px; font-weight:800; }
.rbi-keyfeatures strong{ color: var(--text); }

.rbi-feature-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.rbi-feature-card{
  background: var(--surface); border:1px solid var(--border); border-radius:16px; padding:24px 16px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:10px; transition: transform .3s ease, border-color .3s ease;
}
.rbi-feature-card:hover{ transform:translateY(-6px); border-color: rgba(var(--brand-rgb),0.4); }
.rbi-feature-icon{
  width:52px; height:52px; border-radius:14px; background: rgba(var(--brand-rgb),0.12);
  display:flex; align-items:center; justify-content:center; font-size:1.3rem; color: var(--brand);
}
.rbi-feature-card h4{ font-size:.92rem; font-weight:800; }
.rbi-feature-card p{ font-size:.78rem; color: var(--text-dim); line-height:1.5; }

.genai-flow{ display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap; margin-bottom:24px; }
.genai-node{ background: var(--surface); border:1px solid var(--border); border-radius:16px; padding:18px 22px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px; font-size:.86rem; font-weight:700; }
.genai-node i{ font-size:1.2rem; color: var(--brand); }
.genai-node-primary{ border-color: var(--brand); box-shadow:0 0 0 1px rgba(var(--brand-rgb),0.2); }
.genai-branch{ display:flex; flex-direction:column; gap:10px; }
.genai-chip{ font-size:.82rem; font-weight:700; padding:12px 18px; border-radius:10px; display:flex; align-items:center; gap:8px; }
.genai-deny{ background: rgba(255,92,122,0.12); color:#ff5c7a; }
.genai-allow{ background: rgba(46,230,168,0.12); color:#2ee6a8; }
.genai-services{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:24px; }
.genai-services span{ font-size:.8rem; font-weight:600; padding:9px 16px; border-radius:99px; background: var(--surface); border:1px solid var(--border); display:flex; align-items:center; gap:8px; }
.genai-services i{ color: var(--brand); }

.ti-flow{ display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap; margin-bottom:28px; }
.ti-col{ display:flex; flex-direction:column; gap:8px; }
.ti-col h5{ font-size:.76rem; font-weight:700; color: var(--text-faint); text-align:center; margin-bottom:4px; text-transform:uppercase; letter-spacing:.03em; }
.ti-chip{ font-size:.8rem; font-weight:600; padding:9px 14px; border-radius:10px; background: var(--surface); border:1px solid var(--border); text-align:center; }
.ti-core{
  width:120px; height:120px; border-radius:50%; background: var(--grad-brand); color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  box-shadow:0 0 40px rgba(var(--brand-rgb),0.5); text-align:center;
}
.ti-core i{ font-size:1.6rem; }
.ti-core span{ font-size:.68rem; font-weight:700; line-height:1.4; }

/* ============================================================
   03. VPN vs ZTNA(vzc) / Trust model visual(tmv) / Limits / Latency-connection(latconn) / Strategy / Manage
   ============================================================ */
/* ---- 1) VPN vs ZTNA 한눈에 보기 ---- */
.vzc-wrap{ display:flex; flex-direction:column; gap:20px; }
.vzc-row{ background: var(--surface); border:1px solid var(--border); border-radius:20px; padding:26px 28px; display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
.vzc-row-primary{ border-color: var(--brand); box-shadow:0 0 0 1px rgba(var(--brand-rgb),0.2), var(--shadow); background: rgba(var(--brand-rgb),0.05); }
.vzc-label{ flex:0 0 200px; display:flex; flex-direction:column; gap:8px; }
.vzc-badge{ display:inline-flex; width:fit-content; font-size:.68rem; font-weight:800; padding:5px 14px; border-radius:99px; background: var(--border); color: var(--text-dim); }
.vzc-badge-primary{ background: var(--grad-brand); color:#fff; }
.vzc-label h4{ font-size:1.02rem; font-weight:800; }
.vzc-flow{ flex:1 1 380px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; justify-content:center; }
.vzc-node{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.vzc-icon{
  width:52px; height:52px; border-radius:14px; background: var(--bg-alt); border:1px solid var(--border-strong);
  display:flex; align-items:center; justify-content:center; font-size:1.25rem; color: var(--text-dim); position:relative;
}
.vzc-icon-wall{ color:#8a8a96; }
.vzc-icon-verified{ color: var(--brand); border-color: var(--brand); }
.vzc-icon-check{ position:absolute; bottom:-5px; right:-5px; font-size:.85rem; background: var(--surface); border-radius:50%; color:#2ee6a8; }
.vzc-icon-allow{ color:#2ee6a8; border-color: rgba(46,230,168,0.4); }
.vzc-icon-deny{ color: var(--text-faint); }
.vzc-node small{ font-size:.72rem; font-weight:700; color: var(--text-dim); white-space:nowrap; }
.vzc-allow-label{ color:#2ee6a8; }
.vzc-node-hidden{ opacity:.55; }
.vzc-link{ display:flex; flex-direction:column; align-items:center; gap:4px; font-size:.7rem; font-weight:700; color: var(--text-faint); }
.vzc-link i{ font-size:1.1rem; color: var(--text-faint); }
.vzc-link-primary{ color: var(--brand); }
.vzc-link-primary i{ color: var(--brand); }
.vzc-divider{ width:1px; align-self:stretch; background: var(--border-strong); }
.vzc-node-group{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.vzc-caption{ flex:0 0 100%; text-align:center; font-size:.78rem; font-weight:700; color: var(--text-faint); border-top:1px dashed var(--border-strong); padding-top:14px; margin-top:4px; }
.vzc-caption i{ margin-right:6px; }
.vzc-caption-primary{ color: var(--brand); }

/* ---- 2) 신뢰 모델의 변화 ---- */
.tmv-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:stretch; }
.tmv-col{ background: var(--surface); border:1px solid var(--border); border-radius:20px; padding:28px; display:flex; flex-direction:column; }
.tmv-col-primary{ border-color: var(--brand); box-shadow:0 0 0 1px rgba(var(--brand-rgb),0.2), var(--shadow); background: rgba(var(--brand-rgb),0.05); }
.tmv-badge{ display:inline-flex; width:fit-content; font-size:.7rem; font-weight:800; padding:5px 14px; border-radius:99px; background: var(--border); color: var(--text-dim); margin-bottom:10px; }
.tmv-badge-primary{ background: var(--grad-brand); color:#fff; }
.tmv-col h4{ font-size:1.05rem; font-weight:800; margin-bottom:16px; }
.tmv-section-label{ font-size:.72rem; font-weight:700; color: var(--text-faint); text-align:center; margin-bottom:10px; text-transform:uppercase; letter-spacing:.03em; }
.tmv-diagram{ background: var(--bg-alt); border:1px solid var(--border); border-radius:14px; padding:20px 14px; display:flex; align-items:center; justify-content:center; gap:14px; min-height:120px; flex-wrap:wrap; margin-bottom:14px; }
.tmv-gate{ width:52px; height:52px; border-radius:12px; background: var(--surface); border:1px solid var(--border-strong); display:flex; align-items:center; justify-content:center; font-size:1.3rem; color: var(--text-dim); }
.tmv-diagram > i{ color: var(--text-faint); }
.tmv-apps{ display:flex; gap:10px; flex-wrap:wrap; }
.tmv-app{ width:44px; height:44px; border-radius:10px; background: var(--surface); border:1px solid var(--border-strong); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font-size:.9rem; color: var(--text-dim); }
.tmv-app small{ font-size:.55rem; font-weight:700; }
.tmv-app-allow{ color:#2ee6a8; border-color: rgba(46,230,168,0.4); }
.tmv-app-deny{ color: var(--text-faint); opacity:.6; }
.tmv-sublabels{ display:flex; justify-content:space-between; font-size:.72rem; color: var(--text-faint); font-weight:600; margin-bottom:18px; padding:0 4px; }
.tmv-verify-group{ display:flex; flex-direction:column; gap:14px; width:100%; }
.tmv-verify-item{ display:flex; align-items:center; gap:10px; justify-content:center; font-size:.72rem; font-weight:700; color: var(--text-dim); flex-wrap:wrap; }
.tmv-verify-icon{ width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.9rem; background: var(--surface); border:1px solid var(--border-strong); }
.tmv-allow-icon{ color: var(--brand); border-color: var(--brand); }
.tmv-deny-icon{ color: var(--text-faint); }
.tmv-verify-item i.fa-arrow-right-long{ color: var(--brand); }
.tmv-arrow-dim{ color: var(--text-faint) !important; }
.tmv-quote{ font-size:.98rem; font-weight:800; text-align:center; margin-bottom:10px; }
.tmv-quote-primary{ color: var(--brand); }
.tmv-desc{ font-size:.82rem; color: var(--text-dim); text-align:center; line-height:1.6; margin-top:auto; }
.tmv-desc small{ color: var(--text-faint); }

.limit-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-bottom:24px; }
.limit-card{ background: var(--surface); border:1px solid var(--border); border-radius:18px; padding:26px; }
.limit-card i{ font-size:1.4rem; color: var(--brand); margin-bottom:14px; display:block; }
.limit-card h4{ font-size:1rem; font-weight:700; margin-bottom:4px; }
.limit-sub{ font-size:.72rem; color: var(--text-faint); margin-bottom:12px; text-transform:uppercase; letter-spacing:.03em; }
.limit-card > p:last-child{ font-size:.84rem; color: var(--text-dim); line-height:1.65; }
.vs-strip{ display:flex; align-items:center; justify-content:center; gap:16px; font-size:.86rem; font-weight:700; flex-wrap:wrap; }
.vs-strip-old{ color: var(--text-faint); }
.vs-strip-new{ color: var(--brand); }
.vs-strip i{ color: var(--text-faint); }

/* ---- 4) 클라우드 직접 연결 ---- */
.latconn-section-label{ font-size:.86rem; font-weight:700; color: var(--text-dim); margin-bottom:18px; }
.latconn-section-label i{ color: var(--brand); margin-right:8px; font-size:.6rem; }
.latconn-wrap{ display:grid; grid-template-columns:1.4fr 1fr; gap:24px; align-items:start; }
.latconn-compare{ display:flex; align-items:center; gap:0; background: var(--surface); border:1px solid var(--border); border-radius:20px; padding:26px; position:relative; }
.latconn-path{ flex:1; display:flex; flex-direction:column; gap:14px; }
.latconn-path-primary{ background: rgba(var(--brand-rgb),0.06); border:1.5px solid var(--brand); border-radius:16px; padding:16px; margin:-16px; }
.latconn-badge{ display:inline-flex; width:fit-content; font-size:.72rem; font-weight:800; padding:6px 14px; border-radius:99px; background: var(--border); color: var(--text-dim); }
.latconn-badge-primary{ background: var(--grad-brand); color:#fff; }
.latconn-flow{ display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; }
.latconn-node{ display:flex; flex-direction:column; align-items:center; gap:6px; background: var(--bg-alt); border:1px solid var(--border-strong); border-radius:14px; padding:14px 10px; min-width:76px; font-size:1.1rem; color: var(--text-dim); position:relative; }
.latconn-node small{ font-size:.62rem; font-weight:700; }
.latconn-node-bottleneck{ color:#ff5c7a; border-color: rgba(255,92,122,0.4); }
.latconn-node-primary{ color: var(--brand); border-color: var(--brand); }
.latconn-flow::after{ content:''; }
.latconn-tag{ font-size:.72rem; font-weight:700; text-align:center; }
.latconn-tag-warn{ color:#ff5c7a; }
.latconn-note{ font-size:.78rem; border-radius:12px; padding:12px 14px; line-height:1.6; }
.latconn-note small{ font-weight:500; color: var(--text-dim); }
.latconn-note-bad{ background: rgba(255,92,122,0.08); color:#ff5c7a; font-weight:700; }
.latconn-note-good{ background: rgba(46,230,168,0.08); color:#2ee6a8; font-weight:700; }
.latconn-vs{
  flex:0 0 44px; height:44px; width:44px; border-radius:50%; background: var(--grad-brand); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.8rem;
  box-shadow:0 0 24px rgba(var(--brand-rgb),0.5); margin:0 -22px; position:relative; z-index:2;
}
.latconn-side{ display:flex; flex-direction:column; gap:18px; }
.latconn-panel{ background: var(--surface); border:1px solid var(--border); border-radius:18px; padding:22px; }
.latconn-panel-primary{ background: rgba(var(--brand-rgb),0.06); border-color: rgba(var(--brand-rgb),0.3); }
.latconn-panel-title{ font-size:.84rem; font-weight:800; margin-bottom:14px; }

.lb-row{ display:grid; grid-template-columns:70px 1fr 50px; align-items:center; gap:10px; font-size:.8rem; font-weight:700; margin-bottom:12px; }
.lb-row:last-child{ margin-bottom:0; }
.lb-track{ height:12px; border-radius:99px; background: var(--bg-alt); border:1px solid var(--border); overflow:hidden; }
.lb-fill{ height:100%; border-radius:99px; width:calc(var(--val) * 1% / 1.5); animation: fillBar 1.4s ease forwards; }
@keyframes fillBar{ from{ width:0; } }
.lb-old{ background: linear-gradient(90deg, #6f6f82, #a6a6b8); }
.lb-new{ background: var(--grad-brand); }
.ux-list{ display:flex; flex-direction:column; gap:10px; }
.ux-list span{ font-size:.8rem; font-weight:600; padding:10px 14px; border-radius:10px; background: var(--surface); border:1px solid var(--border); display:flex; align-items:center; gap:10px; }
.ux-list i{ color: var(--brand); width:16px; }

.strategy-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.strategy-card{ background: var(--surface); border:1px solid var(--border); border-radius:18px; padding:30px; text-align:center; }
.strategy-card i{ font-size:1.6rem; color: var(--brand); margin-bottom:16px; display:block; }
.strategy-card h4{ font-size:1.02rem; font-weight:700; margin-bottom:4px; }
.strategy-sub{ font-size:.72rem; color: var(--text-faint); margin-bottom:14px; text-transform:uppercase; letter-spacing:.03em; }
.strategy-card > p{ font-size:.86rem; color: var(--text-dim); margin-bottom:16px; line-height:1.65; }
.strategy-tag{ font-size:.7rem; font-weight:600; color: var(--text-faint); background: var(--bg-alt); border:1px solid var(--border); padding:6px 12px; border-radius:99px; display:inline-block; }

.manage-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.manage-card{ background: var(--surface); border:1px solid var(--border); border-radius:18px; padding:28px; position:relative; }
.manage-num{ position:absolute; top:20px; right:24px; font-size:1.6rem; font-weight:800; color: rgba(var(--brand-rgb),0.25); }
.manage-card h4{ font-size:1.02rem; font-weight:700; margin-bottom:10px; }
.manage-card p{ font-size:.86rem; color: var(--text-dim); line-height:1.65; }

/* ============================================================
   04. Challenge / Compare table / Market / Goal / AI-SPM / Workflow
   ============================================================ */
.challenge-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; }
.challenge-card{ background: var(--surface); border:1px solid var(--border); border-radius:16px; padding:24px 18px; position:relative; }
.challenge-num{ display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background: var(--grad-brand); color:#fff; font-size:.78rem; font-weight:800; margin-bottom:14px; }
.challenge-card h4{ font-size:.9rem; font-weight:700; margin-bottom:8px; }
.challenge-card p{ font-size:.78rem; color: var(--text-dim); line-height:1.6; }

/* ---- SWG vs CASB 비교 테이블(swgc) ---- */
.swgc-table{ background: var(--surface); border:1px solid var(--border); border-radius:20px; overflow:hidden; box-shadow: var(--shadow); }
.swgc-row{ display:grid; grid-template-columns:150px 1fr 1fr; }
.swgc-row:not(:last-child){ border-bottom:1px solid var(--border); }
.swgc-cell{ padding:18px 22px; font-size:.86rem; color: var(--text-dim); display:flex; align-items:center; line-height:1.6; }
.swgc-cell:not(:last-child){ border-right:1px solid var(--border); }
.swgc-cell-key{ font-weight:800; color: var(--text); font-size:.82rem; background: var(--bg-alt); }
.swgc-row:nth-child(even):not(.swgc-row-head) .swgc-cell:not(.swgc-cell-key){ background: rgba(var(--brand-rgb),0.02); }
.swgc-row-head{ background: var(--bg-alt); }
.swgc-row-head .swgc-cell{ padding:22px; font-weight:800; font-size:1rem; flex-direction:column; align-items:flex-start; gap:4px; background:transparent; }
.swgc-row-head .swgc-cell span{ font-size:.68rem; font-weight:600; color: var(--text-faint); text-transform:uppercase; letter-spacing:.03em; }
.swgc-cell-swg{ color: var(--text); }
.swgc-cell-swg i{ color: var(--text-dim); margin-right:8px; }
.swgc-cell-casb{ color: var(--brand); background: rgba(var(--brand-rgb),0.06) !important; }
.swgc-cell-casb i{ color: var(--brand); margin-right:8px; }

.market-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-bottom:24px; }
.market-stat{ background: var(--surface); border:1px solid var(--border); border-radius:18px; padding:30px; text-align:center; }
.market-num{ font-size:2.2rem; font-weight:800; color: var(--brand); }
.market-unit{ font-size:1.1rem; font-weight:700; color: var(--brand); margin-left:2px; }
.market-stat p{ font-size:.8rem; color: var(--text-faint); margin-top:10px; line-height:1.6; }

.goal-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.goal-card{ background: var(--surface); border:1px solid var(--border); border-radius:18px; padding:28px; text-align:center; }
.goal-card h4{ font-size:1.05rem; font-weight:800; color: var(--brand); margin-bottom:12px; }
.goal-card p{ font-size:.82rem; color: var(--text-dim); margin-bottom:18px; line-height:1.6; min-height:66px; }
.goal-target{ display:block; font-size:1.6rem; font-weight:800; margin-bottom:6px; }
.goal-card small{ font-size:.72rem; color: var(--text-faint); }

.aispm-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:28px; }
.aispm-card{ background: var(--surface); border:1px solid var(--border); border-radius:16px; padding:24px 18px; }
.aispm-card i{ font-size:1.3rem; color: var(--brand); margin-bottom:14px; display:block; }
.aispm-card h4{ font-size:.92rem; font-weight:700; margin-bottom:8px; }
.aispm-card p{ font-size:.78rem; color: var(--text-dim); line-height:1.6; }

.workflow-track{ display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; }
.wf-step{ background: var(--surface); border:1px solid var(--border); border-radius:16px; padding:22px; text-align:center; min-width:190px; }
.wf-step span{ font-size:.7rem; font-weight:700; color: var(--text-faint); text-transform:uppercase; letter-spacing:.03em; }
.wf-step h5{ font-size:1.1rem; font-weight:800; color: var(--brand); margin:8px 0; }
.wf-step p{ font-size:.78rem; color: var(--text-dim); line-height:1.6; }
.workflow-track > i{ color: var(--text-faint); font-size:1.2rem; }

/* ============================================================
   05. Reference groups
   ============================================================ */
.ref-group{ margin-bottom:44px; }
.ref-group-title{ font-size:1.1rem; font-weight:700; margin-bottom:22px; display:flex; align-items:center; gap:10px; }
.ref-group-title i{ color: var(--brand); }
.ref-card-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.ref-card{
  background: var(--surface); border:1px solid var(--border); border-radius:16px; padding:30px 18px 24px;
  text-align:center; position:relative; transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.ref-card:hover{ transform:translateY(-6px); border-color: rgba(var(--brand-rgb),0.4); box-shadow: var(--shadow); }
.ref-card p{ font-size:.88rem; font-weight:700; margin-top:4px; }
.ref-card-icon{
  width:56px; height:56px; margin:0 auto 14px; border-radius:14px; background: rgba(var(--brand-rgb),0.1);
  display:flex; align-items:center; justify-content:center; font-size:1.4rem; color: var(--brand);
}
.ref-tag{
  position:absolute; top:-10px; left:50%; transform:translateX(-50%);
  font-size:.66rem; font-weight:800; padding:4px 12px; border-radius:99px;
  background: var(--grad-brand); color:#fff;
}
.ref-tag-alt{ background: linear-gradient(135deg, var(--cyan), var(--brand-2)); }

/* ============================================================
   Footer helper classes
   ============================================================ */
.footer-addr{ font-size:.78rem !important; color: var(--text-faint) !important; margin-top:0 !important; margin-bottom:20px !important; line-height:1.6; }
.footer-phone{ display:flex; align-items:center; gap:8px; font-size:.88rem; color: var(--text-dim); font-weight:700; margin-top:4px; }
.footer-phone i{ color: var(--brand); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px){
  .main-nav{ display:none; }
  .hamburger{ display:flex; }
  .summary-grid{ grid-template-columns:1fr; }
  .evolution-track{ flex-direction:column; }
  .evolution-line{ width:2px; height:60px; }
  .evolution-line::before{ top:0; bottom:0; left:50%; right:auto; width:2px; height:auto; transform: translateX(-50%); background: linear-gradient(180deg, var(--border-strong), var(--brand)); }
  .evolution-tags{ display:none; }
  .alpha-grid{ grid-template-columns:repeat(2,1fr); }
  .compare-grid{ grid-template-columns:1fr; }
  .compare-arrow{ flex-direction:row; justify-content:center; }
  .diagram-wrap{ flex-direction:column; }
  .diagram-beam{ width:2px; height:40px; flex:none; }
  .diagram-beam::after{ left:-3px; top:0; animation-name:beamMoveV; }
  @keyframes beamMoveV{ 0%{ top:0%; opacity:0;} 10%{opacity:1;} 90%{opacity:1;} 100%{ top:100%; opacity:0;} }
  .feature-grid{ grid-template-columns:repeat(2,1fr); }
  .console-highlight{ grid-template-columns:1fr; }
  .vs-table{ grid-template-columns:1fr; }
  .vs-vs{ margin:0 auto; }
  .timeline-track{ grid-template-columns:repeat(2,1fr); row-gap:36px; }
  .timeline-track::before{ display:none; }
  .ax-grid{ grid-template-columns:1fr; }
  .ax-visual{ order:-1; }
  .ref-grid{ grid-template-columns:repeat(2,1fr); }
  .metric-strip{ grid-template-columns:repeat(2,1fr); }
  .footer-inner{ grid-template-columns:1fr; }
  .footer-links{ grid-template-columns:repeat(3,1fr); }

  /* New components */
  .evo5-track{ flex-wrap:wrap; }
  .evo5-item{ min-width:130px; flex:1 1 45%; }
  .evo5-arrow{ display:none; }
  .past-now-grid{ grid-template-columns:1fr; }
  .envdiag-grid{ grid-template-columns:1fr; }
  .envdiag-arrow{ transform:rotate(90deg); }
  .asis-tobe-grid{ grid-template-columns:1fr; }
  .at-arrow{ transform:rotate(90deg); text-align:center; }
  .zone-grid{ grid-template-columns:1fr; }
  .diff-grid{ grid-template-columns:repeat(2,1fr); }
  .customer-grid{ grid-template-columns:repeat(2,1fr); }
  .roadmap-track{ grid-template-columns:1fr; }
  .roadmap-arrow{ transform:rotate(90deg); justify-content:center; }
  .edge-grid{ grid-template-columns:1fr; }
  .edge3-grid{ grid-template-columns:1fr; }
  .vendor-compare{ grid-template-columns:1fr; }
  .vendor-necessity-grid{ grid-template-columns:1fr; }
  .idc-diagram{ flex-direction:column; }
  .idc-arrow{ transform:rotate(90deg); }
  .squad-diagram{ min-height:280px; }
  .gt-row{ grid-template-columns:1fr; gap:6px; }
  .global-summary{ grid-template-columns:1fr; }
  .reason-example{ flex-direction:column; }
  .reason-arrow{ transform:rotate(90deg); }
  .arch-grid{ flex-direction:column; }
  .arch-beam{ width:2px; height:30px; }
  .feature-detail-grid{ grid-template-columns:1fr; }
  .ztna-flow{ flex-direction:column; }
  .ztna-arrow{ transform:rotate(90deg); }
  .triple-note{ grid-template-columns:1fr; }
  .rbi-diagram{ flex-direction:column; }
  .rbi-links{ flex-direction:row; justify-content:center; align-items:center; gap:20px; }
  .rbi-feature-grid{ grid-template-columns:repeat(2,1fr); }
  .genai-flow{ flex-direction:column; }
  .ti-flow{ flex-direction:column; }
  .vzc-row{ flex-direction:column; text-align:center; }
  .vzc-label{ flex:none; align-items:center; }
  .vzc-divider{ display:none; }
  .tmv-grid{ grid-template-columns:1fr; }
  .limit-grid{ grid-template-columns:1fr; }
  .latconn-wrap{ grid-template-columns:1fr; }
  .latconn-compare{ flex-direction:column; }
  .latconn-path-primary{ margin:0; }
  .latconn-vs{ margin:-14px 0; }
  .strategy-grid{ grid-template-columns:1fr; }
  .manage-grid{ grid-template-columns:1fr; }
  .challenge-grid{ grid-template-columns:repeat(2,1fr); }
  .swgc-row{ grid-template-columns:1fr; }
  .swgc-cell{ border-right:none !important; }
  .swgc-cell-key{ padding-bottom:8px; }
  .market-grid{ grid-template-columns:1fr; }
  .goal-grid{ grid-template-columns:1fr; }
  .aispm-grid{ grid-template-columns:repeat(2,1fr); }
  .workflow-track{ flex-direction:column; }
  .workflow-track > i{ transform:rotate(90deg); }
  .ref-card-grid{ grid-template-columns:repeat(2,1fr); }
  .subtab-nav{ justify-content:flex-start; overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; padding-bottom:8px; }
}

@media (max-width: 640px){
  .hide-mobile{ display:none; }
  .hero-stats{ grid-template-columns:repeat(2,1fr); }
  .feature-grid{ grid-template-columns:1fr; }
  .ref-grid{ grid-template-columns:1fr; }
  .metric-strip{ grid-template-columns:1fr 1fr; }
  .form-row{ grid-template-columns:1fr; }
  .footer-links{ grid-template-columns:1fr; gap:32px; }
  .timeline-track{ grid-template-columns:1fr; }
  .header-actions .btn-sm{ display:none; }
  .section{ padding:80px 0; }
  .concept-diagram, .process-timeline, .console-highlight, .cta-form{ padding:28px 20px; }

  .evo5-item{ flex:1 1 100%; }
  .diff-grid{ grid-template-columns:1fr; }
  .customer-grid{ grid-template-columns:1fr; }
  .challenge-grid{ grid-template-columns:1fr; }
  .aispm-grid{ grid-template-columns:1fr; }
  .ref-card-grid{ grid-template-columns:1fr; }
  .evo5-wrap, .arch-diagram{ padding:28px 18px; }
  .lb-row{ grid-template-columns:70px 1fr 50px; font-size:.78rem; }
  .rbi-feature-grid{ grid-template-columns:1fr; }
  .rbi-container-inner{ width:130px; height:105px; }
}