/* =============================================
   RESET & BASE
============================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --analyst:        #8C6AAE;
  --diplomat:       #33A474;
  --sentinel:       #4298B4;
  --explorer:       #D4A025;
  --analyst-light:  #F5F0FF;
  --diplomat-light: #EEF9F4;
  --sentinel-light: #EEF4FB;
  --explorer-light: #FDF7E8;

  --primary:        #4A90E2;
  --primary-dark:   #2563EB;
  --dark:           #1a1a2e;
  --dark2:          #16213e;

  --bg:             #FFFFFF;
  --bg2:            #F8F9FA;
  --text:           #1C1C1E;
  --text2:          #6B7280;
  --muted:          #9CA3AF;
  --border:         #E5E7EB;
  --nav-h:          64px;
  --r:              12px;
  --r-lg:           20px;
}

body {
  font-family: 'Hiragino Sans', 'Noto Sans JP', 'Yu Gothic UI', -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

@keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* =============================================
   NAV
============================================= */
#main-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 300;
  height: var(--nav-h);
  display: flex; align-items: center;
  padding: 0 2rem; gap: .5rem;
  transition: background .3s, border-color .3s, box-shadow .3s;
}
#main-nav.transparent {
  background: transparent;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
#main-nav.solid {
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 16px rgba(0,0,0,.06);
  backdrop-filter: blur(14px);
}

.nav-logo {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; margin-right: auto; border: none; background: none; font-family: inherit;
  text-decoration: none;
}
.nav-logo-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg, var(--primary), #7C3AED);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.nav-logo-text { font-size: 17px; font-weight: 800; letter-spacing: -.03em; color: var(--text); }

.nav-links { display: flex; }
.nav-link {
  font-size: 14px; font-weight: 500; padding: 8px 14px;
  border-radius: 8px; border: none; background: none;
  cursor: pointer; font-family: inherit; transition: all .15s;
  color: var(--text2); text-decoration: none; display: inline-flex; align-items: center;
}
.nav-link:hover { color: var(--text); background: var(--bg2); }

.nav-cta {
  font-size: 14px; font-weight: 700; padding: 9px 20px;
  border-radius: 99px; border: none; cursor: pointer; font-family: inherit; transition: all .15s;
  background: var(--primary); color: #fff; text-decoration: none;
  display: inline-flex; align-items: center;
}
.nav-cta:hover { background: var(--primary-dark); }

