/* ============================================
       Kirei Labs x Nuve Style Design Mock
       ============================================ */

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

    :root {
      /* Brand: KireiLabs warm beige + gold palette */
      --gold: #c4a97d;
      --gold-deep: #a88a5e;
      --gold-soft: #d8c19a;
      --beige: #d4c4b0;
      --cream: #f7f1ea;
      --soft: #faf8f5;
      --peach: #f5ede3;
      --warm-white: #fdfcfa;
      --category-bg: #f5f2ed;
      --category-bg-deep: #ece6df;

      /* Backwards-compat aliases (used widely below) */
      --lavender: var(--cream);
      --lavender-light: var(--soft);
      --lavender-dark: var(--gold);

      --black: #3a3230;
      --white: #FFFFFF;
      --gray-bg: var(--warm-white);
      --gray-text: #6b5e55;
      --gray-light: #9a8e85;
      --card-bg: #FFFFFF;

      /* Accent colors retuned to warm tones */
      --accent-pink: #d8a591;     /* dusty peach */
      --accent-mint: #a8b89a;     /* warm olive */
      --accent-peach: #e6c9a8;    /* peach */
      --accent-blue: #b8a890;     /* taupe */
      --accent-yellow: #d8c19a;   /* light gold */
    }

    body {
      font-family: 'Noto Serif JP', 'Shippori Mincho', serif;
      font-weight: 300;
      color: var(--black);
      background: var(--warm-white);
      overflow-x: hidden;
      line-height: 2.0;
      letter-spacing: 0.05em;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    /* ---- NAV ---- */
    .nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18px 48px;
      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(20px);
      border-bottom: 1px solid rgba(0,0,0,0.04);
    }

    .nav-logo {
      font-family: 'Italiana', serif;
      font-size: 26px;
      font-weight: 400;
      font-style: normal;
      color: var(--black);
      text-decoration: none;
      letter-spacing: 0.08em;
      text-transform: none;
    }

    .nav-links {
      display: flex;
      gap: 36px;
      list-style: none;
    }

    .nav-links a {
      position: relative;
      font-family: 'Noto Sans JP', sans-serif;
      font-size: 12px;
      font-weight: 300;
      color: var(--gray-text);
      text-decoration: none;
      letter-spacing: 0.2em;
      transition: color 0.3s;
      padding-bottom: 4px;
    }

    .nav-links a::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 1px;
      background: var(--gold);
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform 0.35s ease-out;
    }

    .nav-links a:hover {
      color: var(--black);
    }

    .nav-links a:hover::after {
      transform: scaleX(1);
    }

    .nav-right {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .nav-contact {
      font-family: 'Noto Sans JP', sans-serif;
      font-size: 12px;
      font-weight: 300;
      letter-spacing: 0.2em;
      color: var(--gray-text);
      text-decoration: none;
      transition: color 0.3s;
    }

    .nav-contact:hover {
      color: var(--black);
    }

    .nav-cta {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 22px;
      background: var(--black);
      color: var(--white);
      font-family: 'Noto Sans JP', sans-serif;
      font-size: 12px;
      font-weight: 300;
      letter-spacing: 0.25em;
      border-radius: 30px;
      text-decoration: none;
      transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease;
    }

    .nav-cta svg {
      width: 14px;
      height: 14px;
      transition: transform 0.3s ease;
    }

    .nav-cta:hover {
      background: var(--gold);
      color: var(--white);
      transform: translateY(-1px);
    }

    .nav-cta:hover svg {
      transform: translateX(4px);
    }

    /* ---- HERO SECTION ---- */
    .hero {
      position: relative;
      min-height: 100vh;
      padding: 140px 48px 80px;
      background: var(--warm-white);
      overflow: hidden;
    }

    .hero-inner {
      max-width: 1400px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: center;
    }

    /* Trust badge */
    .trust-badge {
      position: absolute;
      top: 120px;
      left: 48px;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 8px 20px 8px 8px;
      background: var(--cream);
      border-radius: 30px;
      font-family: 'Noto Sans JP', sans-serif;
      font-size: 11px;
      font-weight: 300;
      letter-spacing: 0.18em;
      color: var(--gray-text);
      box-shadow: 0 2px 8px rgba(196, 169, 125, 0.08);
      animation: fadeInDown 0.8s ease-out;
    }

    .trust-badge .trust-num {
      font-family: 'Bodoni Moda', serif;
      font-size: 15px;
      font-weight: 300;
      color: var(--black);
      letter-spacing: 0;
      margin-right: 4px;
    }

    .trust-avatars {
      display: flex;
    }

    .trust-avatars span {
      display: inline-block;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      border: 2px solid var(--white);
      margin-left: -8px;
      background-size: cover;
      background-position: center;
      box-shadow: 0 1px 3px rgba(58, 50, 48, 0.12);
    }

    .trust-avatars span:first-child {
      margin-left: 0;
    }

    .trust-avatars span:nth-child(1) { background-color: var(--gold); }
    .trust-avatars span:nth-child(2) { background-color: var(--beige); }
    .trust-avatars span:nth-child(3) { background-color: var(--accent-peach); }
    .trust-avatars span:nth-child(4) { background-color: var(--accent-pink); }

    .hero-left {
      padding-right: 20px;
      padding-top: 140px;
    }

    .hero-headline {
      font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
      font-size: 46px;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: -0.02em;
      margin-bottom: 28px;
      color: #3a3230;
      animation: fadeInUp 0.8s ease-out;
    }

    .hero-headline .accent {
      font-family: 'Shippori Mincho', serif;
      font-style: normal;
      font-weight: 400;
      color: var(--gold-deep);
    }

    .hero-headline .eyebrow {
      /* Brand mark above the headline. Sits below the trust badge with
         enough vertical clearance — see .hero-left padding-top. */
      display: block;
      font-family: 'Cormorant Garamond', Georgia, serif;
      font-style: italic;
      font-weight: 400;
      font-size: 22px;
      line-height: 1.2;
      letter-spacing: 0.05em;
      color: #c4a97d;
      margin-top: 0;
      margin-bottom: 24px;
      text-transform: none;
    }

    .hero-sub {
      font-family: 'Noto Serif JP', serif;
      font-size: 15px;
      font-weight: 300;
      line-height: 2.0;
      letter-spacing: 0.05em;
      color: var(--gray-text);
      margin-bottom: 44px;
      max-width: 420px;
      animation: fadeInUp 0.8s ease-out 0.2s both;
    }

    .hero-cta {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 16px 40px;
      background: var(--black);
      color: var(--white);
      font-family: 'Noto Sans JP', sans-serif;
      font-size: 13px;
      font-weight: 300;
      letter-spacing: 0.3em;
      border-radius: 40px;
      text-decoration: none;
      transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
      animation: fadeInUp 0.8s ease-out 0.4s both;
    }

    .hero-cta:hover {
      background: var(--gold);
      color: var(--white);
      transform: translateY(-2px);
      box-shadow: 0 10px 30px rgba(196, 169, 125, 0.32);
    }

    .hero-cta svg {
      width: 16px;
      height: 16px;
      transition: transform 0.3s ease;
    }

    .hero-cta:hover svg {
      transform: translateX(4px);
    }

    .hero-stats {
      position: relative;
      display: flex;
      gap: 0;
      margin-top: 56px;
      padding-bottom: 24px;
      animation: fadeInUp 0.8s ease-out 0.6s both;
    }

    /* Section divider rule below the stats row */
    .hero-stats::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 0.5px;
      background: linear-gradient(90deg,
        rgba(196, 169, 125, 0) 0%,
        rgba(196, 169, 125, 0.55) 18%,
        rgba(196, 169, 125, 0.55) 82%,
        rgba(196, 169, 125, 0) 100%);
    }

    .hero-stat {
      position: relative;
      flex: 1;
      text-align: left;
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 0 28px;
      border-right: 1px solid var(--category-bg-deep);
    }

    .hero-stat:first-child {
      padding-left: 0;
    }

    .hero-stat:last-child {
      border-right: none;
      padding-right: 0;
    }

    /* gold underline that draws in after count-up completes */
    .hero-stat::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: -16px;
      width: 40px;
      height: 0.8px;
      background: var(--gold);
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform 0.15s ease-out;
    }

    .hero-stat:first-child::after { left: 0; }
    .hero-stat:not(:first-child)::after { left: 28px; }

    .hero-stat.counted::after {
      transform: scaleX(1);
    }

    /* Micro gold horizontal line above the number — beauty editorial micro-detail */
    .hero-stat-rule {
      width: 18px;
      height: 0.5px;
      background: var(--gold);
      margin-bottom: 14px;
      transform: scaleY(0.5);
      transform-origin: top left;
    }

    /* VibeUI Animated Counter Row — gold + cream circle icon above each number */
    .hero-stat-icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(196, 169, 125, 0.08);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: none;
    }

    .hero-stat-icon svg {
      width: 20px;
      height: 20px;
      stroke: var(--gold);
      stroke-width: 1px;
    }

    /* Beauty-editorial: Bodoni Moda Light 300, baseline-aligned gold suffix */
    .hero-stat-number {
      font-family: 'Bodoni Moda', serif;
      font-size: 64px;
      font-weight: 300;
      font-style: normal;
      color: #3a3230;
      line-height: 1;
      letter-spacing: -0.04em;
      display: inline-flex;
      align-items: baseline;
    }

    .hero-stat-number .count-value {
      color: #3a3230;
      font-style: normal;
    }

    .hero-stat-number .stat-suffix {
      font-family: 'Bodoni Moda', serif;
      font-size: 0.32em;
      font-weight: 300;
      color: #c4a97d;
      letter-spacing: 0;
      margin-left: 4px;
      vertical-align: baseline;
      line-height: 1;
    }

    .hero-stat-label {
      font-family: 'Noto Sans JP', sans-serif;
      font-size: 11px;
      font-weight: 300;
      color: #9a8e85;
      margin-top: 8px;
      max-width: 140px;
      line-height: 1.6;
      letter-spacing: 0.2em;
      text-transform: none;
    }

    /* Hero right - Face scan visual */
    .hero-right {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .face-container {
      position: relative;
      width: 480px;
      height: 580px;
      border-radius: 24px;
      overflow: hidden;
      box-shadow: 0 20px 60px rgba(0,0,0,0.08);
    }

    .face-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* AI scan bounding boxes — VibeUI refined: staggered pulse, monospace label */
    .scan-box {
      position: absolute;
      border: 1.5px solid rgba(255,255,255,0.85);
      border-radius: 4px;
      animation: scanPulse 2.4s ease-in-out infinite;
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.15),
        0 0 24px rgba(196, 169, 125, 0.25);
    }

    /* Corner brackets for tech-accurate Nuve look */
    .scan-box::before,
    .scan-box::after {
      content: '';
      position: absolute;
      width: 10px;
      height: 10px;
      border: 2px solid rgba(255,255,255,0.95);
    }
    .scan-box::before {
      top: -2px; left: -2px;
      border-right: none;
      border-bottom: none;
    }
    .scan-box::after {
      bottom: -2px; right: -2px;
      border-left: none;
      border-top: none;
    }

    .scan-label {
      position: absolute;
      background: rgba(255,255,255,0.85);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      padding: 4px 10px;
      border-radius: 2px;
      font-family: 'Noto Sans JP', sans-serif;
      font-size: 10px;
      font-weight: 300;
      letter-spacing: 0.18em;
      color: var(--black);
      white-space: nowrap;
      box-shadow:
        0 0 0 1px rgba(255,255,255,0.5),
        0 2px 10px rgba(58, 50, 48, 0.10);
    }

    .scan-label .scan-num {
      font-family: 'Bodoni Moda', serif;
      color: var(--gold);
      font-weight: 300;
      letter-spacing: 0;
    }

    .scan-box-1 {
      top: 15%;
      left: 20%;
      width: 60%;
      height: 18%;
    }

    .scan-box-1 .scan-label {
      top: -14px;
      right: -10px;
    }

    .scan-box-2 {
      top: 38%;
      left: 25%;
      width: 50%;
      height: 12%;
      animation-delay: 0.5s;
    }

    .scan-box-2 .scan-label {
      bottom: -14px;
      left: -10px;
    }

    .scan-box-3 {
      top: 55%;
      left: 15%;
      width: 35%;
      height: 15%;
      animation-delay: 1s;
    }

    .scan-box-3 .scan-label {
      top: 50%;
      right: -100px;
      transform: translateY(-50%);
    }

    .scan-box-4 {
      top: 58%;
      right: 15%;
      width: 30%;
      height: 12%;
      animation-delay: 1.5s;
    }

    .scan-box-4 .scan-label {
      top: -14px;
      left: -10px;
    }

    .scan-box-5 {
      top: 75%;
      left: 28%;
      width: 44%;
      height: 10%;
      animation-delay: 2s;
    }

    .scan-box-5 .scan-label {
      bottom: -14px;
      right: 0;
    }

    /* Scan line animation — VibeUI refined: thicker, gold gradient with glow */
    .scan-line {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(245, 237, 227, 0.4) 20%,
        rgba(196, 169, 125, 0.95) 50%,
        rgba(245, 237, 227, 0.4) 80%,
        transparent 100%
      );
      box-shadow:
        0 0 12px rgba(196, 169, 125, 0.6),
        0 0 32px rgba(196, 169, 125, 0.3);
      animation: scanDown 3.2s ease-in-out infinite;
    }

    /* ---- AI SKINCARE SECTION ---- */
    .ai-section {
      padding: 0;
      margin: 40px 48px;
    }

    .ai-card {
      max-width: 1400px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      background: var(--white);
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 1px 2px rgba(58,50,48,0.04), 0 8px 24px rgba(58,50,48,0.06);
    }

    .ai-card-left {
      position: relative;
      min-height: 600px;
      overflow: hidden;
      background:
        radial-gradient(circle at 35% 35%, rgba(196, 169, 125, 0.14) 0%, rgba(247, 241, 234, 0.0) 55%),
        radial-gradient(circle at 75% 70%, rgba(216, 193, 154, 0.18) 0%, rgba(247, 241, 234, 0.0) 60%),
        linear-gradient(140deg, var(--cream) 0%, var(--soft) 55%, var(--white) 100%);
    }

    .ai-card-left img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* Abstract AI analysis visualization (replaces editorial photo) */
    .ai-viz {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .ai-viz svg {
      width: 78%;
      height: auto;
      max-width: 460px;
      opacity: 0.95;
    }

    .ai-viz .ai-ring {
      fill: none;
      stroke: rgba(196, 169, 125, 0.45);
      stroke-width: 0.6;
    }

    .ai-viz .ai-ring-thick {
      fill: none;
      stroke: rgba(196, 169, 125, 0.7);
      stroke-width: 1;
    }

    .ai-viz .ai-wave {
      fill: none;
      stroke: rgba(196, 169, 125, 0.55);
      stroke-width: 0.8;
    }

    .ai-viz .ai-dot {
      fill: var(--gold-deep);
    }

    .ai-viz .ai-dot-soft {
      fill: rgba(196, 169, 125, 0.55);
    }

    .ai-viz .ai-arc-anim {
      transform-origin: 250px 250px;
      animation: aiSpin 28s linear infinite;
    }

    .ai-viz .ai-arc-anim-rev {
      transform-origin: 250px 250px;
      animation: aiSpin 36s linear infinite reverse;
    }

    @keyframes aiSpin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    /* Floating dot annotations */
    .annotation-dot {
      position: absolute;
      display: flex;
      align-items: center;
      gap: 10px;
      animation: float 6s ease-in-out infinite;
    }

    .annotation-dot .dot {
      width: 12px;
      height: 12px;
      background: var(--white);
      border-radius: 50%;
      box-shadow: 0 2px 8px rgba(0,0,0,0.15);
      position: relative;
    }

    .annotation-dot .dot::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      border: 1.5px solid rgba(255,255,255,0.5);
      transform: translate(-50%, -50%);
      animation: dotRipple 2.5s ease-out infinite;
    }

    .annotation-dot .dot-label {
      background: rgba(255,255,255,0.9);
      backdrop-filter: blur(8px);
      padding: 6px 14px;
      border-radius: 20px;
      font-family: 'Shippori Mincho', serif;
      font-size: 12px;
      font-weight: 400;
      letter-spacing: 0.18em;
      color: var(--black);
      box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    }

    .annotation-1 { top: 25%; left: 15%; }
    .annotation-2 { top: 50%; right: 10%; animation-delay: 1s; }
    .annotation-3 { bottom: 20%; left: 25%; animation-delay: 2s; }

    /* === 3D Skin cross-section diagram === */
    .ai-viz.skin-viz svg {
      width: 92%;
      max-width: 560px;
      height: auto;
      opacity: 1;
      animation: floatGentle 8s ease-in-out infinite;
    }

    @keyframes floatGentle {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(-3px); }
    }

    /* Hair follicle subtle sway */
    .skin-viz .hair-follicle .hair-strand {
      transform-origin: 165px 100px;
      animation: hairSway 6s ease-in-out infinite;
    }

    @keyframes hairSway {
      0%, 100% { transform: rotate(-1deg); }
      50%      { transform: rotate(1deg); }
    }

    /* Zoom inset cells fade-in (triggered when section reveals) */
    .skin-viz .cell-row {
      opacity: 0;
      transform: translateY(2px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }

    .reveal.visible .skin-viz .cell-row {
      opacity: 1;
      transform: translateY(0);
    }

    .skin-viz .cell-row-1 { transition-delay: 0.10s; }
    .skin-viz .cell-row-2 { transition-delay: 0.20s; }
    .skin-viz .cell-row-3 { transition-delay: 0.30s; }
    .skin-viz .cell-row-4 { transition-delay: 0.40s; }
    .skin-viz .cell-row-5 { transition-delay: 0.50s; }
    .skin-viz .cell-row-6 { transition-delay: 0.60s; }
    .skin-viz .cell-row-7 { transition-delay: 0.70s; }

    /* Fallback: ensure visible even if reveal class isn't toggled */
    @media (prefers-reduced-motion: reduce) {
      .skin-viz svg { animation: none; }
      .skin-viz .hair-follicle .hair-strand { animation: none; }
      .skin-viz .cell-row { opacity: 1; transform: none; transition: none; }
    }

    .ai-card-right {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 80px 60px;
      background: linear-gradient(135deg, var(--cream) 0%, var(--soft) 50%, var(--white) 100%);
    }

    .ai-card-eyebrow {
      font-family: 'Italiana', serif;
      font-size: 13px;
      font-style: normal;
      font-weight: 400;
      letter-spacing: 0.3em;
      color: var(--gold);
      margin-bottom: 18px;
      text-transform: none;
      display: block;
    }

    .ai-card-title {
      font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
      font-size: 38px;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: -0.02em;
      color: #3a3230;
      margin-bottom: 14px;
    }

    .ai-card-title-sub {
      font-family: 'Cormorant Garamond', serif;
      font-size: 26px;
      font-weight: 300;
      font-style: italic;
      color: var(--gold);
      margin-bottom: 36px;
      letter-spacing: 0.02em;
    }

    .ai-card-desc {
      font-family: 'Noto Serif JP', serif;
      font-size: 15px;
      font-weight: 300;
      line-height: 2.0;
      letter-spacing: 0.05em;
      color: var(--gray-text);
      max-width: 380px;
    }

    .ai-card-features {
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-top: 40px;
    }

    .ai-feature {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .ai-feature-icon {
      width: 40px;
      height: 40px;
      border-radius: 6px;
      background: var(--white);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 1px 2px rgba(58,50,48,0.04), 0 4px 12px rgba(58,50,48,0.06);
      font-size: 18px;
    }

    .ai-feature-text {
      font-family: 'Noto Serif JP', serif;
      font-size: 14px;
      font-weight: 400;
      letter-spacing: 0.05em;
      color: var(--black);
    }

    /* ---- VALUE STATEMENT SECTION ---- */
    .value-section {
      padding: 128px 48px;
      text-align: center;
      position: relative;
      overflow: hidden;
      background:
        linear-gradient(180deg, rgba(253,252,250,0.92) 0%, rgba(247,241,234,0.85) 100%),
        url('assets/bg-flowers.webp') center / cover no-repeat;
    }

    .value-text {
      font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
      font-size: 36px;
      font-weight: 300;
      line-height: 1.9;
      letter-spacing: -0.01em;
      color: var(--gray-light);
      max-width: 900px;
      margin: 0 auto;
      position: relative;
      z-index: 2;
    }

    .value-text em {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-weight: 400;
      color: var(--black);
    }

    /* Floating keywords */
    .floating-keywords {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      pointer-events: none;
      z-index: 1;
    }

    .float-keyword {
      position: absolute;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 16px;
      border-radius: 30px;
      font-size: 17px;
      font-weight: 200;
      font-style: italic;
      font-family: 'Shippori Mincho', serif;
      letter-spacing: 0.05em;
      opacity: 0.6;
      pointer-events: auto;
      animation: floatKeyword 8s ease-in-out infinite;
      box-shadow: 0 3px 15px rgba(0,0,0,0.06);
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .float-keyword:hover {
      opacity: 1;
      transform: scale(1.05);
    }

    .float-keyword .kw-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
    }

    /* All warm-tone keyword chips: gold / peach / beige / olive / dusty pink */
    .kw-1 {
      top: 15%;
      left: 8%;
      background: #faf2e8;
      color: #a88a5e;
      animation: floatKeyword 7s ease-in-out infinite;
      animation-delay: 0s;
    }
    .kw-1 .kw-dot { background: #c4a97d; }

    .kw-2 {
      top: 25%;
      right: 12%;
      background: #f5f1e8;
      color: #7a8068;
      animation: floatKeyword 9s ease-in-out infinite;
      animation-delay: 1.2s;
    }
    .kw-2 .kw-dot { background: #a8b89a; }

    .kw-3 {
      bottom: 25%;
      left: 12%;
      background: #f5ede3;
      color: #b08868;
      animation: floatKeyword 6s ease-in-out infinite;
      animation-delay: 2.5s;
    }
    .kw-3 .kw-dot { background: #d8a591; }

    .kw-4 {
      bottom: 20%;
      right: 8%;
      background: #fbf6ee;
      color: #a08050;
      animation: floatKeyword 10s ease-in-out infinite;
      animation-delay: 3.8s;
    }
    .kw-4 .kw-dot { background: #e6c9a8; }

    .kw-5 {
      top: 60%;
      left: 5%;
      background: #f7f1ea;
      color: #8a7560;
      animation: floatKeyword 8s ease-in-out infinite;
      animation-delay: 1.8s;
    }
    .kw-5 .kw-dot { background: #d4c4b0; }

    /* Word-by-word reveal on value-text */
    .value-text .vt-word {
      display: inline-block;
      color: #d8cfc4;
      transition: color 0.6s ease-out;
      font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
      font-weight: 300;
    }
    .value-text .vt-word.lit {
      color: var(--black);
    }
    .value-text em {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-weight: 400;
      color: #b8a88f;
      transition: color 0.6s ease-out;
    }
    .value-text em.lit {
      color: var(--gold-deep);
    }

    /* ---- HOW IT WORKS SECTION ---- */
    .how-section {
      padding: 88px 48px 108px;
    }

    .how-inner {
      max-width: 1200px;
      margin: 0 auto;
    }

    .section-eyebrow {
      font-family: 'Italiana', serif;
      font-size: 13px;
      font-style: normal;
      font-weight: 400;
      letter-spacing: 0.3em;
      color: var(--gold);
      text-align: center;
      margin-bottom: 16px;
      text-transform: none;
      display: block;
    }

    .section-title {
      font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
      font-size: 36px;
      font-weight: 400;
      letter-spacing: -0.02em;
      line-height: 1.5;
      color: #3a3230;
      text-align: center;
      margin-bottom: 68px;
    }

    .how-steps {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;
    }

    .how-step {
      background: var(--white);
      border-radius: 8px;
      padding: 52px 36px;
      text-align: center;
      box-shadow: 0 1px 2px rgba(58,50,48,0.04), 0 8px 24px rgba(58,50,48,0.06);
      transition: transform 0.3s, box-shadow 0.3s;
    }

    .how-step:hover {
      transform: translateY(-4px);
      box-shadow: 0 1px 2px rgba(58,50,48,0.04), 0 14px 36px rgba(58,50,48,0.08);
    }

    .step-number {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 52px;
      height: 52px;
      background: var(--white);
      border: 0.5px solid var(--gold);
      border-radius: 50%;
      font-family: 'Bodoni Moda', serif;
      font-size: 22px;
      font-weight: 300;
      font-style: normal;
      color: var(--gold-deep);
      margin-bottom: 28px;
      letter-spacing: 0;
    }

    .step-icon {
      font-size: 40px;
      margin-bottom: 22px;
    }

    .step-title {
      font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
      font-size: 18px;
      font-weight: 400;
      letter-spacing: 0.02em;
      color: #3a3230;
      margin-bottom: 14px;
    }

    .step-desc {
      font-family: 'Noto Serif JP', serif;
      font-size: 14px;
      font-weight: 300;
      letter-spacing: 0.05em;
      color: var(--gray-text);
      line-height: 1.95;
    }

    /* ---- RESULTS / SKIN TYPES SECTION ---- */
    .results-section {
      padding: 88px 48px 108px;
      background: var(--white);
    }

    .results-inner {
      max-width: 1200px;
      margin: 0 auto;
    }

    .skin-types {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
      margin-top: 48px;
    }

    .skin-card {
      background: var(--category-bg);
      border-radius: 8px;
      padding: 40px 28px;
      text-align: center;
      transition: transform 0.3s, box-shadow 0.3s;
      position: relative;
      overflow: hidden;
      box-shadow: 0 1px 2px rgba(58,50,48,0.04), 0 8px 24px rgba(58,50,48,0.06);
    }

    .skin-card-image {
      width: 100%;
      height: 140px;
      border-radius: 6px;
      margin-bottom: 22px;
      object-fit: cover;
      display: block;
    }

    /* SVG symbol container that replaces the photo on certain skin cards */
    .skin-card-symbol {
      width: 100%;
      height: 140px;
      border-radius: 6px;
      margin-bottom: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, var(--white) 0%, var(--soft) 100%);
      border: 0.5px solid rgba(196, 169, 125, 0.22);
    }

    .skin-card-symbol svg {
      width: 56px;
      height: 56px;
      stroke: var(--gold-deep);
      fill: none;
      stroke-width: 1.4;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .skin-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      border-radius: 8px 8px 0 0;
    }

    .skin-card:nth-child(1)::before { background: var(--accent-pink); }
    .skin-card:nth-child(2)::before { background: var(--accent-blue); }
    .skin-card:nth-child(3)::before { background: var(--accent-mint); }
    .skin-card:nth-child(4)::before { background: var(--accent-peach); }

    .skin-card:hover {
      transform: translateY(-4px);
    }

    .skin-card-icon {
      font-size: 36px;
      margin-bottom: 16px;
    }

    .skin-card-index {
      font-family: 'Bodoni Moda', serif;
      font-style: italic;
      font-size: 13px;
      font-weight: 300;
      color: var(--gold);
      letter-spacing: 0;
      margin-bottom: 8px;
      display: block;
    }

    .skin-card-index .idx-jp {
      font-family: 'Noto Sans JP', sans-serif;
      font-style: normal;
      font-size: 10px;
      font-weight: 300;
      letter-spacing: 0.2em;
      color: var(--gray-light);
      margin-right: 8px;
    }

    .skin-card-index .idx-no {
      font-family: 'Bodoni Moda', serif;
      font-style: italic;
      font-weight: 300;
      color: var(--gold-deep);
      letter-spacing: 0;
    }

    .skin-card-tag {
      display: inline-block;
      margin-top: 16px;
      padding: 4px 12px;
      background: var(--soft);
      color: var(--gray-text);
      font-family: 'Noto Sans JP', sans-serif;
      font-size: 10px;
      font-weight: 300;
      letter-spacing: 0.25em;
      border-radius: 100px;
    }

    .skin-card-title {
      font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
      font-size: 17px;
      font-weight: 400;
      letter-spacing: 0.02em;
      color: #3a3230;
      margin-bottom: 10px;
    }

    .skin-card-desc {
      font-family: 'Noto Serif JP', serif;
      font-size: 13px;
      font-weight: 300;
      letter-spacing: 0.04em;
      color: var(--gray-text);
      line-height: 1.85;
    }

    .skin-card-scores {
      margin-top: 20px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .score-row {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 11px;
    }

    .score-label {
      width: 50px;
      text-align: right;
      font-family: 'Noto Sans JP', sans-serif;
      font-size: 10px;
      font-weight: 300;
      letter-spacing: 0.15em;
      color: var(--gray-text);
    }

    .score-bar {
      flex: 1;
      height: 6px;
      background: rgba(0,0,0,0.06);
      border-radius: 3px;
      overflow: hidden;
    }

    .score-bar-fill {
      height: 100%;
      border-radius: 3px;
      transition: width 1s ease-out;
    }

    .skin-card:nth-child(1) .score-bar-fill { background: var(--accent-pink); }
    .skin-card:nth-child(2) .score-bar-fill { background: var(--accent-blue); }
    .skin-card:nth-child(3) .score-bar-fill { background: var(--accent-mint); }
    .skin-card:nth-child(4) .score-bar-fill { background: var(--accent-peach); }

    /* ---- CTA SECTION ---- */
    .cta-section {
      padding: 108px 48px;
      text-align: center;
    }

    .cta-card {
      max-width: 800px;
      margin: 0 auto;
      background: linear-gradient(135deg, var(--cream) 0%, var(--soft) 50%, var(--white) 100%);
      border: 0.5px solid rgba(196, 169, 125, 0.22);
      border-radius: 8px;
      padding: 88px 60px;
      box-shadow: 0 1px 2px rgba(58,50,48,0.04), 0 8px 32px rgba(196, 169, 125, 0.10);
    }

    .cta-title {
      font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
      font-size: 32px;
      font-weight: 400;
      letter-spacing: -0.01em;
      line-height: 1.5;
      color: #3a3230;
      margin-bottom: 20px;
    }

    .cta-desc {
      font-family: 'Noto Serif JP', serif;
      font-size: 15px;
      font-weight: 300;
      letter-spacing: 0.05em;
      color: var(--gray-text);
      margin-bottom: 44px;
      line-height: 2.0;
    }

    .cta-btn {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 18px 48px;
      background: var(--black);
      color: var(--white);
      font-family: 'Noto Sans JP', sans-serif;
      font-size: 13px;
      font-weight: 300;
      letter-spacing: 0.3em;
      border-radius: 40px;
      text-decoration: none;
      transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    }

    .cta-btn:hover {
      background: var(--gold);
      color: var(--white);
      transform: translateY(-2px);
      box-shadow: 0 10px 30px rgba(196, 169, 125, 0.3);
    }

    .cta-btn svg {
      width: 16px;
      height: 16px;
      transition: transform 0.3s ease;
    }

    .cta-btn:hover svg {
      transform: translateX(4px);
    }

    /* ---- FOOTER ---- */
    .footer {
      padding: 48px;
      text-align: center;
      background: var(--white);
      border-top: 1px solid rgba(0,0,0,0.04);
    }

    .footer-logo {
      font-family: 'Italiana', serif;
      font-size: 24px;
      font-weight: 400;
      font-style: normal;
      letter-spacing: 0.08em;
      color: var(--black);
      margin-bottom: 20px;
      text-transform: none;
    }

    .footer-links {
      display: flex;
      justify-content: center;
      gap: 32px;
      margin-bottom: 28px;
    }

    .footer-links a {
      font-family: 'Noto Sans JP', sans-serif;
      font-size: 12px;
      font-weight: 300;
      letter-spacing: 0.2em;
      color: var(--gray-text);
      text-decoration: none;
      transition: color 0.3s;
    }

    .footer-links a:hover {
      color: var(--black);
    }

    .footer-copy {
      font-family: 'Noto Sans JP', sans-serif;
      font-size: 10px;
      font-weight: 300;
      letter-spacing: 0.25em;
      color: var(--gray-light);
    }

    /* ---- TESTIMONIALS SECTION (VibeUI 3-column Quote Cards) ---- */
    .testimonials-section {
      padding: 88px 48px 108px;
      background: var(--white);
    }

    .testimonials-inner {
      max-width: 1200px;
      margin: 0 auto;
    }

    .testimonials-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
      margin-top: 48px;
    }

    .testimonial-card {
      background: var(--white);
      border: 0.5px solid rgba(0,0,0,0.06);
      border-radius: 8px;
      padding: 44px 36px;
      box-shadow: 0 1px 2px rgba(58,50,48,0.04), 0 8px 24px rgba(58,50,48,0.06);
      transition: transform 0.35s ease-out, box-shadow 0.35s ease-out, border-color 0.35s ease-out;
      position: relative;
    }

    .testimonial-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 1px 2px rgba(58,50,48,0.04), 0 16px 40px rgba(196, 169, 125, 0.14);
      border-color: var(--gold-soft);
    }

    .testimonial-quote-mark {
      font-family: 'Bodoni Moda', serif;
      font-size: 72px;
      line-height: 0.5;
      color: var(--gold);
      margin-bottom: 22px;
      font-style: italic;
      font-weight: 300;
      opacity: 0.18;
    }

    .testimonial-stars {
      display: flex;
      gap: 3px;
      margin-bottom: 18px;
    }

    .testimonial-stars svg {
      width: 12px;
      height: 12px;
      fill: var(--gold);
    }

    .testimonial-comment {
      font-family: 'Noto Serif JP', serif;
      font-size: 14px;
      font-weight: 300;
      letter-spacing: 0.04em;
      line-height: 2.0;
      color: var(--black);
      margin-bottom: 28px;
      min-height: 96px;
    }

    .testimonial-meta {
      display: flex;
      align-items: center;
      gap: 12px;
      padding-top: 20px;
      border-top: 1px solid rgba(0,0,0,0.06);
    }

    .testimonial-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--cream), var(--peach));
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Shippori Mincho', serif;
      font-size: 16px;
      font-weight: 400;
      color: var(--gold-deep);
      flex-shrink: 0;
      overflow: hidden;
    }

    .testimonial-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 50%;
    }

    .testimonial-name {
      font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
      font-size: 15px;
      font-weight: 400;
      color: var(--black);
      letter-spacing: 0.05em;
    }

    .testimonial-detail {
      font-family: 'Noto Sans JP', sans-serif;
      font-size: 11px;
      font-weight: 300;
      color: var(--gray-light);
      margin-top: 4px;
      letter-spacing: 0.15em;
    }

    .testimonial-result-tag {
      display: inline-block;
      margin-top: 8px;
      padding: 2px 10px;
      background: var(--cream);
      color: var(--gold-deep);
      font-family: 'Noto Sans JP', sans-serif;
      font-size: 9px;
      font-weight: 300;
      border-radius: 10px;
      letter-spacing: 0.25em;
    }

    /* ---- FAQ SECTION (VibeUI Accordion FAQ) ---- */
    .faq-section {
      padding: 88px 48px 108px;
      background: var(--soft);
    }

    .faq-inner {
      max-width: 820px;
      margin: 0 auto;
    }

    .faq-list {
      margin-top: 48px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .faq-item {
      background: var(--white);
      border-radius: 8px;
      border: 0.5px solid rgba(0,0,0,0.06);
      overflow: hidden;
      transition: border-color 0.3s, box-shadow 0.3s;
      box-shadow: 0 1px 2px rgba(58,50,48,0.04);
    }

    .faq-item[open] {
      border-color: var(--gold-soft);
      box-shadow: 0 4px 20px rgba(196, 169, 125, 0.15);
      background: linear-gradient(90deg, var(--cream) 0%, var(--white) 8%);
      border-left: 2px solid var(--gold);
    }

    .faq-question {
      list-style: none;
      cursor: pointer;
      padding: 24px 28px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
      font-size: 15px;
      font-weight: 400;
      letter-spacing: 0.04em;
      color: var(--black);
      transition: color 0.3s;
    }

    .faq-question::-webkit-details-marker { display: none; }

    .faq-question:hover {
      color: var(--gold-deep);
    }

    .faq-icon {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--cream);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: transform 0.3s, background 0.3s;
      position: relative;
    }

    /* horizontal bar (always visible) */
    .faq-icon::before {
      content: '';
      position: absolute;
      width: 10px;
      height: 1.5px;
      background: var(--gold-deep);
      border-radius: 1px;
    }

    /* vertical bar (rotates to flatten on open) */
    .faq-icon::after {
      content: '';
      position: absolute;
      width: 10px;
      height: 1.5px;
      background: var(--gold-deep);
      border-radius: 1px;
      transform: rotate(90deg);
      transition: transform 0.35s ease-out;
    }

    .faq-item[open] .faq-icon {
      background: var(--gold-soft);
    }

    .faq-item[open] .faq-icon::after {
      transform: rotate(180deg);
    }

    .faq-answer {
      padding: 0 28px 28px;
      font-family: 'Noto Serif JP', serif;
      font-size: 14px;
      font-weight: 300;
      letter-spacing: 0.05em;
      line-height: 2.0;
      color: var(--gray-text);
    }

    /* ---- ANIMATIONS ---- */
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes fadeInDown {
      from {
        opacity: 0;
        transform: translateY(-20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes scanPulse {
      0%, 100% {
        opacity: 0.4;
        border-color: rgba(255,255,255,0.5);
      }
      50% {
        opacity: 1;
        border-color: rgba(255,255,255,0.9);
      }
    }

    @keyframes scanDown {
      0% {
        top: 0%;
        opacity: 0;
      }
      10% {
        opacity: 1;
      }
      90% {
        opacity: 1;
      }
      100% {
        top: 100%;
        opacity: 0;
      }
    }

    @keyframes float {
      0%, 100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-12px);
      }
    }

    @keyframes floatKeyword {
      0%, 100% {
        transform: translateY(0) rotate(0deg);
      }
      25% {
        transform: translateY(-8px) rotate(1deg);
      }
      75% {
        transform: translateY(4px) rotate(-1deg);
      }
    }

    @keyframes dotRipple {
      0% {
        width: 24px;
        height: 24px;
        opacity: 1;
      }
      100% {
        width: 40px;
        height: 40px;
        opacity: 0;
      }
    }

    /* Scroll reveal */
    .reveal {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    }

    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* ============================================
       Article / Category page (added by build)
       ============================================ */
    .article-hero {
      padding: 140px 48px 60px;
      background: var(--warm-white);
      text-align: center;
    }
    .article-hero-inner {
      max-width: 820px;
      margin: 0 auto;
    }
    .article-h1 {
      font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
      font-size: 38px;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: -0.02em;
      color: var(--black);
      margin: 18px 0 22px;
    }
    .article-lede {
      font-family: 'Noto Serif JP', serif;
      font-size: 15px;
      font-weight: 300;
      line-height: 2.0;
      color: var(--gray-text);
      max-width: 640px;
      margin: 0 auto 36px;
    }
    .article-cover {
      max-width: 880px;
      margin: 24px auto 0;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 12px 36px rgba(58,50,48,0.08);
    }
    .article-cover img {
      width: 100%;
      height: auto;
      display: block;
    }

    .article-body {
      max-width: 720px;
      margin: 0 auto;
      padding: 32px 48px 80px;
      font-family: 'Noto Serif JP', serif;
      font-size: 15px;
      line-height: 2.0;
      color: var(--black);
    }
    .article-body h2 {
      font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
      font-size: 24px;
      font-weight: 400;
      letter-spacing: 0.02em;
      color: var(--black);
      margin: 56px 0 20px;
      padding-bottom: 14px;
      border-bottom: 1px solid var(--category-bg-deep);
      position: relative;
    }
    .article-body h2::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: -1px;
      width: 60px;
      height: 1.5px;
      background: var(--gold);
    }
    .article-body h3 {
      font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
      font-size: 18px;
      font-weight: 400;
      letter-spacing: 0.02em;
      color: var(--black);
      margin: 32px 0 12px;
    }
    .article-body p {
      margin-bottom: 18px;
      color: var(--gray-text);
    }
    .article-body strong {
      color: var(--black);
      font-weight: 500;
    }
    .article-body em {
      font-style: normal;
      color: var(--gold-deep);
      font-weight: 400;
    }
    .article-body ol,
    .article-body ul {
      margin: 18px 0 18px 28px;
      color: var(--gray-text);
    }
    .article-body li {
      margin-bottom: 8px;
    }
    .article-body a {
      color: var(--gold-deep);
      text-decoration: underline;
      text-decoration-color: var(--gold-soft);
      text-underline-offset: 3px;
    }

    /* Footer extras */
    .footer-social svg {
      transition: opacity 0.3s ease;
    }
    .footer-social a:hover svg {
      opacity: 0.6;
    }

    /* Responsive */
    @media (max-width: 900px) {
      .hero-inner { grid-template-columns: 1fr; }
      .ai-card { grid-template-columns: 1fr; }
      .nav { padding: 14px 20px; }
      .nav-links { display: none; }
      .hero { padding: 110px 20px 60px; }
      .ai-section { margin: 24px 20px; }
      .article-hero { padding: 110px 20px 40px; }
      .article-body { padding: 24px 20px 60px; }
      .article-h1 { font-size: 28px; }
      .how-section .how-steps { grid-template-columns: 1fr !important; }
      .testimonials-grid { grid-template-columns: 1fr !important; }
      .skin-types { grid-template-columns: 1fr 1fr !important; }
    }

    /* ============================================
       My Skin (Personalization Teaser) page
       ============================================ */
    .myskin-hero {
      padding: 140px 48px 80px;
      background:
        radial-gradient(ellipse at top right, rgba(196,169,125,0.08), transparent 60%),
        linear-gradient(180deg, var(--warm-white) 0%, var(--soft) 100%);
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .myskin-hero-inner {
      max-width: 820px;
      margin: 0 auto;
      position: relative;
      z-index: 1;
    }
    .myskin-hero h1 {
      font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
      font-size: 44px;
      font-weight: 400;
      line-height: 1.55;
      letter-spacing: -0.01em;
      color: var(--black);
      margin: 18px 0 24px;
    }
    .myskin-hero-lede {
      font-family: 'Noto Serif JP', serif;
      font-size: 15px;
      font-weight: 300;
      line-height: 2.0;
      color: var(--gray-text);
      max-width: 600px;
      margin: 0 auto 40px;
    }
    .myskin-hero-cta {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 16px 36px;
      background: var(--black);
      color: var(--white);
      font-family: 'Noto Sans JP', sans-serif;
      font-size: 13px;
      font-weight: 400;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      text-decoration: none;
      border-radius: 4px;
      transition: all 0.3s ease;
      cursor: pointer;
      border: none;
    }
    .myskin-hero-cta:hover {
      background: var(--gold);
      color: var(--white);
      transform: translateY(-1px);
      box-shadow: 0 12px 32px rgba(196,169,125,0.35);
    }
    .myskin-hero-cta svg {
      width: 14px;
      height: 14px;
      stroke: currentColor;
      transition: transform 0.3s ease;
    }
    .myskin-hero-cta:hover svg { transform: translateX(4px); }
    .myskin-note {
      margin-top: 18px;
      font-family: 'Noto Sans JP', sans-serif;
      font-size: 11px;
      color: var(--gray-light);
      letter-spacing: 0.08em;
    }

    /* Section frame */
    .myskin-section {
      padding: 100px 48px;
    }
    .myskin-section.alt { background: var(--soft); }
    .myskin-section-inner {
      max-width: 1080px;
      margin: 0 auto;
    }
    .myskin-section-head {
      text-align: center;
      margin-bottom: 56px;
    }
    .myskin-section-head h2 {
      font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
      font-size: 30px;
      font-weight: 400;
      letter-spacing: -0.01em;
      color: var(--black);
      margin: 14px 0 16px;
    }
    .myskin-section-head p {
      font-family: 'Noto Serif JP', serif;
      font-size: 14px;
      color: var(--gray-text);
      max-width: 580px;
      margin: 0 auto;
      line-height: 1.9;
    }

    /* Feature cards (3 columns) */
    .feature-cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
    }
    .feature-card {
      background: var(--white);
      border: 0.5px solid rgba(196,169,125,0.18);
      border-radius: 8px;
      padding: 36px 28px;
      box-shadow: 0 2px 12px rgba(58,50,48,0.04);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .feature-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 12px 28px rgba(58,50,48,0.08);
    }
    .feature-card-icon {
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--cream);
      border-radius: 50%;
      margin-bottom: 22px;
      color: var(--gold-deep);
    }
    .feature-card-icon svg { width: 20px; height: 20px; stroke-width: 1.5; }
    .feature-card h3 {
      font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
      font-size: 18px;
      font-weight: 400;
      color: var(--black);
      margin: 0 0 14px;
      line-height: 1.6;
    }
    .feature-card p {
      font-family: 'Noto Serif JP', serif;
      font-size: 13px;
      color: var(--gray-text);
      line-height: 1.95;
    }

    /* Step cards (algorithm explainer) */
    .step-cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      position: relative;
    }
    .step-card {
      background: var(--white);
      border-radius: 8px;
      padding: 36px 28px;
      border: 0.5px solid rgba(196,169,125,0.16);
      position: relative;
    }
    .step-card-num {
      font-family: 'Bodoni Moda', serif;
      font-size: 42px;
      font-weight: 300;
      color: var(--gold);
      line-height: 1;
      margin-bottom: 18px;
      font-style: italic;
    }
    .step-card h3 {
      font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
      font-size: 17px;
      font-weight: 400;
      color: var(--black);
      margin: 0 0 12px;
      line-height: 1.6;
    }
    .step-card p {
      font-family: 'Noto Serif JP', serif;
      font-size: 13px;
      color: var(--gray-text);
      line-height: 1.95;
    }

    /* Calendar mock */
    .calendar-mock {
      max-width: 460px;
      margin: 0 auto;
      background: var(--white);
      border-radius: 10px;
      padding: 28px;
      border: 0.5px solid rgba(196,169,125,0.18);
      box-shadow: 0 6px 22px rgba(58,50,48,0.05);
    }
    .calendar-mock-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 18px;
    }
    .calendar-mock-month {
      font-family: 'Bodoni Moda', serif;
      font-style: italic;
      font-size: 18px;
      color: var(--black);
    }
    .calendar-mock-meta {
      font-family: 'Noto Sans JP', sans-serif;
      font-size: 10px;
      color: var(--gold-deep);
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }
    .calendar-mock-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 4px;
    }
    .calendar-mock-day {
      aspect-ratio: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Noto Sans JP', sans-serif;
      font-size: 11px;
      color: var(--gray-text);
      border-radius: 50%;
    }
    .calendar-mock-day.muted { color: var(--gray-light); opacity: 0.4; }
    .calendar-mock-day.last {
      background: var(--cream);
      color: var(--gold-deep);
      font-weight: 500;
    }
    .calendar-mock-day.next {
      background: var(--black);
      color: var(--white);
      font-weight: 500;
    }
    .calendar-mock-legend {
      display: flex;
      justify-content: center;
      gap: 24px;
      margin-top: 22px;
      font-family: 'Noto Sans JP', sans-serif;
      font-size: 11px;
      color: var(--gray-text);
      letter-spacing: 0.04em;
    }
    .calendar-mock-legend span {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .calendar-mock-legend span::before {
      content: '';
      width: 9px;
      height: 9px;
      border-radius: 50%;
    }
    .calendar-mock-legend .lg-last::before { background: var(--cream); border: 1px solid var(--gold-soft); }
    .calendar-mock-legend .lg-next::before { background: var(--black); }

    /* Final CTA section */
    .myskin-final {
      padding: 110px 48px;
      background:
        radial-gradient(ellipse at center, rgba(196,169,125,0.10), transparent 70%),
        linear-gradient(135deg, var(--cream) 0%, var(--soft) 70%, var(--white) 100%);
      text-align: center;
    }
    .myskin-final h2 {
      font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
      font-size: 32px;
      font-weight: 400;
      color: var(--black);
      margin: 14px 0 22px;
    }
    .myskin-final p {
      font-family: 'Noto Serif JP', serif;
      font-size: 14px;
      color: var(--gray-text);
      max-width: 540px;
      margin: 0 auto 36px;
      line-height: 1.95;
    }

    /* Email signup form */
    .email-signup-form {
      display: flex;
      gap: 8px;
      max-width: 460px;
      margin: 0 auto;
      flex-wrap: wrap;
      justify-content: center;
    }
    .email-signup-form input[type="email"] {
      flex: 1 1 240px;
      padding: 14px 18px;
      border: 0.5px solid var(--gold-soft);
      border-radius: 4px;
      font-family: 'Noto Sans JP', sans-serif;
      font-size: 13px;
      color: var(--black);
      background: var(--white);
      letter-spacing: 0.04em;
      outline: none;
      transition: border-color 0.3s ease;
    }
    .email-signup-form input[type="email"]:focus { border-color: var(--gold); }
    .email-signup-form button {
      padding: 14px 28px;
      background: var(--black);
      color: var(--white);
      border: none;
      border-radius: 4px;
      font-family: 'Noto Sans JP', sans-serif;
      font-size: 12px;
      font-weight: 400;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      cursor: pointer;
      transition: background 0.3s ease;
    }
    .email-signup-form button:hover { background: var(--gold); }

    /* Phase badge */
    .phase-badge {
      display: inline-block;
      padding: 6px 14px;
      background: rgba(196,169,125,0.12);
      color: var(--gold-deep);
      font-family: 'Noto Sans JP', sans-serif;
      font-size: 10px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      border-radius: 100px;
      margin-bottom: 14px;
    }

    .myskin-disclaimer {
      max-width: 720px;
      margin: 60px auto 0;
      padding: 18px 24px;
      background: var(--soft);
      border-left: 2px solid var(--gold);
      font-family: 'Noto Serif JP', serif;
      font-size: 12px;
      color: var(--gray-text);
      line-height: 1.95;
      border-radius: 0 6px 6px 0;
    }

    @media (max-width: 900px) {
      .myskin-hero { padding: 110px 20px 60px; }
      .myskin-hero h1 { font-size: 30px; }
      .myskin-section { padding: 70px 20px; }
      .myskin-final { padding: 80px 20px; }
      .feature-cards, .step-cards { grid-template-columns: 1fr; }
    }