/* ============================================
   NEXORA PROMO V2 — style.css
   Stitch Design System: Dark Navy + Purple/Blue
   Font: Manrope (Google Fonts)
   ============================================ */

/* === CSS VARIABLES === */
:root {
  --bg-base:        #080810;
  --bg-card:        #0f0f1c;
  --bg-card-hover:  #14142a;
  --bg-glass:       rgba(255,255,255,0.04);
  --bg-glass-hover: rgba(255,255,255,0.07);

  --color-purple:  #7c3aed;
  --color-blue:    #3b82f6;
  --color-cyan:    #06b6d4;
  --color-amber:   #f59e0b;
  --color-emerald: #10b981;
  --color-pink:    #ec4899;
  --color-violet:  #8b5cf6;
  --color-sky:     #0ea5e9;
  --color-teal:    #14b8a6;
  --color-orange:  #f97316;

  --text-primary:   #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted:     #475569;

  --border-subtle: rgba(255,255,255,0.08);
  --border-card:   rgba(255,255,255,0.06);

  --glow-purple: rgba(124,58,237,0.35);
  --glow-blue:   rgba(59,130,246,0.25);
  --glow-cyan:   rgba(6,182,212,0.25);

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --transition:      0.25s cubic-bezier(0.4,0,0.2,1);
  --transition-slow: 0.5s cubic-bezier(0.4,0,0.2,1);

  --font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --section-pad: clamp(80px,10vw,140px);
  --container: 1200px;
}

/* === RESET & BASE === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; max-width: 100%; }
body {
  font-family: var(--font);
  background: var(--bg-base);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
  max-width: 100%;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { font-family: var(--font); cursor: pointer; border: none; background: none; }

/* === CONTAINER === */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(20px,5vw,48px);
}

/* === GRID OVERLAY === */
.grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}

/* === GLOW ORBS === */
.glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}
.glow-orb--1 { width:500px; height:500px; background:var(--glow-purple); top:-100px; left:-100px; }
.glow-orb--2 { width:400px; height:400px; background:var(--glow-blue);   top:200px;  right:-80px; }
.glow-orb--3 { width:600px; height:400px; background:var(--glow-purple); top:50%; left:50%; transform:translate(-50%,-50%); }

