/* ============================================
   shared.css — 一起AI工作坊 V2
   V1 Design System + V2 New Components
   ============================================ */

/* ============================================
   Design Tokens — Four-Color System
   Dark + Orange + Blue + White
   Mobile-First Vertical Layout
   ============================================ */
:root {
  /* Ink (deep dark) */
  --ink: #0c0a09;
  --ink-2: #1c1917;
  --ink-3: #292524;
  --ink-4: #44403c;
  /* Paper (white / off-white) */
  --paper: #fafaf9;
  --paper-2: #f5f5f4;
  --paper-3: #e7e5e4;
  /* Accent — Orange (primary keyword color) */
  --orange: #ea580c;
  --orange-l: #f97316;
  --orange-d: #c2410c;
  /* Accent — Blue (secondary, with depth range) */
  --blue: #2563eb;
  --blue-l: #3b82f6;
  --blue-d: #1d4ed8;
  --blue-xl: #60a5fa;
  /* Text */
  --t-light: #fafaf9;
  --t-light-mute: #a8a29e;
  --t-dark: #1c1917;
  --t-dark-mute: #78716c;
  /* Border */
  --bd-dark: rgba(250,250,249,0.1);
  --bd-light: #e7e5e4;
  /* Shadow */
  --sh-sm: 0 1px 2px rgba(0,0,0,0.04);
  --sh-md: 0 4px 12px rgba(0,0,0,0.06);
  --sh-lg: 0 12px 40px rgba(0,0,0,0.08);
  --sh-xl: 0 20px 60px rgba(0,0,0,0.12);
  /* Easing */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  /* Spacing */
  --space-1: 4px; --space-2: 8px; --space-3: 12px;
  --space-4: 16px; --space-6: 24px; --space-8: 32px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px;
  /* Container — phone-first */
  --container: 480px;
}

/* ============================================
   Reset & Base
   ============================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  background: var(--paper);
  color: var(--t-dark);
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Display font — system serif for editorial drama */
.display {
  font-family: "Songti SC", "STSong", "SimSun", "Noto Serif SC", "Source Han Serif SC", Georgia, serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* ============================================
   Navigation — Minimal mobile bar
   ============================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(12, 10, 9, 0.82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--bd-dark);
  transition: transform 0.4s var(--ease-out-quart);
}
.nav-inner {
  max-width: var(--container); margin: 0 auto; padding: 0 20px;
  height: 56px; display: flex; align-items: center; justify-content: space-between;
}
.nav-logo {
  font-family: "Songti SC", "STSong", serif;
  font-size: 18px; font-weight: 700; color: var(--t-light);
  letter-spacing: -0.01em; text-decoration: none;
  display: flex; align-items: center; gap: 6px;
}
.nav-logo span { color: var(--orange-l); }
.nav-logo .brand { color: var(--t-light); }
.nav-cta {
  background: var(--orange-l); color: var(--ink); padding: 8px 18px; border-radius: 100px;
  font-size: 13px; font-weight: 600; text-decoration: none;
  transition: transform 0.2s var(--ease-out-quart), box-shadow 0.2s;
  white-space: nowrap;
}
.nav-cta:hover { transform: scale(1.05); box-shadow: 0 0 24px rgba(249,115,22,0.4); }

/* Brand mark — "一起AI" enlarged, 一起=white, AI=orange italic */
.brand { font-weight: 800; font-size: 1.25em; letter-spacing: -0.01em; white-space: nowrap; }
.brand-ai { color: var(--orange-l); font-style: italic; }

/* ============================================
   Hero — Full viewport dark immersive (portrait)
   ============================================ */
.hero {
  min-height: 100vh; background: var(--ink); color: var(--t-light);
  display: flex; align-items: center; position: relative; overflow: hidden;
  padding: 100px 20px 90px;
}
/* Animated gradient orbs */
.hero::before, .hero::after {
  content: ''; position: absolute; border-radius: 50%;
  filter: blur(80px); opacity: 0.3; pointer-events: none;
  animation: float 12s ease-in-out infinite;
}
.hero::before {
  width: 400px; height: 400px; top: -100px; right: -80px;
  background: radial-gradient(circle, var(--orange-l) 0%, transparent 70%);
}
.hero::after {
  width: 350px; height: 350px; bottom: -100px; left: -80px;
  background: radial-gradient(circle, var(--blue) 0%, transparent 70%);
  animation-delay: -6s;
}
@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(20px, -30px) scale(1.05); }
  66% { transform: translate(-15px, 20px) scale(0.95); }
}
/* Grain texture overlay */
.hero-grain {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-content {
  max-width: var(--container); margin: 0 auto; width: 100%;
  position: relative; z-index: 1;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(249,115,22,0.12); border: 1px solid rgba(249,115,22,0.3);
  padding: 6px 14px; border-radius: 100px; font-size: 12px; font-weight: 500;
  color: var(--orange-l); margin-bottom: 20px;
  opacity: 0; transform: translateY(20px);
  animation: heroFade 0.8s var(--ease-out-expo) 0.2s forwards;
}
.hero-badge::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--orange-l);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}
.hero h1 {
  font-size: clamp(2.2rem, 9vw, 3.5rem); font-weight: 900;
  letter-spacing: -0.03em; line-height: 1.08; margin-bottom: 16px;
  opacity: 0; transform: translateY(30px);
  animation: heroFade 1s var(--ease-out-expo) 0.4s forwards;
}
.hero h1 .accent { color: var(--orange-l); font-style: italic; }
.hero-subtitle {
  font-size: clamp(0.95rem, 3.5vw, 1.1rem); color: var(--t-light-mute);
  max-width: 100%; line-height: 1.65; font-weight: 400; margin-bottom: 32px;
  opacity: 0; transform: translateY(20px);
  animation: heroFade 0.8s var(--ease-out-expo) 0.6s forwards;
}
.hero-subtitle strong { color: var(--t-light); font-weight: 600; }