/* ハンバーガー */
.nav-hamburger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 36px; height: 36px; background: none; border: none;
  cursor: pointer; padding: 4px; flex-shrink: 0;
}
.nav-hamburger span {
  display: block; width: 22px; height: 2px;
  background: var(--text); border-radius: 2px; transition: all .25s;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile-menu {
  display: none; position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: 299;
  background: rgba(255,255,255,.98); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  flex-direction: column; padding: .5rem 1rem 1rem;
}
.nav-mobile-menu.open { display: flex; animation: slideDown .2s ease; }
@keyframes slideDown { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }
.nav-mobile-menu-item {
  padding: 14px 12px; font-size: 16px; font-weight: 600;
  background: none; border: none; cursor: pointer; font-family: inherit;
  text-align: left; color: var(--text); border-radius: var(--r); transition: background .14s;
  text-decoration: none; display: block;
}
.nav-mobile-menu-item:hover { background: var(--bg2); }
.nav-mobile-menu-cta {
  margin-top: .5rem; padding: 14px; border-radius: 99px;
  background: var(--primary); color: #fff;
  font-size: 15px; font-weight: 700; border: none; cursor: pointer;
  font-family: inherit; transition: background .14s; text-decoration: none;
  display: block; text-align: center;
}
.nav-mobile-menu-cta:hover { background: var(--primary-dark); }

@media (max-width: 640px) {
  .nav-links, .nav-cta { display: none; }
  .nav-hamburger { display: flex; }
}

/* =============================================
   LANDING — HERO
============================================= */
.hero {
  min-height: 100vh;
  background: #fff;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(var(--nav-h) + 2rem) 2rem 130px;
}
.hero-inner {
  position: relative; z-index: 1;
  max-width: 980px; width: 100%;
  gap: 3.5rem; align-items: center;
  display: flex; justify-content: center; text-align: center;
}
.hero-text { display: flex; flex-direction: column; align-items: center; }

/* ヒーロー装飾犬画像 */
.hero-dog-deco {
  position: absolute; pointer-events: none; object-fit: contain;
  opacity: .6; 
  z-index: 0;
  filter: blur(1px);
}
.hero-dog-left   { width: 370px; bottom: 15%; left: 3%; }
.hero-dog-right  { width: 350px; bottom: 15%;    right: -1%; }
.hero-dog-bottom { width: 530px; bottom: 15%; right: 10%; }
@media (max-width: 820px) {
  .hero-dog-left { width: 220px; bottom: 15%; left: -40px; }
  .hero-dog-right { width: 180px; bottom: 15%; right: -5%; }
  .hero-dog-bottom { width: 325px; bottom: 15%; right: 5%; }
}
.hero-glow-a {
  position: absolute; width: 700px; height: 700px; border-radius: 50%;
  background: radial-gradient(circle, rgba(140,106,174,.1) 0%, transparent 70%);
  top: -150px; left: 50%; transform: translateX(-50%); pointer-events: none;
}
.hero-glow-b {
  position: absolute; width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(51,164,116,.08) 0%, transparent 70%);
  bottom: -80px; right: -80px; pointer-events: none;
}
.hero-floats { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero-float {
  position: absolute; opacity: .07;
  animation: floatup 18s linear infinite;
}
@keyframes floatup {
  0%   { transform: translateY(110vh) rotate(0deg);   opacity: 0; }
  5%   { opacity: .07; }
  95%  { opacity: .07; }
  100% { transform: translateY(-15vh) rotate(360deg); opacity: 0; }
}

.hero-title {
  position: relative; z-index: 1;
  font-size: clamp(34px, 9vw, 72px); font-weight: 900;
  line-height: 1.1; color: var(--text); letter-spacing: -.04em;
  margin-bottom: 1.25rem;
}
.hero-title .accent {
  background: linear-gradient(135deg, var(--analyst) 0%, var(--sentinel) 50%, var(--diplomat) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero-sub {
  position: relative; z-index: 1;
  font-size: clamp(15px, 3vw, 18px); color: var(--text2);
  max-width: 440px; line-height: 1.85; margin: 0 auto 2.5rem;
}
.hero-btns {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 1rem;
  flex-wrap: wrap; justify-content: center; margin: 0 auto 4rem auto;
}
.btn-hero-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--primary); color: #fff;
  font-size: 16px; font-weight: 800; padding: 16px 36px;
  border-radius: 99px; border: none; cursor: pointer; font-family: inherit;
  box-shadow: 0 8px 32px rgba(74,144,226,.35); transition: all .2s;
  text-decoration: none;
}
.btn-hero-primary:hover { transform: translateY(-3px); box-shadow: 0 14px 40px rgba(74,144,226,.5); }
.btn-hero-ghost {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 1.5px solid var(--border);
  color: var(--text2); font-size: 15px; font-weight: 600; padding: 15px 28px;
  border-radius: 99px; cursor: pointer; font-family: inherit; transition: all .2s;
  text-decoration: none;
}
.btn-hero-ghost:hover { background: var(--bg2); border-color: var(--primary); color: var(--primary); }

.hero-stats {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 0;
  flex-wrap: wrap; justify-content: center;
}
.hero-stat { text-align: center; padding: 0 2.5rem; }
.hero-stat-num { font-size: clamp(26px, 6vw, 40px); font-weight: 900; color: var(--text); line-height: 1; }
.hero-stat-label { font-size: 12px; color: var(--muted); margin-top: 5px; font-weight: 500; }
.hero-stats-sep { width: 1px; height: 48px; background: var(--border); }

@media (max-width: 820px) {
  .hero-inner { text-align: center; gap: 2rem; }
  .hero-stat { padding: 0 1rem; }
  .hero-stat-num { font-size: 20px; }
  .hero-stat-label { font-size: 10px; }
  .hero-btns { gap: 2rem; }
}

/* =============================================
   MV マーキーストリップ
============================================= */
.mv-marquee-wrap {
  position: absolute; bottom: 0; left: 0; right: 0;
  overflow: hidden; pointer-events: none;
}
.mv-marquee-row { display: flex; overflow: hidden; padding: 10px 0; }
.mv-marquee-row:first-child { border-bottom: 1px solid rgba(0,0,0,.06); background: rgba(0,0,0,.03); }
.mv-marquee-row:last-child  { background: rgba(0,0,0,.04); }
.mv-marquee-track { display: flex; gap: 10px; flex-shrink: 0; animation: mvRight 38s linear infinite; }
.mv-marquee-track.rev { animation: mvLeft 44s linear infinite; }
@keyframes mvRight { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes mvLeft  { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.mv-chip {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--border);
  border-radius: 99px; padding: 5px 14px 5px 5px; flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.mv-chip img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; object-position: top; border: 1.5px solid var(--border); }
.mv-chip-info { display: flex; flex-direction: column; }
.mv-chip-name { font-size: 12px; font-weight: 700; color: var(--text); white-space: nowrap; line-height: 1.2; }
.mv-chip-type { font-size: 10px; font-weight: 600; color: var(--muted); white-space: nowrap; }

/* =============================================
   LANDING — HOW IT WORKS
============================================= */
.how-section { padding: 6rem 1.5rem; background: var(--bg); text-align: center; position: relative; overflow: hidden; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--primary); margin-bottom: .75rem; }
.section-h { font-size: clamp(24px, 5vw, 42px); font-weight: 900; color: var(--text); letter-spacing: -.03em; margin-bottom: .75rem; }
.section-p { font-size: 16px; color: var(--text2); max-width: 500px; margin: 0 auto 3.5rem; line-height: 1.75; }

.how-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; max-width: 860px; margin: 0 auto; }
.how-step { text-align: left; padding: 2rem 1.75rem; background: var(--bg2); border-radius: var(--r-lg); border: 1px solid var(--border); }
.how-step-num {
  width: 42px; height: 42px; border-radius: 13px; background: var(--primary); color: #fff;
  font-size: 18px; font-weight: 900; display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem;
}
.how-step h3 { font-size: 18px; font-weight: 800; margin-bottom: .5rem; }
.how-step p  { font-size: 14px; color: var(--text2); line-height: 1.65; }