/* === GRADIENT TEXT === */
.gradient-text { background: linear-gradient(135deg, var(--color-purple), var(--color-blue)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.gradient-text--purple { background: linear-gradient(135deg, #a855f7, var(--color-purple)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.gradient-text--blue   { background: linear-gradient(135deg, var(--color-blue), var(--color-cyan)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.gradient-text--cyan   { background: linear-gradient(135deg, var(--color-cyan), var(--color-emerald)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* === BUTTONS === */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font);
  font-weight: 600;
  border-radius: var(--radius-md);
  transition: all var(--transition);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}
.btn-primary { background: linear-gradient(135deg, var(--color-purple), var(--color-blue)); color:#fff; border:none; }
.btn-primary:hover { opacity:.85; transform:translateY(-1px); box-shadow:0 8px 24px var(--glow-purple); }
.btn-blue { background: linear-gradient(135deg, var(--color-blue), var(--color-cyan)); color:#fff; border:none; }
.btn-blue:hover { opacity:.85; transform:translateY(-1px); box-shadow:0 8px 24px var(--glow-blue); }
.btn-cyan { background: linear-gradient(135deg, var(--color-cyan), var(--color-emerald)); color:#fff; border:none; }
.btn-cyan:hover { opacity:.85; transform:translateY(-1px); box-shadow:0 8px 24px var(--glow-cyan); }
.btn-ghost { background:var(--bg-glass); color:var(--text-primary); border:1px solid var(--border-subtle); }
.btn-ghost:hover { background:var(--bg-glass-hover); border-color:rgba(255,255,255,0.15); transform:translateY(-1px); }
.btn-outline { background:transparent; color:var(--text-primary); border:1px solid var(--border-subtle); }
.btn-outline:hover { border-color:var(--color-purple); color:var(--color-purple); }
.btn-text { background:none; color:var(--text-secondary); padding:0; }
.btn-text:hover { color:var(--text-primary); }
.btn-disabled { opacity:.45; pointer-events:none; cursor:default; }
.btn-sm   { font-size:14px; padding:8px 18px; }
.btn-lg   { font-size:16px; padding:14px 28px; }
.btn-full { width:100%; justify-content:center; padding:12px; }

/* === SECTION COMMON === */
.section-header { text-align:center; margin-bottom:clamp(48px,6vw,72px); }
.section-tag {
  display:inline-block;
  font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--color-purple);
  background:rgba(124,58,237,0.1);
  border:1px solid rgba(124,58,237,0.25);
  padding:4px 14px; border-radius:100px; margin-bottom:20px;
}
.section-title { font-size:clamp(32px,4vw,52px); font-weight:800; line-height:1.15; margin-bottom:16px; letter-spacing:-.02em; }
.section-sub { font-size:18px; color:var(--text-secondary); max-width:520px; margin:0 auto; }

/* === FADE UP === */
.fade-up { opacity:0; transform:translateY(32px); transition:opacity .7s ease, transform .7s ease; }
.fade-up.visible { opacity:1; transform:translateY(0); }
.fade-up--delay { transition-delay:.15s; }

/* ============================================
   HEADER
   ============================================ */
.site-header {
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:18px 0;
  background:rgba(8,8,16,0.7);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid transparent;
  transition:border-color var(--transition), background var(--transition);
}
.site-header.scrolled { border-bottom-color:var(--border-subtle); background:rgba(8,8,16,0.9); }
.header-inner { display:flex; align-items:center; gap:32px; }
.logo { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.logo-mark {
  width:32px; height:32px;
  background:linear-gradient(135deg, var(--color-purple), var(--color-blue));
  border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:16px; color:#fff;
}
.logo-text { font-size:18px; font-weight:800; letter-spacing:-.03em; color:var(--text-primary); }
/* === 씨노우 로고 이미지 (교체 포인트: img/logo.png) === */
.logo-img { height:32px; width:auto; max-width:145px; object-fit:contain; display:block; }
.nav-links { display:flex; align-items:center; gap:28px; margin-left:auto; }
.nav-links a { font-size:15px; font-weight:500; color:var(--text-secondary); transition:color var(--transition); }
.nav-links a:hover { color:var(--text-primary); }
.header-inner .btn-primary { margin-left:8px; }
.nav-toggle { display:none; flex-direction:column; gap:5px; padding:4px; margin-left:auto; }
.nav-toggle span { display:block; width:22px; height:2px; background:var(--text-secondary); border-radius:2px; transition:all var(--transition); }

/* ============================================
   HERO SLIDER
   ============================================ */
.hero {
  position:relative;
  padding-top:calc(80px + 80px);
  padding-bottom:var(--section-pad);
  overflow:hidden;
}
.hero-slides { position:relative; }
.hero-slide { display:none; }
.hero-slide.active { display:block; animation:slideIn .55s cubic-bezier(0.22,1,0.36,1); }
@keyframes slideIn {
  from { opacity:0; transform:translateX(24px); }
  to   { opacity:1; transform:translateX(0); }
}

.hero-inner {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(40px,5vw,80px);
  align-items:center;
  position:relative; z-index:1;
}
.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600; color:var(--text-secondary);
  background:var(--bg-glass); border:1px solid var(--border-subtle);
  padding:6px 16px; border-radius:100px; margin-bottom:28px;
}
.hero-badge--blue { border-color:rgba(59,130,246,0.3); color:rgba(147,197,253,0.9); }
.hero-badge--cyan { border-color:rgba(6,182,212,0.3);  color:rgba(103,232,249,0.9); }
.badge-dot { width:8px; height:8px; background:var(--color-emerald); border-radius:50%; box-shadow:0 0 8px var(--color-emerald); animation:pulse-dot 2s infinite; }
.badge-dot--blue { background:var(--color-blue); box-shadow:0 0 8px var(--color-blue); }
.badge-dot--cyan { background:var(--color-cyan); box-shadow:0 0 8px var(--color-cyan); }
@keyframes pulse-dot { 0%,100%{opacity:1;} 50%{opacity:.4;} }

.hero-title { font-size:clamp(36px,4.5vw,64px); font-weight:800; line-height:1.1; letter-spacing:-.03em; margin-bottom:24px; }
.hero-sub { font-size:18px; color:var(--text-secondary); line-height:1.7; margin-bottom:36px; }
.hero-cta { display:flex; flex-wrap:wrap; gap:14px; }

/* Hero Nav */
.hero-nav {
  display:flex; align-items:center; justify-content:space-between;
  margin-top:40px; position:relative; z-index:2;
}
.hero-dots { display:flex; align-items:center; gap:10px; }
.hero-dot {
  width:8px; height:8px; border-radius:50%;
  background:rgba(255,255,255,0.2);
  border:none; padding:0; cursor:pointer;
  transition:all var(--transition);
}
/* 슬라이드 활성 Dot — JS가 --hero-dot-color 변수로 슬라이드별 포인트 컬러 주입 */
.hero-dot.active {
  width:32px; border-radius:4px;
  background:var(--hero-dot-color, var(--color-purple));
  transition:width var(--transition), background var(--transition);
}

/* Hero 슬라이드 카운터 */
.hero-slide-counter {
  display:flex; align-items:center; gap:6px;
  font-size:14px; font-weight:700; color:var(--text-muted);
  letter-spacing:.03em; user-select:none;
}
.hero-counter-cur { font-size:20px; font-weight:800; color:var(--text-primary); line-height:1; }
.hero-counter-sep { font-size:13px; color:var(--border-subtle); }
.hero-counter-tot { font-size:13px; }
.hero-arrows { display:flex; gap:8px; }
.hero-arrow {
  width:36px; height:36px; border-radius:50%;
  background:var(--bg-glass); border:1px solid var(--border-subtle);
  color:var(--text-secondary);
  display:flex; align-items:center; justify-content:center;
  transition:all var(--transition);
}
.hero-arrow:hover { background:var(--bg-glass-hover); color:var(--text-primary); border-color:rgba(255,255,255,0.15); }

/* Hero Preview Card */
.hero-preview { position:relative; }
.preview-glow {
  position:absolute; inset:-40px; border-radius:50%;
  background:radial-gradient(ellipse, var(--glow-purple) 0%, transparent 70%);
  pointer-events:none;
}
.preview-glow--blue { background:radial-gradient(ellipse, var(--glow-blue) 0%, transparent 70%); }
.preview-glow--cyan { background:radial-gradient(ellipse, var(--glow-cyan) 0%, transparent 70%); }
.preview-card {
  background:var(--bg-card); border:1px solid var(--border-card);
  border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:0 40px 80px rgba(0,0,0,0.5);
}
.preview-card--blue { border-color:rgba(59,130,246,0.2); }
.preview-card--cyan { border-color:rgba(6,182,212,0.2); }
.preview-bar {
  display:flex; align-items:center; gap:8px;
  padding:12px 16px;
  background:rgba(255,255,255,0.03); border-bottom:1px solid var(--border-card);
}
.dot { width:10px; height:10px; border-radius:50%; }
.dot--red    { background:#ff5f57; }
.dot--yellow { background:#febc2e; }
.dot--green  { background:#28c840; }
.preview-url { margin-left:8px; font-size:12px; color:var(--text-muted); font-family:monospace; }

/* Dashboard preview */
.preview-body--dashboard { display:flex; height:280px; }
.preview-sidebar {
  width:130px; border-right:1px solid var(--border-card);
  padding:12px 0; flex-shrink:0;
}
.sidebar-item {
  display:flex; align-items:center; gap:7px;
  padding:8px 14px; font-size:12px; font-weight:500; color:var(--text-muted);
  border-radius:var(--radius-sm); margin:2px 6px; cursor:default;
  transition:all var(--transition);
}
.sidebar-item.active { color:var(--color-purple); background:rgba(124,58,237,0.12); }
.preview-main { flex:1; padding:14px; display:flex; flex-direction:column; gap:12px; }
.preview-stat-row { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.stat-card { background:rgba(255,255,255,0.04); border:1px solid var(--border-card); border-radius:var(--radius-sm); padding:10px; }
.stat-label { font-size:10px; color:var(--text-muted); margin-bottom:4px; }
.stat-value { font-size:18px; font-weight:700; color:var(--text-primary); }
.stat-trend  { font-size:10px; color:var(--color-emerald); margin-top:2px; }
.preview-chart { display:flex; align-items:flex-end; gap:6px; height:70px; padding:0 4px; }
.chart-bar { flex:1; background:rgba(124,58,237,0.2); border-radius:4px 4px 0 0; }
.chart-bar.active { background:rgba(124,58,237,0.7); }
.preview-ai-row { display:flex; gap:8px; flex-wrap:wrap; }
.ai-chip { display:flex; align-items:center; gap:6px; font-size:11px; font-weight:600; color:var(--text-secondary); background:rgba(255,255,255,0.04); border:1px solid var(--border-card); padding:5px 10px; border-radius:100px; }
.ai-dot { width:6px; height:6px; background:var(--color-purple); border-radius:50%; animation:pulse-dot 1.5s infinite; }
.ai-dot--cyan { background:var(--color-cyan); }

/* Editor preview */
.preview-body--editor { display:flex; gap:0; height:280px; }
.editor-section-tree {
  width:160px; flex-shrink:0;
  border-right:1px solid var(--border-card);
  padding:14px 12px; overflow-y:auto;
}
.tree-title { font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); margin-bottom:10px; }
.tree-item {
  display:flex; align-items:center; gap:7px;
  padding:7px 8px; font-size:12px; color:var(--text-secondary);
  border-radius:var(--radius-sm); margin-bottom:3px; cursor:default;
  position:relative;
}
.tree-item--active { background:rgba(59,130,246,0.1); color:var(--color-blue); }
.tree-badge { margin-left:auto; font-size:9px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--color-blue); background:rgba(59,130,246,0.15); padding:2px 6px; border-radius:4px; }
.editor-theme-panel { flex:1; padding:14px 16px; display:flex; flex-direction:column; gap:10px; }
.theme-title { font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); margin-bottom:4px; }
.theme-row { display:flex; align-items:center; gap:10px; font-size:12px; }
.theme-label { color:var(--text-muted); width:48px; flex-shrink:0; }
.theme-value { color:var(--text-secondary); font-size:12px; }
.theme-swatches { display:flex; gap:6px; }
.swatch { width:16px; height:16px; border-radius:50%; cursor:pointer; }
.swatch--purple { background:var(--color-purple); }
.swatch--blue   { background:var(--color-blue); }
.swatch--cyan   { background:var(--color-cyan); }
.swatch--emerald{ background:var(--color-emerald); }
.swatch.active  { outline:2px solid #fff; outline-offset:2px; }
.editor-save-btn {
  margin-top:auto; padding:8px 14px; border-radius:var(--radius-sm);
  background:rgba(59,130,246,0.15); color:var(--color-blue);
  font-size:12px; font-weight:700; border:1px solid rgba(59,130,246,0.3);
  cursor:default;
}

/* AI + SEO 프리뷰 패널 (슬라이드 2, Stitch 시안 Screen 72b488cc 기반) */
.preview-body--ai-seo { display:flex; flex-direction:column; gap:0; height:280px; overflow:hidden; }
.ais-ai-panel { padding:14px 16px; border-bottom:1px solid var(--border-card); }
.ais-ai-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--color-blue); margin-bottom:8px; }
.ais-ai-lines { display:flex; flex-direction:column; gap:6px; }
.ais-line-bar { height:8px; background:rgba(59,130,246,0.12); border-radius:4px; }
.ais-seo-panel { padding:14px 16px; flex:1; display:flex; flex-direction:column; }
.ais-score-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.ais-score-num { font-size:28px; font-weight:800; color:var(--color-blue); }
.seo-tag--blue { background:rgba(59,130,246,0.12); color:var(--color-blue); }
.ais-footer-chip { margin-top:auto; padding-top:8px; border-top:1px solid var(--border-card); font-size:10px; font-weight:600; color:var(--color-blue); text-align:center; }
.ai-dot--blue { background:var(--color-blue) !important; box-shadow:0 0 8px var(--color-blue) !important; }

/* SEO & Ads preview */
.preview-body--seo { display:flex; flex-direction:column; gap:0; height:280px; overflow:hidden; }
.seo-score-card { padding:14px 16px; border-bottom:1px solid var(--border-card); }
.seo-score-label { font-size:10px; color:var(--text-muted); margin-bottom:4px; }
.seo-score-value { font-size:28px; font-weight:800; color:var(--color-cyan); margin-bottom:6px; }
.seo-score-bar { height:4px; background:rgba(255,255,255,0.06); border-radius:2px; margin-bottom:10px; }
.seo-score-fill { height:100%; background:linear-gradient(90deg, var(--color-cyan), var(--color-emerald)); border-radius:2px; }
.seo-tags { display:flex; flex-wrap:wrap; gap:6px; }
.seo-tag { font-size:10px; font-weight:600; padding:3px 8px; border-radius:4px; }
.seo-tag--green { background:rgba(16,185,129,0.15); color:var(--color-emerald); }
.seo-tag--amber { background:rgba(245,158,11,0.15); color:var(--color-amber); }
.ads-revenue-card { padding:14px 16px; flex:1; }
.ads-label { font-size:10px; color:var(--text-muted); margin-bottom:4px; }
.ads-value { font-size:20px; font-weight:800; color:var(--text-primary); margin-bottom:10px; }
.ads-chart { display:flex; align-items:flex-end; gap:5px; height:48px; margin-bottom:10px; }
.ads-bar { flex:1; background:rgba(6,182,212,0.2); border-radius:3px 3px 0 0; }
.ads-bar.active { background:rgba(6,182,212,0.7); }
.ads-chips { display:flex; gap:6px; }
.ads-chip { font-size:10px; font-weight:600; padding:3px 8px; border-radius:4px; background:rgba(6,182,212,0.1); color:var(--color-cyan); border:1px solid rgba(6,182,212,0.2); }

/* ============================================
   TRUST BAR
   ============================================ */
.trust-bar {
  background:rgba(255,255,255,0.02);
  border-top:1px solid var(--border-subtle);
  border-bottom:1px solid var(--border-subtle);
  padding:20px 0;
}
.trust-bar-inner {
  display:flex; align-items:center; justify-content:center;
  gap:clamp(24px,5vw,64px); flex-wrap:wrap;
}
.trust-stat { display:flex; align-items:center; gap:10px; }
.trust-stat svg { color:var(--color-purple); flex-shrink:0; }
.trust-stat--cyan   svg { color:var(--color-cyan); }
.trust-stat--emerald svg { color:var(--color-emerald); }
.trust-num { font-size:18px; font-weight:800; color:var(--text-primary); }
.trust-label { font-size:13px; color:var(--text-muted); }
.trust-divider { width:1px; height:32px; background:var(--border-subtle); flex-shrink:0; }

/* ============================================
   HOW IT WORKS
   ============================================ */
.how-it-works { padding:var(--section-pad) 0; }
.steps-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,3vw,32px);
  position:relative;
}
.step-card {
  background:var(--bg-glass);
  border:1px solid var(--border-card);
  border-radius:var(--radius-lg);
  padding:clamp(28px,3vw,40px);
  position:relative;
  transition:all var(--transition);
}
.step-card:hover { background:var(--bg-glass-hover); border-color:rgba(255,255,255,0.1); transform:translateY(-3px); }
.step-num {
  font-size:48px; font-weight:800; letter-spacing:-.04em;
  color:var(--step-color, var(--color-purple));
  opacity:.15; line-height:1; margin-bottom:20px;
}
.step-icon {
  width:52px; height:52px;
  background:rgba(124,58,237,0.1);
  border:1px solid rgba(124,58,237,0.2);
  border-radius:var(--radius-md);
  display:flex; align-items:center; justify-content:center;
  color:var(--step-color, var(--color-purple));
  margin-bottom:20px;
  background:color-mix(in srgb, var(--step-color) 12%, transparent);
  border-color:color-mix(in srgb, var(--step-color) 25%, transparent);
}
.step-card h3 { font-size:18px; font-weight:700; margin-bottom:12px; color:var(--text-primary); }
.step-card p  { font-size:14px; color:var(--text-secondary); line-height:1.75; }
.step-connector {
  position:absolute; top:50%; right:-20px;
  transform:translateY(-50%);
  color:var(--text-muted); z-index:2;
}
.step-card:last-child .step-connector { display:none; }

/* ============================================
   FEATURES
   ============================================ */
.features {
  padding:var(--section-pad) 0;
  background:linear-gradient(180deg, var(--bg-base) 0%, #0b0b18 100%);
}
.features-layout {
  display:grid;
  grid-template-columns:360px 1fr;
  gap:clamp(32px,4vw,60px);
  align-items:start;
}
.feature-tabs { display:flex; flex-direction:column; gap:0; }
.feature-tab {
  position:relative; display:flex; align-items:flex-start; gap:13px;
  padding:14px 16px; border-radius:var(--radius-md);
  cursor:pointer; transition:all var(--transition);
  border:1px solid transparent; margin-bottom:3px; overflow:hidden;
}
.feature-tab:hover { background:var(--bg-glass); }
.feature-tab.active { background:var(--bg-glass); border-color:var(--border-subtle); }
.feature-tab.active::before {
  content:''; position:absolute; left:0; top:10%; bottom:10%;
  width:3px; border-radius:0 3px 3px 0;
  background:var(--tab-color, var(--color-purple));
}
.tab-icon-wrap {
  width:32px; height:32px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-glass); border:1px solid var(--border-card);
  border-radius:var(--radius-sm);
  color:var(--text-muted);
  transition:all var(--transition);
}
.feature-tab.active .tab-icon-wrap {
  background:color-mix(in srgb, var(--tab-color, var(--color-purple)) 12%, transparent);
  border-color:color-mix(in srgb, var(--tab-color, var(--color-purple)) 28%, transparent);
  color:var(--tab-color, var(--color-purple));
}
.tab-content { flex:1; min-width:0; }
.tab-title { display:block; font-size:14px; font-weight:700; color:var(--text-primary); margin-bottom:3px; }
.tab-desc  { display:block; font-size:12px; color:var(--text-muted); }
.feature-tab.active .tab-desc { color:var(--text-secondary); }
.tab-progress { position:absolute; bottom:0; left:0; right:0; height:2px; background:rgba(255,255,255,0.05); display:none; }
.feature-tab.active .tab-progress { display:block; }
.tab-progress-bar { height:100%; width:0%; background:var(--tab-color, var(--color-purple)); border-radius:2px; }

/* Feature Preview */
.feature-preview { position:sticky; top:100px; }
.fp-glow {
  position:absolute; inset:-60px; border-radius:50%;
  filter:blur(60px); pointer-events:none; opacity:.4;
  background:var(--glow-purple);
  transition:background var(--transition-slow);
}
.fp-card {
  background:var(--bg-card); border:1px solid var(--border-card);
  border-radius:var(--radius-xl); padding:clamp(24px,3vw,36px);
  position:relative; z-index:1;
  transition:border-color var(--transition-slow);
}
.fp-header { display:flex; align-items:center; gap:16px; margin-bottom:20px; }
.fp-icon-wrap {
  width:52px; height:52px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-glass); border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);
  transition:background var(--transition-slow), border-color var(--transition-slow);
}
.fp-title    { font-size:20px; font-weight:800; color:var(--text-primary); margin-bottom:4px; }
.fp-subtitle { font-size:13px; color:var(--text-secondary); }
.fp-panel { margin-bottom:20px; border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--border-card); min-height:200px; background:rgba(0,0,0,0.35); }
.fp-desc { font-size:14px; color:var(--text-secondary); line-height:1.75; }

