/* ============================================
   Strategy Dashboard – Extended Design System
   ============================================ */

/* --- Strategy-Specific Variables --- */
:root {
  --strat-bg: #0c1117;
  --strat-surface: rgba(22, 30, 44, 0.85);
  --strat-surface-hover: rgba(30, 42, 60, 0.9);
  --strat-glass: rgba(255, 255, 255, 0.04);
  --strat-glass-border: rgba(255, 255, 255, 0.08);
  --strat-text: #e2e8f0;
  --strat-text-muted: #94a3b8;
  --strat-accent-green: #34d399;
  --strat-accent-blue: #60a5fa;
  --strat-accent-amber: #fbbf24;
  --strat-accent-red: #f87171;
  --strat-accent-purple: #a78bfa;
  --strat-gradient-1: linear-gradient(135deg, #0f766e 0%, #115e59 100%);
  --strat-gradient-2: linear-gradient(135deg, #1e40af 0%, #1e3a5f 100%);
  --strat-gradient-3: linear-gradient(135deg, #b45309 0%, #78350f 100%);
  --strat-gradient-hero: linear-gradient(160deg, #0f172a 0%, #0c4a3e 30%, #0f172a 70%, #1e1b4b 100%);
}

/* --- Base Layout Override for Strategy Page --- */
.strategy-page {
  background: var(--strat-bg);
  color: var(--strat-text);
  min-height: 100vh;
  overflow-y: auto;
}

.strategy-page .content-body {
  background: var(--strat-bg);
  padding: 0;
}

.strategy-page .top-header {
  background: rgba(12, 17, 23, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--strat-glass-border);
  position: sticky;
  top: 0;
  z-index: 50;
}

.strategy-page .header-title {
  color: var(--strat-text);
}

.strategy-page .btn-outline {
  color: var(--strat-text-muted);
  border-color: var(--strat-glass-border);
}

.strategy-page .btn-outline:hover {
  color: var(--strat-text);
  background: var(--strat-glass);
}

/* --- Hero Section --- */
.strat-hero {
  background: var(--strat-gradient-hero);
  padding: 64px 48px 56px;
  position: relative;
  overflow: hidden;
}

.strat-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 800px 400px at 30% 50%, rgba(52, 211, 153, 0.08), transparent),
              radial-gradient(ellipse 600px 400px at 80% 30%, rgba(96, 165, 250, 0.06), transparent);
  pointer-events: none;
}

.strat-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.strat-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(52, 211, 153, 0.1);
  border: 1px solid rgba(52, 211, 153, 0.2);
  color: var(--strat-accent-green);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-bottom: 20px;
}

.strat-hero h1 {
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin-bottom: 12px;
  background: linear-gradient(135deg, #e2e8f0, #94a3b8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.strat-hero-sub {
  font-size: 1.05rem;
  color: var(--strat-text-muted);
  line-height: 1.6;
  max-width: 640px;
}

.strat-hero-meta {
  display: flex;
  gap: 32px;
  margin-top: 28px;
  flex-wrap: wrap;
}

.strat-hero-meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--strat-text-muted);
}

.strat-hero-meta-item .icon {
  width: 18px;
  height: 18px;
  opacity: 0.6;
}

/* --- Section Layout --- */
.strat-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px;
}

.strat-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
}

.strat-section-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--strat-glass);
  border: 1px solid var(--strat-glass-border);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--strat-accent-green);
  flex-shrink: 0;
}

.strat-section-title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.strat-section-divider {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, var(--strat-glass-border), transparent);
  margin: 0 48px;
}

/* --- Threat Cards (Macro Environment) --- */
.threat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 20px;
}

.threat-card {
  background: var(--strat-surface);
  border: 1px solid var(--strat-glass-border);
  border-radius: 16px;
  padding: 28px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}

.threat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}

.threat-card.threat-fuel::before { background: var(--strat-gradient-3); }
.threat-card.threat-climate::before { background: linear-gradient(90deg, #f87171, #fbbf24); }
.threat-card.threat-supply::before { background: linear-gradient(90deg, #a78bfa, #60a5fa); }

.threat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.threat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 16px;
}

.threat-fuel .threat-icon { background: rgba(251, 191, 36, 0.12); }
.threat-climate .threat-icon { background: rgba(248, 113, 113, 0.12); }
.threat-supply .threat-icon { background: rgba(167, 139, 250, 0.12); }

.threat-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--strat-text);
  text-transform: none;
  letter-spacing: normal;
}

.threat-card p {
  font-size: 0.9rem;
  color: var(--strat-text-muted);
  line-height: 1.6;
}

.threat-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  margin-top: 16px;
}