.hero-metrics {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--bd-dark); border: 1px solid var(--bd-dark);
  border-radius: 14px; overflow: hidden;
  opacity: 0; transform: translateY(20px);
  animation: heroFade 0.8s var(--ease-out-expo) 0.8s forwards;
}
.hero-metric {
  background: rgba(28,25,23,0.6); padding: 20px 18px;
  transition: background 0.3s var(--ease-out-quart);
}
.hero-metric:hover { background: rgba(41,37,36,0.8); }
.hero-metric-num {
  font-size: clamp(1.5rem, 7vw, 2rem); font-weight: 800; color: var(--orange-l);
  line-height: 1; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.hero-metric-label { font-size: 12px; color: var(--t-light-mute); margin-top: 6px; }

.hero-vision {
  margin-top: 24px;
  opacity: 0; transform: translateY(20px);
  animation: heroFade 0.8s var(--ease-out-expo) 1s forwards;
}
.hero-vision-intro {
  font-size: clamp(0.85rem, 3.2vw, 0.95rem);
  color: var(--t-light-mute); line-height: 1.6; margin-bottom: 14px;
}
.hero-vision-intro .hl-o { color: var(--orange-l); font-weight: 600; }
.hero-vision-items {
  display: flex; flex-direction: column; gap: 10px;
}
.hero-vision-item {
  display: flex; align-items: center; gap: 10px;
  font-size: clamp(0.85rem, 3.2vw, 0.95rem);
  color: var(--t-light); line-height: 1.5;
  padding: 10px 14px;
  background: rgba(28,25,23,0.5);
  border: 1px solid var(--bd-dark);
  border-radius: 10px;
  transition: border-color 0.3s var(--ease-out-quart), background 0.3s var(--ease-out-quart);
}
.hero-vision-item:hover {
  border-color: rgba(249,115,22,0.4);
  background: rgba(41,37,36,0.6);
}
.hero-vision-item svg { color: var(--orange-l); flex-shrink: 0; }
.hero-vision-item .hl-o { color: var(--orange-l); font-weight: 600; }

@keyframes heroFade {
  to { opacity: 1; transform: translateY(0); }
}

/* Scroll hint */
.scroll-hint {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  color: var(--t-light-mute); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; opacity: 0; z-index: 1;
  animation: heroFade 0.8s var(--ease-out-expo) 1.2s forwards;
}
.scroll-hint::after {
  content: ''; display: block; width: 1px; height: 28px; margin: 10px auto 0;
  background: linear-gradient(to bottom, var(--t-light-mute), transparent);
  animation: scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ============================================
   Section Base — Mobile vertical flow
   ============================================ */
.section { padding: var(--space-16) 20px; max-width: var(--container); margin: 0 auto; }
.section-full { padding: var(--space-16) 0; }
.section-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--orange-d); margin-bottom: 14px;
}
.section-label::before {
  content: ''; width: 20px; height: 2px; background: var(--orange-l);
}
.section-title {
  font-size: clamp(1.6rem, 7vw, 2.4rem); font-weight: 800;
  letter-spacing: -0.025em; line-height: 1.15; margin-bottom: 14px;
  color: var(--t-dark);
}
.section-title .italic { font-style: italic; color: var(--orange-d); }
.section-desc {
  font-size: clamp(0.95rem, 3.5vw, 1.05rem); color: var(--t-dark-mute);
  max-width: 100%; line-height: 1.7; margin-bottom: 36px;
}

/* ============================================
   Crisis Section — Stacked vertical (mobile-first)
   ============================================ */
.crisis {
  background: var(--ink); color: var(--t-light);
  padding: var(--space-16) 20px;
}
.crisis-inner {
  max-width: var(--container); margin: 0 auto;
  display: flex; flex-direction: column; gap: 32px;
}
.crisis-left .section-label { color: var(--orange-l); }
.crisis-left .section-label::before { background: var(--orange-l); }
.crisis-left .section-title { color: var(--t-light); }
.crisis-left .section-desc { color: var(--t-light-mute); }
.crisis-quote {
  font-family: "Songti SC", "STSong", serif; font-size: clamp(1.1rem, 4.5vw, 1.4rem); font-weight: 600;
  line-height: 1.5; color: var(--t-light); padding: 20px 0;
  border-top: 1px solid var(--bd-dark); border-bottom: 1px solid var(--bd-dark);
  margin: 24px 0;
}
.crisis-quote em { color: var(--orange-l); font-style: italic; }

.crisis-cards { display: flex; flex-direction: column; gap: 14px; }
.crisis-card {
  background: rgba(28,25,23,0.8); border: 1px solid var(--bd-dark);
  border-radius: 14px; padding: 24px 24px;
  transition: border-color 0.3s var(--ease-out-quart);
}
.crisis-card:hover { border-color: var(--orange-l); }
.crisis-card-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 4px 12px; border-radius: 100px;
  margin-bottom: 10px;
}
.crisis-card-tag.r { background: rgba(249,115,22,0.15); color: var(--orange-l); }
.crisis-card-tag.o { background: rgba(37,99,235,0.15); color: var(--blue-xl); }
.crisis-card-title { font-size: 16px; font-weight: 700; color: var(--t-light); margin-bottom: 6px; }
.crisis-card-body { font-size: 13px; color: var(--t-light-mute); line-height: 1.7; }

.crisis-path {
  margin-top: 20px; padding: 20px 24px;
  background: linear-gradient(135deg, rgba(249,115,22,0.08), rgba(37,99,235,0.08));
  border: 1px solid rgba(249,115,22,0.2); border-radius: 14px;
}
.crisis-path strong { color: var(--orange-l); font-size: 14px; }
.crisis-path p { font-size: 13px; color: var(--t-light-mute); margin-top: 6px; }

/* ============================================
   Value Pillars — Single column stack (mobile-first)
   ============================================ */
.pillars-grid {
  display: flex; flex-direction: column; gap: 14px;
}
.pillar {
  background: var(--paper); border: 1px solid var(--bd-light); border-radius: 16px;
  padding: 28px 24px; position: relative; overflow: hidden;
  transition: transform 0.4s var(--ease-out-quart), box-shadow 0.4s var(--ease-out-quart);
}
.pillar::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.5s var(--ease-out-expo);
}
.pillar:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.pillar:hover::before { transform: scaleX(1); }
.pillar.p1::before { background: var(--orange-l); }
.pillar.p2::before { background: var(--blue); }
.pillar.p3::before { background: var(--orange-d); }
.pillar.p4::before { background: var(--blue-d); }
.pillar-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px;
}
.pillar-num {
  font-family: "Songti SC", serif; font-size: 36px; font-weight: 900;
  line-height: 1; opacity: 0.15;
}
.pillar.p1 .pillar-num { color: var(--orange-l); }
.pillar.p2 .pillar-num { color: var(--blue); }
.pillar.p3 .pillar-num { color: var(--orange-d); }
.pillar.p4 .pillar-num { color: var(--blue-d); }
.pillar-icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.pillar.p1 .pillar-icon { background: rgba(249,115,22,0.1); color: var(--orange-d); }
.pillar.p2 .pillar-icon { background: rgba(37,99,235,0.1); color: var(--blue); }
.pillar.p3 .pillar-icon { background: rgba(194,65,12,0.1); color: var(--orange-d); }
.pillar.p4 .pillar-icon { background: rgba(29,78,216,0.1); color: var(--blue-d); }
.pillar-title { font-size: 18px; font-weight: 700; margin-bottom: 8px; color: var(--t-dark); }
.pillar.p1 .pillar-title { color: var(--orange-d); }
.pillar.p2 .pillar-title { color: var(--blue); }
.pillar.p3 .pillar-title { color: var(--orange-d); }
.pillar.p4 .pillar-title { color: var(--blue-d); }
.pillar-desc { font-size: 14px; color: var(--t-dark-mute); line-height: 1.75; }

/* ============================================
   Workshop Approach — Vertical steps
   ============================================ */
.workshop {
  background: var(--paper-2); padding: var(--space-16) 20px;
}
.workshop-inner { max-width: var(--container); margin: 0 auto; }
.workshop-intro {
  background: var(--ink); color: var(--t-light); border-radius: 18px;
  padding: 32px 28px; margin-bottom: 36px; position: relative; overflow: hidden;
}
.workshop-intro::before {
  content: ''; position: absolute; top: -40%; right: -10%; width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(249,115,22,0.15), transparent 70%);
  border-radius: 50%;
}
.workshop-intro-tag {
  display: inline-block; background: rgba(249,115,22,0.15); color: var(--orange-l);
  padding: 5px 14px; border-radius: 100px; font-size: 12px; font-weight: 600;
  margin-bottom: 14px; position: relative; z-index: 1;
}
.workshop-intro h3 {
  font-family: "Songti SC", serif; font-size: clamp(1.1rem, 4.5vw, 1.4rem);
  font-weight: 700; line-height: 1.5; position: relative; z-index: 1;
}
.workshop-intro h3 em { color: var(--orange-l); font-style: italic; }