/* FP Panel Variants */
.fpp-toolbar {
  display:flex; align-items:center; gap:6px;
  padding:10px 14px; background:rgba(255,255,255,0.03);
  border-bottom:1px solid var(--border-card);
}
.fpp-btn { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.12); }
.fpp-body { padding:18px; }

/* Design Editor panel */
.fpp-design { display:flex; gap:12px; height:200px; }
.fpp-tree   { width:140px; flex-shrink:0; display:flex; flex-direction:column; gap:5px; }
.fpp-tree-item {
  display:flex; align-items:center; gap:6px; padding:6px 10px;
  font-size:11px; color:var(--text-secondary); border-radius:5px;
  background:rgba(255,255,255,0.03);
}
.fpp-tree-item.active-item { background:rgba(124,58,237,0.12); color:var(--color-purple); border:1px solid rgba(124,58,237,0.25); }
.fpp-drag-handle { width:10px; height:10px; flex-shrink:0; opacity:.4; }
.fpp-theme { flex:1; display:flex; flex-direction:column; gap:8px; }
.fpp-swatch-row { display:flex; gap:6px; }
.fpp-swatch { width:18px; height:18px; border-radius:50%; }
.fpp-font-row { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--text-secondary); }
.fpp-font-tag { background:rgba(59,130,246,0.1); color:var(--color-blue); border:1px solid rgba(59,130,246,0.2); padding:2px 8px; border-radius:4px; font-size:10px; font-weight:700; }
.fpp-save { margin-top:auto; padding:7px 12px; background:rgba(124,58,237,0.15); color:var(--color-purple); border:1px solid rgba(124,58,237,0.3); border-radius:6px; font-size:11px; font-weight:700; cursor:default; text-align:center; }