.threat-stat.danger {
  background: rgba(248, 113, 113, 0.12);
  color: var(--strat-accent-red);
}

.threat-stat.warning {
  background: rgba(251, 191, 36, 0.12);
  color: var(--strat-accent-amber);
}

/* --- KPI Counter Cards --- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 40px;
}

.kpi-card {
  background: var(--strat-surface);
  border: 1px solid var(--strat-glass-border);
  border-radius: 14px;
  padding: 24px;
  text-align: center;
  transition: transform 0.3s ease;
}

.kpi-card:hover {
  transform: translateY(-3px);
}

.kpi-value {
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.kpi-value.green { color: var(--strat-accent-green); }
.kpi-value.blue { color: var(--strat-accent-blue); }
.kpi-value.amber { color: var(--strat-accent-amber); }
.kpi-value.red { color: var(--strat-accent-red); }

.kpi-label {
  font-size: 0.8rem;
  color: var(--strat-text-muted);
  font-weight: 500;
}

/* --- Area Map Grid --- */
.area-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.area-card {
  background: var(--strat-surface);
  border: 1px solid var(--strat-glass-border);
  border-radius: 16px;
  padding: 28px;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.area-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.area-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.area-name {
  font-size: 1.2rem;
  font-weight: 700;
}

.area-badge {
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.area-badge.rank-high { background: rgba(52, 211, 153, 0.12); color: var(--strat-accent-green); }
.area-badge.rank-mid { background: rgba(96, 165, 250, 0.12); color: var(--strat-accent-blue); }

.area-output {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--strat-accent-green);
  margin-bottom: 4px;
}

.area-output-label {
  font-size: 0.8rem;
  color: var(--strat-text-muted);
  margin-bottom: 16px;
}

.area-crops {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.area-crop-tag {
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--strat-glass);
  border: 1px solid var(--strat-glass-border);
  font-size: 0.78rem;
  color: var(--strat-text-muted);
}

.area-risk {
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(248, 113, 113, 0.06);
  border: 1px solid rgba(248, 113, 113, 0.12);
  font-size: 0.85rem;
  color: var(--strat-accent-red);
  line-height: 1.5;
}

.area-risk strong {
  color: #fca5a5;
}

/* --- Product Strategy Cards --- */
.product-strat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.product-strat-card {
  border-radius: 16px;
  padding: 32px 28px;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-strat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
}

.product-strat-card.azos {
  background: linear-gradient(180deg, rgba(16, 52, 96, 0.9) 0%, rgba(22, 30, 44, 0.95) 100%);
  border: 1px solid rgba(96, 165, 250, 0.15);
}

.product-strat-card.moist {
  background: linear-gradient(180deg, rgba(6, 78, 59, 0.85) 0%, rgba(22, 30, 44, 0.95) 100%);
  border: 1px solid rgba(52, 211, 153, 0.15);
}

.product-strat-card.sun {
  background: linear-gradient(180deg, rgba(120, 53, 15, 0.75) 0%, rgba(22, 30, 44, 0.95) 100%);
  border: 1px solid rgba(251, 191, 36, 0.15);
}

.product-strat-emoji {
  font-size: 2.5rem;
  margin-bottom: 16px;
  display: block;
}

.product-strat-name {
  font-size: 1.3rem;
  font-weight: 800;
  margin-bottom: 4px;
}

.product-strat-subtitle {
  font-size: 0.85rem;
  color: var(--strat-text-muted);
  margin-bottom: 20px;
  line-height: 1.5;
}

.product-strat-tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  margin-bottom: 20px;
}

.azos .product-strat-tag { background: rgba(96, 165, 250, 0.15); color: var(--strat-accent-blue); }
.moist .product-strat-tag { background: rgba(52, 211, 153, 0.15); color: var(--strat-accent-green); }
.sun .product-strat-tag { background: rgba(251, 191, 36, 0.15); color: var(--strat-accent-amber); }

.product-strat-features {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}