/* =============================================
   LANDING — TYPE PREVIEW
============================================= */
.types-preview { padding: 5rem 1.5rem 6rem; background: var(--bg2); position: relative; overflow: hidden; }
.types-preview-inner { max-width: 960px; margin: 0 auto; }
.group-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 2.5rem; }
@media (max-width: 580px) { .group-grid { grid-template-columns: 1fr; } }
.group-block { background: var(--bg); border-radius: var(--r-lg); border: 1px solid var(--border); overflow: hidden; }
.group-block-hd { padding: 1.1rem 1.4rem; display: flex; align-items: center; gap: .7rem; border-bottom: 1px solid var(--border); }
.group-dot { font-size: 15px; line-height: 1; flex-shrink: 0; }
.group-block-name { font-size: 14px; font-weight: 800; }
.group-block-en   { font-size: 11px; color: var(--muted); font-weight: 700; letter-spacing: .1em; margin-left: auto; }
.group-type-row { display: grid; grid-template-columns: repeat(4, 1fr); }
.group-type-cell {
  padding: .9rem .5rem; text-align: center;
  border-right: 1px solid var(--border); cursor: pointer; transition: background .12s; text-decoration: none; display: block;
}
.group-type-cell:last-child { border-right: none; }
.group-type-cell:hover { background: var(--bg2); }
.group-type-em   { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: top; display: block; margin: 0 auto 6px; }
.group-type-code { font-size: 11px; font-weight: 800; letter-spacing: .07em; }
.group-type-name { font-size: 9px; color: var(--text2); margin-top: 2px; line-height: 1.3; }
.more-btn {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 2.5rem;
  background: var(--bg); border: 1.5px solid var(--border);
  color: var(--text); font-size: 15px; font-weight: 600;
  padding: 13px 28px; border-radius: 99px; cursor: pointer; font-family: inherit; transition: all .15s;
  text-decoration: none;
}
.more-btn:hover { border-color: var(--primary); color: var(--primary); }