/* AI Writing panel */
.fpp-ai { display:flex; flex-direction:column; gap:10px; height:200px; }
.fpp-ai-title { height:16px; background:linear-gradient(90deg,rgba(59,130,246,0.5),rgba(6,182,212,0.2),transparent); border-radius:4px; width:70%; }
.fpp-ai-kw { display:flex; gap:6px; flex-wrap:wrap; }
.fpp-kw-chip { font-size:10px; font-weight:600; padding:3px 8px; border-radius:4px; background:rgba(59,130,246,0.1); color:var(--color-blue); border:1px solid rgba(59,130,246,0.2); }
.fpp-ai-lines { display:flex; flex-direction:column; gap:7px; flex:1; }
.fpp-line { height:10px; background:rgba(255,255,255,0.06); border-radius:4px; }
.fpp-line.s70 { width:70%; }
.fpp-line.s85 { width:85%; }
.fpp-line.s55 { width:55%; }
.fpp-line.s90 { width:90%; }
.fpp-ai-chip { display:flex; align-items:center; gap:7px; font-size:12px; line-height:1.5; color:var(--color-blue); }
.fpp-ai-dot  { width:7px; height:7px; background:var(--color-blue); border-radius:50%; animation:pulse-dot 1.5s infinite; flex-shrink:0; }

/* SEO panel */
.fpp-seo { display:flex; flex-direction:column; gap:10px; height:200px; }
.fpp-seo-score { display:flex; align-items:center; gap:12px; }
.fpp-seo-num { font-size:36px; font-weight:800; color:var(--color-cyan); line-height:1; }
.fpp-seo-info { flex:1; }
.fpp-seo-bar-bg { height:5px; background:rgba(255,255,255,0.07); border-radius:3px; margin-bottom:6px; }
.fpp-seo-bar-fill { height:100%; background:linear-gradient(90deg,var(--color-cyan),var(--color-emerald)); border-radius:3px; }
.fpp-seo-chips { display:flex; flex-wrap:wrap; gap:5px; }
.fpp-seo-chip { font-size:10px; font-weight:600; padding:3px 7px; border-radius:4px; }
.fpp-chip-green  { background:rgba(16,185,129,0.12); color:var(--color-emerald); }
.fpp-chip-amber  { background:rgba(245,158,11,0.12);  color:var(--color-amber); }
.fpp-sitemap { display:flex; flex-direction:column; gap:5px; flex:1; }
.fpp-sitemap-item { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--text-secondary); }
.fpp-sm-dot { width:6px; height:6px; border-radius:50%; background:var(--color-emerald); flex-shrink:0; }
.fpp-sm-dot.pending { background:var(--color-amber); }

/* Ads panel */
.fpp-ads { display:flex; flex-direction:column; gap:10px; height:200px; }
.fpp-ads-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.fpp-slot { background:rgba(245,158,11,0.08); border:1px dashed rgba(245,158,11,0.3); border-radius:6px; padding:8px; text-align:center; }
.fpp-slot-label { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--color-amber); }
.fpp-slot-size  { font-size:10px; color:var(--text-muted); margin-top:2px; }
.fpp-ads-stats { display:flex; gap:10px; }
.fpp-ads-stat { flex:1; background:rgba(255,255,255,0.04); border-radius:6px; padding:8px; }
.fpp-ads-stat-label { font-size:9px; color:var(--text-muted); }
.fpp-ads-stat-val   { font-size:14px; font-weight:700; color:var(--color-amber); }

/* Meta panel */
.fpp-meta { display:flex; flex-direction:column; gap:8px; height:200px; }
.fpp-meta-row { display:flex; flex-direction:column; gap:4px; }
.fpp-meta-label { font-size:10px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.08em; }
.fpp-meta-val   { font-size:11px; color:var(--text-secondary); background:rgba(255,255,255,0.04); border-radius:4px; padding:5px 8px; border:1px solid var(--border-card); }
.fpp-meta-tags  { display:flex; flex-wrap:wrap; gap:5px; }
.fpp-meta-tag   { font-size:10px; font-weight:600; padding:3px 7px; border-radius:4px; background:rgba(16,185,129,0.12); color:var(--color-emerald); }

/* Live Edit panel */
.fpp-live { display:grid; grid-template-columns:1fr 1fr; gap:6px; height:200px; }
.fpp-editor-pane { background:rgba(255,255,255,0.03); border-radius:6px; padding:10px; display:flex; flex-direction:column; gap:6px; overflow:hidden; }
.fpp-pane-label { font-size:9px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); margin-bottom:2px; }
.fpp-edit-line  { height:9px; background:rgba(255,255,255,0.07); border-radius:3px; }
.fpp-edit-line.active-line { background:rgba(236,72,153,0.4); }
.fpp-preview-pane { background:rgba(0,0,0,0.3); border-radius:6px; overflow:hidden; display:flex; flex-direction:column; }
.fpp-preview-header { height:24px; background:rgba(236,72,153,0.15); display:flex; align-items:center; padding:0 8px; border-bottom:1px solid rgba(236,72,153,0.2); }
.fpp-preview-title  { font-size:10px; color:var(--color-pink); font-weight:700; }
.fpp-preview-body   { flex:1; padding:8px; display:flex; flex-direction:column; gap:5px; }
.fpp-preview-line   { height:8px; background:rgba(255,255,255,0.1); border-radius:3px; }
.fpp-preview-badge  { background:rgba(236,72,153,0.15); color:var(--color-pink); font-size:9px; font-weight:700; padding:2px 7px; border-radius:3px; width:fit-content; }

/* Category panel */
.fpp-cat { display:flex; flex-direction:column; gap:6px; height:200px; }
.fpp-cat-item { display:flex; align-items:center; gap:7px; padding:7px 10px; font-size:12px; color:var(--text-secondary); border-radius:5px; background:rgba(255,255,255,0.03); }
.fpp-cat-item.cat-active { color:var(--color-violet); background:rgba(139,92,246,0.1); }
.fpp-cat-sub { padding-left:20px; font-size:11px; color:var(--text-muted); }
.fpp-cat-count { margin-left:auto; font-size:10px; background:rgba(255,255,255,0.07); padding:2px 6px; border-radius:3px; }

/* Admin panel */
.fpp-admin { display:flex; flex-direction:column; gap:8px; height:200px; }
.fpp-role-row { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:6px; background:rgba(255,255,255,0.03); }
.fpp-role-badge { font-size:9px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:3px 7px; border-radius:4px; }
.fpp-role-admin  { background:rgba(14,165,233,0.15); color:var(--color-sky); }
.fpp-role-editor { background:rgba(59,130,246,0.15); color:var(--color-blue); }
.fpp-role-writer { background:rgba(139,92,246,0.15); color:var(--color-violet); }
.fpp-role-name   { font-size:12px; color:var(--text-secondary); flex:1; }
.fpp-role-status { width:7px; height:7px; border-radius:50%; background:var(--color-emerald); }
.fpp-role-status.offline { background:var(--text-muted); }