.product-strat-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  font-size: 0.88rem;
  color: var(--strat-text-muted);
  border-bottom: 1px solid var(--strat-glass-border);
  line-height: 1.5;
}

.product-strat-features li:last-child { border: none; }

.product-strat-features li::before {
  content: '✓';
  color: var(--strat-accent-green);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

.product-strat-target {
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--strat-glass);
  border: 1px solid var(--strat-glass-border);
  font-size: 0.82rem;
  color: var(--strat-text-muted);
}

.product-strat-target strong {
  color: var(--strat-text);
}

/* --- Segment Strategy --- */
.segment-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.segment-card {
  background: var(--strat-surface);
  border: 1px solid var(--strat-glass-border);
  border-radius: 16px;
  padding: 32px;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 32px;
  transition: transform 0.3s ease;
}

.segment-card:hover {
  transform: translateY(-2px);
}

.segment-label-area {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.segment-letter {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
}

.segment-a .segment-letter { background: var(--strat-gradient-3); }
.segment-b .segment-letter { background: var(--strat-gradient-2); }
.segment-c .segment-letter { background: var(--strat-gradient-1); }

.segment-target-name {
  font-size: 1rem;
  font-weight: 700;
}

.segment-area-name {
  font-size: 0.82rem;
  color: var(--strat-text-muted);
}

.segment-detail h4 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--strat-text-muted);
  margin-bottom: 8px;
  margin-top: 20px;
}

.segment-detail h4:first-child {
  margin-top: 0;
}

.segment-pain {
  font-size: 0.92rem;
  color: var(--strat-accent-red);
  line-height: 1.5;
  margin-bottom: 4px;
}

.segment-products-inline {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.seg-product-chip {
  padding: 6px 14px;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 600;
}

.seg-product-chip.primary {
  background: rgba(52, 211, 153, 0.12);
  color: var(--strat-accent-green);
  border: 1px solid rgba(52, 211, 153, 0.2);
}

.seg-product-chip.secondary {
  background: var(--strat-glass);
  color: var(--strat-text-muted);
  border: 1px solid var(--strat-glass-border);
}

.channel-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.channel-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--strat-glass);
  border: 1px solid var(--strat-glass-border);
  font-size: 0.85rem;
  color: var(--strat-text-muted);
}

.channel-item .ch-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}

.channel-item .ch-icon.search { background: rgba(96, 165, 250, 0.12); }
.channel-item .ch-icon.social { background: rgba(167, 139, 250, 0.12); }
.channel-item .ch-icon.content { background: rgba(52, 211, 153, 0.12); }
.channel-item .ch-icon.video { background: rgba(248, 113, 113, 0.12); }

/* --- Timeline Section --- */
.timeline-container {
  position: relative;
  padding-left: 48px;
}

.timeline-line {
  position: absolute;
  left: 18px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--strat-accent-green), var(--strat-accent-blue), var(--strat-accent-amber));
  border-radius: 999px;
}

.timeline-phase {
  position: relative;
  margin-bottom: 40px;
}

.timeline-phase:last-child { margin-bottom: 0; }

.timeline-dot {
  position: absolute;
  left: -40px;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 3px solid var(--strat-bg);
}

.timeline-phase.phase-1 .timeline-dot { background: var(--strat-accent-green); box-shadow: 0 0 12px rgba(52, 211, 153, 0.4); }
.timeline-phase.phase-2 .timeline-dot { background: var(--strat-accent-blue); box-shadow: 0 0 12px rgba(96, 165, 250, 0.4); }
.timeline-phase.phase-3 .timeline-dot { background: var(--strat-accent-amber); box-shadow: 0 0 12px rgba(251, 191, 36, 0.4); }

.timeline-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.timeline-phase-badge {
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
}

.phase-1 .timeline-phase-badge { background: rgba(52, 211, 153, 0.12); color: var(--strat-accent-green); }
.phase-2 .timeline-phase-badge { background: rgba(96, 165, 250, 0.12); color: var(--strat-accent-blue); }
.phase-3 .timeline-phase-badge { background: rgba(251, 191, 36, 0.12); color: var(--strat-accent-amber); }

.timeline-period {
  font-size: 0.82rem;
  color: var(--strat-text-muted);
}

.timeline-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.timeline-body {
  background: var(--strat-surface);
  border: 1px solid var(--strat-glass-border);
  border-radius: 14px;
  padding: 24px;
}