.steps { display: flex; flex-direction: column; gap: 0; }
.step {
  display: flex; gap: 20px;
  padding: 28px 0; border-bottom: 1px solid var(--bd-light);
  transition: padding-left 0.3s var(--ease-out-quart);
}
.step:hover { padding-left: 8px; }
.step:last-child { border-bottom: none; }
.step-num {
  font-family: "Songti SC", serif; font-size: clamp(2.2rem, 8vw, 3rem);
  font-weight: 900; line-height: 1; letter-spacing: -0.03em; flex-shrink: 0;
  min-width: 48px;
}
.step:nth-child(1) .step-num { color: var(--orange-l); }
.step:nth-child(2) .step-num { color: var(--blue); }
.step:nth-child(3) .step-num { color: var(--blue-d); }
.step-title { font-size: clamp(1rem, 4vw, 1.25rem); font-weight: 700; margin-bottom: 6px; color: var(--t-dark); }
.step-desc { font-size: 14px; color: var(--t-dark-mute); line-height: 1.75; }

/* ============================================
   Six Core Modules — Single column (mobile-first)
   ============================================ */
.modules-grid {
  display: flex; flex-direction: column; gap: 8px;
}
.module {
  background: var(--paper); border: 1px solid var(--bd-light); border-radius: 14px;
  padding: 16px 20px 14px; position: relative;
  transition: transform 0.3s var(--ease-out-quart), box-shadow 0.3s var(--ease-out-quart);
  overflow: hidden;
}
.module::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease-out-expo);
}
.module:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.module:hover::after { transform: scaleX(1); }
.module:nth-child(1)::after { background: var(--orange-l); }
.module:nth-child(2)::after { background: var(--blue); }
.module:nth-child(3)::after { background: var(--blue-d); }
.module:nth-child(4)::after { background: var(--orange-d); }
.module:nth-child(5)::after { background: var(--blue-l); }
.module:nth-child(6)::after { background: var(--orange); }
.module-top {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;
}
.module-tag {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 3px 10px; border-radius: 6px;
}
.module:nth-child(1) .module-tag { background: rgba(249,115,22,0.1); color: var(--orange-d); }
.module:nth-child(2) .module-tag { background: rgba(37,99,235,0.1); color: var(--blue); }
.module:nth-child(3) .module-tag { background: rgba(29,78,216,0.1); color: var(--blue-d); }
.module:nth-child(4) .module-tag { background: rgba(194,65,12,0.1); color: var(--orange-d); }
.module:nth-child(5) .module-tag { background: rgba(59,130,246,0.1); color: var(--blue-l); }
.module:nth-child(6) .module-tag { background: rgba(234,88,12,0.1); color: var(--orange); }
.module-icon-sm {
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  opacity: 0.6;
}
.module:nth-child(1) .module-icon-sm { color: var(--orange-d); }
.module:nth-child(2) .module-icon-sm { color: var(--blue); }
.module:nth-child(3) .module-icon-sm { color: var(--blue-d); }
.module:nth-child(4) .module-icon-sm { color: var(--orange-d); }
.module:nth-child(5) .module-icon-sm { color: var(--blue-l); }
.module:nth-child(6) .module-icon-sm { color: var(--orange); }
.module-title { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.module-desc { font-size: 13px; color: var(--t-dark-mute); line-height: 1.6; }
.module-role { font-size: 12px; color: var(--orange-d); font-weight: 600; margin-top: 8px; }

/* ============================================
   12-Week Standard Plan — Compact phase list
   ============================================ */
.plan-phases { display: flex; flex-direction: column; gap: 14px; }
.plan-phase {
  border-radius: 14px; overflow: hidden;
  border: 1px solid var(--bd-light);
  background: var(--paper);
  transition: box-shadow 0.3s var(--ease-out-quart);
}
.plan-phase:hover { box-shadow: var(--sh-md); }
.plan-phase-header {
  padding: 12px 20px; font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: space-between;
  color: var(--t-light);
}
.plan-phase-header .plan-phase-name { letter-spacing: -0.01em; }
.plan-phase-header .plan-phase-weeks {
  font-size: 11px; font-weight: 600; opacity: 0.8;
  font-family: "Songti SC", serif; letter-spacing: 0.05em;
}
.plan-phase-header.p1 { background: linear-gradient(135deg, var(--orange), var(--orange-d)); }
.plan-phase-header.p2 { background: linear-gradient(135deg, var(--blue), var(--blue-d)); }
.plan-phase-header.p3 { background: linear-gradient(135deg, var(--orange-d), #9a3412); }
.plan-phase-header.p4 { background: linear-gradient(135deg, var(--blue-d), #1e40af); }
.plan-phase-body { padding: 4px 20px 10px; }
.plan-week {
  display: flex; align-items: baseline; gap: 14px;
  padding: 12px 0; border-bottom: 1px solid var(--paper-2);
  transition: padding-left 0.2s var(--ease-out-quart);
}
.plan-week:last-child { border-bottom: none; }
.plan-week:hover { padding-left: 6px; }
.plan-week-num {
  font-family: "Songti SC", serif; font-size: 22px; font-weight: 900;
  line-height: 1; min-width: 32px; color: var(--ink-4);
  flex-shrink: 0; letter-spacing: -0.02em;
}
.plan-phase:nth-child(1) .plan-week-num { color: var(--orange-d); }
.plan-phase:nth-child(2) .plan-week-num { color: var(--blue-d); }
.plan-phase:nth-child(3) .plan-week-num { color: var(--orange); }
.plan-phase:nth-child(4) .plan-week-num { color: var(--blue); }
.plan-week-content { flex: 1; }
.plan-week-theme {
  font-size: 15px; font-weight: 700; color: var(--t-dark);
  line-height: 1.4; margin-bottom: 3px;
}
.plan-week-tasks {
  font-size: 12px; color: var(--t-dark-mute); line-height: 1.5;
}

/* ============================================
   Case Studies — Single column (mobile-first)
   ============================================ */
.cases { background: var(--ink); color: var(--t-light); padding: var(--space-16) 20px; }
.cases-inner { max-width: var(--container); margin: 0 auto; }
.cases .section-label { color: var(--blue-xl); }
.cases .section-label::before { background: var(--blue); }
.cases .section-title { color: var(--t-light); }
.cases .section-desc { color: var(--t-light-mute); }

.cases-grid {
  display: flex; flex-direction: column; gap: 14px;
}
.case {
  background: rgba(28,25,23,0.6); border: 1px solid var(--bd-dark); border-radius: 16px;
  padding: 24px 24px 22px; position: relative; overflow: hidden;
  transition: border-color 0.3s, transform 0.3s var(--ease-out-quart);
}
.case:hover { transform: translateY(-3px); border-color: rgba(249,115,22,0.3); }
.case-tag {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 4px 12px; border-radius: 100px; margin-bottom: 12px;
}
.case-title { font-size: 17px; font-weight: 700; margin-bottom: 8px; color: var(--t-light); }
.case-desc { font-size: 13px; color: var(--t-light-mute); line-height: 1.75; margin-bottom: 14px; }
.case-result {
  font-size: 14px; font-weight: 700; padding-top: 14px;
  border-top: 1px solid var(--bd-dark);
  display: flex; align-items: flex-start; gap: 8px;
}
.case-result-icon { color: var(--orange-l); flex-shrink: 0; margin-top: 2px; }

/* Case Analysis — collapsible section */
.case-analysis { margin: 10px 0 6px; }
.case-analysis-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: var(--orange-l);
  cursor: pointer; padding: 6px 14px; border-radius: 100px;
  background: rgba(249,115,22,0.1); border: 1px solid rgba(249,115,22,0.25);
  transition: all 0.25s var(--ease-out-quart);
  user-select: none;
}
.case-analysis-toggle:hover { background: rgba(249,115,22,0.18); border-color: rgba(249,115,22,0.4); }
.case-analysis-toggle .toggle-arrow { transition: transform 0.3s var(--ease-out-quart); opacity: 0.6; }
.case-analysis-toggle.active .toggle-arrow { transform: rotate(180deg); }
.case-analysis-body {
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 0.4s var(--ease-out-quart), opacity 0.3s, margin-top 0.3s;
}
.case-analysis-body.open {
  max-height: 2000px; opacity: 1; margin-top: 14px;
}
.analysis-block { margin-bottom: 16px; }
.analysis-block:last-child { margin-bottom: 0; }
.analysis-label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--blue-xl); margin-bottom: 8px;
  padding-bottom: 6px; border-bottom: 1px solid var(--bd-dark);
}
.analysis-items { list-style: none; padding: 0; margin: 0; }
.analysis-items li {
  font-size: 13px; line-height: 1.75; color: var(--t-light-mute);
  padding: 3px 0 3px 16px; position: relative;
}
.analysis-items li::before {
  content: ''; position: absolute; left: 0; top: 13px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--orange-l);
  opacity: 0.6;
}

/* Brand tags */
.brands {
  margin-top: 32px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
}
.brand-tag {
  padding: 7px 14px; border: 1px solid var(--bd-dark); border-radius: 100px;
  font-size: 13px; font-weight: 500; color: var(--t-light-mute);
  transition: all 0.2s var(--ease-out-quart);
}
.brand-tag:hover { color: var(--orange-l); border-color: var(--orange-l); }

/* ============================================
   Service Model — Stacked vertical (mobile-first)
   ============================================ */
.services-grid {
  display: flex; flex-direction: column; gap: 14px;
}
.service {
  background: var(--paper); border: 1px solid var(--bd-light); border-radius: 16px;
  padding: 32px 28px; text-align: left; position: relative; overflow: hidden;
  transition: transform 0.3s var(--ease-out-quart), box-shadow 0.3s;
}
.service:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.service-icon {
  width: 48px; height: 48px; border-radius: 14px; display: flex;
  align-items: center; justify-content: center; margin-bottom: 16px;
}
.service:nth-child(1) .service-icon { background: rgba(249,115,22,0.1); color: var(--orange-d); }
.service:nth-child(2) .service-icon { background: rgba(37,99,235,0.1); color: var(--blue); }
.service:nth-child(3) .service-icon { background: rgba(29,78,216,0.1); color: var(--blue-d); }
.service-title { font-size: 20px; font-weight: 800; margin-bottom: 6px; }
.service:nth-child(1) .service-title { color: var(--orange-d); }
.service:nth-child(2) .service-title { color: var(--blue); }
.service:nth-child(3) .service-title { color: var(--blue-d); }
.service-sub { font-size: 14px; font-weight: 600; color: var(--t-dark); margin-bottom: 14px; }
.service-list { list-style: none; }
.service-list li {
  font-size: 14px; color: var(--t-dark-mute); padding: 5px 0;
  padding-left: 18px; position: relative; line-height: 1.6;
}
.service-list li::before {
  content: ''; position: absolute; left: 0; top: 13px;
  width: 8px; height: 2px; border-radius: 1px;
}
.service:nth-child(1) .service-list li::before { background: var(--orange-l); }
.service:nth-child(2) .service-list li::before { background: var(--blue); }
.service:nth-child(3) .service-list li::before { background: var(--blue-d); }

/* ============================================
   Expert Team — 2-column grid (mobile-first)
   ============================================ */
.experts-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.expert {
  background: var(--paper); border: 1px solid var(--bd-light); border-radius: 14px;
  padding: 16px 14px; text-align: center;
  transition: transform 0.3s var(--ease-out-quart), box-shadow 0.3s;
}
.expert:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.expert-avatar {
  width: 46px; height: 46px; border-radius: 50%; margin: 0 auto 8px;
  display: flex; align-items: center; justify-content: center;
  font-family: "Songti SC", serif; font-size: 20px; font-weight: 800; color: var(--t-light);
  transition: transform 0.3s var(--ease-out-quart);
}
.expert:hover .expert-avatar { transform: scale(1.08); }
.expert-name { font-size: 14px; font-weight: 700; margin-bottom: 3px; }
.expert-role { font-size: 11px; color: var(--t-dark-mute); line-height: 1.5; }

.experts-note {
  margin-top: 24px; padding: 20px 24px;
  background: linear-gradient(135deg, rgba(249,115,22,0.06), rgba(37,99,235,0.06));
  border: 1px solid rgba(249,115,22,0.15); border-radius: 14px;
}
.experts-note strong { color: var(--orange-d); font-size: 14px; }
.experts-note p { font-size: 13px; color: var(--t-dark-mute); margin-top: 6px; line-height: 1.7; }

/* ============================================
   CTA — Bold closing
   ============================================ */
.cta {
  background: var(--ink); color: var(--t-light); text-align: center;
  padding: var(--space-20) 20px; position: relative; overflow: hidden;
}
.cta::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(249,115,22,0.08) 0%, transparent 60%);
  border-radius: 50%; pointer-events: none;
}
.cta-inner { max-width: var(--container); margin: 0 auto; position: relative; z-index: 1; }
.cta h2 {
  font-family: "Songti SC", serif; font-size: clamp(1.8rem, 8vw, 3rem);
  font-weight: 900; letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 12px;
}
.cta h2 em { color: var(--orange-l); font-style: italic; }
.cta p {
  font-size: clamp(0.9rem, 3.5vw, 1.05rem); color: var(--t-light-mute);
  margin-bottom: 28px; line-height: 1.7;
}
.cta-btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--orange-l); color: var(--ink); padding: 15px 36px;
  border-radius: 100px; font-size: 16px; font-weight: 700; text-decoration: none;
  transition: transform 0.2s var(--ease-out-quart), box-shadow 0.3s;
  box-shadow: 0 0 0 0 rgba(249,115,22,0.4);
}
.cta-btn:hover {
  transform: scale(1.05); box-shadow: 0 0 40px rgba(249,115,22,0.4);
}
.cta-btn svg { transition: transform 0.2s; }
.cta-btn:hover svg { transform: translateX(4px); }
.cta-contacts {
  margin-top: 20px; display: flex; flex-direction: column; gap: 10px;
  align-items: center;
}
.cta-contact-item {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--t-light); font-weight: 500;
  padding: 9px 18px; border-radius: 100px;
  background: rgba(250,250,249,0.06); border: 1px solid var(--bd-dark);
  transition: all 0.2s var(--ease-out-quart);
}
.cta-contact-item:hover {
  background: rgba(249,115,22,0.1); border-color: rgba(249,115,22,0.3);
  transform: translateY(-2px);
}
.cta-contact-item svg { color: var(--orange-l); flex-shrink: 0; }
.cta-note {
  margin: 16px auto 0; max-width: 380px; text-align: center;
  font-size: 13px; line-height: 1.7; color: var(--t-light-mute);
  padding: 0 12px;
}

