/*
Theme Name: Paragon AI-Score
Theme URI: https://paragon-ai.jp
Author: 株式会社Paragon
Author URI: https://paragon-ai.jp
Description: AI-Scoreサービスを提供する株式会社Paragonのコーポレートテーマ。白ベースのクリーンなデザイン×ブルーアクセント。
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: paragon
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
*/

:root {
  --navy: #1a2a44;
  --bg-white: #ffffff;
  --bg-light: #f7f8fb;
  --border: #e2e6ee;
  --blue: #0055d4;
  --blue-dark: #003da5;
  --blue-dim: rgba(0,85,212,0.08);
  --blue-dim2: rgba(0,85,212,0.15);
  --text: #1a2a44;
  --text-sub: #5a6a82;
  --text-muted: #4a5568;
  --font-display: 'Outfit', sans-serif;
  --font-body: 'Noto Sans JP', sans-serif;
  --max-w: 1200px;
  --radius: 16px;
  --radius-sm: 8px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  font-family: var(--font-body);
  background: var(--bg-white);
  color: var(--text);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration:none; color:inherit; transition:color .2s; }
img { max-width:100%; height:auto; display:block; }
ul, ol { list-style:none; }

/* ── Animations ── */
@keyframes fadeUp { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
@keyframes spin { to{transform:rotate(360deg)} }
@keyframes particleFloat {
  0%,100%{transform:translateY(0) translateX(0)}
  25%{transform:translateY(-20px) translateX(10px)}
  50%{transform:translateY(-8px) translateX(-8px)}
  75%{transform:translateY(-25px) translateX(5px)}
}
@keyframes gaugeStroke { from{stroke-dashoffset:var(--gauge-c)} to{stroke-dashoffset:var(--gauge-o)} }

.fade-section { opacity:0; transform:translateY(30px); transition:all .8s cubic-bezier(.22,1,.36,1); }
.fade-section.visible { opacity:1; transform:translateY(0); }

/* ── Layout ── */
.container { max-width:var(--max-w); margin:0 auto; padding:0 24px; }
.section { padding:100px 24px; }

/* ── Typography ── */
.section-label { color:var(--blue); font-size:12px; letter-spacing:4px; text-transform:uppercase; font-family:var(--font-display); font-weight:600; margin-bottom:12px; }
.section-title { font-size:clamp(28px,4vw,42px); font-weight:800; line-height:1.3; margin-bottom:20px; color:var(--text); }
.section-title .accent { color:var(--blue); }

/* ── Buttons ── */
.btn-glow {
  display:inline-block; background:linear-gradient(135deg,var(--blue),var(--blue-dark));
  color:#fff; border:none; padding:14px 36px; border-radius:var(--radius-sm);
  font-size:15px; font-weight:700; cursor:pointer; transition:all .3s;
  box-shadow:0 4px 16px var(--blue-dim); font-family:var(--font-body); text-align:center;
}
.btn-glow:hover { box-shadow:0 8px 32px rgba(0,85,212,.25); transform:translateY(-2px); color:#fff; }

.btn-outline {
  display:inline-block; background:transparent; color:var(--blue); border:1px solid var(--blue);
  padding:14px 36px; border-radius:var(--radius-sm); font-size:15px; font-weight:600;
  cursor:pointer; transition:all .3s; font-family:var(--font-body); text-align:center;
}
.btn-outline:hover { background:var(--blue-dim); color:var(--blue); }

/* ── Cards ── */
.card {
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  padding:36px 28px; transition:all .35s;
}
.card:hover { border-color:var(--blue); transform:translateY(-4px); box-shadow:0 12px 40px rgba(0,0,0,.08); }

/* ═══ NAVIGATION ═══ */
.site-nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:rgba(255,255,255,.92); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
}
.site-nav .container { display:flex; align-items:center; justify-content:space-between; height:72px; }

.site-logo { display:flex; align-items:center; gap:10px; }
.site-logo__icon {
  width:36px; height:36px; background:linear-gradient(135deg,var(--blue),var(--blue-dark));
  border-radius:8px; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:900; font-size:18px; color:#fff;
}
.site-logo__text { font-family:var(--font-display); font-weight:700; font-size:20px; color:var(--navy); }

.nav-links { display:flex; gap:32px; align-items:center; }
.nav-links a { color:var(--text-muted); font-size:14px; transition:color .2s; }
.nav-links a:hover { color:var(--blue); }
.nav-links .btn-glow { padding:10px 24px; font-size:13px; }

.mobile-toggle { display:none; background:none; border:none; color:var(--navy); font-size:28px; cursor:pointer; }
.mobile-menu { display:none; background:#fff; padding:20px 24px; border-bottom:1px solid var(--border); flex-direction:column; gap:16px; }
.mobile-menu.active { display:flex; }
.mobile-menu a { color:var(--text-muted); font-size:15px; padding:8px 0; }

/* ═══ HERO ═══ */
.hero {
  position:relative; min-height:100vh; display:flex; align-items:center; padding:120px 24px 80px;
  background: radial-gradient(ellipse at 30% 20%,rgba(0,85,212,.04) 0%,transparent 60%),
              radial-gradient(ellipse at 80% 80%,rgba(0,120,255,.03) 0%,transparent 50%), #fff;
}
.hero__grid { display:flex; gap:60px; align-items:center; }
.hero__content { flex:1 1 55%; }
.hero__badge {
  display:inline-block; background:var(--blue-dim); border:1px solid var(--blue-dim2);
  border-radius:100px; padding:6px 18px; margin-bottom:28px;
  color:var(--blue); font-size:12px; font-weight:600; letter-spacing:1px; font-family:var(--font-display);
}
.hero__title { font-size:clamp(36px,5vw,60px); font-weight:900; line-height:1.15; margin-bottom:24px; animation:fadeUp .8s ease-out; }
.hero__title .accent { color:var(--blue); }
.hero__desc { color:var(--text-sub); font-size:17px; line-height:1.8; margin-bottom:40px; max-width:520px; animation:fadeUp .8s ease-out .15s both; }
.hero__visual { flex:1 1 40%; display:flex; justify-content:center; animation:fadeUp 1s ease-out .5s both; }
.hero__note { color:var(--text-sub); font-size:12px; margin-top:12px; }

/* URL Input */
.url-input-group {
  display:flex; max-width:560px; background:var(--bg-light); border-radius:12px; overflow:hidden;
  border:1px solid var(--border); animation:fadeUp .8s ease-out .3s both;
}
.url-input-group input {
  flex:1; background:transparent; border:none; outline:none;
  color:var(--navy); padding:16px 20px; font-size:15px; font-family:var(--font-display);
}
.url-input-group input::placeholder { color:var(--text-sub); }
.url-input-group button {
  background:linear-gradient(135deg,var(--blue),var(--blue-dark)); color:#fff; border:none;
  padding:16px 28px; font-weight:700; cursor:pointer; font-size:14px; white-space:nowrap;
  font-family:var(--font-body); transition:opacity .2s;
}
.url-input-group button:hover { opacity:.9; }

/* Score Preview Card */
.score-preview {
  background:#fff; border-radius:20px; padding:40px 32px;
  border:1px solid var(--border); width:100%; max-width:380px;
  box-shadow:0 20px 60px rgba(0,0,0,.08),0 0 80px var(--blue-dim);
}
.score-preview__label { text-align:center; color:var(--text-sub); font-size:12px; letter-spacing:3px; font-family:var(--font-display); margin-bottom:24px; }
.score-preview__gauge { display:flex; justify-content:center; margin-bottom:24px; }
.score-preview__metrics { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; text-align:center; }
.score-preview__metric-val { font-size:22px; font-weight:800; font-family:var(--font-display); }
.score-preview__metric-label { color:var(--text-sub); font-size:10px; margin-top:2px; }

/* Gauge */
.gauge-bg { fill:none; stroke:var(--border); stroke-width:12; }
.gauge-fill { fill:none; stroke:var(--blue); stroke-width:12; stroke-linecap:round; animation:gaugeStroke 1.5s ease-out forwards; }
.gauge-text { fill:var(--blue); font-family:var(--font-display); font-weight:800; }

/* Particles */
.particles { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.particle { position:absolute; border-radius:50%; animation:particleFloat ease-in-out infinite; }

/* ═══ PROBLEM ═══ */
.problem__text { color:var(--text-sub); font-size:16px; line-height:1.9; margin-bottom:48px; }
.metrics-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.metric-card { text-align:center; }
.metric-card__num { font-family:var(--font-display); font-size:48px; font-weight:900; color:var(--blue); }
.metric-card__unit { font-size:20px; }
.metric-card__desc { color:var(--text-sub); font-size:13px; margin-top:8px; white-space:pre-line; }

/* ═══ FEATURES ═══ */
.features-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:1100px; margin:0 auto; }
.feature-card { position:relative; overflow:hidden; }
.feature-card__glow { position:absolute; top:-20px; right:-20px; width:100px; height:100px; background:radial-gradient(circle,var(--blue-dim) 0%,transparent 70%); pointer-events:none; }
.feature-card__icon { font-size:40px; display:block; margin-bottom:20px; }
.feature-card__title { font-size:20px; font-weight:700; margin-bottom:12px; }
.feature-card__desc { color:var(--text-sub); font-size:14px; line-height:1.8; }

/* ═══ FLOW ═══ */
.flow-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; max-width:1000px; margin:0 auto; }
.flow-step { text-align:center; }
.flow-step__icon {
  width:80px; height:80px; border-radius:50%; margin:0 auto 24px;
  background:var(--blue-dim); border:2px solid rgba(0,85,212,.2);
  display:flex; align-items:center; justify-content:center; font-size:36px;
}
.flow-step__num { font-family:var(--font-display); font-size:48px; font-weight:900; color:var(--blue); opacity:.15; margin-bottom:-16px; position:relative; }
.flow-step__title { font-size:20px; font-weight:700; margin-bottom:12px; position:relative; }
.flow-step__desc { color:var(--text-sub); font-size:14px; line-height:1.8; }

/* ═══ ABOUT ═══ */
.about-card { padding:48px 40px; }
.about__desc { color:var(--text-muted); font-size:15px; line-height:2; margin-bottom:32px; }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.about__label { color:var(--blue); font-size:11px; letter-spacing:2px; font-family:var(--font-display); margin-bottom:4px; }
.about__value { font-size:15px; }

/* ═══ CTA ═══ */
.cta-section {
  padding:120px 24px; text-align:center; position:relative;
  background:radial-gradient(ellipse at center,rgba(0,85,212,.05) 0%,transparent 60%),var(--bg-light);
}
.cta__title { font-size:clamp(28px,4vw,44px); font-weight:900; margin-bottom:20px; }
.cta__title .accent { color:var(--blue); }
.cta__desc { color:var(--text-sub); font-size:16px; max-width:600px; margin:0 auto 40px; }
.cta__buttons { display:flex; justify-content:center; gap:16px; }

/* ═══ FOOTER ═══ */
.site-footer { border-top:1px solid var(--border); padding:64px 24px 32px; background:var(--bg-light); }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:60px; }
.footer__brand-desc { color:var(--text-sub); font-size:13px; line-height:1.8; max-width:280px; }
.footer__col-title { color:var(--text); font-weight:600; font-size:14px; margin-bottom:16px; }
.footer__link { display:block; color:var(--text-muted); font-size:13px; margin-bottom:10px; transition:color .2s; }
.footer__link:hover { color:var(--blue); }
.footer__bottom { border-top:1px solid var(--border); margin-top:48px; padding-top:24px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.footer__copy { color:var(--text-sub); font-size:12px; }
.footer__powered { color:var(--text-sub); font-size:12px; font-family:var(--font-display); }

/* ═══ ANALYSIS OVERLAY ═══ */
.analysis-overlay { position:fixed; inset:0; z-index:9999; background:rgba(255,255,255,.97); display:none; flex-direction:column; align-items:center; justify-content:center; backdrop-filter:blur(10px); }
.analysis-overlay.active { display:flex; }
.analysis-spinner { width:80px; height:80px; border:3px solid var(--border); border-top:3px solid var(--blue); border-radius:50%; animation:spin 1s linear infinite; margin-bottom:40px; }
.analysis-label { color:var(--blue); font-family:var(--font-display); font-size:14px; letter-spacing:3px; text-transform:uppercase; margin-bottom:12px; }
.analysis-url { color:var(--text); font-size:18px; margin-bottom:32px; word-break:break-all; max-width:400px; text-align:center; }
.analysis-steps { width:320px; display:flex; flex-direction:column; gap:10px; }
.analysis-step { display:flex; align-items:center; gap:10px; opacity:.25; transition:opacity .5s; }
.analysis-step.done { opacity:1; }
.analysis-step__dot { width:20px; height:20px; border-radius:50%; background:var(--border); display:flex; align-items:center; justify-content:center; transition:background .4s; flex-shrink:0; }
.analysis-step.done .analysis-step__dot { background:var(--blue); }
.analysis-step__check { color:#fff; font-size:12px; font-weight:800; display:none; }
.analysis-step.done .analysis-step__check { display:block; }
.analysis-step__text { color:var(--text-sub); font-size:13px; transition:color .4s; }
.analysis-step.done .analysis-step__text { color:var(--text); }

/* ═══ RESULT DASHBOARD ═══ */
.result-page { display:none; min-height:100vh; background:var(--bg-light); padding:0 20px 80px; }
.result-page.active { display:block; }
.main-page.hidden { display:none; }
.result__back { background:none; border:1px solid var(--border); color:var(--text-sub); padding:8px 20px; border-radius:6px; cursor:pointer; margin-bottom:32px; font-family:var(--font-display); font-size:13px; transition:border-color .2s; }
.result__back:hover { border-color:var(--blue); }
.result__score-card { background:#fff; border-radius:var(--radius); padding:48px 40px; border:1px solid var(--border); margin-bottom:32px; text-align:center; box-shadow:0 4px 24px rgba(0,0,0,.06); }
.result__url-label { color:var(--text-sub); font-size:13px; margin-bottom:8px; }
.result__url-value { color:var(--text); font-size:16px; margin-bottom:32px; word-break:break-all; }
.result__score-label { color:var(--blue); font-size:14px; letter-spacing:4px; margin-top:16px; font-family:var(--font-display); }
.result__score-desc { color:var(--text-sub); font-size:13px; margin-top:8px; }
.result__metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:32px; }
.result__metric { background:#fff; border-radius:12px; padding:28px 20px; border:1px solid var(--border); text-align:center; box-shadow:0 2px 12px rgba(0,0,0,.04); }
.result__metric-val { font-size:36px; font-weight:800; font-family:var(--font-display); }
.result__metric-label { color:var(--text-sub); font-size:13px; margin-top:8px; }
.result__persona { background:#fff; border-radius:var(--radius); padding:36px 32px; border:1px solid var(--border); margin-bottom:32px; box-shadow:0 2px 12px rgba(0,0,0,.04); }
.result__persona-title { font-size:18px; margin-bottom:20px; }
.result__persona-desc { color:var(--text-sub); font-size:13px; margin-bottom:20px; }
.persona-item { background:var(--bg-light); border-radius:var(--radius-sm); padding:12px 16px; margin-bottom:8px; font-size:14px; border-left:3px solid var(--blue); }
.result__locked { background:#fff; border-radius:var(--radius); padding:36px 32px; border:1px solid var(--border); box-shadow:0 2px 12px rgba(0,0,0,.04); }
.result__locked-header { display:flex; align-items:center; gap:10px; margin-bottom:24px; }
.result__locked-title { font-size:18px; }
.locked-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.locked-item { background:var(--bg-light); border-radius:12px; padding:24px 20px; position:relative; overflow:hidden; }
.locked-item__overlay { position:absolute; inset:0; background:rgba(247,248,251,.85); backdrop-filter:blur(6px); display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:2; }
.locked-item__unlock-text { color:var(--text-sub); font-size:11px; margin-top:8px; }
.locked-item__title { font-size:15px; font-weight:600; margin-bottom:6px; }
.locked-item__desc { color:var(--text-sub); font-size:12px; }
.result__cta { text-align:center; margin-top:32px; }

/* ═══ RESPONSIVE ═══ */
@media(max-width:768px){
  .hero__grid{flex-direction:column}
  .nav-links{display:none}
  .mobile-toggle{display:block}
  .metrics-grid,.stats-grid{grid-template-columns:1fr 1fr}
  .features-grid,.flow-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:40px}
  .cta__buttons{flex-direction:column;align-items:center}
  .about-grid{grid-template-columns:1fr}
  .locked-grid{grid-template-columns:1fr}
  .result__metrics{grid-template-columns:1fr}
  .section{padding:60px 16px}
}