.timeline-body p {
  font-size: 0.88rem;
  color: var(--strat-text-muted);
  line-height: 1.6;
  margin-bottom: 16px;
}

.timeline-body p:last-child { margin-bottom: 0; }

.timeline-products {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.timeline-product-tag {
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  background: var(--strat-glass);
  border: 1px solid var(--strat-glass-border);
  color: var(--strat-text-muted);
}

.timeline-product-tag.active-product {
  border-color: rgba(52, 211, 153, 0.3);
  color: var(--strat-accent-green);
  background: rgba(52, 211, 153, 0.08);
}

/* --- Current Phase Indicator --- */
.current-phase-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  border-radius: 14px;
  background: rgba(52, 211, 153, 0.08);
  border: 1px solid rgba(52, 211, 153, 0.2);
  margin-bottom: 32px;
}

.current-phase-pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--strat-accent-green);
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6); }
  50% { opacity: 0.7; box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); }
}

.current-phase-text {
  font-size: 0.88rem;
  color: var(--strat-accent-green);
  font-weight: 600;
}

.current-phase-date {
  font-size: 0.82rem;
  color: var(--strat-text-muted);
  margin-left: auto;
}

/* --- WEB Implementation Roadmap --- */
.roadmap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.roadmap-card {
  background: var(--strat-surface);
  border: 1px solid var(--strat-glass-border);
  border-radius: 16px;
  padding: 28px;
  position: relative;
  transition: transform 0.3s ease;
}

.roadmap-card:hover {
  transform: translateY(-3px);
}

.roadmap-step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
}

.roadmap-step.step-1 { background: rgba(52, 211, 153, 0.12); color: var(--strat-accent-green); }
.roadmap-step.step-2 { background: rgba(96, 165, 250, 0.12); color: var(--strat-accent-blue); }
.roadmap-step.step-3 { background: rgba(251, 191, 36, 0.12); color: var(--strat-accent-amber); }

.roadmap-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--strat-text);
  text-transform: none;
  letter-spacing: normal;
}

.roadmap-card p {
  font-size: 0.85rem;
  color: var(--strat-text-muted);
  line-height: 1.6;
  margin-bottom: 16px;
}

.roadmap-items {
  list-style: none;
  padding: 0;
  margin: 0;
}

.roadmap-items li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 0.82rem;
  color: var(--strat-text-muted);
}

.roadmap-items li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--strat-accent-green);
  flex-shrink: 0;
}

/* --- Message Shift Box --- */
.message-shift {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 20px;
  align-items: center;
  margin: 24px 0;
}

.msg-box {
  padding: 20px 24px;
  border-radius: 14px;
  font-size: 0.92rem;
  line-height: 1.5;
}

.msg-box.before {
  background: rgba(248, 113, 113, 0.06);
  border: 1px solid rgba(248, 113, 113, 0.15);
  color: var(--strat-accent-red);
}

.msg-box.after {
  background: rgba(52, 211, 153, 0.06);
  border: 1px solid rgba(52, 211, 153, 0.15);
  color: var(--strat-accent-green);
}

.msg-arrow {
  font-size: 1.5rem;
  color: var(--strat-text-muted);
  opacity: 0.5;
}

.msg-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  margin-bottom: 8px;
  display: block;
  opacity: 0.7;
}

/* --- Scroll Reveal Animation --- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children */
.reveal-stagger > .reveal:nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger > .reveal:nth-child(2) { transition-delay: 0.1s; }
.reveal-stagger > .reveal:nth-child(3) { transition-delay: 0.15s; }
.reveal-stagger > .reveal:nth-child(4) { transition-delay: 0.2s; }

/* --- Responsive --- */
@media (max-width: 1100px) {
  .product-strat-grid { grid-template-columns: 1fr; }
  .area-grid { grid-template-columns: 1fr; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .segment-card { grid-template-columns: 1fr; }
  .roadmap-grid { grid-template-columns: 1fr; }
  .message-shift { grid-template-columns: 1fr; }
  .msg-arrow { text-align: center; transform: rotate(90deg); }
}

@media (max-width: 768px) {
  .strat-hero { padding: 40px 24px 36px; }
  .strat-hero h1 { font-size: 1.75rem; }
  .strat-section { padding: 32px 24px; }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .threat-grid { grid-template-columns: 1fr; }
}