/* ==========================================================================
   GYEONGJU WORLD & CALIFORNIA BEACH — BRIGHT THEME PARK EDITION
   🎡 밝고 활기찬 놀이공원 분위기로 전면 개편
   ========================================================================== */

:root {
  /* ---- 밝은 배경 & 기본 팔레트 ---- */
  --bg-page:      #fffdf8;       /* 따뜻한 크림 화이트 */
  --bg-alt:       #fff8f0;       /* 연한 살구빛 섹션 */
  --bg-card:      #ffffff;
  --bg-card-hover:#fff5eb;
  --bg-dark-strip:#1a1018;       /* 네비/푸터만 어둡게 */

  /* ---- 경주월드 메인 컬러 (불꽃 오렌지) ---- */
  --gjw-primary:   #ff6b00;
  --gjw-light:     #ff9c45;
  --gjw-pale:      #fff0e0;
  --gjw-gradient:  linear-gradient(135deg, #ff6b00 0%, #ffb347 100%);

  /* ---- 캘리포니아비치 메인 컬러 (바다 블루) ---- */
  --cali-primary:  #0096d6;
  --cali-light:    #40bbf0;
  --cali-pale:     #e0f5ff;
  --cali-gradient: linear-gradient(135deg, #0096d6 0%, #00cfff 100%);

  /* ---- 공통 상태색 ---- */
  --happy:   #22c55e;
  --neutral: #f59e0b;
  --pain:    #ef4444;

  /* ---- 타이포 ---- */
  --font-main:    'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-display: 'Outfit', var(--font-main);
  --font-mono:    'Space Grotesk', monospace;

  /* ---- 레이아웃 ---- */
  --container-max: 1200px;
  --nav-height:    70px;
  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  22px;
  --radius-xl:  32px;
  --shadow-card: 0 4px 24px rgba(0,0,0,0.09);
  --shadow-hover: 0 12px 40px rgba(0,0,0,0.16);
  --transition: 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ====================== RESET ====================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-height) + 20px); }
body {
  font-family: var(--font-main);
  background: var(--bg-page);
  color: #1e1e2e;
  line-height: 1.65;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }

/* Background canvas (subtle — not too dark) */
#track-canvas {
  position: fixed; top:0; left:0;
  width: 100vw; height: 100vh;
  pointer-events: none; z-index: 0;
  opacity: 0.18;   /* 훨씬 가볍게 */
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 1.5rem;
  position: relative; z-index: 1;
}

/* Text utilities */
h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 800; line-height: 1.2; }

/* ================================================================
   NAVBAR — 밝고 깨끗한 화이트 글래스모피즘
   ================================================================ */