/* Automation panel */
.fpp-auto { display:flex; flex-direction:column; gap:8px; height:200px; }
.fpp-auto-item { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:6px; background:rgba(255,255,255,0.03); }
.fpp-auto-icon { width:26px; height:26px; border-radius:5px; display:flex; align-items:center; justify-content:center; background:rgba(20,184,166,0.12); color:var(--color-teal); flex-shrink:0; }
.fpp-auto-title { font-size:12px; color:var(--text-secondary); flex:1; }
.fpp-toggle { width:28px; height:15px; border-radius:8px; background:var(--color-teal); position:relative; flex-shrink:0; }
.fpp-toggle::after { content:''; position:absolute; right:2px; top:2px; width:11px; height:11px; border-radius:50%; background:#fff; }
.fpp-toggle.off { background:rgba(255,255,255,0.15); }
.fpp-toggle.off::after { right:auto; left:2px; }

/* Realtime panel */
.fpp-rt { display:flex; flex-direction:column; gap:8px; height:200px; }
.fpp-rt-status { display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:6px; background:rgba(249,115,22,0.08); border:1px solid rgba(249,115,22,0.2); }
.fpp-rt-dot { width:8px; height:8px; border-radius:50%; background:var(--color-orange); box-shadow:0 0 8px var(--color-orange); animation:pulse-dot 1s infinite; }
.fpp-rt-label { font-size:12px; color:var(--color-orange); font-weight:600; }
.fpp-rt-log { flex:1; display:flex; flex-direction:column; gap:5px; overflow:hidden; }
.fpp-rt-entry { display:flex; align-items:center; gap:8px; font-size:11px; color:var(--text-secondary); }
.fpp-rt-time { color:var(--text-muted); font-size:10px; width:50px; flex-shrink:0; font-family:monospace; }
.fpp-rt-event { flex:1; }
.fpp-rt-badge { font-size:9px; font-weight:700; padding:2px 6px; border-radius:3px; }
.fpp-rt-badge.ok     { background:rgba(16,185,129,0.15); color:var(--color-emerald); }
.fpp-rt-badge.update { background:rgba(249,115,22,0.15); color:var(--color-orange); }

/* ============================================
   STRENGTHS
   ============================================ */
.strengths { padding:var(--section-pad) 0; }
.strengths-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.strength-card {
  background:var(--bg-glass); border:1px solid var(--border-card);
  border-radius:var(--radius-lg); padding:clamp(24px,3vw,36px);
  transition:all var(--transition);
}
.strength-card:hover { background:var(--bg-glass-hover); border-color:rgba(124,58,237,0.25); transform:translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,0.3); }
.sc-icon {
  width:48px; height:48px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(124,58,237,0.12); border:1px solid rgba(124,58,237,0.2);
  border-radius:var(--radius-md); margin-bottom:20px;
  color:var(--color-purple); transition:background var(--transition);
}
.strength-card:hover .sc-icon { background:rgba(124,58,237,0.2); }
.strength-card h3 { font-size:18px; font-weight:700; margin-bottom:10px; color:var(--text-primary); }
.strength-card p  { font-size:14px; color:var(--text-secondary); line-height:1.75; }

/* ============================================
   PRICING
   ============================================ */
.pricing { padding:var(--section-pad) 0; position:relative; overflow:hidden; }
.pricing-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:16px; align-items:start;
}
.pricing-card {
  background:var(--bg-glass); border:1px solid var(--border-card);
  border-radius:var(--radius-lg); padding:28px 24px;
  display:flex; flex-direction:column; gap:16px;
  transition:all var(--transition); position:relative;
}
.pricing-card:hover { border-color:rgba(255,255,255,0.12); transform:translateY(-2px); }
.pricing-card--featured { border-color:rgba(124,58,237,0.4); background:rgba(124,58,237,0.07); box-shadow:0 0 40px rgba(124,58,237,0.15); }
.pricing-card--featured:hover { box-shadow:0 0 60px rgba(124,58,237,0.25); }
.pricing-card--coming { opacity:.8; }
.plan-badge {
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:linear-gradient(135deg,var(--color-purple),var(--color-blue));
  color:#fff; font-size:11px; font-weight:700; letter-spacing:.06em;
  padding:4px 16px; border-radius:100px;
}
.plan-coming-badge {
  display:inline-block;
  font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--color-amber); background:rgba(245,158,11,0.1);
  border:1px solid rgba(245,158,11,0.25); padding:3px 10px; border-radius:100px;
  width:fit-content;
}
.plan-name  { font-size:16px; font-weight:700; color:var(--text-primary); }
.plan-price { display:flex; align-items:baseline; gap:4px; }
.price-amount { font-size:28px; font-weight:800; color:var(--text-primary); }
.price-unit   { font-size:13px; color:var(--text-muted); }
.plan-desc { font-size:13px; color:var(--text-secondary); padding-bottom:16px; border-bottom:1px solid var(--border-subtle); }
.plan-features { display:flex; flex-direction:column; gap:10px; flex:1; }
.plan-features li { font-size:14px; color:var(--text-secondary); display:flex; align-items:center; gap:8px; }
.plan-features li::before {
  content:''; width:14px; height:14px; flex-shrink:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M2 7l3.5 3.5L12 4' stroke='%237c3aed' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain;
}
.pricing-note {
  display:flex; align-items:center; gap:8px;
  font-size:13px; color:var(--text-muted);
  max-width:600px; margin:32px auto 0; text-align:center; justify-content:center;
  line-height:1.6;
}
.pricing-note svg { flex-shrink:0; color:var(--text-muted); }

/* ============================================
   FAQ
   ============================================ */
.faq { padding:var(--section-pad) 0; }
.faq-list { max-width:760px; margin:0 auto; }
.faq-item  { border-bottom:1px solid var(--border-subtle); }
.faq-q {
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:22px 0; font-size:17px; font-weight:600; color:var(--text-primary);
  text-align:left; transition:color var(--transition);
}
.faq-q:hover { color:var(--color-purple); }
.faq-icon {
  width:24px; height:24px; border:1px solid var(--border-subtle); border-radius:50%;
  flex-shrink:0; display:flex; align-items:center; justify-content:center;
  position:relative; transition:all var(--transition);
}
.faq-icon::before, .faq-icon::after { content:''; position:absolute; background:var(--text-secondary); border-radius:1px; transition:all var(--transition); }
.faq-icon::before { width:10px; height:1.5px; }
.faq-icon::after  { width:1.5px; height:10px; }
.faq-q[aria-expanded="true"] .faq-icon { border-color:var(--color-purple); background:rgba(124,58,237,0.1); }
.faq-q[aria-expanded="true"] .faq-icon::before { background:var(--color-purple); }
.faq-q[aria-expanded="true"] .faq-icon::after  { background:var(--color-purple); transform:rotate(90deg); opacity:0; }
.faq-a { overflow:hidden; }
.faq-a p { padding:0 0 22px; font-size:15px; color:var(--text-secondary); line-height:1.8; }

/* ============================================
   INSIGHTS
   ============================================ */
.insights-section { padding:var(--section-pad) 0; background:linear-gradient(180deg, #0b0b18 0%, var(--bg-base) 100%); }
.insights-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.insight-card {
  display:flex; flex-direction:column; gap:14px;
  background:var(--bg-glass); border:1px solid var(--border-card);
  border-radius:var(--radius-lg); padding:clamp(24px,3vw,36px);
  transition:all var(--transition);
  text-decoration:none; color:inherit;
}
.insight-card:hover { background:var(--bg-glass-hover); border-color:rgba(124,58,237,0.25); transform:translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,0.3); }
.insight-icon {
  width:48px; height:48px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(124,58,237,0.12); border:1px solid rgba(124,58,237,0.2);
  border-radius:var(--radius-md); color:var(--color-purple);
}
.insight-icon--cyan  { background:rgba(6,182,212,0.12);  border-color:rgba(6,182,212,0.2);  color:var(--color-cyan); }
.insight-icon--amber { background:rgba(245,158,11,0.12); border-color:rgba(245,158,11,0.2); color:var(--color-amber); }
.insight-card h3 { font-size:17px; font-weight:700; color:var(--text-primary); }
.insight-card p  { font-size:14px; color:var(--text-secondary); line-height:1.7; flex:1; }
.insight-link { font-size:13px; font-weight:700; color:var(--color-purple); transition:color var(--transition); }
.insight-link--cyan  { color:var(--color-cyan); }
.insight-link--amber { color:var(--color-amber); }
.insight-card:hover .insight-link { opacity:.8; }

/* ============================================
   FINAL CTA
   ============================================ */
.final-cta { padding:var(--section-pad) 0; }
.cta-card {
  position:relative; overflow:hidden;
  background:var(--bg-card); border:1px solid rgba(124,58,237,0.2);
  border-radius:var(--radius-xl); padding:clamp(48px,7vw,96px);
  text-align:center;
}
.cta-glow {
  position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 0%, rgba(124,58,237,0.2) 0%, transparent 60%);
  pointer-events:none;
}
.cta-title { font-size:clamp(32px,4vw,52px); font-weight:800; line-height:1.15; letter-spacing:-.02em; margin:16px 0 20px; }
.cta-sub   { font-size:18px; color:var(--text-secondary); line-height:1.75; margin-bottom:40px; }
.cta-buttons { display:flex; flex-wrap:wrap; gap:16px; justify-content:center; align-items:center; }

