/* オーシャンLP — ブランド：オレンジ・青・緑（html に class="theme-ocean"） */
/* 明るい背景＋濃い文字。UIアクセントは青を基調に、橙・緑は背景・ロゴで効かせる */

html.theme-ocean {
  /* ブランド3色（本文・ボーダーは主に青系） */
  --brand-orange: #ea580c;
  --brand-blue: #2563eb;
  --brand-green: #059669;
  --brand-orange-rgb: 234, 88, 12;
  --brand-blue-rgb: 37, 99, 235;
  --brand-green-rgb: 5, 150, 105;
  --gold: #2563eb;
  --gold-light: #3b82f6;
  --gold-dark: #1e40af;
  /* rgba() 用（--brand-*-rgb と同じ値を明示） */
  --accent-rgb: 37, 99, 235;
  --accent2-rgb: 5, 150, 105;
  /* 本文・見出し（明背景用） */
  --cream: #0f172a;
  --muted: rgba(15, 23, 42, 0.72);
  /* ページ下地：橙の温かみ → 青白 → 緑がかった白の縦グラデ */
  --ink: #faf8f5;
  --ink-soft: #f0fdf4;
  --shadow-soft: 0 24px 60px rgba(37, 99, 235, 0.1);
}

html.theme-ocean body {
  background: var(--ink);
  color: var(--cream);
}

/* 背景：橙（左上）・青（右上）・緑（下）の柔らかい光彩 */
html.theme-ocean .page-bg::before {
  background:
    radial-gradient(ellipse 100% 65% at 8% -8%, rgba(var(--brand-orange-rgb), 0.14), transparent 52%),
    radial-gradient(ellipse 95% 60% at 92% 8%, rgba(var(--brand-blue-rgb), 0.13), transparent 54%),
    radial-gradient(ellipse 85% 55% at 50% 105%, rgba(var(--brand-green-rgb), 0.11), transparent 50%),
    linear-gradient(180deg, #fffbf5 0%, #f0f7ff 42%, #f0fdf4 100%);
}

/* ノイズを薄く（明るい面では質感だけ） */
html.theme-ocean .page-bg::after {
  opacity: 0.12;
}

/* ヒーロー：見出しも橙→青→緑のトーン */
html.theme-ocean .hero h1 {
  background: linear-gradient(135deg, #c2410c 0%, #1d4ed8 45%, #047857 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

html.theme-ocean .hero-badge {
  color: #1e40af;
  border-color: rgba(var(--brand-blue-rgb), 0.35);
  background: linear-gradient(
    135deg,
    rgba(var(--brand-orange-rgb), 0.06) 0%,
    rgba(var(--brand-blue-rgb), 0.08) 50%,
    rgba(var(--brand-green-rgb), 0.06) 100%
  );
}

html.theme-ocean .hero-lead strong,
html.theme-ocean .hero-sub strong {
  color: var(--gold-dark);
}

/* プライマリボタン：青ベース（読みやすさ優先） */
html.theme-ocean .btn-primary {
  color: #fff;
  background: linear-gradient(145deg, #3b82f6, #2563eb 50%, #1d4ed8);
  box-shadow: 0 4px 24px rgba(var(--brand-blue-rgb), 0.35);
}

html.theme-ocean .btn-primary:hover {
  box-shadow: 0 8px 32px rgba(var(--brand-blue-rgb), 0.45);
}

html.theme-ocean .btn-secondary {
  color: var(--gold-dark);
  border-color: rgba(var(--brand-blue-rgb), 0.4);
}

html.theme-ocean .btn-secondary:hover {
  background: rgba(var(--brand-blue-rgb), 0.08);
  border-color: var(--gold);
}

/* システム名：オレンジ → 青 → 緑 */
html.theme-ocean .brand {
  background: linear-gradient(
    105deg,
    #ea580c 0%,
    #2563eb 46%,
    #059669 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: #1e40af;
}

html.theme-ocean .brand-sub {
  color: rgba(15, 23, 42, 0.5);
}

html.theme-ocean .nav-links a:hover {
  color: var(--gold);
}

/* カード類：白〜極薄い水色の面（ガラス風） */
html.theme-ocean .page-bg .trust-base-card,
html.theme-ocean .page-bg .flow-card,
html.theme-ocean .page-bg .howto-step,
html.theme-ocean .page-bg .ocr-block,
html.theme-ocean .page-bg .universal-import-card,
html.theme-ocean .page-bg .ai-example-card,
html.theme-ocean .page-bg .trust-block,
html.theme-ocean .page-bg .universal-import-card--premium,
html.theme-ocean .page-bg .ocr-example-box {
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(240, 249, 255, 0.88) 100%
  );
  border-color: rgba(var(--accent-rgb), 0.22);
  box-shadow: 0 8px 32px rgba(var(--brand-blue-rgb), 0.06);
}

html.theme-ocean .page-bg .flow-card-accent {
  background: linear-gradient(
    135deg,
    rgba(var(--accent-rgb), 0.12) 0%,
    rgba(255, 255, 255, 0.85) 100%
  );
  border-color: rgba(var(--accent-rgb), 0.35);
}

html.theme-ocean .page-bg .flow-desc strong,
html.theme-ocean .page-bg .howto-step-title {
  color: var(--gold-light);
}

html.theme-ocean .page-bg .howto-step-num {
  color: #fff;
}

html.theme-ocean .page-bg .howto-arrow {
  color: rgba(var(--accent-rgb), 0.45);
}

/* プラン・料金表 */
html.theme-ocean .page-bg .plan-tier-card,
html.theme-ocean .page-bg .free-plan-box {
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(240, 249, 255, 0.9) 100%
  );
  border-color: rgba(var(--accent-rgb), 0.2);
  box-shadow: 0 4px 24px rgba(var(--brand-blue-rgb), 0.08);
}

html.theme-ocean .page-bg .plan-tier-card--highlight,
html.theme-ocean .page-bg .plan-tier-card--premium {
  animation: none;
}

html.theme-ocean .page-bg .howto-step-desc,
html.theme-ocean .page-bg .ocr-block-desc,
html.theme-ocean .page-bg .universal-import-card-list,
html.theme-ocean .page-bg .checklist,
html.theme-ocean .page-bg .appeal-list {
  color: var(--muted);
}

/* セクション見出し・補足 */
html.theme-ocean .page-bg .section-title {
  color: var(--cream);
}

html.theme-ocean .page-bg .plans-tier-heading,
html.theme-ocean .page-bg .plans-free-lead,
html.theme-ocean .page-bg .free-plan-title {
  color: var(--cream);
}

html.theme-ocean .page-bg .plans-tier-disclaimer,
html.theme-ocean .page-bg .universal-import-card-note,
html.theme-ocean .page-bg .free-plan-note,
html.theme-ocean .page-bg .free-plan-list,
html.theme-ocean .page-bg .appeal-note,
html.theme-ocean .page-bg .plans-footnote {
  color: var(--muted);
}

/* CTA 帯 */
html.theme-ocean .cta-section {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(var(--accent-rgb), 0.14), transparent),
    linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(240, 249, 255, 0.5));
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  box-shadow: var(--shadow-soft);
}

html.theme-ocean .cta-section::before {
  opacity: 0.35;
}

html.theme-ocean .cta-section h2,
html.theme-ocean .cta-section .section-intro {
  color: var(--cream);
}

html.theme-ocean .cta-section .section-intro {
  opacity: 0.9;
}

/* フッター */
html.theme-ocean .site-footer {
  border-top-color: rgba(var(--accent-rgb), 0.18);
}

html.theme-ocean .footer-tagline {
  color: var(--muted);
}

html.theme-ocean .footer-bottom {
  color: rgba(15, 23, 42, 0.45);
  border-top-color: rgba(15, 23, 42, 0.08);
}

html.theme-ocean .footer-bottom a {
  color: rgba(15, 23, 42, 0.55);
}

html.theme-ocean .footer-col a:hover {
  color: var(--gold);
}

/* リスト内の強調（料金プラン名など） */
html.theme-ocean .page-bg .plan-tier-name {
  color: var(--gold-light);
}

html.theme-ocean .page-bg .plan-tier-price {
  color: var(--cream);
}

html.theme-ocean .page-bg .plans-tier-heading {
  color: var(--gold-light);
}

/* 料金ティア：元の暗い面を白ベースに差し替え */
html.theme-ocean .page-bg .plan-tier-card {
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(240, 249, 255, 0.95) 100%
  );
}