/* ============================================
   Footer
   ============================================ */
.footer {
  background: var(--ink-2); color: var(--t-light-mute);
  padding: 32px 20px; text-align: center; font-size: 12px;
  border-top: 1px solid var(--bd-dark);
}
.footer p { margin-bottom: 4px; }
.footer .ft-tag { color: var(--orange-l); font-weight: 600; }

/* ============================================
   Scroll Reveal Animation
   ============================================ */
.reveal {
  opacity: 0; transform: translateY(40px);
  transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-stagger > * {
  opacity: 0; transform: translateY(30px);
  transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo);
}
.reveal-stagger.visible > * {
  opacity: 1; transform: translateY(0);
}
.reveal-stagger.visible > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.visible > *:nth-child(2) { transition-delay: 80ms; }
.reveal-stagger.visible > *:nth-child(3) { transition-delay: 160ms; }
.reveal-stagger.visible > *:nth-child(4) { transition-delay: 240ms; }
.reveal-stagger.visible > *:nth-child(5) { transition-delay: 320ms; }
.reveal-stagger.visible > *:nth-child(6) { transition-delay: 400ms; }
.reveal-stagger.visible > *:nth-child(7) { transition-delay: 480ms; }
.reveal-stagger.visible > *:nth-child(8) { transition-delay: 560ms; }

