*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg-base:     #0D0F2B;
      --bg-dark:     #080A1A;
      --bg-s1:       #161830;
      --bg-s2:       #13102A;
      --card-bg:     rgba(255,255,255,0.06);
      --card-border: rgba(255,255,255,0.12);
      --lavender:    #C9B8F0;
      --pink:        #FF8FAB;
      --gold:        #FFD166;
      --text:        #FFFFFF;
      --text-sub:    rgba(255,255,255,0.6);
      --radius-card: 20px;
      --radius-pill: 999px;
      --shadow-glow: 0 8px 32px rgba(201,184,240,0.15);
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: "Noto Sans JP", sans-serif;
      color: var(--text);
      background: var(--bg-base);
      overflow-x: hidden;
      padding-top: 0;
    }

    /* ===== ANIMATIONS ===== */
    @keyframes fadeInUp {
      from { opacity:0; transform:translateY(20px); }
      to   { opacity:1; transform:translateY(0); }
    }
    @keyframes float {
      0%,100% { transform:translateY(0); }
      50%      { transform:translateY(-7px); }
    }
    @keyframes shimmer {
      0%   { background-position:-200% center; }
      100% { background-position:200% center; }
    }
    @keyframes twinkle {
      0%,100% { opacity:1; }
      50%      { opacity:0.1; }
    }
    @keyframes sparkle {
      0%,100% { opacity:1; transform:scale(1) rotate(0deg); }
      50%      { opacity:0.5; transform:scale(1.2) rotate(20deg); }
    }

    /* ===== SCROLL REVEAL ===== */
    .reveal { opacity:1; transform:translateY(0); transition:opacity .6s ease, transform .6s ease; }
    .reveal.hidden { opacity:0; transform:translateY(22px); }
    .reveal-d1 { transition-delay:.1s; }
    .reveal-d2 { transition-delay:.2s; }
    .reveal-d3 { transition-delay:.3s; }
    .reveal-d4 { transition-delay:.4s; }
    .reveal-d5 { transition-delay:.5s; }

    /* ===== NAV ===== */
    .site-nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      height: 64px;
      background: rgba(0,0,0,0);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 40px;
      z-index: 1000;
      transition: background .35s;
    }
    .site-nav-logo-img {
      width: 120px;
      filter: brightness(0) invert(1);
      display: block;
    }
    .site-nav-links { display: flex; gap: 1.6rem; align-items: center; }
    .site-nav-link {
      font-family: "Raleway", sans-serif;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: .2em;
      color: rgba(255,255,255,0.8);
      background: none;
      border: none;
      cursor: pointer;
      transition: color .2s;
      padding: 0;
    }
    .site-nav-link:hover { color: #fff; }
    .site-nav-cta {
      font-family: "Raleway", sans-serif;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .15em;
      color: #fff;
      background: linear-gradient(135deg, #C9B8F0, #FF8FAB);
      border: none;
      border-radius: 20px;
      padding: 8px 20px;
      cursor: pointer;
      white-space: nowrap;
      transition: opacity .2s;
    }
    .site-nav-cta:hover { opacity: .85; }

        /* ===== STARS LAYER ===== */
    #stars-layer {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      overflow: hidden;
    }

    /* ===== SECTIONS ===== */
    section {
      padding: 5.5rem max(1.25rem, calc((100% - 430px) / 2));
      position: relative;
      z-index: 1;
    }
    .section-label {
      display: block;
      text-align: center;
      font-family: "Raleway", sans-serif;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .3em;
      color: var(--lavender);
      margin-bottom: 8px;
    }
    .section-title {
      font-family: "Zen Maru Gothic", sans-serif;
      font-size: 2rem;
      font-weight: 700;
      text-align: center;
      color: var(--text);
      margin-bottom: .5rem;
      line-height: 1.3;
    }
    .section-subtitle {
      text-align: center;
      font-size: .82rem;
      color: var(--text-sub);
      margin-bottom: 2.75rem;
    }
    .deco { color: var(--lavender); font-size:.75em; vertical-align:middle; margin:0 .3rem; }

    /* ===== WAVE DIVIDERS ===== */
    .wave-wrap { line-height:0; overflow:hidden; position:relative; z-index:1; }
    .wave-wrap svg { display:block; width:100%; }

    /* ===== HERO ===== */
    #hero {
      height: 100vh;
      min-height: 600px;
            background-image: url(../images/hero-top-view.png);
      background-size: cover;
      background-position: center top;
      background-repeat: no-repeat;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      overflow: hidden;
      padding: 0 max(1.25rem, calc((100% - 430px) / 2));
      z-index: 1;
      padding-bottom: 100px;
    }
    #hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.3) 0%,
        rgba(0,0,0,0.2) 50%,
        rgba(10,8,30,0.85) 100%
      );
      pointer-events: none;
      z-index: 0;
    }
    #hero > *:not(.hero-left-copy):not(.hero-vertical-text) { position: relative; z-index: 1; }

    .hero-left-copy {
      display: none;
      position: absolute !important;
      left: 48px;
      top: 96px;
      text-align: left;
      z-index: 2;
    }
    .hero-en-copy {
      font-family: "Cormorant Garamond", serif;
      font-style: italic;
      color: rgba(255,255,255,0.6);
      font-size: 0.9rem;
      letter-spacing: .05em;
      line-height: 1.9;
      margin: 0 0 .4rem;
    }
    .hero-story {
      font-family: "Zen Maru Gothic", sans-serif;
      color: #fff;
      font-size: 1.1rem;
      margin: 0;
    }
    .hero-vertical-text {
      display: none;
      position: absolute !important;
      right: 24px;
      top: 50%;
      transform: translateY(-50%);
      writing-mode: vertical-rl;
      color: rgba(255,255,255,0.2);
      font-family: "Raleway", sans-serif;
      font-size: 11px;
      letter-spacing: 0.3em;
      z-index: 2;
    }
    .hero-logo {
      width: 100%;
      max-width: 320px;
      display: block;
      margin: 0 auto 8px !important;
      filter: brightness(0) invert(1);
      animation: fadeInUp .5s ease .1s both;
    }
    .hero-catchcopy {
      font-family: "Zen Maru Gothic", sans-serif;
      font-size: 1rem;
      font-weight: 700;
      color: var(--text);
      margin-top: 0 !important;
      margin-bottom: 6px;
      animation: fadeInUp .5s ease .2s both;
    }
    .hero-subcopy {
      font-size: .78rem;
      color: var(--text-sub);
      line-height: 1.8;
      margin-bottom: 1.5rem;
      animation: fadeInUp .5s ease .3s both;
    }
    .hero-icons {
      display: flex;
      justify-content: center;
      gap: .75rem;
      margin-bottom: 2.2rem;
      animation: fadeInUp .5s ease .4s both;
    }
    .hero-icon-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: .35rem;
      cursor: pointer;
    }
    .hero-icon-pos { position: relative; }
    .hero-icon {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid transparent;
      animation: float 3.2s ease-in-out infinite;
      transition: transform .25s, box-shadow .25s;
    }
    .hero-icon-wrap:nth-child(2) .hero-icon { animation-delay:.4s; }
    .hero-icon-wrap:nth-child(3) .hero-icon { animation-delay:.8s; }
    .hero-icon-wrap:nth-child(4) .hero-icon { animation-delay:1.2s; }
    .hero-icon-wrap:nth-child(5) .hero-icon { animation-delay:1.6s; }
    .hero-icon-wrap:hover .hero-icon { transform:scale(1.1); }
    .hero-icon-wrap:nth-child(1) .hero-icon { border-color:#FF8FAB; box-shadow:0 0 8px rgba(255,143,171,.3); }
    .hero-icon-wrap:nth-child(2) .hero-icon { border-color:#7EC8E3; box-shadow:0 0 8px rgba(126,200,227,.3); }
    .hero-icon-wrap:nth-child(3) .hero-icon { border-color:#A78BFA; box-shadow:0 0 8px rgba(167,139,250,.3); }
    .hero-icon-wrap:nth-child(4) .hero-icon { border-color:#FFD166; box-shadow:0 0 8px rgba(255,209,102,.3); }
    .hero-icon-wrap:nth-child(5) .hero-icon { border-color:#FF6B6B; box-shadow:0 0 8px rgba(255,107,107,.3); }
    .hero-icon-name {
      font-family: "Zen Maru Gothic", sans-serif;
      font-size: .7rem;
      color: var(--text-sub);
      font-weight: 500;
      white-space: nowrap;
    }
    .hero-buttons {
      display: flex;
      flex-direction: column;
      gap: .8rem;
      animation: fadeInUp .5s ease .5s both;
    }
    .btn-primary, .btn-secondary {
      display: block;
      width: 100%;
      padding: .95rem 1.5rem;
      border-radius: var(--radius-pill);
      font-family: "Raleway", sans-serif;
      font-size: .8rem;
      font-weight: 700;
      letter-spacing: .12em;
      cursor: pointer;
      border: none;
      transition: opacity .2s, transform .2s;
    }
    .btn-primary:hover, .btn-secondary:hover { opacity:.85; transform:translateY(-2px); }
    .btn-primary {
      background: linear-gradient(135deg, var(--lavender), var(--pink));
      color: #fff;
    }
    .btn-secondary {
      background: transparent;
      color: var(--text);
      border: 1.5px solid rgba(255,255,255,.4);
    }
    #about { background: #0A0818; padding: 0; }
    .about-upper {
      position: relative;
      padding: 80px 60px;
      overflow: hidden;
      min-height: 520px;
    }
    .about-upper-bg {
      position: absolute;
      right: 0; top: 0;
      width: 50%; height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
    }
    .about-upper-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to right, #0A0818 40%, transparent 100%);
      pointer-events: none;
    }
    .about-upper-text {
      position: relative;
      z-index: 1;
      max-width: 540px;
    }
    .about-label {
      font-family: "Raleway", sans-serif;
      font-size: 12px;
      letter-spacing: 0.3em;
      color: #C9B8F0;
      text-transform: uppercase;
      display: block;
      margin-bottom: 24px;
    }
    .about-main-heading {
      font-family: "Noto Sans JP", sans-serif;
      font-size: 3.5rem;
      font-weight: 900;
      color: #fff;
      line-height: 1.35;
      margin: 0 0 20px;
    }
    .about-sub-heading {
      font-size: 1.2rem;
      color: #fff;
      margin: 0 0 20px;
    }
    .about-body-text {
      font-size: 0.9rem;
      color: rgba(255,255,255,0.6);
      line-height: 2;
      margin: 0;
    }
    .about-separator {
      margin: 40px 0;
      padding: 24px 0;
      border-top: 1px solid rgba(255,255,255,0.2);
      border-bottom: 1px solid rgba(255,255,255,0.2);
      font-size: 1.1rem;
      color: #fff;
      text-align: center;
    }
    .about-cards-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 24px;
      padding: 0 40px 0;
    }
    .about-card-new {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(180,140,255,0.2);
      border-radius: 16px;
      overflow: hidden;
    }
    .about-card-img {
      width: 100%;
      height: 280px;
      object-fit: cover;
      display: block;
    }
    .about-card-body {
      padding: 24px;
    }
    .about-card-num-row {
      display: flex;
      align-items: baseline;
    }
    .about-card-num {
      font-family: "Raleway", sans-serif;
      font-size: 2rem;
      font-weight: 900;
      color: rgba(180,140,255,0.4);
      line-height: 1;
    }
    .about-card-num-label {
      font-family: "Raleway", sans-serif;
      font-size: 11px;
      letter-spacing: 0.3em;
      color: #C9B8F0;
      margin-left: 12px;
      align-self: center;
    }
    .about-card-title {
      font-family: "Noto Sans JP", sans-serif;
      font-size: 1.6rem;
      font-weight: 900;
      color: #fff;
      margin: 8px 0 16px;
    }
    .about-card-desc {
      font-size: 0.85rem;
      color: rgba(255,255,255,0.6);
      line-height: 1.8;
      margin: 0;
    }
    .about-card-tags {
      font-size: 0.8rem;
      color: rgba(255,255,255,0.4);
      margin-top: 16px;
    }
    .about-closing {
      text-align: center;
      padding: 32px 40px 60px;
      background: linear-gradient(to bottom, transparent, rgba(5,3,20,0.8));
    }
    .about-closing-main {
      font-size: 1.1rem;
      color: #fff;
      line-height: 2;
      margin: 0;
    }
    .about-closing-sub {
      font-size: 1rem;
      color: rgba(255,255,255,0.6);
      margin-top: 16px;
    }
    @media (min-width: 768px) {
      .about-cards-grid { grid-template-columns: repeat(3, 1fr); }
    }
    @media (max-width: 767px) {
      .about-upper { padding: 60px 24px; }
      .about-upper-bg { display: none; }
      .about-main-heading { font-size: 2.4rem; }
      .about-cards-grid { padding: 0 20px 60px; }
      .about-closing { padding: 40px 24px 60px; }
    }
    /* ═══════════════════════════════════════════
   CHARACTERS
═══════════════════════════════════════════ */
#characters {
  position: relative;
  background: #0A0818;
  padding: 0 !important;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
.char-wrap {
  display: grid;
  grid-template-columns: 80px 280px 1fr 38%;
  grid-template-rows: 1fr;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0 !important;
}
.cp-nav-col {
  grid-column: 1;
  grid-row: 1;
  padding: 100px 0 40px 24px;
  z-index: 2;
  position: relative;
}
.cp-left {
  grid-column: 2;
  grid-row: 1;
  padding: 100px 32px 40px;
  z-index: 2;
  position: relative;
}
.cp-center {
  grid-column: 3;
  grid-row: 1;
  padding: 100px 32px 40px;
  z-index: 2;
  position: relative;
  overflow-y: visible;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
.cp-right {
  grid-column: 4;
  grid-row: 1;
  position: relative;
  overflow: hidden;
}
.cp-right::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 50%; height: 100%;
  background: linear-gradient(to right, #0A0818, transparent);
  z-index: 1;
  pointer-events: none;
}
.cp-img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
}
.cp-watermark {
  position: absolute;
  bottom: 0; left: 0;
  font-size: 12vw;
  font-family: 'Raleway', sans-serif;
  font-weight: 900;
  color: rgba(255,255,255,0.03);
  white-space: nowrap;
  z-index: 0;
  pointer-events: none;
  line-height: 1;
}
.cp-section-label {
  font-family: 'Raleway', sans-serif;
  font-size: 11px;
  letter-spacing: 0.3em;
  color: #C9B8F0;
  margin-bottom: 12px;
}
.cp-section-title {
  font-size: 1.6rem;
  font-weight: 900;
  color: white;
  margin-bottom: 8px;
  white-space: nowrap;
}
.cp-section-sub {
  font-size: 12px;
  color: #C9B8F0;
  font-style: italic;
  margin-bottom: 28px;
}
.cp-nav {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-left: 1px solid rgba(255,255,255,0.15);
}
.cp-nav-item {
  font-family: 'Raleway', sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,0.3);
  cursor: pointer;
  padding: 6px 0 6px 16px;
  border-left: 2px solid transparent;
  margin-left: -1px;
  transition: color 0.2s, border-color 0.2s;
}
.cp-nav-item:hover { color: rgba(255,255,255,0.7); }
.cp-num {
  font-family: 'Raleway', sans-serif;
  font-size: 4rem;
  font-weight: 900;
  color: rgba(255,255,255,0.1);
  line-height: 1;
  margin-bottom: 4px;
}
.cp-en-name {
  font-family: 'Raleway', sans-serif;
  font-size: 10px;
  letter-spacing: 0.25em;
  color: #C9B8F0;
  margin-bottom: 4px;
}
.cp-jp-name {
  font-size: 2.2rem;
  font-weight: 900;
  color: white;
  white-space: nowrap;
  margin-bottom: 2px;
}
.cp-script-name {
  font-family: 'Dancing Script', cursive;
  font-size: 1.2rem;
  margin-bottom: 8px;
}
.cp-cv {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  margin-bottom: 12px;
}
.cp-serif {
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  line-height: 1.9;
  margin-bottom: 8px;
  white-space: pre-line;
}
.cp-quote {
  font-size: 12px;
  line-height: 1.6;
  margin-bottom: 20px;
  white-space: pre-line;
}
.cp-btns {
  display: flex;
  gap: 12px;
}
.cp-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3);
  background: transparent;
  color: white;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.2s;
}
.cp-btn:hover {
  border-color: #C9B8F0;
  color: #C9B8F0;
}
.cp-profile-label,
.cp-intro-label {
  font-family: 'Raleway', sans-serif;
  font-size: 10px;
  letter-spacing: 0.3em;
  color: #C9B8F0;
  margin: 0 0 12px;
  display: block;
}
.cp-intro-label { margin-top: 28px; }
.cp-profile-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.cp-profile-table td {
  padding: 5px 8px;
  vertical-align: top;
}
.cp-profile-table td:first-child {
  color: rgba(255,255,255,0.4);
  white-space: nowrap;
  width: 80px;
}
.cp-profile-table td:last-child { color: white; white-space: normal; }
.cp-intro {
  font-size: 13px;
  color: rgba(255,255,255,0.8);
  line-height: 2;
  white-space: pre-line;
  word-break: keep-all;
}
@media (max-width: 768px) {
  .char-wrap {
    display: flex;
    flex-direction: column;
  }
  .cp-nav-col { display: none; }
  .cp-right {
    height: 280px;
    order: -1;
    flex-shrink: 0;
  }
  .cp-right::before { display: none; }
  .cp-left, .cp-center { padding: 24px 20px; }
}