html.theme-ocean .page-bg .plan-tier-card--premium {
  background: linear-gradient(
    160deg,
    rgba(var(--accent-rgb), 0.12) 0%,
    rgba(255, 255, 255, 0.96) 100%
  );
  border-color: rgba(var(--accent-rgb), 0.35);
}

/* 料金セクション全体の帯 */
html.theme-ocean .page-bg .section-plans {
  border-color: rgba(34, 197, 94, 0.28);
  background: linear-gradient(
    160deg,
    rgba(34, 197, 94, 0.08) 0%,
    rgba(255, 255, 255, 0.88) 100%
  );
}

/* 無料プラン枠：見出しを明背景向けの緑に */
html.theme-ocean .page-bg .free-plan-title {
  color: #047857;
}

html.theme-ocean .page-bg .section-plans .plans-free-lead strong {
  color: #047857;
}

/* OCR セクション枠 */
html.theme-ocean .page-bg .section-ocr {
  background: rgba(var(--accent-rgb), 0.06);
  border-color: rgba(var(--accent-rgb), 0.22);
}

html.theme-ocean .page-bg .ocr-example-box {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(var(--accent-rgb), 0.35);
}

html.theme-ocean .page-bg .ocr-example-text {
  color: var(--cream);
}

/* 安心ブロック強調 */
html.theme-ocean .page-bg .trust-block-featured {
  background: linear-gradient(
    160deg,
    rgba(var(--accent-rgb), 0.1) 0%,
    rgba(255, 255, 255, 0.94) 100%
  );
  border-color: rgba(var(--accent-rgb), 0.3);
}

/* プレミアム取り込みカード */
html.theme-ocean .page-bg .universal-import-card--premium {
  background: linear-gradient(
    160deg,
    rgba(var(--accent-rgb), 0.12) 0%,
    rgba(255, 255, 255, 0.95) 100%
  );
  border-color: rgba(var(--accent-rgb), 0.38);
}

/* 背景オーブ：橙 / 青 / 緑 */
html.theme-ocean .bg-orb {
  opacity: 0.5;
}

html.theme-ocean .bg-orb-1 {
  background: radial-gradient(circle, rgba(var(--brand-orange-rgb), 0.16) 0%, transparent 65%);
}

html.theme-ocean .bg-orb-2 {
  background: radial-gradient(circle, rgba(var(--brand-blue-rgb), 0.15) 0%, transparent 65%);
}

html.theme-ocean .bg-orb-3 {
  background: radial-gradient(circle, rgba(var(--brand-green-rgb), 0.12) 0%, transparent 65%);
}

/* パーティクル（青系で統一） */
html.theme-ocean #particles-canvas {
  opacity: 0.32;
}