/* ============================================
   FOOTER
   ============================================ */
.site-footer { border-top:1px solid var(--border-subtle); padding-top:60px; padding-bottom:32px; }
.footer-inner { display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; margin-bottom:48px; }
.footer-brand { max-width:280px; }
.footer-brand .logo { margin-bottom:16px; }
.footer-brand p { font-size:14px; color:var(--text-muted); line-height:1.7; }
.footer-links { display:flex; gap:48px; }
.footer-col { display:flex; flex-direction:column; gap:12px; }
.footer-col-title { font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); margin-bottom:4px; }
.footer-col a { font-size:14px; color:var(--text-secondary); transition:color var(--transition); }
.footer-col a:hover { color:var(--text-primary); }
.footer-bottom {
  display:flex; justify-content:space-between; align-items:center;
  font-size:13px; color:var(--text-muted);
  padding-top:24px; border-top:1px solid var(--border-subtle);
  flex-wrap:wrap; gap:8px;
}

/* ============================================
   RESPONSIVE — TABLET (max 1024px)
   ============================================ */
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns:1fr; }
  .hero-preview { max-width:600px; margin:0 auto; }
  .features-layout { grid-template-columns:1fr; }
  .feature-preview { position:static; }
  .feature-tabs { flex-direction:row; flex-wrap:wrap; gap:8px; }
  .feature-tab { flex:0 0 calc(50% - 4px); }
  .strengths-grid { grid-template-columns:repeat(2,1fr); }
  .pricing-grid { grid-template-columns:repeat(2,1fr); }
  .insights-grid { grid-template-columns:repeat(2,1fr); }
  .steps-grid { grid-template-columns:1fr; gap:24px; }
  .step-connector { display:none; }
}

/* ============================================
   RESPONSIVE — MOBILE (max 768px)
   ============================================ */
@media (max-width: 768px) {
  :root { --section-pad: 64px; }

  .nav-links { display:none; }
  .nav-links.open {
    display:flex; flex-direction:column;
    position:fixed; top:0; left:0; right:0; bottom:0;
    background:rgba(8,8,16,0.97); backdrop-filter:blur(20px);
    align-items:center; justify-content:center; gap:32px; z-index:99;
  }
  .nav-links.open a { font-size:24px; font-weight:700; }
  .header-inner .btn-primary { display:none !important; }
  /* 모바일 헤더: overflow hidden 복원 + 44px nav-toggle 고정 확보 */
  .site-header { overflow: hidden; }
  .header-inner { width: 100%; gap: 0; min-width: 0; }
  .header-inner .logo { flex: 1 1 0% !important; min-width: 0; max-width: calc(100% - 52px); overflow: hidden; }
  .header-inner .logo-img { height: 28px; width: auto; max-width: 100%; }
  .nav-toggle {
    flex: 0 0 44px !important;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    padding: 0;
    z-index: 201;
  }
  .nav-toggle.active span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
  .nav-toggle.active span:nth-child(2) { opacity:0; }
  .nav-toggle.active span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

  .hero-inner { gap:40px; }
  .hero-title { font-size:clamp(32px,8vw,48px); }
  .hero-sub   { font-size:16px; }
  .hero-cta   { flex-direction:column; }
  .hero-nav   { margin-top:24px; }

  .trust-bar-inner { gap:20px; }
  .trust-divider { display:none; }
  .trust-stat { flex-direction:column; text-align:center; }

  /* 핵심기능 모바일: 컨트롤러 상단 수평 스크롤 + 콘텐츠 바로 아래 (Stitch Screen 4063629a 기반) */
  .features-layout { gap:0; }
  .feature-tabs {
    flex-direction:row;
    overflow-x:auto;
    gap:6px;
    padding-bottom:10px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .feature-tabs::-webkit-scrollbar { display:none; }
  .feature-tab {
    flex:0 0 auto;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:4px;
    padding:8px 10px;
    min-width:74px;
    margin-bottom:0;
  }
  .feature-tab::before { display:none; }
  .feature-tab.active::before { display:none; }
  .feature-tab.active::after {
    content:'';
    position:absolute;
    bottom:0; left:15%; right:15%;
    height:2px;
    border-radius:2px 2px 0 0;
    background:var(--tab-color, var(--color-purple));
  }
  .feature-tab .tab-desc { display:none; }
  .feature-tab .tab-title { font-size:10px; white-space:nowrap; }
  .feature-tab .tab-icon-wrap { width:26px; height:26px; }
  .tab-progress { display:none !important; }
  .feature-preview { margin-top:4px; position:static; }

  .strengths-grid { grid-template-columns:1fr; }
  .pricing-grid   { grid-template-columns:1fr; }
  .insights-grid  { grid-template-columns:1fr; }

  .faq-q { font-size:15px; }

  .cta-card { padding:40px 24px; }
  .cta-buttons { flex-direction:column; width:100%; }
  .cta-buttons .btn-lg { width:100%; justify-content:center; }

  /* 섹션 가로 overflow 방지 — glow orb 및 절대 요소 clip */
  .how-it-works,
  .features,
  .strengths,
  .seeknow-section { overflow: clip; }

  /* 모바일 가독성 개선 */
  .fp-desc { font-size:15px; line-height:1.85; }
  .fp-subtitle { font-size:14px; }
  .fp-title { font-size:18px; }

  .footer-inner { flex-direction:column; }
  .footer-links { flex-direction:column; gap:32px; }
  .footer-bottom { flex-direction:column; text-align:center; }

  .seeknow-grid { grid-template-columns:1fr; }
}

/* ============================================
   MOBILE NAV — BACKDROP (body-level)
   ============================================ */
.nav-backdrop {
  display:none;
  position:fixed; inset:0;
  background:rgba(0,0,0,0.65);
  z-index:499;
  cursor:pointer;
}
.nav-backdrop.open { display:block; }

/* ============================================
   MOBILE NAV — DRAWER (body-level, z-index:500)
   ============================================ */
.mobile-nav-drawer {
  position:fixed; top:0; left:0; right:0; bottom:0;
  z-index:500;
  background:#0d0d1a;
  display:flex; flex-direction:column;
  transform:translateX(100%);
  transition:transform 0.3s cubic-bezier(0.4,0,0.2,1), visibility 0.3s;
  visibility:hidden;
  -webkit-overflow-scrolling:touch;
}
.mobile-nav-drawer.open {
  transform:translateX(0);
  visibility:visible;
}

/* Drawer header row: logo + close button */
.mobile-nav-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 24px;
  border-bottom:1px solid rgba(255,255,255,0.07);
  flex-shrink:0;
}
.nav-drawer-close {
  width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.15);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-secondary);
  flex-shrink:0;
  transition:color var(--transition), border-color var(--transition);
}
.nav-drawer-close:hover {
  color:var(--text-primary);
  border-color:rgba(255,255,255,0.35);
}