/* ============================================
   Reduced Motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; }
}

/* Avatar in CTA — vertical card layout */
.cta-avatar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 0 auto 24px;
  padding: 24px 32px 20px;
  background: rgba(250,250,249,0.04);
  border: 1px solid var(--bd-dark);
  border-radius: 20px;
  max-width: 280px;
}
.cta-avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--orange);
  box-shadow: 0 0 0 4px rgba(249,115,22,0.12), 0 8px 24px rgba(0,0,0,0.3);
  transition: transform 0.3s var(--ease-out-quart), box-shadow 0.3s;
}
.cta-avatar:hover {
  transform: scale(1.06);
  box-shadow: 0 0 0 6px rgba(249,115,22,0.2), 0 12px 32px rgba(0,0,0,0.4);
}
.cta-avatar-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--t-light);
  margin-top: 4px;
}
.cta-avatar-title {
  font-size: 12px;
  color: var(--orange-l);
  letter-spacing: 0.02em;
}
.cta-avatar-desc {
  font-size: 11px;
  color: var(--t-light-mute);
  opacity: 0.7;
  margin-top: 2px;
  text-align: center;
  line-height: 1.5;
}
@media (min-width: 480px) {
  .cta-avatar { width: 96px; height: 96px; }
  .cta-avatar-name { font-size: 17px; }
}

/* ============================================
   V2 ADDITIONS — New Components
   ============================================ */

/* Role Switcher */
.nav-role-switcher {
  display: flex; gap: 2px; background: rgba(250,250,249,0.08);
  border-radius: 100px; padding: 3px; margin-right: 8px;
}
.nav-role-btn {
  padding: 5px 12px; border-radius: 100px; font-size: 11px; font-weight: 600;
  color: var(--t-light-mute); cursor: pointer; border: none; background: transparent;
  transition: all 0.2s var(--ease-out-quart); white-space: nowrap;
}
.nav-role-btn.active { background: var(--orange-l); color: var(--ink); }
.nav-role-btn:hover:not(.active) { color: var(--t-light); }
.nav-links { display: flex; gap: 4px; align-items: center; }
.nav-link {
  font-size: 12px; color: var(--t-light-mute); text-decoration: none;
  padding: 5px 10px; border-radius: 6px; transition: color 0.2s;
}
.nav-link:hover { color: var(--t-light); }
.nav-link.active { color: var(--orange-l); }

