.hero {
  min-height: 100svh;
  display: grid;
  align-items: center;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: calc(var(--header-height) + 2.5rem) 0 3.5rem;
  background:
    radial-gradient(circle at 80% 26%, rgba(116,129,114,.24), transparent 34%),
    radial-gradient(circle at 14% 84%, rgba(77,110,80,.12), transparent 36%),
    linear-gradient(135deg, #fafaf9 0%, #f3f3f2 55%, #e8ebe6 100%);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(90deg, rgba(250,250,249,.98) 0%, rgba(250,250,249,.86) 44%, rgba(250,250,249,.22) 100%);
}
.hero-texture {
  position: absolute;
  inset: 0;
  z-index: -3;
  background: url('/assets/img/background.webp') center / cover no-repeat;
  opacity: .34;
  filter: saturate(.78) contrast(.92);
  transform: scale(1.04);
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(20rem, .9fr); align-items: center; gap: clamp(2rem, 5vw, 6rem); }
.hero-copy { position: relative; z-index: 2; max-width: 52rem; }
.hero h1 { margin: 0 0 var(--space-5); font-size: var(--text-hero); letter-spacing: -.03em; line-height: .82; color: var(--noir); }
.hero h1 span { position: relative; display: inline-block; }
.hero h1 span::after {
  content: "";
  position: absolute;
  left: -.02em;
  right: -.04em;
  bottom: -.04em;
  height: .12em;
  background: linear-gradient(90deg, var(--vert-principal), var(--vert-clair));
  transform: skewX(-12deg) rotate(-1deg);
  border-radius: 70% 20% 70% 25%;
  z-index: -1;
}
.hero-subtitle { max-width: 44rem; font-size: var(--text-lg); color: #3e4a42; margin-bottom: var(--space-8); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero-meta { list-style: none; display: flex; flex-wrap: wrap; gap: .55rem 1.1rem; padding: 0; margin: var(--space-8) 0 0; color: var(--gris-texte); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.hero-meta li { display: inline-flex; align-items: center; gap: .5rem; }
.hero-meta li::before { content: ""; width: .38rem; height: .38rem; border-radius: 50%; background: var(--vert-principal); }
.hero-mark { position: relative; justify-self: center; width: min(42vw, 36rem); aspect-ratio: 1; transform-style: preserve-3d; transition: transform 180ms ease-out; }
.hero-mark picture, .hero-mark img { width: 100%; height: 100%; object-fit: contain; position: relative; z-index: 2; filter: drop-shadow(0 25px 50px rgba(18,24,28,.16)); }
.hero-mark-ring { position: absolute; inset: 8%; border: 1px solid rgba(77,110,80,.18); border-radius: 50%; box-shadow: inset 0 0 0 24px rgba(255,255,255,.18), 0 0 80px rgba(77,110,80,.14); }
.hero-mark-ring::before, .hero-mark-ring::after { content: ""; position: absolute; inset: -7%; border: 1px solid rgba(77,110,80,.1); border-radius: 50%; }
.hero-mark-ring::after { inset: -15%; border-style: dashed; animation: ring-spin 40s linear infinite; }
.kanji { position: absolute; right: -4%; top: 2%; z-index: 1; writing-mode: vertical-rl; color: rgba(37,56,42,.1); font-family: serif; font-size: clamp(3rem, 7vw, 7rem); font-weight: 900; letter-spacing: .12em; }
@keyframes ring-spin { to { transform: rotate(360deg); } }
.scroll-cue { position: absolute; left: 50%; bottom: 1.4rem; width: 2.4rem; height: 3.6rem; border: 1px solid rgba(37,56,42,.24); border-radius: 1.4rem; transform: translateX(-50%); display: grid; place-items: start center; padding-top: .65rem; }
.scroll-cue span { width: .35rem; height: .35rem; border-radius: 50%; background: var(--vert-principal); animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0%,100% { transform: translateY(0); opacity: .45; } 50% { transform: translateY(1.4rem); opacity: 1; } }

.section-ink { background: var(--blanc); }
.section-ink::after { content: "柔道"; position: absolute; right: max(1rem, calc((100vw - var(--content-max))/2)); top: 50%; transform: translateY(-50%); font-family: serif; font-size: clamp(5rem, 15vw, 13rem); font-weight: 900; color: rgba(77,110,80,.045); pointer-events: none; }
.split-grid { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: clamp(2rem,6vw,7rem); align-items: start; }
.section-heading { max-width: 52rem; }
.section-heading-center { text-align: center; margin-inline: auto; margin-bottom: var(--space-12); }
.section-heading-center .eyebrow { justify-content: center; }
.club-copy { max-width: 54rem; }
.club-copy > p { font-size: var(--text-lg); color: #3d4840; }
.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-top: var(--space-8); }
.principles span { min-height: 8rem; display: grid; place-items: center; align-content: center; gap: .35rem; border: 1px solid rgba(77,110,80,.12); border-radius: var(--radius-lg); background: linear-gradient(180deg, #fff, #f6f7f4); color: var(--vert-profond); font-family: serif; font-size: 2rem; box-shadow: var(--shadow-soft); }
.principles small { font-family: var(--font-body); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gris-texte); }

.dojo-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-5); }
.dojo-card { min-height: 22rem; position: relative; overflow: hidden; padding: clamp(1.4rem, 2.5vw, 2.2rem); border: 1px solid rgba(37,56,42,.09); border-radius: var(--radius-lg); background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(232,235,230,.7)); box-shadow: var(--shadow-soft); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); transform-style: preserve-3d; }
.dojo-card:hover { box-shadow: var(--shadow-glow); border-color: rgba(77,110,80,.22); }
.dojo-card::after { content: ""; position: absolute; inset: auto -15% -30% 20%; height: 55%; background: radial-gradient(circle, rgba(77,110,80,.16), transparent 64%); pointer-events: none; }
.dojo-index { position: absolute; right: 1.4rem; top: 1rem; font-family: var(--font-display); font-size: 4rem; color: rgba(77,110,80,.09); line-height: 1; }
.dojo-icon { margin: 4.8rem 0 1.3rem; }
.dojo-card h3 { max-width: 18rem; margin-bottom: .55rem; }
.dojo-card p { margin-bottom: 1.4rem; }
.dojo-status { display: inline-flex; align-items: center; gap: .5rem; font-size: .78rem; font-weight: 750; color: var(--vert-profond); }
.dojo-status i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(45,122,75,.10); }

