/* ═══════════════════════════════════════════════
   AIEM — Main Stylesheet v2
   ═══════════════════════════════════════════════ */

/* ── Screen reader only ── */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ── 0. Reset & Base ── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

:root {
  --navy:    #1b2d4f;
  --teal:    #0e9e8e;
  --amber:   #f5a623;
  --green-400:#4ade80;
  --green-500:#22c55e;
  --green-600:#16a34a;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --purple-400:#c084fc;
  --purple-500:#a855f7;
  --orange-400:#fb923c;
  --red-400:  #f87171;
  --red-500:  #ef4444;
  --teal-400: #2dd4bf;
  --gray-50:  #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --dark-900: #070d1a;
  --dark-800: #0b1526;
  --dark-700: #0f1d38;
  --radius-sm:8px; --radius-md:14px; --radius-lg:20px; --radius-xl:28px;
  --shadow-sm:0 2px 8px rgba(0,0,0,.06);
  --shadow-md:0 6px 24px rgba(0,0,0,.10);
  --shadow-lg:0 16px 48px rgba(0,0,0,.16);
  --shadow-xl:0 24px 64px rgba(0,0,0,.24);
  --t:.3s cubic-bezier(.4,0,.2,1);
}

html { scroll-behavior:smooth; }
body { font-family:'Pretendard','Inter',-apple-system,BlinkMacSystemFont,sans-serif; color:var(--gray-800); background:#fff; overflow-x:hidden; line-height:1.6; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }
img { max-width:100%; }
strong { font-weight:700; }

.container { max-width:1200px; margin:0 auto; padding:0 24px; }

.gradient-text {
  background:linear-gradient(135deg,var(--teal) 0%,var(--blue-500) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.gradient-text-eco {
  background:linear-gradient(135deg,#4ade80 0%,#22c55e 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

.reveal { opacity:0; transform:translateY(28px); transition:opacity .7s ease,transform .7s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ═══════════════════════════════════════════════
   NAV
   ═══════════════════════════════════════════════ */
#navbar {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  transition:background var(--t),box-shadow var(--t);
}
#navbar.scrolled {
  background:rgba(7,13,26,.94);
  backdrop-filter:blur(18px);
  box-shadow:0 1px 0 rgba(255,255,255,.06);
}
.nav-inner {
  max-width:1200px; margin:0 auto; padding:0 24px;
  height:68px; display:flex; align-items:center; justify-content:space-between;
}

/* Logo */
.nav-logo { display:flex; align-items:center; gap:10px; }
.logo-img  { width:36px; height:36px; object-fit:contain; }
.logo-text { font-size:1.5rem; font-weight:900; letter-spacing:-.5px; color:#fff; }
.logo-em   { color:var(--amber); }

/* Nav links */
.nav-links { display:flex; align-items:center; gap:28px; }
.nav-links > li > a {
  color:rgba(255,255,255,.75); font-size:.93rem; font-weight:500;
  transition:color var(--t);
}
.nav-links > li > a:hover { color:#fff; }
.nav-cta {
  background:var(--teal) !important; color:#fff !important;
  padding:8px 20px; border-radius:50px; font-weight:600 !important;
  transition:background var(--t) !important;
}
.nav-cta:hover { background:#0b8a7b !important; }

/* Dropdown — hover 끊김 없이 연결 */
.nav-dropdown { position:relative; }
.dropdown-toggle { display:flex; align-items:center; gap:5px; cursor:pointer; }
.dropdown-toggle .fa-chevron-down { transition:transform var(--t); }
.nav-dropdown:hover .dropdown-toggle .fa-chevron-down { transform:rotate(180deg); }

/* dropdown-menu 자체가 top:100%에 붙고,
   padding-top으로 투명한 브릿지 영역을 만들어 hover 끊김 방지 */
.dropdown-menu {
  position:absolute;
  top:100%; left:50%;
  transform:translateX(-50%) translateY(4px);
  padding-top:10px;          /* 투명 브릿지 — 마우스가 지나갈 공간 */
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .22s ease, transform .22s ease, visibility .22s ease;
  z-index:200;
}
.dropdown-menu-inner {
  background:rgba(11,21,38,.98);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-lg);
  padding:10px;
  min-width:300px;
  box-shadow:var(--shadow-xl);
}
/* hover 상태: nav-dropdown에 마우스가 있는 한 메뉴 유지 */
.nav-dropdown:hover > .dropdown-menu,
.dropdown-menu:hover {
  opacity:1;
  visibility:visible;
  pointer-events:all;
  transform:translateX(-50%) translateY(0);
}
/* JS로 .open 클래스 토글해도 동작하도록 */
.nav-dropdown.open > .dropdown-menu {
  opacity:1;
  visibility:visible;
  pointer-events:all;
  transform:translateX(-50%) translateY(0);
}
.dropdown-item {
  display:flex; align-items:center; gap:14px;
  padding:12px 14px; border-radius:var(--radius-md);
  transition:background var(--t);
  color:#fff;
}
.dropdown-item:hover { background:rgba(255,255,255,.07); }
.di-icon {
  width:40px; height:40px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; flex-shrink:0;
}
.di-body { display:flex; flex-direction:column; gap:2px; }
.di-body strong { font-size:.9rem; color:#fff; }
.di-body span   { font-size:.75rem; color:rgba(255,255,255,.45); }

/* Hamburger */
.nav-hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px; }
.nav-hamburger span { display:block; width:24px; height:2px; background:#fff; border-radius:2px; transition:var(--t); }

/* Mobile menu */
.mobile-menu { display:none; background:rgba(7,13,26,.97); border-top:1px solid rgba(255,255,255,.08); padding:16px 24px 24px; }
.mobile-menu.open { display:block; }
.mobile-menu ul { display:flex; flex-direction:column; gap:4px; }
.mobile-menu a { display:block; color:rgba(255,255,255,.8); font-size:1rem; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.05); transition:color var(--t); }
.mobile-menu a:hover { color:var(--teal); }
.mobile-sub { padding-left:16px !important; font-size:.9rem !important; color:rgba(255,255,255,.55) !important; }
.mobile-group-label { font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.3); padding:14px 0 4px; }

/* ═══════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════ */
#hero {
  position:relative; min-height:100vh; background:var(--dark-900);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; padding:120px 0 80px;
}
.hero-bg { position:absolute; inset:0; pointer-events:none; }
.hero-particle {
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 55% 55% at 75% 50%,rgba(14,158,142,.13) 0%,transparent 70%),
    radial-gradient(ellipse 40% 55% at 20% 30%,rgba(59,130,246,.10) 0%,transparent 65%),
    radial-gradient(ellipse 30% 40% at 50% 90%,rgba(245,166,35,.06) 0%,transparent 60%);
}
.grid-overlay {
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(14,158,142,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(14,158,142,.04) 1px,transparent 1px);
  background-size:60px 60px;
}
.hero-inner {
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:space-between; gap:48px;
  width:100%; max-width:1200px; padding:0 24px;
}
.hero-content { max-width:580px; flex:1; min-width:0; }

.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(14,158,142,.12); border:1px solid rgba(14,158,142,.3);
  color:#5eead4; font-size:.82rem; font-weight:600; letter-spacing:.04em;
  padding:6px 16px; border-radius:50px; margin-bottom:24px;
  animation:fadeSlideDown .8s ease both;
}
.hero-title {
  font-size:clamp(2.2rem,4.5vw,3.4rem); font-weight:900; line-height:1.15;
  color:#fff; margin-bottom:22px; animation:fadeSlideDown .8s ease .1s both;
}
.hero-sub {
  font-size:1.02rem; color:rgba(255,255,255,.62); line-height:1.85;
  margin-bottom:32px; animation:fadeSlideDown .8s ease .2s both;
}
.hero-actions { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:28px; animation:fadeSlideDown .8s ease .3s both; }

.btn-primary {
  display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(135deg,var(--teal),#0b8a7b);
  color:#fff; font-weight:700; font-size:1rem; padding:14px 28px;
  border-radius:50px; border:none; cursor:pointer;
  transition:transform var(--t),box-shadow var(--t);
  box-shadow:0 4px 20px rgba(14,158,142,.35);
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(14,158,142,.45); }

.btn-ghost {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.06); color:rgba(255,255,255,.85);
  font-weight:600; font-size:1rem; padding:14px 28px;
  border-radius:50px; border:1px solid rgba(255,255,255,.15);
  cursor:pointer; transition:background var(--t),border-color var(--t);
}
.btn-ghost:hover { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.3); }

/* Download */
.hero-download { display:flex; flex-direction:column; gap:10px; margin-bottom:32px; animation:fadeSlideDown .8s ease .35s both; }
.download-label { font-size:.72rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:rgba(255,255,255,.3); }
.download-btns  { display:flex; gap:10px; flex-wrap:wrap; }
.btn-store {
  display:inline-flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-md); padding:10px 18px; color:#fff; min-width:148px;
  transition:background var(--t),border-color var(--t),transform var(--t);
}
.btn-store:hover { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.28); transform:translateY(-2px); }
.btn-store i { font-size:1.5rem; color:rgba(255,255,255,.8); }
.store-text { display:flex; flex-direction:column; }
.store-sub  { font-size:.6rem; color:rgba(255,255,255,.4); letter-spacing:.03em; line-height:1.2; }
.store-name { font-size:.88rem; font-weight:700; color:#fff; line-height:1.3; }

/* KPIs */
.hero-kpis { display:flex; gap:14px; flex-wrap:wrap; animation:fadeSlideDown .8s ease .4s both; }
.kpi-chip {
  display:flex; flex-direction:column;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09);
  border-radius:var(--radius-md); padding:12px 18px; min-width:105px;
  backdrop-filter:blur(8px);
}
.kpi-num   { font-size:1.2rem; font-weight:800; color:#5eead4; line-height:1.2; }
.kpi-label { font-size:.72rem; color:rgba(255,255,255,.45); margin-top:3px; }

/* Hero visual */
.hero-visual {
  position:relative; flex-shrink:0;
  display:flex; justify-content:center;
  animation:fadeSlideLeft 1s ease .3s both; z-index:2; padding-left:32px;
}
.scroll-hint {
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  color:rgba(255,255,255,.28); font-size:1.1rem; animation:bounce 2s infinite; z-index:2;
}

/* ═══════════════════════════════════════════════
   PHONE MOCKUP
   ═══════════════════════════════════════════════ */
.phone-mockup {
  width:272px; border-radius:40px;
  background:#0a1020; border:2px solid rgba(255,255,255,.11);
  box-shadow:var(--shadow-xl),0 0 0 1px rgba(255,255,255,.04);
  overflow:hidden; position:relative;
}
.phone-mockup { animation:float 5s ease-in-out infinite; }
.phone-notch { width:80px; height:22px; background:#000; border-radius:0 0 14px 14px; margin:0 auto; }
.phone-screen { display:flex; flex-direction:column; height:510px; }
.chat-header {
  display:flex; align-items:center; gap:10px; padding:12px 16px;
  background:rgba(255,255,255,.03); border-bottom:1px solid rgba(255,255,255,.06);
}
.chat-avatar { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; }
.chat-avatar.aim { background:linear-gradient(135deg,var(--teal),var(--blue-500)); color:#fff; }
.chat-avatar.eco-av { background:linear-gradient(135deg,var(--green-600),#4ade80); color:#fff; }
.chat-avatar.blue-av { background:linear-gradient(135deg,var(--blue-500),var(--purple-500)); color:#fff; }
.chat-info { display:flex; flex-direction:column; }
.chat-name { font-size:.82rem; font-weight:700; color:#fff; }
.chat-status { font-size:.68rem; color:var(--gray-400); }
.chat-status.online { color:#5eead4; }
.chat-messages { flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:10px; scrollbar-width:none; }
.chat-messages::-webkit-scrollbar { display:none; }
.msg { display:flex; flex-direction:column; max-width:86%; }
.msg.user { align-self:flex-end; align-items:flex-end; }
.msg.bot  { align-self:flex-start; align-items:flex-start; }
.msg-bubble {
  background:rgba(255,255,255,.07); color:rgba(255,255,255,.9);
  font-size:.74rem; line-height:1.55; padding:9px 12px;
  border-radius:14px 14px 14px 4px; border:1px solid rgba(255,255,255,.06);
}
.msg.user .msg-bubble { background:linear-gradient(135deg,#0b8a7b,var(--teal)); border-radius:14px 14px 4px 14px; border:none; }
.msg-bubble.warn   { background:rgba(251,146,60,.14); border:1px solid rgba(251,146,60,.3); color:#fcd34d; }
.msg-bubble.eco-bubble { background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.22); color:#86efac; }
.msg-bubble.confirm-bubble { background:rgba(59,130,246,.1); border:1px solid rgba(59,130,246,.28); color:rgba(255,255,255,.9); }
.confirm-btns { display:flex; gap:7px; margin-top:8px; }
.confirm-btns button { flex:1; padding:5px; border-radius:8px; border:none; font-size:.68rem; font-weight:700; cursor:pointer; }
.cb-ok { background:var(--teal); color:#fff; }
.cb-no { background:rgba(255,255,255,.1); color:rgba(255,255,255,.7); }
.msg-time { font-size:.62rem; color:rgba(255,255,255,.28); margin-top:3px; padding:0 4px; }
.chat-input-bar { display:flex; align-items:center; gap:8px; padding:10px 12px; border-top:1px solid rgba(255,255,255,.06); background:rgba(0,0,0,.18); }
.chat-input-bar input { flex:1; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); border-radius:20px; padding:7px 14px; font-size:.72rem; color:rgba(255,255,255,.5); outline:none; font-family:inherit; }
.chat-input-bar button { width:32px; height:32px; border-radius:50%; background:var(--teal); border:none; color:#fff; font-size:.75rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background var(--t); }
.chat-input-bar button:hover { background:#0b8a7b; }
.phone-glow { position:absolute; width:280px; height:280px; border-radius:50%; background:radial-gradient(ellipse,rgba(14,158,142,.22) 0%,transparent 70%); top:50%; left:50%; transform:translate(-50%,-50%); pointer-events:none; z-index:-1; }

/* ═══════════════════════════════════════════════
   SECTIONS
   ═══════════════════════════════════════════════ */
.section { padding:96px 0; }
.section-light { background:var(--gray-50); }
.section-dark  { background:var(--dark-800); }

.section-label {
  display:inline-flex; align-items:center; gap:7px;
  font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--teal); background:rgba(14,158,142,.08);
  border:1px solid rgba(14,158,142,.22); padding:5px 14px;
  border-radius:50px; margin-bottom:18px;
}
.section-dark .section-label { color:#5eead4; background:rgba(14,158,142,.1); border-color:rgba(14,158,142,.25); }
.section-title { font-size:clamp(1.8rem,3.2vw,2.7rem); font-weight:900; line-height:1.2; margin-bottom:14px; color:var(--gray-900); }
.section-dark .section-title,
.uc-section-dark .section-title { color:#fff; }
.section-desc  { font-size:1rem; color:var(--gray-500); line-height:1.85; margin-bottom:56px; }
.section-dark .section-desc,
.uc-section-dark .section-desc { color:rgba(255,255,255,.52); }

/* ═══════════════════════════════════════════════
   FEATURES GRID
   ═══════════════════════════════════════════════ */
.features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.feat-card {
  background:#fff; border:1px solid var(--gray-200); border-radius:var(--radius-lg);
  padding:26px; transition:transform var(--t),box-shadow var(--t),border-color var(--t);
}
.feat-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:rgba(14,158,142,.3); }
.highlight-card { border-color:rgba(14,158,142,.35) !important; background:linear-gradient(135deg,#f0fdfa,#fff) !important; box-shadow:0 4px 20px rgba(14,158,142,.1) !important; }
.feat-icon { width:50px; height:50px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; font-size:1.25rem; margin-bottom:18px; }
.feat-icon.green  { background:#f0fdf4; color:var(--green-600); }
.feat-icon.blue   { background:#eff6ff; color:var(--blue-600); }
.feat-icon.purple { background:#faf5ff; color:var(--purple-500); }
.feat-icon.eco    { background:linear-gradient(135deg,rgba(14,158,142,.12),rgba(14,158,142,.06)); color:var(--teal); }
.feat-icon.orange { background:#fff7ed; color:var(--orange-400); }
.feat-icon.teal   { background:#f0fdfa; color:var(--teal); }
.feat-card h3 { font-size:1.02rem; font-weight:700; margin-bottom:9px; color:var(--gray-900); }
.feat-card p  { font-size:.86rem; color:var(--gray-500); line-height:1.72; margin-bottom:14px; }
.feat-tags { display:flex; flex-wrap:wrap; gap:5px; }
.feat-tags span { font-size:.7rem; font-weight:600; padding:3px 9px; border-radius:50px; background:var(--gray-100); color:var(--gray-600); }
.highlight-card .feat-tags span { background:rgba(14,158,142,.1); color:var(--teal); }

/* ═══════════════════════════════════════════════
   FLOW STEPS (How it works)
   ═══════════════════════════════════════════════ */
.flow-steps { display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; gap:0; align-items:start; margin-bottom:60px; }
.flow-step { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius-lg); padding:26px; transition:background var(--t),border-color var(--t); }
.flow-step:hover { background:rgba(255,255,255,.07); border-color:rgba(14,158,142,.3); }
.flow-arrow { display:flex; align-items:center; justify-content:center; padding:0 8px; color:rgba(14,158,142,.4); font-size:.9rem; padding-top:48px; }
.flow-num  { font-size:2.4rem; font-weight:900; color:rgba(14,158,142,.12); line-height:1; margin-bottom:12px; font-family:'Inter',sans-serif; }
.flow-icon { font-size:1.5rem; color:#5eead4; margin-bottom:12px; }
.flow-step h3 { font-size:.93rem; font-weight:700; color:#fff; margin-bottom:9px; }
.flow-step p  { font-size:.82rem; color:rgba(255,255,255,.48); line-height:1.7; }

/* Architecture */
.arch-diagram { background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07); border-radius:var(--radius-xl); padding:32px; }
.arch-layer { display:flex; align-items:center; gap:18px; padding:14px 18px; border-radius:var(--radius-md); }
.layer-ui  { background:rgba(59,130,246,.06); border:1px solid rgba(59,130,246,.14); }
.layer-ai  { background:rgba(14,158,142,.06); border:1px solid rgba(14,158,142,.18); }
.layer-sys { background:rgba(168,85,247,.06); border:1px solid rgba(168,85,247,.14); }
.arch-label-left { font-size:.7rem; font-weight:700; color:rgba(255,255,255,.38); letter-spacing:.06em; text-transform:uppercase; width:80px; flex-shrink:0; }
.arch-items { display:flex; gap:10px; flex-wrap:wrap; }
.arch-item { display:flex; flex-direction:column; align-items:center; gap:5px; padding:9px 14px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); border-radius:var(--radius-sm); font-size:.9rem; color:rgba(255,255,255,.55); transition:background var(--t); }
.arch-item span { font-size:.65rem; font-weight:600; }
.arch-item:hover { background:rgba(255,255,255,.08); }
.highlight-arch { background:rgba(14,158,142,.08) !important; border-color:rgba(14,158,142,.24) !important; color:#5eead4 !important; }
.arch-arrow { text-align:center; color:rgba(255,255,255,.18); padding:7px 0; font-size:.95rem; }

/* ═══════════════════════════════════════════════
   REPORTS & TEMPLATES
   ═══════════════════════════════════════════════ */
.report-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:28px; }
.rtab {
  padding:9px 20px; border-radius:50px; border:1px solid var(--gray-200);
  background:#fff; font-size:.86rem; font-weight:600; color:var(--gray-500);
  cursor:pointer; transition:all var(--t);
}
.rtab:hover { border-color:rgba(14,158,142,.4); color:var(--teal); }
.rtab.active { background:var(--teal); color:#fff; border-color:var(--teal); box-shadow:0 4px 14px rgba(14,158,142,.3); }

.report-panels { margin-bottom:64px; }
.report-panel { display:none; }
.report-panel.active { display:block; }
.report-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; }
.report-item {
  display:flex; align-items:center; gap:10px;
  background:#fff; border:1px solid var(--gray-200);
  border-radius:var(--radius-md); padding:13px 16px;
  font-size:.86rem; font-weight:500; color:var(--gray-700);
  transition:all var(--t);
}
.report-item:hover { border-color:rgba(14,158,142,.4); background:#f0fdfa; color:var(--teal); transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.report-item i { color:var(--teal); font-size:.9rem; flex-shrink:0; }

/* Starter packs */
.pack-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.pack-card {
  display:flex; gap:20px; align-items:flex-start;
  background:#fff; border:1px solid var(--gray-200); border-radius:var(--radius-lg);
  padding:28px; transition:transform var(--t),box-shadow var(--t),border-color var(--t);
}
.pack-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:rgba(14,158,142,.3); }
.pack-icon { width:52px; height:52px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex-shrink:0; }
.pack-body h4 { font-size:1.02rem; font-weight:700; color:var(--gray-900); margin-bottom:8px; }
.pack-body p  { font-size:.84rem; color:var(--gray-500); line-height:1.65; margin-bottom:12px; }
.pack-body ul { display:flex; flex-direction:column; gap:5px; }
.pack-body li { display:flex; align-items:center; gap:8px; font-size:.82rem; color:var(--gray-600); }
.pack-body li i { color:var(--teal); font-size:.78rem; }

/* ═══════════════════════════════════════════════
   USE CASE CARDS
   ═══════════════════════════════════════════════ */
.usecase-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.uc-card {
  position:relative; overflow:hidden;
  border:1px solid rgba(255,255,255,.08); border-radius:var(--radius-xl);
  padding:32px; display:flex; flex-direction:column; gap:14px;
  transition:transform var(--t),border-color var(--t),box-shadow var(--t);
}
.uc-card:hover { transform:translateY(-6px); border-color:rgba(255,255,255,.18); box-shadow:0 20px 60px rgba(0,0,0,.3); }
.uc-bg { position:absolute; inset:0; pointer-events:none; }
.uc-icon { font-size:2rem; position:relative; z-index:1; }
.uc-card h3 { font-size:1.2rem; font-weight:800; color:#fff; position:relative; z-index:1; }
.uc-card p  { font-size:.86rem; color:rgba(255,255,255,.55); line-height:1.7; flex:1; position:relative; z-index:1; }
.uc-tags { display:flex; flex-wrap:wrap; gap:6px; position:relative; z-index:1; }
.uc-tags span { font-size:.7rem; font-weight:600; padding:3px 9px; border-radius:50px; background:rgba(255,255,255,.08); color:rgba(255,255,255,.65); }
.uc-arrow { font-size:.82rem; font-weight:700; color:rgba(255,255,255,.35); position:relative; z-index:1; transition:color var(--t); margin-top:4px; }
.uc-card:hover .uc-arrow { color:rgba(255,255,255,.8); }

/* ═══════════════════════════════════════════════
   CTA SIMPLE BANNER
   ═══════════════════════════════════════════════ */
.section-cta-simple { background:var(--dark-900); padding:80px 0; }
.cta-simple-inner {
  display:flex; align-items:center; justify-content:space-between; gap:40px;
  background:linear-gradient(135deg,rgba(14,158,142,.12),rgba(59,130,246,.06));
  border:1px solid rgba(14,158,142,.22); border-radius:var(--radius-xl);
  padding:48px 56px;
}
.cta-simple-text h2 { font-size:clamp(1.6rem,3vw,2.2rem); font-weight:900; color:#fff; line-height:1.2; margin-bottom:12px; }
.cta-simple-text p  { font-size:.96rem; color:rgba(255,255,255,.5); line-height:1.8; }
.cta-simple-actions { display:flex; flex-direction:column; gap:12px; flex-shrink:0; }

/* ═══════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════ */
#footer { background:#040810; padding:60px 0 28px; border-top:1px solid rgba(255,255,255,.05); }
.footer-top { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:36px; margin-bottom:44px; }
.footer-brand p { font-size:.84rem; color:rgba(255,255,255,.38); line-height:1.8; margin-top:10px; margin-bottom:18px; }
.footer-logo { font-size:1.35rem; }
.footer-website { margin-top:2px; }
.footer-website-link {
  display:inline-flex; align-items:center; gap:8px;
  font-size:.86rem; font-weight:600; color:rgba(255,255,255,.4);
  border:1px solid rgba(255,255,255,.1); border-radius:50px; padding:7px 15px;
  transition:color var(--t),border-color var(--t),background var(--t);
}
.footer-website-link:hover { color:#5eead4; border-color:rgba(14,158,142,.4); background:rgba(14,158,142,.06); }
.footer-links-group h5 { font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:rgba(255,255,255,.45); margin-bottom:14px; }
.footer-links-group ul { display:flex; flex-direction:column; gap:9px; }
.footer-links-group a { font-size:.84rem; color:rgba(255,255,255,.38); transition:color var(--t); }
.footer-links-group a:hover { color:#5eead4; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.05); padding-top:22px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; }
.footer-bottom p { font-size:.78rem; color:rgba(255,255,255,.28); }
.footer-env-note { display:flex; align-items:center; gap:6px; color:rgba(14,158,142,.7) !important; }

/* ═══════════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════════ */
.toast {
  position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(16px);
  background:#0d2020; border:1px solid rgba(14,158,142,.4); color:#5eead4;
  padding:13px 26px; border-radius:50px; font-size:.88rem; font-weight:600;
  box-shadow:var(--shadow-lg); opacity:0; transition:opacity .4s ease,transform .4s ease;
  z-index:9999; pointer-events:none; white-space:nowrap;
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ═══════════════════════════════════════════════
   PAGE HERO (내부 페이지용)
   ═══════════════════════════════════════════════ */
.page-hero {
  background:var(--dark-900); padding:130px 0 70px;
  position:relative; overflow:hidden;
}
.page-hero .hero-bg { position:absolute; inset:0; pointer-events:none; }
.page-hero-inner { position:relative; z-index:2; }
.page-breadcrumb { display:flex; align-items:center; gap:8px; font-size:.8rem; color:rgba(255,255,255,.35); margin-bottom:20px; }
.page-breadcrumb a { color:rgba(255,255,255,.35); transition:color var(--t); }
.page-breadcrumb a:hover { color:#5eead4; }
.page-breadcrumb i { font-size:.6rem; }
.page-title { font-size:clamp(2rem,4vw,3.2rem); font-weight:900; color:#fff; line-height:1.15; margin-bottom:16px; }
.page-desc  { font-size:1.05rem; color:rgba(255,255,255,.55); line-height:1.85; max-width:640px; }
.page-hero-kpis { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.page-hero-kpis .kpi-chip { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:50px; padding:8px 18px; display:flex; flex-direction:column; align-items:center; }

/* ═══════════════════════════════════════════════
   USE CASE PAGE STYLES
   ═══════════════════════════════════════════════ */
.uc-section { padding:80px 0; }
.uc-section-light { background:var(--gray-50); }
.uc-section-dark  { background:var(--dark-800); }
.uc-section-white { background:#fff; }

.intro-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.intro-text h2 { font-size:clamp(1.6rem,2.8vw,2.2rem); font-weight:900; color:var(--gray-900); line-height:1.2; margin-bottom:16px; }
.uc-section-dark .intro-text h2 { color:#fff; }
.intro-text p  { font-size:.95rem; color:var(--gray-500); line-height:1.85; margin-bottom:14px; }
.uc-section-dark .intro-text p { color:rgba(255,255,255,.52); }

.step-list { display:flex; flex-direction:column; gap:20px; }
.step-item { display:flex; gap:16px; align-items:flex-start; }
.step-num { width:36px; height:36px; border-radius:50%; background:rgba(14,158,142,.12); border:1px solid rgba(14,158,142,.3); display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:800; color:#5eead4; flex-shrink:0; }
.step-body h4 { font-size:.95rem; font-weight:700; color:var(--gray-900); margin-bottom:4px; }
.uc-section-dark .step-body h4 { color:#fff; }
.step-body p  { font-size:.84rem; color:var(--gray-500); line-height:1.7; }
.uc-section-dark .step-body p { color:rgba(255,255,255,.48); }

.badge-mcp, .badge-rag, .badge-msg, .badge-gw {
  font-size:.65rem; font-weight:700; padding:2px 8px; border-radius:50px; letter-spacing:.04em; display:inline-block;
}
.badge-mcp { background:rgba(59,130,246,.18); color:var(--blue-400); border:1px solid rgba(59,130,246,.28); }
.badge-rag { background:rgba(168,85,247,.18); color:var(--purple-400); border:1px solid rgba(168,85,247,.28); }
.badge-msg { background:rgba(14,158,142,.18); color:#5eead4; border:1px solid rgba(14,158,142,.28); }
.badge-gw  { background:rgba(245,166,35,.18); color:var(--amber); border:1px solid rgba(245,166,35,.28); }

/* Feature detail cards */
.detail-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.detail-card {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-lg); padding:24px;
  transition:background var(--t),border-color var(--t);
}
.detail-card:hover { background:rgba(255,255,255,.07); border-color:rgba(14,158,142,.25); }
.detail-card.light { background:#fff; border:1px solid var(--gray-200); }
.detail-card.light:hover { border-color:rgba(14,158,142,.3); box-shadow:var(--shadow-md); }
.detail-icon { font-size:1.4rem; margin-bottom:14px; }
.detail-card h4 { font-size:.95rem; font-weight:700; color:#fff; margin-bottom:8px; }
.detail-card.light h4 { color:var(--gray-900); }
.detail-card p  { font-size:.83rem; color:rgba(255,255,255,.48); line-height:1.7; }
.detail-card.light p { color:var(--gray-500); }

/* Phone in page */
.page-phone-wrap { position:relative; display:flex; justify-content:center; }
.page-phone { width:260px; }
.page-phone .phone-screen { height:480px; }
.page-phone { animation:float 5s ease-in-out infinite; }

/* Reinforcement learning diagram */
.rl-diagram { display:flex; flex-direction:column; gap:12px; }
.rl-row { display:flex; align-items:center; gap:12px; }
.rl-box {
  flex:1; padding:14px 16px; border-radius:var(--radius-md);
  font-size:.82rem; color:rgba(255,255,255,.75); line-height:1.55;
  border:1px solid rgba(255,255,255,.08);
}
.rl-box.input  { background:rgba(59,130,246,.1); border-color:rgba(59,130,246,.22); }
.rl-box.process{ background:rgba(14,158,142,.1); border-color:rgba(14,158,142,.22); }
.rl-box.output { background:rgba(168,85,247,.1); border-color:rgba(168,85,247,.22); }
.rl-box.feedback{ background:rgba(245,166,35,.1); border-color:rgba(245,166,35,.22); }
.rl-box strong { display:block; font-size:.78rem; font-weight:700; margin-bottom:4px; }
.rl-box.input strong   { color:var(--blue-400); }
.rl-box.process strong { color:#5eead4; }
.rl-box.output strong  { color:var(--purple-400); }
.rl-box.feedback strong{ color:var(--amber); }
.rl-arrow { color:rgba(255,255,255,.2); font-size:.85rem; flex-shrink:0; }

/* Contact form page */
.contact-layout { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:start; }
.contact-info h2 { font-size:clamp(1.8rem,3vw,2.4rem); font-weight:900; color:#fff; line-height:1.2; margin-bottom:16px; }
.contact-info p  { font-size:.96rem; color:rgba(255,255,255,.52); line-height:1.85; margin-bottom:36px; }
.contact-points { display:flex; flex-direction:column; gap:16px; }
.contact-point { display:flex; align-items:flex-start; gap:14px; }
.cp-icon { width:44px; height:44px; border-radius:var(--radius-md); background:rgba(14,158,142,.12); border:1px solid rgba(14,158,142,.25); display:flex; align-items:center; justify-content:center; font-size:1.1rem; color:#5eead4; flex-shrink:0; }
.cp-body h4 { font-size:.92rem; font-weight:700; color:#fff; margin-bottom:3px; }
.cp-body p  { font-size:.82rem; color:rgba(255,255,255,.45); }

.contact-form-box { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius-xl); padding:36px; }
.contact-form-box h3 { font-size:1.15rem; font-weight:800; color:#fff; margin-bottom:28px; }
.cta-form { display:flex; flex-direction:column; gap:16px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-group { display:flex; flex-direction:column; gap:6px; }
.form-group.full { grid-column:1 / -1; }
.form-group label { font-size:.82rem; font-weight:600; color:rgba(255,255,255,.55); }
.req { color:#5eead4; }
.form-group input, .form-group select, .form-group textarea {
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.11);
  border-radius:var(--radius-sm); padding:11px 14px; font-size:.9rem; color:#fff;
  font-family:inherit; outline:none; transition:border-color var(--t),background var(--t);
}
.form-group input::placeholder, .form-group textarea::placeholder { color:rgba(255,255,255,.22); }
.form-group select { color:rgba(255,255,255,.55); }
.form-group select option { background:var(--dark-800); color:#fff; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:rgba(14,158,142,.5); background:rgba(255,255,255,.08); }
.form-group textarea { resize:vertical; min-height:100px; }
.btn-submit { width:100%; justify-content:center; margin-top:4px; font-size:1rem; }
.cta-privacy { font-size:.74rem; color:rgba(255,255,255,.28); margin-top:10px; display:flex; align-items:center; gap:6px; }

/* ═══════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════ */
@keyframes fadeSlideDown { from{opacity:0;transform:translateY(-18px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeSlideLeft { from{opacity:0;transform:translateX(36px)} to{opacity:1;transform:translateX(0)} }
@keyframes bounce { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(7px)} }
@keyframes float   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-11px)} }

/* ═══════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════ */
@media (max-width:1100px) {
  .features-grid { grid-template-columns:repeat(2,1fr); }
  .flow-steps { grid-template-columns:1fr; gap:0; }
  .flow-arrow { padding:4px 0; transform:rotate(90deg); }
  .footer-top { grid-template-columns:1fr 1fr; }
  .detail-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px) {
  #hero { flex-direction:column; padding:110px 0 60px; }
  .hero-inner { flex-direction:column; align-items:center; text-align:center; padding:0 20px; }
  .hero-actions,.hero-kpis,.hero-download,.download-btns { justify-content:center; }
  .hero-download { align-items:center; }
  .hero-visual { animation:none; padding-left:0; }
  .hero-visual .phone-mockup { animation:float 5s ease-in-out infinite; }
  .nav-links { display:none; }
  .nav-hamburger { display:flex; }
  .usecase-cards { grid-template-columns:1fr; }
  .intro-grid { grid-template-columns:1fr; gap:40px; }
  .contact-layout { grid-template-columns:1fr; gap:40px; }
  .cta-simple-inner { flex-direction:column; text-align:center; padding:36px 28px; }
  .cta-simple-actions { flex-direction:row; justify-content:center; }
}
@media (max-width:640px) {
  .features-grid { grid-template-columns:1fr; }
  .pack-grid { grid-template-columns:1fr; }
  .detail-grid { grid-template-columns:1fr; }
  .footer-top { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column; text-align:center; }
  .form-row { grid-template-columns:1fr; }
  .phone-mockup { width:248px !important; }
  .phone-screen { height:460px !important; }
  .report-grid { grid-template-columns:1fr 1fr; }
}