/* Drawer nav items */
.mobile-nav-items {
  flex:1; display:flex; flex-direction:column; justify-content:center;
  padding:0 32px;
  overflow-y:auto;
}
.mobile-nav-items a {
  display:block; padding:18px 0;
  font-size:20px; font-weight:600; color:#e2e8f0;
  border-bottom:1px solid rgba(255,255,255,0.06);
  text-align:center; text-decoration:none;
  transition:color var(--transition);
}
.mobile-nav-items a:last-child { border-bottom:none; }
.mobile-nav-items a:hover { color:#fff; }

/* Drawer footer CTA */
.mobile-nav-footer {
  padding:24px 24px calc(env(safe-area-inset-bottom, 0px) + 40px);
  flex-shrink:0;
}
.mobile-nav-cta {
  display:flex; width:100%; justify-content:center;
  padding:16px; font-size:16px; font-weight:600;
  border-radius:12px;
  text-decoration:none;
}

/* Keep desktop nav-links hidden on mobile (drawer replaces it) */
@media (max-width: 768px) {
  .nav-links { display:none !important; }
  .nav-toggle { z-index:200; position:relative; display:flex; }
}

/* ============================================
   FAQ — ALWAYS OPEN CARDS
   ============================================ */
.faq-item { display:none; }  /* hide old accordion fallback */
.faq-card {
  background:var(--bg-card);
  border:1px solid var(--border-subtle);
  border-left:3px solid var(--color-purple);
  border-radius:var(--radius-lg);
  padding:24px 28px;
  margin-bottom:12px;
  transition:border-color var(--transition), box-shadow var(--transition);
}
.faq-card:hover {
  border-left-color:var(--color-blue);
  box-shadow:0 4px 24px rgba(124,58,237,0.08);
}
.faq-card-q {
  font-size:17px; font-weight:700; color:var(--text-primary);
  margin-bottom:10px; line-height:1.5;
}
.faq-card-a {
  font-size:15px; color:var(--text-secondary); line-height:1.8;
}

/* ============================================
   SEEKNOW CREDIBILITY SECTION
   ============================================ */
.seeknow-section { padding:var(--section-pad) 0; background:linear-gradient(180deg, var(--bg-base) 0%, #0b0b18 100%); }
.seeknow-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:48px;
}
.seeknow-card {
  background:var(--bg-card);
  border:1px solid var(--border-subtle);
  border-top:3px solid var(--color-purple);
  border-radius:var(--radius-lg);
  padding:28px 24px;
  display:flex; align-items:flex-start; gap:16px;
  transition:border-top-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.seeknow-card:hover {
  border-top-color:var(--color-blue);
  transform:translateY(-3px);
  box-shadow:0 8px 32px rgba(59,130,246,0.1);
}
.seeknow-icon {
  width:44px; height:44px; border-radius:10px; flex-shrink:0;
  background:rgba(124,58,237,0.12);
  display:flex; align-items:center; justify-content:center;
  color:var(--color-purple);
}
.seeknow-card-body h3 { font-size:16px; font-weight:700; color:var(--text-primary); margin-bottom:6px; }
.seeknow-card-body p  { font-size:14px; color:var(--text-secondary); line-height:1.6; }
.seeknow-caption {
  text-align:center; font-size:14px; color:var(--text-muted);
  margin-top:40px; letter-spacing:.02em;
}

/* ============================================
   TOP BUTTON
   ============================================ */
.top-btn {
  position:fixed; bottom:32px; right:32px;
  width:48px; height:48px; border-radius:50%;
  background:linear-gradient(135deg, var(--color-purple), var(--color-blue));
  color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 20px rgba(124,58,237,0.45);
  z-index:90; opacity:0; pointer-events:none;
  transition:opacity 0.3s, transform 0.3s;
  transform:translateY(12px);
}
.top-btn.visible {
  opacity:1; pointer-events:auto; transform:translateY(0);
}
.top-btn:hover {
  box-shadow:0 6px 28px rgba(124,58,237,0.65);
  transform:translateY(-2px);
}

/* ============================================
   FOOTER — COMPANY INFO
   ============================================ */
.footer-company {
  padding:24px 0 16px;
  border-top:1px solid var(--border-subtle);
  margin-top:0;
}
.footer-company p {
  font-size:12px; color:var(--text-muted); line-height:1.8;
  margin:0 0 4px;
}
.footer-copyright {
  margin-top:12px !important;
  font-weight:600; letter-spacing:.03em;
}

@media (max-width: 768px) {
  .seeknow-grid { grid-template-columns:1fr; }
  .top-btn { bottom:20px; right:20px; }
  .footer-company p { font-size:11px; }
}

/* ============================================
   NEXORA PRICING CARDS — seeknow 전용
   ============================================ */

/* 섹션 배경 */
.sk-pricing-section {
  padding: 5rem 1.5rem;
  border-top: 1px solid var(--nx-border);
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(124,111,247,0.22) 0%, transparent 60%),
    radial-gradient(ellipse 50% 45% at 85% 85%, rgba(59,130,246,0.10) 0%, transparent 55%),
    #0b0a1e;
}

.sk-pricing-bloom-a {
  position: absolute; top: -10%; left: -5%;
  width: 640px; height: 640px; border-radius: 50%;
  background: rgba(124,111,247,0.15); filter: blur(130px);
  z-index: 0; pointer-events: none;
}

.sk-pricing-bloom-b {
  position: absolute; bottom: -15%; right: -5%;
  width: 540px; height: 540px; border-radius: 50%;
  background: rgba(59,130,246,0.10); filter: blur(120px);
  z-index: 0; pointer-events: none;
}

.sk-pricing-inner {
  max-width: 1040px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* 헤더 */
.sk-pricing-header {
  text-align: center;
  margin-bottom: 3.25rem;
}

.sk-pricing-header h2 {
  font-size: clamp(1.85rem, 4vw, 2.75rem);
  font-weight: 900;
  color: var(--nx-h, #f0f0ff);
  margin: 0 0 0.75rem;
  letter-spacing: -0.04em;
  line-height: 1.1;
}

.sk-pricing-header p {
  color: var(--nx-muted, #7878a0);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.7;
  font-size: 1rem;
}

/* 카드 그리드 */
.sk-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin: 0 auto 2.5rem;
  align-items: start;
  padding-top: 20px;
}

/* 카드 공통 */
.sk-plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2rem 1.5rem;
  border-radius: 18px;
  border: 1.5px solid var(--nx-border, rgba(255,255,255,0.07));
  background: linear-gradient(160deg, var(--sk-card-bg-start, rgba(124,111,247,0.05)) 0%, #0e0e1a 55%);
  transition:
    border-color 0.35s cubic-bezier(0.34,1.56,0.64,1),
    transform 0.35s cubic-bezier(0.34,1.56,0.64,1),
    box-shadow 0.35s ease,
    background 0.35s ease;
  overflow: visible;
}

.sk-plan-card::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(80% 60% at 50% 0%, rgba(124,111,247,0.12) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.35s;
  pointer-events: none;
  z-index: 0;
}

.sk-plan-card > * { position: relative; z-index: 1; }

.sk-plan-card:hover {
  background: linear-gradient(160deg, var(--sk-card-hover-bg, rgba(124,111,247,0.18)) 0%, #0e0e1a 55%);
  border-color: var(--sk-card-hover-border, rgba(124,111,247,0.75));
  transform: translateY(-14px);
  box-shadow:
    0 32px 80px var(--sk-card-hover-shadow, rgba(124,111,247,0.32)),
    0 8px 32px rgba(0,0,0,0.55),
    inset 0 1px 0 var(--sk-card-hover-inset, rgba(124,111,247,0.30));
}

.sk-plan-card:hover::before { opacity: 1; }

/* FREE 변형 */
.sk-plan-card.sk-free {
  --sk-card-bg-start: rgba(96,165,250,0.06);
  border-color: rgba(96,165,250,0.30);
  box-shadow: 0 4px 20px rgba(96,165,250,0.06);
  --sk-card-hover-bg: rgba(96,165,250,0.12);
  --sk-card-hover-border: rgba(96,165,250,0.55);
  --sk-card-hover-shadow: rgba(96,165,250,0.15);
  --sk-card-hover-inset: rgba(96,165,250,0.20);
}

.sk-plan-card.sk-free::before {
  background: radial-gradient(80% 60% at 50% 0%, rgba(96,165,250,0.10) 0%, transparent 60%);
}

/* BASIC 변형 */
.sk-plan-card.sk-basic {
  --sk-card-bg-start: rgba(34,197,94,0.06);
  border-color: rgba(34,197,94,0.30);
  box-shadow: 0 4px 20px rgba(34,197,94,0.06);
  --sk-card-hover-bg: rgba(34,197,94,0.12);
  --sk-card-hover-border: rgba(34,197,94,0.55);
  --sk-card-hover-shadow: rgba(34,197,94,0.15);
  --sk-card-hover-inset: rgba(34,197,94,0.20);
}

.sk-plan-card.sk-basic::before {
  background: radial-gradient(80% 60% at 50% 0%, rgba(34,197,94,0.10) 0%, transparent 60%);
}

/* PRO 변형 — 추천, 강조 */
.sk-plan-card.sk-pro {
  --sk-card-bg-start: rgba(124,111,247,0.14);
  border-color: rgba(124,111,247,0.55);
  box-shadow: 0 0 48px rgba(124,111,247,0.18), 0 8px 32px rgba(0,0,0,0.28);
  transform: translateY(-8px);
  --sk-card-hover-bg: rgba(124,111,247,0.22);
  --sk-card-hover-border: rgba(124,111,247,0.75);
  --sk-card-hover-shadow: rgba(124,111,247,0.32);
  --sk-card-hover-inset: rgba(124,111,247,0.30);
}

/* PRO+ 변형 */
.sk-plan-card.sk-pro-plus {
  --sk-card-bg-start: rgba(234,87,12,0.06);
  border-color: rgba(234,87,12,0.35);
  box-shadow: 0 4px 20px rgba(234,87,12,0.06);
  --sk-card-hover-bg: rgba(234,87,12,0.14);
  --sk-card-hover-border: rgba(234,87,12,0.65);
  --sk-card-hover-shadow: rgba(234,87,12,0.15);
  --sk-card-hover-inset: rgba(234,87,12,0.20);
}

.sk-plan-card.sk-pro-plus::before {
  background: radial-gradient(80% 60% at 50% 0%, rgba(234,87,12,0.08) 0%, transparent 60%);
}

/* 배지 (추천 플랜) */
.sk-card-badge {
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 0.67rem;
  font-weight: 800;
  padding: 0.22rem 1rem;
  border-radius: 999px;
  letter-spacing: 0.06em;
  white-space: nowrap;
  z-index: 10;
}

.sk-badge-blue {
  background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
  box-shadow: 0 2px 14px rgba(59,130,246,0.4);
}

.sk-badge-green {
  background: linear-gradient(135deg, #16a34a 0%, #4ade80 100%);
  box-shadow: 0 2px 14px rgba(34,197,94,0.4);
}

.sk-badge-purple {
  background: linear-gradient(135deg, #7c6ff7 0%, #a78bfa 100%);
  box-shadow: 0 2px 14px rgba(124,111,247,0.5);
}

.sk-badge-orange {
  background: linear-gradient(135deg, #ea570c 0%, #fb923c 100%);
  box-shadow: 0 2px 14px rgba(234,87,12,0.5);
}

/* 플랜 이름 */
.sk-plan-name {
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.875rem;
}

/* 가격 */
.sk-price-row {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  margin-bottom: 0.25rem;
}

.sk-price-amount {
  font-size: 2.6rem;
  font-weight: 900;
  color: var(--nx-h, #f0f0ff);
  letter-spacing: -0.05em;
  line-height: 1;
}

.sk-price-unit {
  color: var(--nx-muted, #7878a0);
  font-size: 0.82rem;
}

.sk-plan-tagline {
  font-size: 0.78rem;
  color: var(--nx-muted, #7878a0);
  margin-bottom: 1.5rem;
}

/* 기능 리스트 */
.sk-features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
}

.sk-features li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.855rem;
  color: var(--nx-body, #c2c2d8);
  position: relative;
}

.sk-features li.sk-muted {
  color: var(--nx-muted, #7878a0);
}

.sk-check {
  width: 14px; height: 14px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sk-check svg {
  width: 14px; height: 14px;
}

/* 툴팁 */
.sk-tooltip-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: 0.25rem;
}

.sk-tooltip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px; height: 14px;
  background: none; border: none;
  padding: 0; cursor: pointer;
  color: rgba(167,139,250,0.65);
  transition: color 0.15s;
  line-height: 1;
  flex-shrink: 0;
}

.sk-tooltip-btn:hover { color: #a78bfa; }

.sk-tooltip-content {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 260px;
  padding: 0.65rem 0.85rem;
  border-radius: 10px;
  background: #1a1a2e;
  border: 1px solid rgba(124,111,247,0.25);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  color: var(--nx-body, #c2c2d8);
  font-size: 0.78rem;
  line-height: 1.55;
  z-index: 50;
  pointer-events: none;
}

.sk-tooltip-content::after {
  content: '';
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #1a1a2e;
}

.sk-tooltip-wrap:hover .sk-tooltip-content {
  display: block;
}

/* CTA 버튼 */
.sk-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.8rem 1rem;
  border-radius: 12px;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.25s ease;
  border: none;
  position: relative;
  overflow: hidden;
}

.sk-cta-btn::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  transition: left 0.5s ease;
}

.sk-cta-btn:hover::before {
  left: 100%;
}

/* FREE 버튼 */
.sk-cta-free {
  background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
  color: #fff;
  border: 1px solid rgba(96,165,250,0.6);
  box-shadow: 0 8px 24px rgba(59,130,246,0.3);
}

.sk-cta-free:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(59,130,246,0.45);
}

/* BASIC 버튼 */
.sk-cta-basic {
  background: linear-gradient(135deg, #16a34a 0%, #4ade80 100%);
  color: #fff;
  border: 1px solid rgba(34,197,94,0.6);
  box-shadow: 0 8px 24px rgba(34,197,94,0.3);
}

.sk-cta-basic:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(34,197,94,0.45);
}

/* PRO 버튼 — 프리즘 */
.sk-cta-pro {
  background: linear-gradient(135deg, #7c6ff7 0%, #a78bfa 100%);
  color: #fff;
  border: 1px solid rgba(124,111,247,0.6);
  box-shadow: 0 8px 24px rgba(124,111,247,0.3);
}

.sk-cta-pro:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(124,111,247,0.50);
  background: linear-gradient(135deg, #8c81ff 0%, #b5a7ff 100%);
}

/* PRO+ 버튼 */
.sk-cta-pro-plus {
  background: linear-gradient(135deg, #ea570c 0%, #fb923c 100%);
  color: #fff;
  border: 1px solid rgba(234,87,12,0.6);
  box-shadow: 0 8px 24px rgba(234,87,12,0.3);
}

.sk-cta-pro-plus:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(234,87,12,0.45);
}

/* 하단 인포 박스 */
.sk-pricing-info {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.125rem;
  margin-top: 2.5rem;
}

.sk-info-box {
  width: 100%;
  max-width: 940px;
  display: grid;
  gap: 0.45rem;
  padding: 0.95rem 1.1rem;
  border-radius: 14px;
  border: 1px solid rgba(124,111,247,0.18);
  background: rgba(124,111,247,0.06);
}

.sk-info-box p {
  font-size: 0.82rem;
  color: var(--nx-body, #c2c2d8);
  margin: 0;
  line-height: 1.65;
}

.sk-compare-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.875rem;
  color: #a78bfa;
  text-decoration: none;
  font-weight: 600;
  padding: 0.55rem 1.375rem;
  border: 1px solid rgba(124,111,247,0.28);
  border-radius: 9px;
  background: rgba(124,111,247,0.18);
  transition: all 0.15s;
}

.sk-compare-link:hover {
  border-color: #a78bfa;
  background: rgba(124,111,247,0.25);
  gap: 0.6rem;
}

/* 반응형 */
@media (max-width: 1100px) {
  .sk-cards-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 900px) {
  .sk-cards-grid {
    grid-template-columns: 1fr 1fr;
  }
  .sk-plan-card.sk-pro {
    grid-column: 1 / -1;
    max-width: 420px;
    margin: 0 auto;
    width: 100%;
  }
}

@media (max-width: 600px) {
  .sk-pricing-section {
    padding: 3rem 1rem;
  }
  .sk-cards-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .sk-plan-card {
    padding: 1.75rem 1.25rem;
  }
  .sk-plan-card.sk-pro {
    max-width: none;
  }
  .sk-price-amount {
    font-size: 2.2rem;
  }
}