#diagnosis {
      background-image: url(../images/diagnosis-background.png);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      position: relative;
      min-height: 100vh;
      padding: 80px 60px;
    }
    #diagnosis::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to right,
        rgba(5,3,20,0.85) 0%,
        rgba(5,3,20,0.6) 50%,
        rgba(5,3,20,0.2) 100%
      );
      pointer-events: none;
      z-index: 0;
    }
    #diagnosis > * { position: relative; z-index: 1; }
    .diag-layout {
      display: grid;
      grid-template-columns: 60% 40%;
      gap: 40px;
      align-items: start;
    }
    .diag-label-deco {
      font-family: "Raleway", sans-serif;
      font-size: 12px;
      color: #C9B8F0;
      letter-spacing: 0.3em;
      margin-bottom: 16px;
      display: block;
    }
    .diag-main-title {
      font-family: "Zen Maru Gothic", sans-serif;
      font-size: 5rem;
      font-weight: 900;
      color: #fff;
      line-height: 1.1;
      margin-bottom: 16px;
    }
    .diag-main-subcopy {
      font-size: 1.3rem;
      color: #fff;
      line-height: 1.6;
      margin-bottom: 12px;
    }
    .signal-word { letter-spacing: 0.2em; }
    .diag-main-desc {
      font-size: 0.9rem;
      color: rgba(255,255,255,0.6);
      line-height: 1.8;
    }
    .diagnosis-card {
      background: rgba(20,10,50,0.7);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border: 1px solid rgba(180,140,255,0.3);
      border-radius: 12px;
      padding: 32px;
      margin-top: 40px;
    }
    .diag-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; }
    .diag-step { font-family:"Raleway",sans-serif; font-size:1.8rem; font-weight:700; color:#C9B8F0; line-height:1; }
    .diag-hint { font-size:.75rem; color:rgba(255,255,255,0.5); }
    .diag-progress-wrap { height:2px; background:rgba(255,255,255,0.1); border-radius:var(--radius-pill); margin-bottom:24px; overflow:hidden; }
    .diag-progress-bar { height:100%; background:linear-gradient(to right,#C9B8F0,#FF8FAB); border-radius:var(--radius-pill); transition:width .45s cubic-bezier(.4,0,.2,1); }
    .diag-question { font-family:"Noto Sans JP",sans-serif; font-size:1.2rem; font-weight:500; color:#fff; margin-bottom:1.5rem; line-height:1.7; margin-top:8px; }
    .diag-choices { display:flex; flex-direction:column; gap:.6rem; }
    .diag-btn {
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(180,140,255,0.4);
      border-radius: 8px;
      padding: 14px 20px;
      color: #fff;
      font-family: "Noto Sans JP", sans-serif;
      font-size: 0.95rem;
      text-align: left;
      cursor: pointer;
      width: 100%;
      transition: background .2s, border-color .2s;
    }
    .diag-btn:hover { background:rgba(180,140,255,0.15); border-color:#C9B8F0; }
    .diag-deco-line {
      text-align: center;
      color: rgba(180,140,255,0.4);
      font-size: 12px;
      margin-top: 24px;
      letter-spacing: 0.2em;
    }
    .result-card { display:none; background:var(--card-bg); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid var(--card-border); border-radius:var(--radius-card); overflow:hidden; animation:fadeInUp .5s ease both; }
    .result-card.active { display:block; }
    .result-top { background:linear-gradient(135deg,rgba(201,184,240,.15),rgba(255,143,171,.1)); padding:.75rem; text-align:center; }
    .result-img { width:100%; aspect-ratio:1; object-fit:cover; object-position:top; border-radius:var(--radius-card) var(--radius-card) 0 0; }
    .result-body { padding:1.25rem; }
    .result-label { display:block; font-family:"Raleway",sans-serif; font-size:.58rem; font-weight:700; letter-spacing:.25em; color:var(--lavender); margin-bottom:.5rem; }
    .result-name { font-family:"Zen Maru Gothic",sans-serif; font-size:1.5rem; font-weight:700; margin-bottom:.1rem; }
    .result-ruby { font-size:.65rem; color:var(--text-sub); display:block; margin-bottom:.75rem; }
    .result-catchcopy { font-size:.78rem; color:var(--text-sub); border-left:3px solid; padding-left:.75rem; margin-bottom:.75rem; font-style:italic; }
    .result-desc { font-size:.8rem; line-height:1.8; color:var(--text-sub); margin-bottom:1.25rem; }
    .btn-retry { background:linear-gradient(135deg,var(--lavender),var(--pink)); color:#fff; border:none; border-radius:var(--radius-pill); padding:.7rem 1.75rem; font-family:"Raleway",sans-serif; font-size:.72rem; font-weight:700; letter-spacing:.12em; cursor:pointer; transition:opacity .2s; }
    .btn-retry:hover { opacity:.85; }
    footer { background:var(--bg-dark); text-align:center; padding:2.5rem max(1.25rem,calc((100% - 430px)/2)); position:relative; z-index:1; }
    .footer-title { display:block; font-family:"Raleway",sans-serif; font-size:.72rem; font-weight:700; letter-spacing:.3em; color:var(--lavender); margin-bottom:.75rem; }
    footer p { font-size:.72rem; color:var(--text-sub); line-height:2; }
    .footer-credit { margin-top:.25rem; }
    .footer-link { color:rgba(255,255,255,.5); text-decoration:none; }
    .footer-link:hover { color:rgba(255,255,255,.7); }
    .sparkle { position:absolute; pointer-events:none; animation:sparkle 2.5s ease-in-out infinite; }

      .diag-layout { grid-template-columns: 1fr; }
      .diag-right { display: none; }
      .diag-main-title { font-size: 3rem; }
      #diagnosis { padding: 48px 24px; }
    }

    @media (max-width:480px) {
      .diag-layout { grid-template-columns: 1fr; }
      .diag-right { display: none; }
      .diag-main-title { font-size: 3rem; }
      #diagnosis { padding: 48px 24px; }
    }
    @media (min-width:481px) {
      #hero { padding-left:max(2rem,calc((100% - 600px)/2)); padding-right:max(2rem,calc((100% - 600px)/2)); }
      .hero-logo { max-width:400px; }
      .hero-icon { width:72px; height:72px; }
      .hero-icon-name { font-size:.72rem; }
      .hero-icons { gap:1rem; }
      .hero-buttons { flex-direction:row; justify-content:center; gap:1rem; }
      .btn-primary, .btn-secondary { width:auto; padding:1rem 2.2rem; }
      section { padding:6rem max(2rem,calc((100% - 600px)/2)); }
      #diagnosis { padding:60px 40px; }
      .section-title { font-size:1.65rem; }
      .about-cards { display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
      .about-card:first-child { grid-column:1/-1; flex-direction:row; text-align:left; }
      .char-cards { grid-template-columns:repeat(2,1fr); gap:20px; }
      .char-card:last-child { grid-column:1/-1; justify-self:center; width:50%; }
      .result-card.active { display:grid; grid-template-columns:1fr 1fr; }
      .result-top { padding:1rem; align-self:stretch; }
      .result-img { aspect-ratio:unset; height:100%; }
      .result-body { padding:1.75rem; }
      footer { padding-top:3rem; padding-bottom:3rem; padding-left:max(2rem,calc((100% - 600px)/2)); padding-right:max(2rem,calc((100% - 600px)/2)); }
    }
    @media (min-width:769px) {
      #hero { padding-left:max(3rem,calc((100% - 900px)/2)); padding-right:max(3rem,calc((100% - 900px)/2)); }
      .hero-logo { max-width:480px; }
      .hero-left-copy { display: block; }
      .hero-vertical-text { display: block; }
      .hero-icon { width:88px; height:88px; }
      .hero-icon-name { font-size:.78rem; }
      .hero-icons { gap:1.5rem; }
      .btn-primary, .btn-secondary { padding:1.1rem 2.6rem; font-size:.95rem; }
      section { padding:7rem max(3rem,calc((100% - 800px)/2)); }
      .section-title { font-size:2.4rem; }
      .section-subtitle { font-size:.85rem; }
      .about-cards { grid-template-columns:repeat(3,1fr); }
      .about-card:first-child { grid-column:auto; flex-direction:column; text-align:center; }
      .char-cards { grid-template-columns:repeat(2,1fr); gap:20px; }
      .char-card:last-child { grid-column:1/-1; justify-self:center; width:50%; }
      .diag-choices { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
      .diag-question { font-size:1.05rem; }
      footer { padding-top:3.5rem; padding-bottom:3.5rem; padding-left:max(3rem,calc((100% - 800px)/2)); padding-right:max(3rem,calc((100% - 800px)/2)); }
    }