.section-dark { background: var(--vert-profond); color: var(--blanc); overflow: hidden; }
.section-dark::before { content: ""; position: absolute; inset: 0; background: url('/assets/img/background.webp') center / cover no-repeat; opacity: .08; mix-blend-mode: screen; }
.section-dark .section-heading { position: relative; }
.section-dark .eyebrow { color: #b9c8bb; }
.section-dark h2 { color: var(--blanc); }
.values-grid { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--space-4); }
.value-card { min-height: 17rem; padding: var(--space-6); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-lg); background: rgba(255,255,255,.055); backdrop-filter: blur(4px); }
.value-card img { filter: brightness(0) invert(1); opacity: .88; margin-bottom: var(--space-8); }
.value-card h3 { color: var(--blanc); margin-bottom: .7rem; }
.value-card p { color: rgba(255,255,255,.68); margin-bottom: 0; }

.closing-section { background: #ecefe9; }
.closing-card { position: relative; overflow: hidden; min-height: 22rem; display: grid; place-items: center; text-align: center; border-radius: 2rem; background: var(--blanc); box-shadow: var(--shadow-card); padding: clamp(2rem, 6vw, 5rem); }
.closing-card h2 { font-family: var(--font-script); text-transform: none; font-size: clamp(2.6rem,6vw,5.4rem); margin-bottom: .6rem; transform: rotate(-1.5deg); }
.closing-card p:last-child { margin: 0; font-weight: 700; }
.closing-kanji { position: absolute; margin: 0; left: -2rem; top: -1rem; font-family: serif; font-size: 10rem; font-weight: 900; color: rgba(77,110,80,.045); }
.closing-brush { position: absolute; width: 60%; max-width: 50rem; height: 2.2rem; background: var(--vert-principal); bottom: 20%; transform: rotate(-2deg) skewX(-12deg); opacity: .07; border-radius: 60% 10% 70% 15%; }

.state-page { min-height: 76vh; display: grid; align-items: center; }
.state-card { max-width: 48rem; text-align: center; }
.state-card .btn { margin-top: 1rem; }

.design-system-page { padding-top: calc(var(--header-height) + 5rem); }
.design-system-page h1 { font-size: var(--text-2xl); }
.swatches { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-4); margin: var(--space-8) 0; }
.swatches > div { overflow: hidden; border-radius: var(--radius-md); background: white; box-shadow: var(--shadow-soft); }
.swatches span { display: block; height: 8rem; }
.swatches code { display: block; padding: .8rem; }
.component-demo { display: flex; gap: 1rem; flex-wrap: wrap; }