/* Form Components */
.form-section {
  background: var(--ink); color: var(--t-light); text-align: center;
  padding: var(--space-20) 20px; position: relative; overflow: hidden;
}
.form-section::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(249,115,22,0.08) 0%, transparent 60%);
  border-radius: 50%; pointer-events: none;
}
.form-inner { max-width: var(--container); margin: 0 auto; position: relative; z-index: 1; text-align: left; }
.form-section h2 {
  font-family: "Songti SC", serif; font-size: clamp(1.8rem, 8vw, 3rem);
  font-weight: 900; letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 12px;
  text-align: center;
}
.form-section h2 em { color: var(--orange-l); font-style: italic; }
.form-section .form-desc {
  font-size: clamp(0.9rem, 3.5vw, 1.05rem); color: var(--t-light-mute);
  margin-bottom: 32px; line-height: 1.7; text-align: center;
}
.form-group { margin-bottom: 18px; }
.form-label {
  display: block; font-size: 12px; font-weight: 700; color: var(--orange-l);
  margin-bottom: 6px; letter-spacing: 0.05em;
}
.form-label .char-count { float: right; color: var(--t-light-mute); font-weight: 400; }
.form-input, .form-textarea {
  width: 100%; background: rgba(250,250,249,0.06); border: 1px solid var(--bd-dark);
  border-radius: 10px; padding: 12px 16px; font-size: 14px; color: var(--t-light);
  font-family: inherit; transition: border-color 0.2s, background 0.2s; outline: none;
}
.form-input:focus, .form-textarea:focus {
  border-color: var(--orange-l); background: rgba(250,250,249,0.1);
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--t-light-mute); opacity: 0.5; }
.form-textarea { resize: vertical; min-height: 80px; line-height: 1.6; }
.form-submit {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--orange-l); color: var(--ink); padding: 14px 36px;
  border-radius: 100px; font-size: 15px; font-weight: 700; border: none; cursor: pointer;
  transition: transform 0.2s var(--ease-out-quart), box-shadow 0.3s;
  box-shadow: 0 0 0 0 rgba(249,115,22,0.4); width: 100%; justify-content: center;
}
.form-submit:hover { transform: scale(1.02); box-shadow: 0 0 40px rgba(249,115,22,0.4); }
.form-success {
  background: rgba(249,115,22,0.1); border: 1px solid rgba(249,115,22,0.3);
  border-radius: 14px; padding: 20px 24px; margin-top: 20px;
  text-align: center; display: none;
}
.form-success.show { display: block; }
.form-success h3 { color: var(--orange-l); font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.form-success p { color: var(--t-light-mute); font-size: 13px; line-height: 1.7; }
.form-success .contact-hint {
  margin-top: 14px; display: flex; flex-direction: column; gap: 8px; align-items: center;
}

/* Tab Components */
.tabs-nav {
  display: flex; gap: 0; background: var(--ink-2); border-radius: 14px;
  padding: 4px; margin-bottom: 24px; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.tab-btn {
  flex: 1; padding: 12px 16px; border: none; background: transparent;
  color: var(--t-light-mute); font-size: 13px; font-weight: 600; cursor: pointer;
  border-radius: 10px; transition: all 0.2s var(--ease-out-quart); white-space: nowrap;
  text-align: center; font-family: inherit;
}
.tab-btn.active { background: var(--orange-l); color: var(--ink); }
.tab-btn:hover:not(.active) { color: var(--t-light); }
.tab-content { display: none; }
.tab-content.active { display: block; animation: tabFade 0.3s var(--ease-out-quart); }
@keyframes tabFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Timeline (12-week plan) */
.timeline { display: flex; flex-direction: column; gap: 0; }
.timeline-phase {
  border-radius: 14px; overflow: hidden; margin-bottom: 16px;
  border: 1px solid var(--bd-light);
}
.timeline-phase-header {
  padding: 14px 20px; font-weight: 700; font-size: 14px; color: var(--t-light);
  display: flex; align-items: center; justify-content: space-between;
}
.timeline-phase-header .phase-weeks { font-size: 12px; opacity: 0.7; font-weight: 500; }
.timeline-phase.p1 .timeline-phase-header { background: var(--orange); }
.timeline-phase.p2 .timeline-phase-header { background: var(--blue); }
.timeline-phase.p3 .timeline-phase-header { background: var(--orange-d); }
.timeline-phase.p4 .timeline-phase-header { background: var(--blue-d); }
.timeline-week {
  background: var(--paper); padding: 20px; border-bottom: 1px solid var(--bd-light);
  transition: background 0.2s;
}
.timeline-week:last-child { border-bottom: none; }
.timeline-week:hover { background: var(--paper-2); }
.timeline-week.current { background: rgba(249,115,22,0.04); border-left: 3px solid var(--orange-l); }
.timeline-week-header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 10px; cursor: pointer;
}
.timeline-week-num {
  font-family: "Songti SC", serif; font-size: 28px; font-weight: 900;
  line-height: 1; min-width: 40px; color: var(--ink-4);
}
.timeline-week.current .timeline-week-num { color: var(--orange-l); }
.timeline-week-theme { font-size: 15px; font-weight: 700; color: var(--t-dark); flex: 1; }
.timeline-week-toggle { color: var(--t-dark-mute); transition: transform 0.2s; }
.timeline-week.expanded .timeline-week-toggle { transform: rotate(180deg); }
.timeline-week-detail {
  max-height: 0; overflow: hidden; transition: max-height 0.3s var(--ease-out-quart);
}
.timeline-week.expanded .timeline-week-detail { max-height: 1000px; }
.timeline-week-detail-inner { padding: 10px 0 0 52px; }
.timeline-task {
  display: flex; align-items: flex-start; gap: 8px; padding: 6px 0;
  font-size: 13px; color: var(--t-dark-mute); line-height: 1.6;
}
.timeline-task-check {
  width: 18px; height: 18px; border-radius: 5px; border: 2px solid var(--paper-3);
  flex-shrink: 0; margin-top: 1px; display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.timeline-task.done .timeline-task-check { background: var(--orange-l); border-color: var(--orange-l); }
.timeline-task.done .timeline-task-check::after {
  content: ''; width: 5px; height: 9px; border: solid var(--ink);
  border-width: 0 2px 2px 0; transform: rotate(45deg); margin-top: -2px;
}
.timeline-task.done span { text-decoration: line-through; opacity: 0.6; }
.timeline-task.cvas { background: rgba(37,99,235,0.06); border-radius: 8px; padding: 8px 10px; margin: 4px 0; }
.timeline-task.cvas .cvas-badge {
  display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: 0.1em;
  background: rgba(37,99,235,0.15); color: var(--blue); padding: 2px 8px; border-radius: 4px;
  margin-right: 6px; text-transform: uppercase;
}
.timeline-participants { margin-top: 10px; font-size: 12px; color: var(--t-dark-mute); }
.timeline-participants strong { color: var(--t-dark); }
.timeline-materials { margin-top: 8px; font-size: 12px; color: var(--t-dark-mute); }
.timeline-materials strong { color: var(--t-dark); }

/* KPI Dashboard */
.kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px; }
.kpi-card {
  background: var(--paper); border: 1px solid var(--bd-light); border-radius: 14px;
  padding: 20px 18px; text-align: center;
}
.kpi-value {
  font-family: "Songti SC", serif; font-size: clamp(1.8rem, 8vw, 2.4rem);
  font-weight: 900; color: var(--orange-l); line-height: 1; letter-spacing: -0.02em;
}
.kpi-value.blue { color: var(--blue); }
.kpi-label { font-size: 12px; color: var(--t-dark-mute); margin-top: 8px; }
.chart-container {
  background: var(--paper); border: 1px solid var(--bd-light); border-radius: 14px;
  padding: 20px; margin-bottom: 16px;
}
.chart-title { font-size: 14px; font-weight: 700; color: var(--t-dark); margin-bottom: 14px; }
.chart-svg { width: 100%; height: auto; display: block; }

/* File Upload */
.file-upload-area {
  border: 2px dashed var(--paper-3); border-radius: 12px; padding: 24px;
  text-align: center; cursor: pointer; transition: border-color 0.2s, background 0.2s;
}
.file-upload-area:hover { border-color: var(--orange-l); background: rgba(249,115,22,0.02); }
.file-upload-area.dragover { border-color: var(--orange-l); background: rgba(249,115,22,0.05); }
.file-upload-icon { color: var(--t-dark-mute); margin-bottom: 8px; }
.file-upload-text { font-size: 13px; color: var(--t-dark-mute); }
.file-upload-hint { font-size: 11px; color: var(--t-dark-mute); opacity: 0.6; margin-top: 4px; }
.file-list { margin-top: 12px; }
.file-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: var(--paper-2); border-radius: 10px; margin-bottom: 8px;
  font-size: 13px; transition: background 0.2s;
}
.file-item:hover { background: var(--paper-3); }
.file-item-icon { color: var(--blue); flex-shrink: 0; }
.file-item-name { flex: 1; color: var(--t-dark); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-item-size { color: var(--t-dark-mute); font-size: 11px; flex-shrink: 0; }
.file-item-download { color: var(--orange-d); text-decoration: none; font-size: 12px; font-weight: 600; flex-shrink: 0; }
.file-item-remove { color: #dc2626; cursor: pointer; font-size: 12px; flex-shrink: 0; background: none; border: none; }

/* Toast */
.toast-container {
  position: fixed; top: 70px; left: 50%; transform: translateX(-50%);
  z-index: 9999; pointer-events: none;
}
.toast {
  background: var(--ink); color: var(--t-light); padding: 12px 24px;
  border-radius: 100px; font-size: 13px; font-weight: 600;
  box-shadow: var(--sh-lg); display: flex; align-items: center; gap: 8px;
  opacity: 0; transform: translateY(-10px); transition: all 0.3s var(--ease-out-quart);
  border: 1px solid var(--bd-dark); pointer-events: auto;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.success { border-color: rgba(249,115,22,0.3); }
.toast.success .toast-icon { color: var(--orange-l); }
.toast.error { border-color: rgba(220,38,38,0.3); }
.toast.error .toast-icon { color: #ef4444; }

/* Assignment Cards */
.assignment-card {
  background: var(--paper); border: 1px solid var(--bd-light); border-radius: 14px;
  padding: 20px 22px; margin-bottom: 14px;
}
.assignment-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;
}
.assignment-week {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  background: rgba(249,115,22,0.1); color: var(--orange-d); padding: 3px 10px; border-radius: 6px;
}
.assignment-status {
  font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 100px;
}
.assignment-status.pending { background: var(--paper-3); color: var(--t-dark-mute); }
.assignment-status.submitted { background: rgba(37,99,235,0.1); color: var(--blue); }
.assignment-status.reviewed { background: rgba(249,115,22,0.1); color: var(--orange-d); }
.assignment-status.needs_revision { background: rgba(220,38,38,0.1); color: #dc2626; }
.assignment-title { font-size: 16px; font-weight: 700; color: var(--t-dark); margin-bottom: 6px; }
.assignment-desc { font-size: 13px; color: var(--t-dark-mute); line-height: 1.7; margin-bottom: 10px; }
.assignment-due { font-size: 12px; color: var(--orange-d); font-weight: 600; margin-bottom: 14px; }
.assignment-cvas-tag {
  display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: 0.1em;
  background: rgba(37,99,235,0.15); color: var(--blue); padding: 2px 8px; border-radius: 4px;
  margin-left: 8px; text-transform: uppercase;
}
.assignment-submission { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--bd-light); }
.assignment-feedback {
  margin-top: 12px; padding: 12px 16px; background: rgba(249,115,22,0.06);
  border-radius: 10px; font-size: 13px; color: var(--t-dark); line-height: 1.6;
}
.assignment-feedback strong { color: var(--orange-d); }

/* Trainer Console */
.trainer-layout { display: flex; min-height: 100vh; background: var(--paper); }
.trainer-sidebar {
  width: 220px; background: var(--ink); color: var(--t-light);
  padding: 20px 0; position: fixed; top: 0; left: 0; bottom: 0; z-index: 50; overflow-y: auto;
}
.trainer-sidebar-logo {
  padding: 0 20px 20px; font-family: "Songti SC", serif; font-size: 16px; font-weight: 700;
  border-bottom: 1px solid var(--bd-dark); margin-bottom: 12px;
}
.trainer-nav-item {
  display: flex; align-items: center; gap: 10px; padding: 12px 20px;
  font-size: 13px; color: var(--t-light-mute); cursor: pointer;
  transition: all 0.2s; border-left: 3px solid transparent;
}
.trainer-nav-item:hover { color: var(--t-light); background: rgba(250,250,249,0.04); }
.trainer-nav-item.active { color: var(--orange-l); border-left-color: var(--orange-l); background: rgba(249,115,22,0.06); }
.trainer-main { flex: 1; margin-left: 220px; padding: 24px 30px; }
.trainer-page-title { font-size: 22px; font-weight: 800; color: var(--t-dark); margin-bottom: 20px; }
.trainer-card {
  background: var(--paper); border: 1px solid var(--bd-light); border-radius: 14px;
  padding: 20px 22px; margin-bottom: 14px; transition: box-shadow 0.2s;
}
.trainer-card:hover { box-shadow: var(--sh-md); }
.trainer-card-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;
}
.trainer-card-title { font-size: 15px; font-weight: 700; color: var(--t-dark); }
.trainer-card-meta { font-size: 12px; color: var(--t-dark-mute); }
.trainer-card-actions { display: flex; gap: 8px; margin-top: 12px; }
.trainer-btn {
  padding: 8px 16px; border-radius: 8px; font-size: 12px; font-weight: 600;
  cursor: pointer; border: none; transition: all 0.2s; font-family: inherit;
}
.trainer-btn.primary { background: var(--orange-l); color: var(--ink); }
.trainer-btn.primary:hover { transform: scale(1.03); box-shadow: 0 4px 12px rgba(249,115,22,0.3); }
.trainer-btn.secondary { background: var(--paper-3); color: var(--t-dark); }
.trainer-btn.secondary:hover { background: var(--paper-2); }
.trainer-btn.danger { background: rgba(220,38,38,0.1); color: #dc2626; }
.trainer-btn.danger:hover { background: rgba(220,38,38,0.2); }
.trainer-status-badge {
  font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 100px;
}
.trainer-status-badge.pending { background: rgba(249,115,22,0.1); color: var(--orange-d); }
.trainer-status-badge.processing { background: rgba(37,99,235,0.1); color: var(--blue); }
.trainer-status-badge.published { background: rgba(34,197,94,0.1); color: #16a34a; }
.trainer-status-badge.in_progress { background: rgba(249,115,22,0.1); color: var(--orange-l); }
.trainer-status-badge.completed { background: rgba(100,116,139,0.1); color: #64748b; }

/* Empty State */
.empty-state { text-align: center; padding: 60px 20px; color: var(--t-dark-mute); }
.empty-state-icon { margin-bottom: 12px; opacity: 0.3; }
.empty-state-text { font-size: 14px; }

/* Workshop Header */
.workshop-header {
  background: var(--ink); color: var(--t-light); padding: 24px 20px;
  border-radius: 0 0 18px 18px; margin-bottom: 20px;
}
.workshop-header-top {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px;
}
.workshop-enterprise { font-size: 18px; font-weight: 800; color: var(--t-light); }
.workshop-status { font-size: 11px; font-weight: 600; padding: 4px 12px; border-radius: 100px; }
.workshop-status.published { background: rgba(34,197,94,0.15); color: #4ade80; }
.workshop-status.in_progress { background: rgba(249,115,22,0.15); color: var(--orange-l); }
.workshop-status.completed { background: rgba(100,116,139,0.15); color: #94a3b8; }
.workshop-progress-bar {
  height: 6px; background: rgba(250,250,249,0.1); border-radius: 100px; overflow: hidden; margin-top: 10px;
}
.workshop-progress-fill {
  height: 100%; background: linear-gradient(90deg, var(--orange-l), var(--orange-d));
  border-radius: 100px; transition: width 0.5s var(--ease-out-quart);
}
.workshop-meta {
  display: flex; gap: 16px; margin-top: 10px; font-size: 12px; color: var(--t-light-mute);
}

/* Trainer form */
.trainer-form-group { margin-bottom: 14px; }
.trainer-form-label { font-size: 12px; font-weight: 700; color: var(--t-dark); margin-bottom: 5px; display: block; }
.trainer-form-input, .trainer-form-textarea, .trainer-form-select {
  width: 100%; background: var(--paper); border: 1px solid var(--bd-light); border-radius: 8px;
  padding: 10px 14px; font-size: 13px; color: var(--t-dark); font-family: inherit; outline: none;
  transition: border-color 0.2s;
}
.trainer-form-input:focus, .trainer-form-textarea:focus, .trainer-form-select:focus { border-color: var(--orange-l); }
.trainer-form-textarea { resize: vertical; min-height: 60px; line-height: 1.5; }

/* URL share box */
.url-share-box {
  background: rgba(249,115,22,0.06); border: 1px solid rgba(249,115,22,0.2);
  border-radius: 10px; padding: 14px 16px; margin-top: 12px;
  display: flex; align-items: center; gap: 10px;
}
.url-share-box input {
  flex: 1; background: transparent; border: none; color: var(--orange-d);
  font-size: 12px; font-family: monospace; outline: none;
}

/* Responsive: Trainer sidebar collapses on mobile */
@media (max-width: 768px) {
  .trainer-sidebar { width: 100%; height: auto; position: relative; }
  .trainer-main { margin-left: 0; padding: 16px; }
  .trainer-layout { flex-direction: column; }
}

/* Filter tags */
.filter-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.filter-tag {
  padding: 7px 14px; border: 1px solid var(--bd-light); border-radius: 100px;
  font-size: 12px; font-weight: 600; color: var(--t-dark-mute); cursor: pointer;
  transition: all 0.2s; background: var(--paper);
}
.filter-tag:hover { border-color: var(--orange-l); color: var(--orange-d); }
.filter-tag.active { background: var(--orange-l); color: var(--ink); border-color: var(--orange-l); }

/* ============================================
   Login Modal — Dark editorial style
   ============================================ */
.login-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(12,10,9,0.7);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s var(--ease-out-quart), visibility 0.3s;
  padding: 20px;
}
.login-overlay.show { opacity: 1; visibility: visible; }
.login-modal {
  background: var(--ink-2);
  border: 1px solid var(--bd-dark);
  border-radius: 18px;
  padding: 36px 28px 28px;
  max-width: 380px; width: 100%;
  position: relative;
  box-shadow: 0 24px 80px rgba(0,0,0,0.4);
  transform: translateY(20px) scale(0.95);
  transition: transform 0.4s var(--ease-out-expo);
}
.login-overlay.show .login-modal { transform: translateY(0) scale(1); }
.login-close {
  position: absolute; top: 12px; right: 16px;
  background: none; border: none; color: var(--t-light-mute);
  font-size: 24px; cursor: pointer; line-height: 1;
  transition: color 0.2s;
}
.login-close:hover { color: var(--orange-l); }
.login-header { text-align: center; margin-bottom: 28px; }
.login-icon {
  width: 56px; height: 56px; margin: 0 auto 16px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.login-icon.enterprise { background: rgba(249,115,22,0.15); color: var(--orange-l); }
.login-icon.trainer { background: rgba(37,99,235,0.15); color: var(--blue-xl); }
.login-title {
  font-family: "Songti SC", serif; font-size: 22px; font-weight: 800;
  color: var(--t-light); margin-bottom: 8px;
}
.login-subtitle { font-size: 13px; color: var(--t-light-mute); line-height: 1.5; }
.login-form-group { margin-bottom: 16px; }
.login-label {
  display: block; font-size: 12px; font-weight: 700;
  color: var(--orange-l); margin-bottom: 6px; letter-spacing: 0.05em;
}
.login-input {
  width: 100%; background: rgba(250,250,249,0.06);
  border: 1px solid var(--bd-dark); border-radius: 10px;
  padding: 12px 16px; font-size: 14px; color: var(--t-light);
  font-family: inherit; outline: none;
  transition: border-color 0.2s, background 0.2s;
  box-sizing: border-box;
}
.login-input:focus { border-color: var(--orange-l); background: rgba(250,250,249,0.1); }
.login-input::placeholder { color: var(--t-light-mute); opacity: 0.4; }
.login-password-wrap { position: relative; }
.login-password-toggle {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--t-light-mute); cursor: pointer; padding: 4px;
}
.login-password-toggle:hover { color: var(--t-light); }
.login-error {
  color: #ef4444; font-size: 12px; font-weight: 600;
  min-height: 20px; margin-bottom: 4px; display: none;
}
.login-error.show { display: block; }
.login-submit {
  width: 100%; background: var(--orange-l); color: var(--ink);
  padding: 14px 0; border-radius: 100px; font-size: 15px; font-weight: 700;
  border: none; cursor: pointer; font-family: inherit;
  transition: transform 0.2s var(--ease-out-quart), box-shadow 0.3s;
  margin-top: 8px;
}
.login-submit:hover { transform: scale(1.02); box-shadow: 0 0 32px rgba(249,115,22,0.4); }
.login-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.login-footer {
  margin-top: 20px; text-align: center; font-size: 12px; color: var(--t-light-mute);
}
.login-footer a { color: var(--orange-l); text-decoration: none; font-weight: 600; }
.login-footer a:hover { text-decoration: underline; }
@keyframes loginShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}
.login-input.error { border-color: #ef4444; animation: loginShake 0.4s ease; }

/* ============================================
   AI Visual Elements — Tech-themed patterns & decorations
   ============================================ */

/* Section positioning for pattern containment */
.crisis, .section, .workshop, .cases { position: relative; overflow: hidden; }
.crisis-inner, .workshop-inner, .cases-inner { position: relative; z-index: 1; }

/* Background pattern containers */
.ai-bg-pattern { position: absolute; inset: 0; pointer-events: none; z-index: 0; }

/* Neural network pattern — dark backgrounds (Hero) */
.ai-bg-pattern.neural {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Ccircle cx='20' cy='20' r='2.5' fill='%23f97316'/%3E%3Ccircle cx='80' cy='35' r='2.5' fill='%2360a5fa'/%3E%3Ccircle cx='45' cy='85' r='2.5' fill='%23f97316'/%3E%3Ccircle cx='100' cy='95' r='2.5' fill='%2360a5fa'/%3E%3Cline x1='20' y1='20' x2='80' y2='35' stroke='%23f97316' stroke-width='0.6'/%3E%3Cline x1='80' y1='35' x2='45' y2='85' stroke='%2360a5fa' stroke-width='0.6'/%3E%3Cline x1='45' y1='85' x2='100' y2='95' stroke='%23f97316' stroke-width='0.6'/%3E%3Cline x1='20' y1='20' x2='45' y2='85' stroke='%2360a5fa' stroke-width='0.6'/%3E%3Cline x1='80' y1='35' x2='100' y2='95' stroke='%23f97316' stroke-width='0.6'/%3E%3C/svg%3E");
  opacity: 0.12;
}

/* Circuit board pattern — dark backgrounds (Crisis) */
.ai-bg-pattern.circuit {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpath d='M0 25h30v20h25v-20h20v15h25' stroke='%23f97316' stroke-width='0.6' fill='none'/%3E%3Cpath d='M0 70h35v-15h20v15h20v-10h25' stroke='%2360a5fa' stroke-width='0.6' fill='none'/%3E%3Ccircle cx='30' cy='25' r='1.5' fill='%23f97316'/%3E%3Ccircle cx='55' cy='45' r='1.5' fill='%2360a5fa'/%3E%3Ccircle cx='35' cy='70' r='1.5' fill='%23f97316'/%3E%3Ccircle cx='75' cy='60' r='1.5' fill='%2360a5fa'/%3E%3C/svg%3E");
  opacity: 0.1;
}

/* Hexagonal grid — light backgrounds (Method/Modules) */
.ai-bg-pattern.hex {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpolygon points='14,0 42,0 56,25 42,50 14,50 0,25' fill='none' stroke='%23ea580c' stroke-width='0.8'/%3E%3Cpolygon points='14,50 42,50 56,75 42,100 14,100 0,75' fill='none' stroke='%232563eb' stroke-width='0.8'/%3E%3C/svg%3E");
  opacity: 0.04;
}

/* Dot matrix — light backgrounds (Workshop/Experts) */
.ai-bg-pattern.dots {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='1' fill='%23ea580c'/%3E%3C/svg%3E");
  opacity: 0.06;
}

/* Data bars pattern — dark backgrounds (Cases) */
.ai-bg-pattern.data {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='60'%3E%3Crect x='5' y='35' width='8' height='20' fill='%23f97316'/%3E%3Crect x='18' y='25' width='8' height='30' fill='%2360a5fa'/%3E%3Crect x='31' y='15' width='8' height='40' fill='%23f97316'/%3E%3Crect x='44' y='30' width='8' height='25' fill='%2360a5fa'/%3E%3Crect x='57' y='20' width='8' height='35' fill='%23f97316'/%3E%3C/svg%3E");
  opacity: 0.08;
}

/* Signal wave pattern — dark backgrounds (CTA) */
.ai-bg-pattern.wave {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpath d='M0 50 Q25 30 50 50 T100 50' stroke='%23f97316' stroke-width='0.6' fill='none'/%3E%3Cpath d='M0 50 Q25 70 50 50 T100 50' stroke='%2360a5fa' stroke-width='0.6' fill='none'/%3E%3C/svg%3E");
  opacity: 0.08;
}

/* Decorative SVG illustrations */
.ai-deco { position: absolute; pointer-events: none; z-index: 0; }

/* Section top accent line — subtle tech divider */
.section::before, .workshop::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 60px; height: 2px; background: linear-gradient(90deg, transparent, var(--orange-l), transparent);
  opacity: 0.4;
}

/* Animated neural nodes */
@keyframes nodePulse {
  0%, 100% { opacity: 0.3; r: 2.5; }
  50% { opacity: 0.8; r: 3.5; }
}
.ai-deco circle { animation: nodePulse 3s ease-in-out infinite; }
.ai-deco circle:nth-child(2) { animation-delay: 0.5s; }
.ai-deco circle:nth-child(3) { animation-delay: 1s; }
.ai-deco circle:nth-child(4) { animation-delay: 1.5s; }
.ai-deco circle:nth-child(5) { animation-delay: 2s; }

@media (prefers-reduced-motion: reduce) {
  .ai-deco circle { animation: none; }
}