.navbar {
  position: fixed; top:0; left:0; width:100%;
  height: var(--nav-height);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 107, 0, 0.15);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  z-index: 100;
  transition: background var(--transition), box-shadow var(--transition);
}
.navbar.scrolled {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1);
}
.nav-container {
  max-width: var(--container-max); height:100%;
  margin:0 auto; padding:0 1.5rem;
  display:flex; align-items:center; justify-content:space-between;
}
.logo {
  display:flex; align-items:center; gap:0.5rem;
  text-decoration:none; font-family:var(--font-display);
  font-weight:900; font-size:1.35rem; color:#1e1e2e;
}
.logo-badge-thrill {
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:8px;
  background: var(--gjw-gradient); color:#fff; font-size:.9rem;
  box-shadow: 0 3px 12px rgba(255,107,0,0.35);
}
.logo-badge-water {
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:8px;
  background: var(--cali-gradient); color:#fff; font-size:.9rem;
  box-shadow: 0 3px 12px rgba(0,150,214,0.35);
  margin-left: -4px;
}
.logo-text { letter-spacing:-.03em; }
.text-gradient {
  background: linear-gradient(90deg, #ff6b00, #0096d6);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.nav-menu {
  display:flex; align-items:center; gap:1.5rem;
}
.nav-link {
  color: #475569; text-decoration:none;
  font-size:.92rem; font-weight:700;
  transition: color .2s;
  position:relative; padding:.3rem 0;
}
.nav-link:hover { color:#ff6b00; }
.nav-link::after {
  content:''; position:absolute; bottom:0; left:0;
  width:0; height:2px;
  background: linear-gradient(90deg, #ff6b00, #0096d6);
  transition: width var(--transition); border-radius:2px;
}
.nav-link:hover::after { width:100%; }
.nav-link.highlight {
  color:#ff6b00;
  background: rgba(255,107,0,0.1);
  padding:.38rem .9rem; border-radius:var(--radius-sm);
  border:1.5px solid rgba(255,107,0,0.3);
}
.nav-link.highlight:hover { background:rgba(255,107,0,0.18); }
.nav-actions { display:flex; align-items:center; gap:.75rem; }
.theme-toggle-btn {
  display:inline-flex; align-items:center; gap:.4rem;
  background: #f8fafc;
  border:1.5px solid #e2e8f0; color:#334155;
  padding:.48rem 1rem; border-radius:9999px;
  font-family:var(--font-main); font-size:.84rem; font-weight:700;
  cursor:pointer; transition: all .2s;
}
.theme-toggle-btn:hover { background:#f1f5f9; border-color:#cbd5e1; transform:translateY(-1px); }
.menu-toggle {
  display:none; background:none; border:none;
  color:#1e1e2e; font-size:1.35rem; cursor:pointer; padding:.5rem;
}

/* ================================================================
   HERO — 전체화면 사진 배경 + 대형 타이틀
   ================================================================ */
.hero {
  position:relative;
  min-height: 100vh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  overflow:hidden;
  padding-top: var(--nav-height);
}

/* 배경 사진 */
.hero-photo-bg {
  position:absolute; inset:0; z-index:0;
}
.hero-bg-img {
  width:100%; height:100%;
  object-fit:cover; object-position:center 35%;
  filter: brightness(0.92) contrast(1.05) saturate(1.2);
}
/* 화사하고 밝은 그라디언트 오버레이: 사진이 시원하게 보이면서 글자 가독성 극대화 */
.hero-overlay {
  position:absolute; inset:0;
  background: radial-gradient(
    circle at 50% 45%,
    rgba(255, 255, 255, 0.65) 0%,
    rgba(255, 255, 255, 0.45) 50%,
    rgba(255, 253, 248, 0.85) 85%,
    #fffdf8 100%
  );
}

/* 히어로 콘텐츠 */
.hero-content {
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
  padding: 3.5rem 1.5rem 2rem;
  max-width: 1040px;
  margin: 0 auto;
}

/* 배지 태그 */
.hero-tag-wrap {
  display:flex; flex-wrap:wrap; gap:.75rem;
  justify-content:center; margin-bottom:1.5rem;
}
.hero-tag {
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.86rem; font-weight:800;
  padding:.45rem 1.2rem; border-radius:9999px;
  text-transform:uppercase; letter-spacing:.03em;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.tag-gjw {
  background: #fff;
  border:2px solid #ff6b00;
  color:#ff6b00;
}
.tag-cali {
  background: #fff;
  border:2px solid #0096d6;
  color:#0096d6;
}

/* 타이틀: 경주월드 & 캘리포니아비치 초대형 강조 */
.hero-title {
  display:flex; flex-direction:column;
  align-items:center; gap:.6rem;
  margin-bottom: 1.6rem;
}
.title-eyebrow {
  font-size:1.15rem; font-weight:800;
  color:#ff6b00;
  letter-spacing:.15em; text-transform:uppercase;
  background: rgba(255, 107, 0, 0.08);
  padding: .3rem 1rem; border-radius: 9999px;
}
.title-main {
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:center; gap:.25em;
  line-height:1.08;
  margin: .3rem 0;
}
/* "경주월드" — 다이내믹 불꽃 오렌지 3D 팝 */
.title-word.gjw {
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 8.5vw, 6.8rem);
  font-weight: 900;
  background: linear-gradient(180deg, #ff8c00 0%, #ff4500 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 6px 14px rgba(255, 69, 0, 0.35))
          drop-shadow(0 2px 2px rgba(0,0,0,0.2));
  letter-spacing:-.03em;
}
/* "&" 구분자 */
.title-ampersand {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 4.8rem);
  font-weight: 900;
  background: linear-gradient(135deg, #ff8c00, #00b4d8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding: 0 .1em;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.15));
}
/* "캘리포니아비치" — 청량한 서핑 블루 3D 팝 */
.title-word.cali {
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 8.5vw, 6.8rem);
  font-weight: 900;
  background: linear-gradient(180deg, #00c6ff 0%, #0072ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 6px 14px rgba(0, 114, 255, 0.35))
          drop-shadow(0 2px 2px rgba(0,0,0,0.2));
  letter-spacing:-.03em;
}
.title-sub {
  font-size:clamp(1.1rem, 2vw, 1.45rem);
  font-weight:800; color:#334155;
  letter-spacing:-.01em;
}
.hero-desc {
  max-width:720px; font-size:1.12rem;
  color:#475569;
  margin-bottom:2.2rem; line-height:1.75;
}
.hero-desc strong { color:#0f172a; font-weight:800; }

/* 버튼 */
.hero-btns { display:flex; flex-wrap:wrap; gap:1.1rem; justify-content:center; margin-bottom:2.8rem; }
.btn {
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--font-main); font-size:1.05rem; font-weight:800;
  padding:1rem 2rem; border-radius:var(--radius-md);
  text-decoration:none; cursor:pointer;
  transition: all .25s ease; border:none;
}
.btn-thrill {
  background: var(--gjw-gradient); color:#fff;
  box-shadow: 0 8px 24px rgba(255,107,0,0.4);
}
.btn-thrill:hover { transform:translateY(-3px) scale(1.03); box-shadow:0 12px 32px rgba(255,107,0,0.55); }
.btn-water {
  background: #fff; color:#0096d6;
  border:2.5px solid #0096d6;
  box-shadow: 0 6px 20px rgba(0,150,214,0.15);
}
.btn-water:hover { background:var(--cali-gradient); color:#fff; border-color:transparent; transform:translateY(-3px) scale(1.03); box-shadow:0 10px 28px rgba(0,150,214,0.4); }

/* 스크롤 힌트 */
.hero-scroll-hint {
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center;
  gap:.45rem; color:#64748b;
  font-size:.86rem; font-weight:800; letter-spacing:.05em;
  text-transform:uppercase; margin-bottom:1.5rem;
}
.scroll-arrow {
  width:36px; height:36px; border-radius:50%;
  background:#fff;
  border:2px solid #cbd5e1;
  color:#ff6b00;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  animation: bounceArrow 1.8s ease-in-out infinite;
}
@keyframes bounceArrow {
  0%,100% { transform:translateY(0); opacity:.8; }
  50% { transform:translateY(6px); opacity:1; }
}

/* 메트릭 리본 — 밝고 산뜻한 화이트 글래스 카드 */
.metrics-ribbon-hero {
  position:relative; z-index:2;
  display:grid; grid-template-columns:repeat(4,1fr);
  width:100%; max-width:960px; margin:0 auto;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:2px solid rgba(255, 107, 0, 0.15);
  border-radius: var(--radius-xl);
  padding:1.6rem 2rem;
  box-shadow: 0 16px 40px rgba(0,0,0,0.08);
  margin-bottom: 2rem;
}
.metrics-ribbon-hero .metric-box {
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:.3rem;
  padding: 0 1rem;
}
.metrics-ribbon-hero .metric-box:not(:last-child) {
  border-right: 1px solid #f1f5f9;
}
.metrics-ribbon-hero .metric-num {
  font-family:var(--font-display); font-size:2.2rem; font-weight:900; color:#ff6b00;
  letter-spacing:-.03em;
}
.metrics-ribbon-hero .metric-num small {
  font-size:.7em; font-weight:700; color:#64748b;
}
.metrics-ribbon-hero .metric-num.warn { color:#e11d48; }
.metrics-ribbon-hero .metric-num.blue { color:#0284c7; }
.metrics-ribbon-hero .metric-label {
  font-size:.85rem; color:#475569; font-weight:700;
}

/* ================================================================
   SECTION COMMON — 밝은 배경
   ================================================================ */
.section { padding:5.5rem 0; position:relative; z-index:1; }
.bg-darker {
  background: var(--bg-alt);
  border-top:1px solid rgba(0,0,0,0.06);
  border-bottom:1px solid rgba(0,0,0,0.06);
}

.section-header {
  text-align:center; max-width:720px;
  margin:0 auto 3.5rem;
}
.section-badge {
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.78rem; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; padding:.35rem .9rem;
  border-radius:9999px; margin-bottom:.9rem;
}
.thrill-badge  { background:var(--gjw-pale); color:var(--gjw-primary); border:1.5px solid rgba(255,107,0,0.3); }
.warning-badge { background:#fff8e6; color:#d97706; border:1.5px solid rgba(245,158,11,0.3); }
.danger-badge  { background:#fff1f1; color:#ef4444; border:1.5px solid rgba(239,68,68,0.3); }
.dual-badge    { background:var(--cali-pale); color:var(--cali-primary); border:1.5px solid rgba(0,150,214,0.3); }
.victory-badge { background:#f0fdf4; color:#16a34a; border:1.5px solid rgba(34,197,94,0.3); }

.section-title { font-size:clamp(1.8rem,3.2vw,2.6rem); font-weight:900; margin-bottom:.75rem; color:#11102a; }
.section-subtitle { font-size:1.05rem; color:#64748b; line-height:1.7; }

/* ================================================================
   SECTION 1: JOURNEY MAP — 밝은 카드
   ================================================================ */
.journey-interactive-wrap {
  background:#fff;
  border:1.5px solid rgba(0,0,0,0.08);
  border-radius:var(--radius-xl);
  padding:2rem;
  box-shadow: var(--shadow-card);
}
.journey-controls-bar {
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:1rem;
  margin-bottom:1.5rem; padding-bottom:1.25rem;
  border-bottom:1px solid rgba(0,0,0,0.08);
}
.status-legend { display:flex; flex-wrap:wrap; gap:.6rem; }
.legend-pill {
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.8rem; font-weight:700; padding:.32rem .8rem; border-radius:9999px;
}
.legend-pill.happy  { background:#f0fdf4; color:#16a34a; border:1px solid rgba(34,197,94,0.3); }
.legend-pill.neutral{ background:#fffbeb; color:#d97706; border:1px solid rgba(245,158,11,0.3); }
.legend-pill.pain   { background:#fff1f1; color:#ef4444; border:1px solid rgba(239,68,68,0.3); }
.playback-controls { display:flex; gap:.75rem; }
.btn-play-coaster {
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--gjw-gradient); color:#fff; border:none;
  font-family:var(--font-main); font-size:.92rem; font-weight:700;
  padding:.6rem 1.3rem; border-radius:9999px; cursor:pointer;
  box-shadow:0 4px 16px rgba(255,107,0,0.35);
  transition: all .2s;
}
.btn-play-coaster:hover { transform:scale(1.05); box-shadow:0 6px 22px rgba(255,107,0,0.55); }
.btn-play-coaster.playing { background:linear-gradient(135deg,#ef4444,#dc2626); box-shadow:0 4px 16px rgba(239,68,68,0.4); }
.btn-reset {
  display:inline-flex; align-items:center; gap:.4rem;
  background:#f1f5f9; color:#475569; border:1px solid #e2e8f0;
  font-family:var(--font-main); font-size:.88rem; font-weight:600;
  padding:.6rem 1.1rem; border-radius:9999px; cursor:pointer;
  transition:all .2s;
}
.btn-reset:hover { background:#e2e8f0; color:#1e293b; }

/* Chart container */
.interactive-chart-container {
  position:relative; width:100%; height:480px;
  background: #fafafa;
  border:1.5px solid rgba(0,0,0,0.07);
  border-radius:var(--radius-lg); overflow:hidden;
}
#interactive-journey-svg { position:absolute; inset:0; width:100%; height:100%; z-index:1; }
.svg-axis-emoji { font-size:20px; }
.svg-axis-num   { fill:#94a3b8; font-family:var(--font-mono); font-size:12px; font-weight:700; }

/* Coaster cart */
.coaster-cart {
  position:absolute; z-index:10; pointer-events:none;
  display:flex; align-items:center; gap:.5rem;
  background:rgba(255,255,255,0.95);
  border:2.5px solid var(--gjw-primary);
  box-shadow:0 0 20px rgba(255,107,0,0.55);
  padding:.32rem .75rem; border-radius:9999px;
  transform:translate(-50%,-50%);
  transition: top .4s cubic-bezier(.16,1,.3,1), left .4s cubic-bezier(.16,1,.3,1);
}
.coaster-cart.speeding { transition: top .25s linear, left .25s linear; }
.cart-icon { font-size:1.2rem; animation:cartShake .4s infinite alternate; }
@keyframes cartShake { 0%{transform:translateY(-1px) rotate(-2deg);} 100%{transform:translateY(1px) rotate(2deg);} }
.cart-tag { font-size:.76rem; font-weight:800; color:var(--gjw-primary); white-space:nowrap; }

/* Nodes overlay */
.nodes-overlay { position:absolute; inset:0; z-index:5; }
.journey-node-btn {
  position:absolute; transform:translate(-50%,-50%);
  width:30px; height:30px; border-radius:50%;
  background:#fff; border:3px solid var(--gjw-light);
  display:flex; align-items:center; justify-content:center;
  color:#1e293b; font-family:var(--font-mono);
  font-size:.74rem; font-weight:800; cursor:pointer;
  transition:all .25s cubic-bezier(.16,1,.3,1);
  box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}
.journey-node-btn:hover { transform:translate(-50%,-50%) scale(1.35); z-index:15; box-shadow:0 6px 18px rgba(0,0,0,0.22); }
.journey-node-btn.happy { background:#f0fdf4; border-color:#22c55e; color:#166534; box-shadow:0 3px 12px rgba(34,197,94,0.4); }
.journey-node-btn.pain  { background:#fff1f1; border-color:#ef4444; color:#991b1b; box-shadow:0 3px 12px rgba(239,68,68,0.4); }
.journey-node-btn.active {
  transform:translate(-50%,-50%) scale(1.5); z-index:16;
  border-color:var(--gjw-primary); background:var(--gjw-primary); color:#fff;
  box-shadow:0 0 22px rgba(255,107,0,0.7);
  animation:nodePulse 1.2s infinite alternate;
}
@keyframes nodePulse {
  0% { box-shadow:0 0 15px rgba(255,107,0,0.6); }
  100%{ box-shadow:0 0 30px rgba(255,107,0,0.9); }
}

/* Node detail panel */
.node-detail-panel {
  margin-top:1.5rem; background:#fff;
  border:1.5px solid rgba(0,0,0,0.1); border-radius:var(--radius-lg);
  padding:1.75rem; box-shadow:var(--shadow-card);
  transition: border-color var(--transition);
}
.node-detail-panel.happy-border { border-color:rgba(34,197,94,0.45); box-shadow:0 6px 24px rgba(34,197,94,0.12); }
.node-detail-panel.pain-border  { border-color:rgba(239,68,68,0.45);  box-shadow:0 6px 24px rgba(239,68,68,0.12); }
.panel-header {
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:.75rem; margin-bottom:.9rem;
}
.panel-step-badge {
  font-family:var(--font-mono); font-size:.84rem; font-weight:700;
  color:#64748b; background:#f1f5f9; padding:.3rem .75rem; border-radius:var(--radius-sm);
}
.panel-score-badge {
  font-size:.84rem; font-weight:800; padding:.32rem .9rem; border-radius:9999px;
}
.panel-score-badge.happy   { background:#dcfce7; color:#166534; }
.panel-score-badge.neutral { background:#fef9c3; color:#854d0e; }
.panel-score-badge.pain    { background:#fee2e2; color:#991b1b; }
.panel-title { font-size:1.4rem; font-weight:800; color:#11102a; margin-bottom:.6rem; }
.panel-desc  { font-size:1rem; color:#475569; line-height:1.7; margin-bottom:1.25rem; }
.panel-insights {
  background:#fff7ed; border-left:4px solid var(--gjw-primary);
  padding:.85rem 1.2rem; border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-size:.93rem; color:#78350f; line-height:1.6;
}

/* ================================================================
   SECTION 2: COLLISION GRID
   ================================================================ */
.collision-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.75rem;
}
.zone-card {
  background:#fff; border:1.5px solid rgba(0,0,0,0.08);
  border-radius:var(--radius-lg); padding:1.75rem;
  display:flex; flex-direction:column;
  box-shadow:var(--shadow-card);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.zone-card:hover { transform:translateY(-7px); box-shadow:var(--shadow-hover); border-color:rgba(255,107,0,0.3); }
.zone-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; }
.zone-num { font-family:var(--font-mono); font-size:.78rem; font-weight:800; color:#94a3b8; }
.zone-tag { font-size:.73rem; font-weight:800; padding:.24rem .7rem; border-radius:9999px; text-transform:uppercase; }
.tag-norse  { background:#fef2f2; color:#ef4444; border:1px solid rgba(239,68,68,0.25); }
.tag-greek  { background:#fefce8; color:#ca8a04; border:1px solid rgba(202,138,4,0.25); }
.tag-fairy  { background:#faf5ff; color:#9333ea; border:1px solid rgba(147,51,234,0.25); }
.zone-card h3 { font-size:1.2rem; font-weight:800; color:#11102a; margin-bottom:.5rem; }
.zone-desc { font-size:.92rem; color:#64748b; line-height:1.6; margin-bottom:1.2rem; flex-grow:1; }
.zone-visual { width:100%; height:190px; border-radius:var(--radius-md); overflow:hidden; margin-bottom:1.2rem; }
.zone-visual img { width:100%; height:100%; object-fit:cover; transition:transform var(--transition); }
.zone-card:hover .zone-visual img { transform:scale(1.07); }
.collision-alert {
  background:#fff1f1; border:1px solid rgba(239,68,68,0.2);
  border-radius:var(--radius-sm); padding:.7rem .9rem;
  font-size:.84rem; color:#b91c1c; line-height:1.5;
}

/* ================================================================
   SECTION 3: SIGHTLINE COMPARE
   ================================================================ */
.sightline-compare-wrap { display:grid; grid-template-columns:1fr 1fr; gap:2rem; }
.compare-box {
  background:#fff; border-radius:var(--radius-xl); overflow:hidden;
  border:1.5px solid rgba(0,0,0,0.08); box-shadow:var(--shadow-card);
  transition:transform var(--transition);
}
.compare-box:hover { transform:translateY(-5px); }
.compare-box.actual { border-top:4px solid #ef4444; }
.compare-box.ideal  { border-top:4px solid #22c55e; }
.compare-header {
  padding:1.1rem 1.7rem; font-weight:800; font-size:1rem;
  display:flex; align-items:center;
}
.compare-header.bad  { background:#fff1f1; color:#b91c1c; }
.compare-header.good { background:#f0fdf4; color:#166534; }
.compare-body { padding:1.75rem; }
.sightline-issue-list, .sightline-ideal-list {
  list-style:none; display:flex; flex-direction:column; gap:1.1rem;
}
.sightline-issue-list li, .sightline-ideal-list li {
  font-size:.95rem; line-height:1.65; position:relative;
  padding-left:1.5rem; color:#475569;
}
.sightline-issue-list li::before { content:'✕'; position:absolute; left:0; top:0; color:#ef4444; font-weight:900; }
.sightline-ideal-list li::before { content:'✓'; position:absolute; left:0; top:0; color:#22c55e; font-weight:900; }
.sightline-issue-list strong { color:#ef4444; }
.sightline-ideal-list strong { color:#16a34a; }

/* ================================================================
   SECTION 4: DUAL SHOWCASE
   ================================================================ */
.dual-switch-tabs { display:flex; justify-content:center; gap:1rem; margin-bottom:2.5rem; }
.switch-tab {
  background:#fff; border:2px solid rgba(0,0,0,0.1); color:#475569;
  font-family:var(--font-main); font-size:1rem; font-weight:800;
  padding:.8rem 2rem; border-radius:9999px; cursor:pointer;
  display:flex; align-items:center; gap:.5rem;
  transition:all .2s; box-shadow:var(--shadow-card);
}
.switch-tab:hover { color:#1e1e2e; border-color:rgba(0,0,0,0.2); transform:translateY(-2px); }
.switch-tab.active[data-target="thrill-tab"] { background:var(--gjw-gradient); color:#fff; border-color:transparent; box-shadow:0 6px 22px rgba(255,107,0,0.4); }
.switch-tab.active[data-target="water-tab"]  { background:var(--cali-gradient); color:#fff; border-color:transparent; box-shadow:0 6px 22px rgba(0,150,214,0.4); }
.dual-tab-content { display:none; animation:fadeInTab .38s ease forwards; }
.dual-tab-content.active { display:block; }
@keyframes fadeInTab { from{opacity:0;transform:translateY(12px);} to{opacity:1;transform:none;} }

.attraction-cards-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.75rem; }
.attraction-card {
  background:#fff; border:1.5px solid rgba(0,0,0,0.08);
  border-radius:var(--radius-xl); overflow:hidden;
  display:flex; flex-direction:column; position:relative;
  box-shadow:var(--shadow-card);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.attraction-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-hover); border-color:rgba(255,107,0,0.3); }
.attraction-card.cali-card:hover { border-color:rgba(0,150,214,0.3); }
.attraction-badge {
  position:absolute; top:1rem; left:1rem; z-index:2;
  background:rgba(255,255,255,0.92); backdrop-filter:blur(6px);
  color:var(--gjw-primary); font-size:.75rem; font-weight:800;
  padding:.3rem .75rem; border-radius:9999px; border:1.5px solid rgba(255,107,0,0.3);
}
.cali-badge { color:var(--cali-primary) !important; border-color:rgba(0,150,214,0.3) !important; }
.attraction-img { width:100%; height:210px; overflow:hidden; }
.attraction-img img { width:100%; height:100%; object-fit:cover; transition:transform var(--transition); }
.attraction-card:hover .attraction-img img { transform:scale(1.07); }
.attraction-info { padding:1.6rem; display:flex; flex-direction:column; flex-grow:1; }
.attraction-info h4 { font-size:1.25rem; font-weight:800; color:#11102a; margin-bottom:.5rem; }
.attraction-info p  { font-size:.93rem; color:#64748b; line-height:1.6; margin-bottom:1.4rem; flex-grow:1; }
.specs-row {
  display:flex; flex-wrap:wrap; gap:.6rem;
  padding-top:.9rem; border-top:1px solid rgba(0,0,0,0.08);
}
.specs-row span {
  display:inline-flex; align-items:center; gap:.3rem;
  font-family:var(--font-mono); font-size:.8rem; font-weight:700; color:#64748b;
  background:#f8fafc; padding:.28rem .6rem; border-radius:var(--radius-sm);
}

/* ================================================================
   SECTION 5: BENCHMARKING
   ================================================================ */
.benchmark-cards-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.75rem; }
.benchmark-card {
  background:#fff; border:1.5px solid rgba(0,0,0,0.08);
  border-radius:var(--radius-xl); overflow:hidden;
  display:flex; flex-direction:column; position:relative;
  box-shadow:var(--shadow-card);
  transition: transform var(--transition), border-color var(--transition);
}
.benchmark-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-hover); }
.benchmark-card.best-fit { border:2.5px solid var(--gjw-primary); box-shadow:0 8px 30px rgba(255,107,0,0.2); }
.card-crown {
  position:absolute; top:1rem; right:1rem; z-index:2;
  background:var(--gjw-gradient); color:#fff;
  font-size:.76rem; font-weight:900; padding:.3rem .8rem;
  border-radius:9999px; box-shadow:0 3px 12px rgba(255,107,0,0.45);
}
.bm-img { width:100%; height:190px; overflow:hidden; }
.bm-img img { width:100%; height:100%; object-fit:cover; transition:transform var(--transition); }
.benchmark-card:hover .bm-img img { transform:scale(1.07); }
.bm-body { padding:1.6rem; display:flex; flex-direction:column; flex-grow:1; }
.bm-body h4  { font-size:1.2rem; font-weight:800; color:#11102a; margin-bottom:.3rem; }
.bm-tag      { font-family:var(--font-mono); font-size:.76rem; font-weight:700; color:#94a3b8; margin-bottom:.8rem; }
.bm-body p   { font-size:.91rem; color:#64748b; line-height:1.65; margin-bottom:1.2rem; flex-grow:1; }
.bm-point    { font-size:.88rem; line-height:1.5; padding:.7rem .9rem; background:#f8fafc; border-radius:var(--radius-sm); }
.text-orange { color:var(--gjw-primary); }
.text-cyan   { color:var(--cali-primary); }
.text-green  { color:#16a34a; }

/* ================================================================
   SECTION 6: S.I.G.H.T STRATEGY
   ================================================================ */
.strategy-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:1.25rem; }
.strat-card {
  background:#fff; border:1.5px solid rgba(0,0,0,0.08);
  border-radius:var(--radius-lg); padding:1.75rem 1.2rem;
  display:flex; flex-direction:column;
  box-shadow:var(--shadow-card);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.strat-card:hover { transform:translateY(-8px); border-color:rgba(0,150,214,0.35); box-shadow:var(--shadow-hover); }
.strat-letter {
  font-family:var(--font-display); font-size:3.2rem; font-weight:900; line-height:1;
  background: linear-gradient(135deg, #ff6b00, #0096d6);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  margin-bottom:.65rem;
}
.strat-card h4 { font-size:1.1rem; font-weight:800; color:#11102a; margin-bottom:.2rem; }
.strat-sub     { font-size:.8rem; font-weight:700; color:var(--cali-primary); margin-bottom:.8rem; }
.strat-card p  { font-size:.87rem; color:#64748b; line-height:1.6; }

/* ================================================================
   FOOTER
   ================================================================ */
.footer {
  background: #11102a; border-top:1px solid rgba(255,255,255,0.08);
  padding:4rem 0 3rem; position:relative; z-index:1;
}
.footer-content {
  display:flex; flex-wrap:wrap; justify-content:space-between;
  align-items:center; gap:2rem;
}
.footer-brand p  { font-size:.87rem; color:#94a3b8; margin-top:.5rem; line-height:1.6; }
.footer-brand code { color:#ffb347; background:rgba(255,180,70,0.1); padding:.2rem .4rem; border-radius:4px; }
.footer-copy { text-align:right; font-size:.84rem; color:#64748b; line-height:1.6; }
.sub-copy    { font-size:.78rem; color:#475569; }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width:1024px) {
  .metrics-ribbon-hero { grid-template-columns:repeat(2,1fr); }
  .collision-grid, .attraction-cards-grid, .benchmark-cards-grid { grid-template-columns:repeat(2,1fr); }
  .strategy-grid { grid-template-columns:repeat(3,1fr); }
  .sightline-compare-wrap { grid-template-columns:1fr; }
}

@media (max-width:768px) {
  .nav-menu {
    position:fixed; top:var(--nav-height); left:0; width:100%;
    background:rgba(10,5,20,0.97); backdrop-filter:blur(20px);
    flex-direction:column; padding:2rem 1.5rem; gap:1.2rem;
    border-bottom:1px solid rgba(255,255,255,0.1);
    transform:translateY(-150%); transition:transform var(--transition);
  }
  .nav-menu.open { transform:translateY(0); }
  .menu-toggle { display:block; }
  .title-word.gjw, .title-word.cali { font-size:2.4rem; }
  .title-ampersand { font-size:1.8rem; }
  .metrics-ribbon-hero { grid-template-columns:repeat(2,1fr); padding:1.25rem; }
  .collision-grid, .attraction-cards-grid, .benchmark-cards-grid { grid-template-columns:1fr; }
  .strategy-grid { grid-template-columns:1fr; }
  .interactive-chart-container { height:380px; }
  .footer-content { flex-direction:column; align-items:flex-start; }
  .footer-copy { text-align:left; }
}