/* =============================================
   FOOTER
============================================= */
.site-footer { background: var(--dark); color: rgba(255,255,255,.65); padding: 4rem 1.5rem 2rem; }
.footer-inner { max-width: 900px; margin: 0 auto; }
.footer-top {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.5rem;
  padding-bottom: 2.5rem; border-bottom: 1px solid rgba(255,255,255,.1);
}
@media (max-width: 640px) { .footer-top { grid-template-columns: 1fr 1fr; } }
.footer-logo { display: flex; align-items: center; gap: 8px; margin-bottom: 1rem; text-decoration: none; }
.footer-logo-icon { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, var(--primary), #7C3AED); display: flex; align-items: center; justify-content: center; font-size: 15px; }
.footer-logo-text { font-size: 15px; font-weight: 800; color: #fff; }
.footer-desc { font-size: 13px; line-height: 1.7; max-width: 200px; }
.footer-col-h { font-size: 11px; font-weight: 800; color: #fff; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 1rem; }
.footer-lnk {
  display: block; font-size: 13px; color: rgba(255,255,255,.55);
  margin-bottom: .6rem; cursor: pointer; background: none; border: none;
  font-family: inherit; padding: 0; text-align: left; transition: color .13s; text-decoration: none;
}
.footer-lnk:hover { color: rgba(255,255,255,.9); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 1.75rem; flex-wrap: wrap; gap: .75rem; }
.footer-copy { font-size: 12px; }
.footer-leg  { display: flex; gap: 1.25rem; }
.footer-leg span { font-size: 12px; color: rgba(255,255,255,.4); }

/* =============================================
   QUIZ PAGE
============================================= */
.quiz-page { min-height: 100vh; background: #F8F9FA; }

.q-prog-wrap { position: fixed; top: 0; left: 0; right: 0; z-index: 400; height: 4px; background: var(--border); }
.q-prog-fill { height: 100%; background: linear-gradient(90deg, var(--primary), #7C3AED); transition: width .4s cubic-bezier(.4,0,.2,1); }

.quiz-topbar {
  position: fixed; top: 4px; left: 0; right: 0; z-index: 300;
  height: var(--nav-h); background: rgba(255,255,255,.96); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; padding: 0 1.5rem; gap: 1rem;
}
.quiz-topbar-logo { display: flex; align-items: center; gap: 8px; cursor: pointer; margin-right: auto; border: none; background: none; font-family: inherit; text-decoration: none; }
.quiz-topbar-counter { font-size: 13px; color: var(--text2); font-weight: 600; }
.quiz-topbar-exit {
  font-size: 13px; color: var(--text2); background: none; border: none;
  cursor: pointer; font-family: inherit; padding: 6px 10px; border-radius: 8px; transition: all .15s; text-decoration: none;
}
.quiz-topbar-exit:hover { color: var(--text); background: var(--bg2); }

.quiz-body { max-width: 660px; margin: 0 auto; padding: calc(var(--nav-h) + 4px + 3rem) 1.25rem 6rem; }

.phase-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: .75rem; }
.phase-bar { height: 4px; border-radius: 99px; background: var(--border); transition: background .3s; }
.phase-bar.active { background: var(--primary); }
.phase-bar.done   { background: #10B981; }
.phase-label { text-align: center; font-size: 12px; color: var(--muted); font-weight: 600; margin-bottom: 2rem; letter-spacing: .04em; }

.quiz-questions { display: flex; flex-direction: column; gap: 12px; }
.q-list-card {
  background: #fff; border-radius: var(--r-lg); border: 1.5px solid var(--border);
  padding: 1.5rem 1.75rem 1.75rem; box-shadow: 0 2px 12px rgba(0,0,0,.04);
  transition: border-color .2s, box-shadow .2s;
}
.q-list-card.answered { border-color: #bfdbfe; }

.q-num-badge { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .09em; color: var(--primary); background: #EFF6FF; padding: 4px 13px; border-radius: 99px; margin-bottom: .85rem; }
.q-single-text { font-size: clamp(17px, 4vw, 22px); font-weight: 800; line-height: 1.55; color: var(--text); margin-bottom: 2rem; text-align: center; }
.q-axis-wrap { text-align: center; margin-bottom: .6rem; }
.q-axis-label { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--primary); background: #EFF6FF; padding: 4px 14px; border-radius: 99px; }

.scale-outer { max-width: 460px; margin: 0 auto; }
.scale-ends { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--text2); margin-bottom: 1rem; }
/* 7択スケール: gap・サイズともに clamp で流動的に調整
   モバイル(375px)実質幅 ≈ 279px → 合計 ~262px で余裕あり
   デスクトップ(768px+) → 上限値で最大サイズを維持 */
.scale-track { display: flex; align-items: center; justify-content: center; gap: clamp(4px, 1.5vw, 8px); padding: .5rem 0; }
.scale-btn { border: 2px solid var(--border); background: #fff; border-radius: 50%; cursor: pointer; transition: all .14s; flex-shrink: 0; }
.scale-btn:nth-child(1), .scale-btn:nth-child(7) { width: clamp(34px, 10vw, 46px); height: clamp(34px, 10vw, 46px); }
.scale-btn:nth-child(2), .scale-btn:nth-child(6) { width: clamp(30px,  9vw, 40px); height: clamp(30px,  9vw, 40px); }
.scale-btn:nth-child(3), .scale-btn:nth-child(5) { width: clamp(26px,  8vw, 35px); height: clamp(26px,  8vw, 35px); }
.scale-btn:nth-child(4)                           { width: clamp(22px,  7vw, 29px); height: clamp(22px,  7vw, 29px); }
.scale-btn:hover { border-color: var(--primary); }
.scale-btn.active { background: var(--primary); border-color: var(--primary); box-shadow: 0 0 0 4px rgba(74,144,226,.22); }
.scale-hint { text-align: center; font-size: 12px; color: var(--muted); margin-top: .75rem; min-height: 18px; }

.quiz-nav-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 300;
  height: 76px; background: rgba(255,255,255,.96); backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
  display: flex; align-items: center; padding: 0 1.5rem; gap: 1rem;
}
.btn-q-prev {
  display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; padding: 11px 20px;
  border-radius: 99px; border: 1.5px solid var(--border); background: #fff; cursor: pointer; font-family: inherit; color: var(--text2); transition: all .14s;
}
.btn-q-prev:hover:not(:disabled) { border-color: var(--text); color: var(--text); }
.btn-q-prev:disabled { opacity: .35; cursor: default; }
.btn-q-next {
  margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; padding: 12px 28px;
  border-radius: 99px; border: none; background: var(--primary); color: #fff; cursor: pointer; font-family: inherit; transition: all .14s;
}
.btn-q-next:hover { background: var(--primary-dark); }

@keyframes slideInRight { from { opacity:0; transform:translateX(52px); } to { opacity:1; transform:translateX(0); } }
@keyframes slideInLeft  { from { opacity:0; transform:translateX(-52px); } to { opacity:1; transform:translateX(0); } }
.quiz-questions.slide-next .q-list-card { animation: slideInRight .28s cubic-bezier(.4,0,.2,1); }
.quiz-questions.slide-prev .q-list-card { animation: slideInLeft  .28s cubic-bezier(.4,0,.2,1); }
@keyframes scaleFlash { 0%,100% { transform:scale(1); } 50% { transform:scale(1.24); } }
.scale-btn.selected-flash { animation: scaleFlash .22s ease; }

/* =============================================
   TYPES PAGE
============================================= */
.page-topbar {
  background: rgba(255,255,255,.96); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border); height: var(--nav-h);
  display: flex; align-items: center; padding: 0 1.5rem; gap: .5rem;
  position: sticky; top: 0; z-index: 100;
}
.page-topbar-logo { display: flex; align-items: center; gap: 8px; cursor: pointer; margin-right: auto; border: none; background: none; font-family: inherit; text-decoration: none; }
.page-topbar-lnk { font-size: 14px; font-weight: 500; padding: 7px 13px; border-radius: 8px; border: none; background: none; cursor: pointer; font-family: inherit; color: var(--text2); transition: all .14s; text-decoration: none; display: inline-flex; align-items: center; }
.page-topbar-lnk:hover { color: var(--text); background: var(--bg2); }
.page-topbar-cta { font-size: 13px; font-weight: 700; padding: 8px 18px; border-radius: 99px; border: none; background: var(--primary); color: #fff; cursor: pointer; font-family: inherit; transition: all .14s; text-decoration: none; display: inline-flex; align-items: center; }
.page-topbar-cta:hover { background: var(--primary-dark); }

.types-page-hero {
  padding: 3.5rem 1.5rem 2.5rem; text-align: center;
  background: linear-gradient(180deg, var(--bg2) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--border);
}
.types-page-hero h1 { font-size: clamp(26px, 6vw, 42px); font-weight: 900; letter-spacing: -.03em; margin-bottom: .5rem; }
.types-page-hero p  { font-size: 15px; color: var(--text2); margin-bottom: 1.5rem; }

.types-body { max-width: 760px; margin: 0 auto; padding: 2.5rem 1.25rem 5rem; }
.types-g-section { margin-bottom: 3.5rem; }
.types-g-hd { display: flex; align-items: center; gap: .75rem; padding-bottom: 1rem; margin-bottom: 1.25rem; border-bottom: 2.5px solid; flex-wrap: wrap; }
.types-g-section[data-g="analyst"]  .types-g-hd { border-color: var(--analyst); }
.types-g-section[data-g="diplomat"] .types-g-hd { border-color: var(--diplomat); }
.types-g-section[data-g="sentinel"] .types-g-hd { border-color: var(--sentinel); }
.types-g-section[data-g="explorer"] .types-g-hd { border-color: var(--explorer); }

.types-g-badge { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 4px 12px; border-radius: 99px; }
.types-g-section[data-g="analyst"]  .types-g-badge { background: var(--analyst-light);  color: var(--analyst); }
.types-g-section[data-g="diplomat"] .types-g-badge { background: var(--diplomat-light); color: var(--diplomat); }
.types-g-section[data-g="sentinel"] .types-g-badge { background: var(--sentinel-light); color: var(--sentinel); }
.types-g-section[data-g="explorer"] .types-g-badge { background: var(--explorer-light); color: var(--explorer); }

.types-g-title { font-size: 20px; font-weight: 900; }
.types-g-desc  { font-size: 12px; color: var(--text2); margin-left: auto; max-width: 240px; text-align: right; line-height: 1.45; }
@media (max-width: 500px) { .types-g-desc { display: none; } }

.types-card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 560px) { .types-card-grid { grid-template-columns: repeat(2, 1fr); } }

.type-card {
  background: var(--bg); border-radius: var(--r); border: 1px solid var(--border);
  padding: 1.4rem .9rem 1.2rem; text-align: center; cursor: pointer;
  transition: transform .2s, box-shadow .2s; position: relative; overflow: hidden; text-decoration: none; display: block;
}
.type-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.1); }
.type-avatar { width: 70px; height: 70px; border-radius: 50%; margin: 0 auto .85rem; overflow: hidden; background: linear-gradient(135deg, #F0EDE8, #E8E4DC); display: flex; align-items: center; justify-content: center; }
.type-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.type-avatar-em { font-size: 34px; }
.type-card-code { font-size: 11px; font-weight: 800; letter-spacing: .12em; margin-bottom: 4px; }
.types-g-section[data-g="analyst"]  .type-card-code { color: var(--analyst); }
.types-g-section[data-g="diplomat"] .type-card-code { color: var(--diplomat); }
.types-g-section[data-g="sentinel"] .type-card-code { color: var(--sentinel); }
.types-g-section[data-g="explorer"] .type-card-code { color: var(--explorer); }
.type-card-name  { font-size: 14px; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.type-card-catch { font-size: 11px; color: var(--text2); line-height: 1.45; }

/* =============================================
   RESULT PAGE
============================================= */
.result-hero {
  padding: 3.5rem 1.5rem 3rem; text-align: center; position: relative; overflow: hidden;
  padding-top: calc(var(--nav-h) + 3.5rem);
}
.result-hero[data-g="analyst"]  { background: linear-gradient(180deg, #EAE0FF 0%, #F5F0FF 100%); }
.result-hero[data-g="diplomat"] { background: linear-gradient(180deg, #CCEEDD 0%, #EEF9F4 100%); }
.result-hero[data-g="sentinel"] { background: linear-gradient(180deg, #CCE4EF 0%, #EEF4FB 100%); }
.result-hero[data-g="explorer"] { background: linear-gradient(180deg, #F5E4B0 0%, #FDF7E8 100%); }

.result-group-badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; padding: 5px 14px; border-radius: 99px; margin-bottom: 1.5rem;
}
.result-hero[data-g="analyst"]  .result-group-badge { background: rgba(140,106,174,.15); color: var(--analyst); }
.result-hero[data-g="diplomat"] .result-group-badge { background: rgba(51,164,116,.15);  color: var(--diplomat); }
.result-hero[data-g="sentinel"] .result-group-badge { background: rgba(66,152,180,.15);  color: var(--sentinel); }
.result-hero[data-g="explorer"] .result-group-badge { background: rgba(212,160,37,.15);  color: var(--explorer); }

.result-bg-type {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-size: clamp(100px, 28vw, 190px); font-weight: 900; letter-spacing: -.04em;
  opacity: .06; pointer-events: none; z-index: 0; white-space: nowrap; line-height: 1;
}
.result-hero[data-g="analyst"]  .result-bg-type { color: var(--analyst); }
.result-hero[data-g="diplomat"] .result-bg-type { color: var(--diplomat); }
.result-hero[data-g="sentinel"] .result-bg-type { color: var(--sentinel); }
.result-hero[data-g="explorer"] .result-bg-type { color: var(--explorer); }

.result-avatar-outer { position: relative; width: 240px; height: 240px; margin: 0 auto 1.5rem; display: flex; align-items: center; justify-content: center; }
.result-av-glow { position: absolute; inset: -30px; border-radius: 50%; pointer-events: none; z-index: 0; }
.result-hero[data-g="analyst"]  .result-av-glow { background: radial-gradient(circle, rgba(140,106,174,.28) 0%, transparent 68%); }
.result-hero[data-g="diplomat"] .result-av-glow { background: radial-gradient(circle, rgba(51,164,116,.28)  0%, transparent 68%); }
.result-hero[data-g="sentinel"] .result-av-glow { background: radial-gradient(circle, rgba(66,152,180,.28)  0%, transparent 68%); }
.result-hero[data-g="explorer"] .result-av-glow { background: radial-gradient(circle, rgba(212,160,37,.28)  0%, transparent 68%); }

.result-av-ring { position: absolute; border-radius: 50%; pointer-events: none; }
.result-av-ring-1 { width: 210px; height: 210px; border: 2px solid; }
.result-av-ring-2 { width: 238px; height: 238px; border: 1.5px dashed; }
.result-hero[data-g="analyst"]  .result-av-ring { border-color: rgba(140,106,174,.3); }
.result-hero[data-g="diplomat"] .result-av-ring { border-color: rgba(51,164,116,.3); }
.result-hero[data-g="sentinel"] .result-av-ring { border-color: rgba(66,152,180,.3); }
.result-hero[data-g="explorer"] .result-av-ring { border-color: rgba(212,160,37,.3); }

.result-avatar-wrap {
  width: 180px; height: 180px; border-radius: 50%; overflow: hidden;
  border: 5px solid rgba(255,255,255,.85); box-shadow: 0 12px 48px rgba(0,0,0,.14);
  background: #fff; display: flex; align-items: center; justify-content: center;
  margin: 0; position: relative; z-index: 1;
}
.result-avatar-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.result-avatar-em { font-size: 80px; display: none; }

.result-sparkle { position: absolute; pointer-events: none; z-index: 2; line-height: 1; animation: rSpark 2.4s ease-in-out infinite; }
.result-sparkle:nth-child(2) { animation-delay: .6s; }
.result-sparkle:nth-child(3) { animation-delay: 1.2s; }
.result-sparkle:nth-child(4) { animation-delay: 1.8s; }
@keyframes rSpark { 0%,100% { transform:scale(1) rotate(0deg); opacity:.65; } 50% { transform:scale(1.4) rotate(18deg); opacity:1; } }

.result-type-code { font-size: 13px; font-weight: 800; letter-spacing: .25em; margin-bottom: .35rem; position: relative; z-index: 1; }
.result-hero[data-g="analyst"]  .result-type-code { color: var(--analyst); }
.result-hero[data-g="diplomat"] .result-type-code { color: var(--diplomat); }
.result-hero[data-g="sentinel"] .result-type-code { color: var(--sentinel); }
.result-hero[data-g="explorer"] .result-type-code { color: var(--explorer); }
.result-name-label  { font-size: 16px; font-weight: 700; color: var(--text2); position: relative; z-index: 1; margin-bottom: .2rem; margin-top: 1.25rem; }
.result-name        { font-size: clamp(30px, 8vw, 50px); font-weight: 900; letter-spacing: -.03em; margin-bottom: .2rem; position: relative; z-index: 1; }
.result-name-suffix { font-size: 18px; font-weight: 700; color: var(--text2); position: relative; z-index: 1; margin-bottom: .5rem; }
.result-catch { font-size: 16px; font-weight: 700; color: var(--text); max-width: 340px; margin: 0 auto 1rem; position: relative; z-index: 1; }
.btn-result-hero-quiz { display: block; margin: 1.5rem auto; width: fit-content; padding: .7rem 1.6rem; background: var(--primary); color: #fff; border-radius: 999px; font-size: 15px; font-weight: 700; text-decoration: none; position: relative; z-index: 1; box-shadow: 0 4px 16px rgba(112,71,209,.35); transition: transform .15s, box-shadow .15s; }
.btn-result-hero-quiz:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(112,71,209,.45); }

.result-body { max-width: 800px; margin: 0 auto; padding: 2rem 1.25rem 5rem; }
.result-sec { margin-bottom: 1.5rem; }
.result-sec-label { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: .75rem; }
.result-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.75rem; }
.result-card p { font-size: 15px; line-height: 1.9; }

.result-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1.25rem; }
.r-tag { font-size: 13px; font-weight: 700; padding: 6px 14px; border-radius: 99px; }
.r-tag[data-g="analyst"]  { background: rgba(140,106,174,.1); color: var(--analyst); }
.r-tag[data-g="diplomat"] { background: rgba(51,164,116,.1);  color: var(--diplomat); }
.r-tag[data-g="sentinel"] { background: rgba(66,152,180,.1);  color: var(--sentinel); }
.r-tag[data-g="explorer"] { background: rgba(212,160,37,.1);  color: var(--explorer); }
.result-paw-divider { text-align: center; font-size: 18px; opacity: .25; margin: .25rem 0 1.25rem; letter-spacing: 8px; }

.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 480px) { .detail-grid { grid-template-columns: 1fr; } }
.detail-cell { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r); padding: 1.1rem 1rem; }
.detail-cell-icon  { font-size: 20px; margin-bottom: .4rem; }
.detail-cell-label { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .4rem; }
.detail-cell-text  { font-size: 13px; line-height: 1.7; color: var(--text); }

/* Trait sections (強み・弱み) */
.trait-sec-title { font-size: 20px; font-weight: 800; color: var(--text); margin-bottom: 1rem; }
.trait-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .trait-grid { grid-template-columns: 1fr; } }
.trait-item { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r); padding: 1.1rem 1rem; }
.trait-header { display: flex; align-items: center; gap: .55rem; }
.trait-icon { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; flex-shrink: 0; }
.trait-pos  { background: #e8f5ee; border: 1.5px solid #33A474; color: #33A474; }
.trait-neg  { background: #fff8e1; border: 1.5px solid #D4A025; color: #D4A025; }
.trait-love { background: #fff0f4; border: 1.5px solid #E87070; color: #E87070; }
.trait-title { font-size: 14px; font-weight: 700; color: var(--text); }
.trait-text  { font-size: 13px; line-height: 1.7; color: var(--text2);padding-left: 32px; margin-bottom: 10px;}
.trait-grid .trait-item:last-child:nth-child(odd) { grid-column: span 2; }
@media (max-width: 480px) { .trait-grid .trait-item:last-child:nth-child(odd) { grid-column: span 1; } }

.axis-item { margin-bottom: 1.1rem; }
.axis-item:last-child { margin-bottom: 0; }
.axis-row  { display: flex; justify-content: space-between; font-size: 13px; font-weight: 800; margin-bottom: 6px; }
.axis-bg   { height: 8px; background: var(--border); border-radius: 99px; overflow: hidden; }
.axis-fill { height: 100%; border-radius: 99px; transition: width .8s cubic-bezier(.4,0,.2,1); }

.compat-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.compat-mini { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r); padding: 1.25rem; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.compat-mini.clickable { cursor: pointer; transition: transform .15s, box-shadow .15s; text-decoration: none; }
.compat-mini.clickable:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.1); }
.compat-tap-hint { font-size: 10px; color: var(--primary); font-weight: 700; letter-spacing: .03em; opacity: .7; }
.compat-badge { font-size: 10px; font-weight: 800; letter-spacing: .05em; color: var(--muted); }
.compat-av { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: #F0EDE8; display: flex; align-items: center; justify-content: center; }
.compat-av img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.compat-av-em { font-size: 28px; display: none; }
.compat-name { font-size: 14px; font-weight: 800; }
.compat-type { font-size: 11px; color: var(--muted); }

.share-btns { display: flex; gap: 10px; margin-bottom: .75rem; }
.btn-share { flex: 1; padding: 14px 8px; border-radius: var(--r); font-size: 14px; font-weight: 700; cursor: pointer; border: none; font-family: inherit; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all .14s; text-decoration: none; }
.btn-share:hover { opacity: .86; transform: translateY(-1px); }
.btn-x    { background: #000; color: #fff; }
.btn-line { background: #06C755; color: #fff; }
.btn-native { background: var(--primary); color: #fff; }
.btn-retry {
  width: 100%; padding: 14px; border-radius: var(--r); background: var(--bg2); border: 1.5px solid var(--border);
  font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit; color: var(--text); transition: all .14s; display: block; text-align: center; text-decoration: none;
}
.btn-retry:hover { background: #EFF6FF; border-color: var(--primary); color: var(--primary); }
.btn-compat-cta {
  width: 100%; padding: 15px; border-radius: var(--r); background: linear-gradient(135deg, #10B981, #059669);
  border: none; font-size: 15px; font-weight: 800; cursor: pointer; font-family: inherit; color: #fff; transition: all .14s;
  display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 10px; text-decoration: none;
}
.btn-compat-cta:hover { opacity: .88; transform: translateY(-1px); }

/* =============================================
   COMPAT SELECT
============================================= */
.compat-page-hero { padding: 3rem 1.5rem 2rem; text-align: center; border-bottom: 1px solid var(--border); position: relative; overflow: hidden; padding-top: calc(var(--nav-h) + 3rem); }
.compat-page-hero h1 { font-size: clamp(22px, 5vw, 36px); font-weight: 900; margin-bottom: .4rem; }
.compat-page-hero p  { font-size: 14px; color: var(--text2); }
.compat-body { max-width: 580px; margin: 0 auto; padding: 1.75rem 1.25rem 5rem; }
.compat-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 1.5rem; }
.compat-slot { background: var(--bg); border-radius: var(--r-lg); border: 2px dashed var(--border); padding: 1.25rem; display: flex; align-items: center; gap: .75rem; min-height: 82px; transition: all .15s; }
.compat-slot.sel-a { border-style: solid; border-color: var(--diplomat); background: var(--diplomat-light); }
.compat-slot.sel-b { border-style: solid; border-color: #E8874E; background: #FFF0E8; }
.slot-ph  { width: 44px; height: 44px; border-radius: 50%; background: #F0F0F0; display: flex; align-items: center; justify-content: center; font-size: 18px; color: #CCC; flex-shrink: 0; }
.slot-av  { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: #F0EDE8; display: flex; align-items: center; justify-content: center; }
.slot-av img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.slot-av-em { font-size: 20px; display: none; }
.slot-info  { flex: 1; min-width: 0; }
.slot-role  { font-size: 10px; color: var(--muted); font-weight: 700; margin-bottom: 2px; }
.slot-name  { font-size: 14px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn-compat-go {
  width: 100%; padding: 16px; border-radius: 99px; background: var(--primary); color: #fff; font-size: 16px; font-weight: 800;
  border: none; cursor: pointer; font-family: inherit; box-shadow: 0 4px 20px rgba(74,144,226,.28); transition: all .14s; margin-bottom: 1.75rem;
}
.btn-compat-go:not(:disabled):hover { background: var(--primary-dark); transform: translateY(-2px); }
.btn-compat-go:disabled { opacity: .35; cursor: default; box-shadow: none; }
.compat-g-label { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin: 1.25rem 0 .75rem; }
.compat-mini-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mini-card { background: var(--bg); border-radius: var(--r); padding: 9px 5px 11px; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; border: 2px solid transparent; box-shadow: 0 1px 4px rgba(0,0,0,.05); transition: all .14s; }
.mini-card:hover { border-color: var(--border); transform: translateY(-2px); }
.mini-card.sel-a { border-color: var(--diplomat); background: var(--diplomat-light); }
.mini-card.sel-b { border-color: #E8874E; background: #FFF0E8; }
.mini-av { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; background: #F0EDE8; display: flex; align-items: center; justify-content: center; }
.mini-av img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.mini-av-em { font-size: 21px; display: none; }
.mini-name { font-size: 9.5px; font-weight: 700; text-align: center; line-height: 1.3; }
.mini-code { font-size: 9px; color: var(--muted); font-weight: 600; }

/* =============================================
   COMPAT RESULT
============================================= */
.cr-hero { background: linear-gradient(180deg, #EEF0FF 0%, var(--bg) 100%); padding: 3rem 1.5rem 2.5rem; text-align: center; border-bottom: 1px solid var(--border); position: relative; overflow: hidden; }
.vs-row { display: flex; align-items: center; justify-content: center; gap: 2rem; margin-bottom: 2rem; }
.vs-dog { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.vs-av { width: 100px; height: 100px; border-radius: 50%; overflow: hidden; background: #F0EDE8; border: 4px solid var(--bg); box-shadow: 0 6px 22px rgba(0,0,0,.1); display: flex; align-items: center; justify-content: center; }
.vs-av img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.vs-av-em  { font-size: 44px; display: none; }
.vs-name   { font-size: 14px; font-weight: 800; }
.vs-type   { font-size: 11px; color: var(--muted); }
.vs-sep    { font-size: 22px; font-weight: 900; color: var(--muted); }
.cr-stars    { font-size: 28px; letter-spacing: 4px; color: var(--explorer); margin-bottom: .4rem; }
.cr-rel-name { font-size: 26px; font-weight: 900; margin-bottom: .4rem; }
.cr-rel-desc { font-size: 14px; color: var(--text2); max-width: 340px; margin: 0 auto; }
.cr-body { max-width: 540px; margin: 0 auto; padding: 1.75rem 1.25rem 5rem; }
.scene-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 1.5rem; }
.scene-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r); padding: 1.25rem .75rem; text-align: center; }
.scene-icon  { font-size: 24px; margin-bottom: .35rem; }
.scene-label { font-size: 11px; font-weight: 700; color: var(--muted); margin-bottom: .4rem; }
.scene-stars { font-size: 14px; color: var(--explorer); letter-spacing: 1px; }

/* =============================================
   LOADING
============================================= */
.loading-wrap {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--dark); color: #fff; text-align: center; padding: 2rem; position: relative; overflow: hidden;
}
.loading-paw { font-size: 56px; margin-bottom: 2rem; animation: pawBeat .7s ease-in-out infinite alternate; }
@keyframes pawBeat { from { transform:scale(1); } to { transform:scale(1.18); } }
.loading-title { font-size: clamp(20px,5vw,32px); font-weight: 900; margin-bottom: 1rem; letter-spacing:-.02em; }
.loading-dots span { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); margin: 0 4px; animation: dotBounce .9s ease-in-out infinite; }
.loading-dots span:nth-child(2) { animation-delay: .2s; }
.loading-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes dotBounce { 0%,80%,100% { transform:translateY(0); } 40% { transform:translateY(-12px); } }
.loading-msg { margin-top: 2rem; font-size: 14px; color: rgba(255,255,255,.5); min-height: 22px; transition: opacity .4s; }
.loading-bar-wrap { width: 240px; height: 4px; background: rgba(255,255,255,.12); border-radius: 99px; margin: 1.5rem auto 0; }
.loading-bar-fill { height: 100%; border-radius: 99px; background: var(--primary); transition: width .4s ease; }

/* =============================================
   CONFETTI
============================================= */
.confetti-piece { position: fixed; border-radius: 2px; pointer-events: none; z-index: 999; animation: cf-fall 2s ease-in forwards; }
@keyframes cf-fall { 0% { transform: translateY(-20px) rotate(0deg); opacity: 1; } 100% { transform: translateY(110vh) rotate(720deg); opacity: 0; } }

/* =============================================
   PAW あしらい
============================================= */
.paw-art { position: absolute; pointer-events: none; user-select: none; line-height: 1; opacity: var(--paw-op,.05); font-size: var(--paw-sz,160px); transform: rotate(var(--paw-rot,0deg)); z-index: 0; filter: blur(.4px); }
.paw-analyst  { filter: blur(.4px) grayscale(1) sepia(1) saturate(18) hue-rotate(235deg); }
.paw-diplomat { filter: blur(.4px) grayscale(1) sepia(1) saturate(18) hue-rotate(115deg); }
.paw-sentinel { filter: blur(.4px) grayscale(1) sepia(1) saturate(18) hue-rotate(170deg); }
.paw-explorer { filter: blur(.4px) grayscale(1) sepia(1) saturate(12) hue-rotate(10deg) brightness(1.1); }

.hero::before { content:"🐾"; position:absolute; pointer-events:none; line-height:1; z-index:0; font-size:380px; opacity:.1; top:4%; right:-4%; transform:rotate(22deg); filter:grayscale(1) sepia(1) saturate(18) hue-rotate(235deg); }
.hero::after  { content:"🐾"; position:absolute; pointer-events:none; line-height:1; z-index:0; font-size:260px; opacity:.08; bottom:16%; left:-2%; transform:rotate(-38deg); filter:grayscale(1) sepia(1) saturate(18) hue-rotate(115deg); }
.how-section::before { content:"🐾"; position:absolute; pointer-events:none; z-index:0; font-size:300px; opacity:.032; top:-30px; right:-20px; transform:rotate(12deg); }
.how-section::after  { content:"🐾"; position:absolute; pointer-events:none; z-index:0; font-size:200px; opacity:.025; bottom:-10px; left:-15px; transform:rotate(-25deg); }
.types-preview::before { content:"🐾"; position:absolute; pointer-events:none; z-index:0; font-size:320px; opacity:.028; top:10px; left:-30px; transform:rotate(-18deg); }
.types-preview::after  { content:"🐾"; position:absolute; pointer-events:none; z-index:0; font-size:240px; opacity:.024; bottom:0; right:-20px; transform:rotate(30deg); }
.result-hero::before { content:"🐾"; position:absolute; pointer-events:none; z-index:0; font-size:340px; opacity:.06; top:-20px; right:-20px; transform:rotate(18deg); }
.result-hero::after  { content:"🐾"; position:absolute; pointer-events:none; z-index:0; font-size:210px; opacity:.045; bottom:-10px; left:-10px; transform:rotate(-30deg); }
.loading-wrap::before { content:"🐾"; position:absolute; pointer-events:none; z-index:0; font-size:420px; opacity:.05; bottom:2%; right:-8%; transform:rotate(-15deg); }
.loading-wrap::after  { content:"🐾"; position:absolute; pointer-events:none; z-index:0; font-size:260px; opacity:.035; top:2%; left:-8%; transform:rotate(30deg); }
.compat-page-hero::before { content:"🐾"; position:absolute; pointer-events:none; z-index:0; font-size:260px; opacity:.045; top:-15px; right:-5px; transform:rotate(20deg); }
.cr-hero::before { content:"🐾"; position:absolute; pointer-events:none; z-index:0; font-size:300px; opacity:.05; top:-20px; left:-20px; transform:rotate(-20deg); }

/* =============================================
   UTILITIES
============================================= */
@keyframes shake { 0%,100%{transform:translateX(0);} 20%{transform:translateX(-8px);} 40%{transform:translateX(8px);} 60%{transform:translateX(-5px);} 80%{transform:translateX(5px);} }
@keyframes bob   { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-12px);} }