:root {
        --bg: #0b1d26;
        --ink: #ffffff;
        --gold: #fbd784;
        --aqua: #8fe4ee;
        --glass: rgba(255, 255, 255, 0.09);
        --muted: rgba(255, 255, 255, 0.72);
        --deep: #071820;
        --sea: #0c4456;
      }

      * {
        box-sizing: border-box;
      }

      html {
        background: var(--bg);
        color: var(--ink);
        scroll-behavior: smooth;
      }

      body {
        margin: 0;
        font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
        letter-spacing: 0;
        background: var(--bg);
      }

      a {
        color: inherit;
        text-decoration: none;
      }

      .loader {
        position: fixed;
        inset: 0;
        z-index: 100;
        display: grid;
        place-items: center;
        overflow: hidden;
        background:
          radial-gradient(circle at 50% 56%, rgba(143, 228, 238, 0.18), transparent 26%),
          linear-gradient(180deg, #06131d 0%, #0b2631 48%, #071820 100%);
        transition: opacity 1.25s ease, visibility 1.25s ease;
      }

      .loader.is-hidden {
        opacity: 0;
        visibility: hidden;
      }

      .loader::before,
      .loader::after {
        content: "";
        position: absolute;
        pointer-events: none;
      }

      .loader::before {
        inset: 0;
        background:
          linear-gradient(180deg, rgba(143, 228, 238, 0.08), transparent 42%),
          repeating-linear-gradient(180deg, rgba(255,255,255,.055) 0 1px, transparent 1px 8px);
        opacity: 0.48;
        animation: horizonAtmosphere 2.4s ease-in-out forwards;
      }

      .loader::after {
        left: -18%;
        right: -18%;
        top: 49%;
        height: 2px;
        background:
          linear-gradient(90deg, transparent 0%, rgba(255,255,255,.14) 18%, rgba(251,215,132,.96) 48%, rgba(143,228,238,.9) 52%, rgba(255,255,255,.14) 82%, transparent 100%);
        box-shadow: 0 0 34px rgba(143, 228, 238, 0.65), 0 0 76px rgba(251, 215, 132, 0.35);
        transform: scaleX(0);
        transform-origin: center;
        animation: horizonLine 1.5s cubic-bezier(.2,.8,.2,1) forwards;
      }

      .horizon-glow,
      .horizon-line,
      .digital-grid,
      .digital-rain {
        position: absolute;
        pointer-events: none;
      }

      .horizon-glow {
        left: 50%;
        top: 49%;
        width: min(900px, 120vw);
        height: min(340px, 44vw);
        border-radius: 50%;
        background: radial-gradient(ellipse, rgba(143, 228, 238, 0.28) 0%, rgba(251, 215, 132, 0.16) 28%, transparent 66%);
        filter: blur(20px);
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.72);
        animation: horizonGlow 1.7s ease-out forwards;
      }

      .horizon-line {
        left: 50%;
        top: 49%;
        width: 1px;
        height: 58vh;
        background: linear-gradient(180deg, transparent, rgba(255,255,255,.28), transparent);
        opacity: 0;
        transform: translate(-50%, -50%) rotate(90deg) scaleY(0);
        animation: horizonSweep 1.65s cubic-bezier(.2,.8,.2,1) forwards;
      }

      .digital-grid {
        inset: -12%;
        background:
          linear-gradient(rgba(143, 228, 238, 0.12) 1px, transparent 1px),
          linear-gradient(90deg, rgba(143, 228, 238, 0.1) 1px, transparent 1px),
          linear-gradient(115deg, transparent 0 45%, rgba(255,255,255,.18) 50%, transparent 56% 100%);
        background-size: 68px 68px, 68px 68px, 220% 100%;
        mix-blend-mode: screen;
        opacity: 0;
        transform: perspective(720px) rotateX(58deg) translateY(12%);
        transform-origin: center bottom;
        animation: digitalGridOpen 2.25s cubic-bezier(.2,.8,.2,1) forwards;
      }

      .digital-rain {
        inset: 0;
        overflow: hidden;
      }

      .digital-rain span {
        position: absolute;
        top: 50%;
        width: 2px;
        height: 72px;
        border-radius: 999px;
        background: linear-gradient(180deg, transparent, rgba(143, 228, 238, .78), rgba(251, 215, 132, .72), transparent);
        box-shadow: 0 0 22px rgba(143, 228, 238, 0.62);
        opacity: 0;
        animation: dataRise 1.55s ease-out forwards;
      }

      .digital-rain span:nth-child(1) { left: 12%; animation-delay: .18s; }
      .digital-rain span:nth-child(2) { left: 28%; animation-delay: .34s; height: 104px; }
      .digital-rain span:nth-child(3) { left: 44%; animation-delay: .08s; height: 86px; }
      .digital-rain span:nth-child(4) { left: 62%; animation-delay: .28s; height: 112px; }
      .digital-rain span:nth-child(5) { left: 78%; animation-delay: .14s; height: 74px; }
      .digital-rain span:nth-child(6) { left: 90%; animation-delay: .42s; height: 96px; }

      .loader-mark {
        position: relative;
        z-index: 1;
        width: 132px;
        height: 132px;
        display: grid;
        place-items: center;
        color: #fff;
        font: 700 18px/1 Georgia, "Times New Roman", serif;
        text-shadow: 0 10px 34px rgba(7, 24, 32, 0.28);
        animation: markFloat 1.8s ease-in-out forwards;
      }

      .loader-mark::before,
      .loader-mark::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.22);
      }

      .loader-mark::before {
        border-top-color: var(--gold);
        animation: spin 1.2s linear infinite;
      }

      .loader-mark::after {
        inset: 18px;
        border-right-color: var(--aqua);
        animation: spin 1.8s linear infinite reverse;
      }

      .progress-bar {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 80;
        width: 100%;
        height: 3px;
        background: linear-gradient(90deg, var(--gold), var(--aqua));
        transform: scaleX(var(--progress, 0));
        transform-origin: left;
        box-shadow: 0 0 22px rgba(143, 228, 238, 0.65);
      }

      .cursor-glow {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 60;
        width: 260px;
        height: 260px;
        pointer-events: none;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(143, 228, 238, 0.18), rgba(251, 215, 132, 0.08) 34%, transparent 66%);
        mix-blend-mode: screen;
        opacity: 0.8;
        transform: translate3d(calc(var(--cursor-x, -400px) - 130px), calc(var(--cursor-y, -400px) - 130px), 0);
        transition: transform 0.12s ease-out;
      }

      .sound-toggle {
        position: fixed;
        right: 28px;
        bottom: 28px;
        z-index: 82;
        display: inline-flex;
        align-items: center;
        gap: 12px;
        min-height: 48px;
        padding: 12px 16px 12px 13px;
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 999px;
        color: #fff;
        background:
          radial-gradient(circle at 30% 20%, rgba(143, 228, 238, 0.18), transparent 32%),
          rgba(7, 24, 32, 0.58);
        box-shadow: 0 18px 70px rgba(0, 0, 0, 0.28);
        backdrop-filter: blur(18px);
        cursor: pointer;
        font: 900 11px/1 -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        transition: transform 0.28s ease, border-color 0.28s ease, background 0.28s ease;
      }

      .sound-toggle:hover {
        transform: translateY(-3px);
        border-color: rgba(143, 228, 238, 0.56);
        background:
          radial-gradient(circle at 30% 20%, rgba(251, 215, 132, 0.18), transparent 32%),
          rgba(255, 255, 255, 0.1);
      }

      .sound-icon {
        position: relative;
        width: 22px;
        height: 22px;
        display: inline-grid;
        place-items: center;
      }

      .sound-icon::before,
      .sound-icon::after {
        content: "";
        display: block;
        width: 3px;
        height: 14px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.72);
        box-shadow:
          7px 0 0 rgba(255, 255, 255, 0.44),
          -7px 0 0 rgba(255, 255, 255, 0.44);
      }

      .sound-icon::after {
        position: absolute;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(143, 228, 238, 0.36), transparent 62%);
        box-shadow: none;
        opacity: 0;
        transform: scale(0.72);
      }

      .sound-toggle.is-playing {
        border-color: rgba(251, 215, 132, 0.5);
      }

      .sound-toggle.is-playing .sound-icon::before {
        animation: soundBars 0.8s ease-in-out infinite alternate;
      }

      .sound-toggle.is-playing .sound-icon::after {
        opacity: 1;
        animation: soundPulse 1.6s ease-in-out infinite;
      }

      .page {
        position: relative;
        min-height: 100vh;
        overflow: hidden;
        background: linear-gradient(180deg, #0b2631 0%, #071820 64%, #071820 100%);
      }

      .page::before {
        content: "";
        position: fixed;
        inset: -30%;
        z-index: 0;
        pointer-events: none;
        background:
          radial-gradient(circle at calc(28% + var(--mouse-x, 0px)) calc(20% + var(--mouse-y, 0px)), rgba(143, 228, 238, 0.07), transparent 18%),
          radial-gradient(circle at 78% 72%, rgba(251, 215, 132, 0.045), transparent 16%);
        animation: ambientFlow 18s ease-in-out infinite alternate;
      }

      .hero {
        position: relative;
        min-height: 1080px;
        isolation: isolate;
        overflow: hidden;
        animation: heroWake 2.2s cubic-bezier(.2,.8,.2,1) both;
      }

      .hero > .veil::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background:
          linear-gradient(90deg, transparent 0 16%, rgba(143, 228, 238, 0.18) 18%, transparent 21% 100%),
          repeating-linear-gradient(90deg, transparent 0 96px, rgba(255,255,255,.055) 96px 97px, transparent 97px 160px);
        mix-blend-mode: screen;
        opacity: 0;
        transform: translateX(-24%);
        animation: digitalHeroSweep 2.2s cubic-bezier(.2,.8,.2,1) 0.38s both;
      }

      #ambient-canvas {
        position: fixed;
        inset: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        pointer-events: none;
        opacity: 0.36;
        mix-blend-mode: screen;
      }

      .hero::before,
      .hero::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
      }

      .hero::before {
        z-index: 1;
        background:
          radial-gradient(circle at 84% 20%, rgba(143, 228, 238, 0.2), transparent 18%),
          radial-gradient(circle at 58% 28%, rgba(251, 215, 132, 0.08), transparent 16%),
          linear-gradient(110deg, transparent 0 38%, rgba(255, 255, 255, 0.06) 45%, transparent 54% 100%);
        mix-blend-mode: screen;
        opacity: 0.54;
        animation: heroLightBloom 2.4s cubic-bezier(.2,.8,.2,1) both;
      }

      .hero::after {
        z-index: 2;
        background:
          repeating-linear-gradient(180deg, rgba(255,255,255,.06) 0 1px, transparent 1px 7px),
          linear-gradient(180deg, transparent 0 74%, rgba(7, 24, 32, 0.78) 100%);
        opacity: 0.42;
        animation: scanLines 8s linear infinite;
      }

      .hero-photo,
      .grain {
        position: absolute;
        inset: 0;
        pointer-events: none;
      }

      .hero-photo {
        z-index: -8;
        background:
          linear-gradient(90deg, rgba(7, 24, 32, 0.48) 0%, rgba(7, 24, 32, 0.25) 34%, rgba(7, 24, 32, 0.02) 72%, rgba(7, 24, 32, 0.04) 100%),
          linear-gradient(180deg, rgba(7, 24, 32, 0) 0%, rgba(7, 24, 32, 0) 52%, rgba(7, 24, 32, 0.46) 100%),
          url("assets/main-hero-v2.png") center 45% / cover no-repeat;
        filter: blur(10px) saturate(0.9) brightness(0.82);
        transform: scale(1.14) translate3d(0, calc(var(--scroll-y, 0px) * 0.03), 0);
        animation:
          cinematicBlurIn 2.15s cubic-bezier(.2,.8,.2,1) 0.15s both,
          heroDrift 22s ease-in-out 2.15s infinite alternate;
      }

      .grain {
        z-index: 1;
        opacity: 0.12;
        background-image:
          radial-gradient(circle at 20% 30%, rgba(255,255,255,.1) 0 1px, transparent 1px),
          linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255,255,255,.024) 1px, transparent 1px);
        background-size: 9px 9px, 96px 96px, 96px 96px;
        mask-image: linear-gradient(180deg, transparent, #000 20%, #000 70%, transparent);
        animation: grainShift 9s steps(6) infinite;
      }

      .veil {
        position: absolute;
        inset: 0;
        z-index: 0;
        background:
          radial-gradient(ellipse at 27% 38%, rgba(7, 24, 32, 0.32), transparent 34%),
          linear-gradient(180deg, rgba(11, 29, 38, 0) 0%, rgba(11, 29, 38, 0.02) 62%, #071820 100%);
      }

      .water-light {
        position: absolute;
        inset: 42% 0 0;
        z-index: 2;
        pointer-events: none;
        background:
          linear-gradient(102deg, transparent 0 20%, rgba(255,255,255,.08) 28%, transparent 38% 100%),
          repeating-linear-gradient(172deg, rgba(143, 228, 238, 0.065) 0 2px, transparent 2px 22px);
        mix-blend-mode: screen;
        opacity: 0.18;
        filter: blur(0.3px);
        transform: translateX(-8%);
        animation: waterShimmer 11s ease-in-out infinite alternate;
        mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 78%, transparent 100%);
      }

      .aurora {
        position: absolute;
        inset: -20% -10%;
        z-index: 2;
        pointer-events: none;
        background:
          radial-gradient(circle at 68% 32%, rgba(143, 228, 238, 0.08), transparent 18%),
          radial-gradient(circle at 38% 52%, rgba(251, 215, 132, 0.06), transparent 16%),
          linear-gradient(115deg, transparent 18%, rgba(255,255,255,.055) 46%, transparent 58%);
        filter: blur(12px);
        mix-blend-mode: screen;
        opacity: 0.38;
        animation: auroraMove 14s ease-in-out infinite alternate;
      }

      .motion-field {
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;
        overflow: hidden;
      }

      .motion-field span {
        position: absolute;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.36);
        box-shadow: 0 0 14px rgba(143, 228, 238, 0.46);
        opacity: 0;
        animation: particleRise 12s linear infinite;
      }

      .motion-field span:nth-child(1) { left: 8%; top: 78%; animation-delay: 0s; }
      .motion-field span:nth-child(2) { left: 18%; top: 88%; animation-delay: 1.6s; transform: scale(.6); }
      .motion-field span:nth-child(3) { left: 31%; top: 72%; animation-delay: 3.1s; transform: scale(.8); }
      .motion-field span:nth-child(4) { left: 48%; top: 82%; animation-delay: 4.4s; transform: scale(.55); }
      .motion-field span:nth-child(5) { left: 64%; top: 76%; animation-delay: 5.8s; transform: scale(.7); }
      .motion-field span:nth-child(6) { left: 84%; top: 86%; animation-delay: 7.2s; transform: scale(.9); }
      .motion-field span:nth-child(7),
      .motion-field span:nth-child(8) { display: none; }

      .header {
        position: absolute;
        z-index: 5;
        top: 34px;
        left: 78px;
        right: 78px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-height: 72px;
        padding: 0 22px;
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 999px;
        background: rgba(7, 24, 32, 0.22);
        box-shadow: 0 24px 80px rgba(2, 15, 20, 0.22);
        backdrop-filter: blur(18px);
        font-size: 14px;
        font-weight: 700;
        opacity: 0;
        animation: glassNavDrop 1.05s cubic-bezier(.2,.8,.2,1) 1.2s both;
      }

      .logo {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-size: 28px;
        font-family: Georgia, "Times New Roman", serif;
        letter-spacing: 0;
      }

      .logo img {
        width: 34px;
        height: 34px;
        object-fit: contain;
        opacity: 0.82;
        filter: drop-shadow(0 0 18px rgba(143, 228, 238, 0.24));
      }

      .logo span {
        display: inline-block;
      }

      .nav {
        display: flex;
        gap: 24px;
        align-items: center;
        color: rgba(255, 255, 255, 0.86);
        white-space: nowrap;
      }

      .nav a {
        position: relative;
        padding: 8px 0;
      }

      .nav a::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 1px;
        background: linear-gradient(90deg, var(--gold), var(--aqua));
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.25s ease;
      }

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

      .account {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 42px;
        padding: 0 18px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.18);
      }

      .side-social {
        position: absolute;
        z-index: 4;
        left: 78px;
        top: 390px;
        display: grid;
        gap: 22px;
        place-items: center;
        color: var(--muted);
        font-size: 14px;
        writing-mode: vertical-rl;
      }

      .side-progress {
        position: absolute;
        z-index: 4;
        right: 78px;
        top: 365px;
        display: grid;
        gap: 30px;
        justify-items: end;
        color: var(--muted);
        font-weight: 700;
      }

      .side-progress::after {
        content: "";
        position: absolute;
        right: -22px;
        top: 0;
        width: 3px;
        height: 246px;
        background: rgba(255, 255, 255, 0.3);
      }

      .side-progress::before {
        content: "";
        position: absolute;
        right: -22px;
        top: 0;
        width: 3px;
        height: 64px;
        background: #fff;
      }

      .hero-logo-mark {
        position: absolute;
        z-index: 2;
        right: clamp(72px, 12vw, 190px);
        top: 170px;
        width: clamp(180px, 22vw, 320px);
        aspect-ratio: 1;
        display: grid;
        place-items: center;
        pointer-events: none;
        opacity: 0.13;
        mix-blend-mode: screen;
        transform: translate3d(calc(var(--mouse-x, 0px) * 0.05), calc(var(--mouse-y, 0px) * 0.04), 0);
        animation: logoAura 7.5s ease-in-out 2s infinite;
      }

      .hero-logo-mark::before {
        content: "";
        position: absolute;
        inset: 9%;
        border: 1px solid rgba(143, 228, 238, 0.16);
        border-radius: 999px;
        background: radial-gradient(circle, rgba(143, 228, 238, 0.12), transparent 64%);
        filter: blur(0.2px);
      }

      .hero-logo-mark img {
        position: relative;
        width: 100%;
        height: 100%;
        object-fit: contain;
        filter: drop-shadow(0 0 26px rgba(255, 255, 255, 0.2));
      }

      .hero-copy {
        position: relative;
        z-index: 3;
        width: min(980px, calc(100vw - 320px));
        margin: 0 auto;
        padding-top: 242px;
        animation: copyRise 1.05s 1.05s cubic-bezier(.2,.8,.2,1) both;
        transform: translate3d(0, calc(var(--scroll-y, 0px) * -0.015), 0);
      }

      .kicker {
        display: flex;
        align-items: center;
        gap: 28px;
        margin: 0 0 32px;
        color: var(--gold);
        font-size: 15px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.08em;
      }

      .kicker::before {
        content: "";
        width: 72px;
        height: 2px;
        background: var(--gold);
      }

      h1 {
        max-width: 980px;
        margin: 0;
        font-family: "Hiragino Mincho ProN", "Yu Mincho", Georgia, serif;
        font-size: clamp(50px, 5.8vw, 88px);
        line-height: 1.16;
        font-weight: 600;
        letter-spacing: 0;
        text-shadow: 0 18px 54px rgba(0, 0, 0, 0.36);
      }

      h1 .title-line {
        display: block;
        white-space: nowrap;
      }

      h1 .type-char {
        display: inline-block;
        opacity: 0;
        transform: translateY(10px);
        animation: typeChar 0.18s ease-out forwards;
        animation-delay: calc(1.52s + (0.078s * var(--i)));
      }

      h1 .space {
        display: inline-block;
        width: 0.18em;
      }

      h1.typewriter-title::after {
        content: "";
        display: inline-block;
        width: 0.08em;
        height: 0.82em;
        margin-left: 0.08em;
        border-radius: 999px;
        background: linear-gradient(180deg, var(--gold), var(--aqua));
        box-shadow: 0 0 22px rgba(143, 228, 238, 0.32);
        transform: translateY(0.1em);
        opacity: 0;
        animation: caretBlink 0.95s steps(2, start) 1.52s infinite;
      }

      h1.typewriter-title.is-typed::after {
        opacity: 0.48;
        animation-duration: 1.4s;
      }

      .hero-lead {
        max-width: 610px;
        margin: 34px 0 0;
        color: rgba(255, 255, 255, 0.82);
        font-size: 18px;
        line-height: 2;
      }

      .hero-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 42px;
      }

      .hero-meta span {
        display: inline-flex;
        align-items: center;
        min-height: 38px;
        padding: 0 15px;
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.08);
        color: rgba(255, 255, 255, 0.78);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
        backdrop-filter: blur(12px);
        font-size: 12px;
        font-weight: 800;
        text-transform: uppercase;
        transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
      }

      .hero-meta span:hover {
        transform: translateY(-3px);
        border-color: rgba(251, 215, 132, 0.5);
        background: rgba(255, 255, 255, 0.14);
      }

      .scroll {
        display: inline-flex;
        gap: 14px;
        align-items: center;
        margin-top: 34px;
        color: rgba(255, 255, 255, 0.9);
        font-weight: 700;
      }

      .scroll::before {
        content: "";
        width: 40px;
        height: 40px;
        border: 1px solid rgba(255, 255, 255, 0.22);
        border-radius: 50%;
        background:
          linear-gradient(var(--gold), var(--gold)) center / 2px 16px no-repeat,
          rgba(255, 255, 255, 0.06);
        animation: pulseRing 1.9s ease-in-out infinite;
      }

      .glass-panel {
        position: absolute;
        z-index: 4;
        right: 78px;
        bottom: 160px;
        width: 310px;
        padding: 22px;
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 8px;
        background: rgba(7, 24, 32, 0.2);
        box-shadow: 0 30px 90px rgba(2, 15, 20, 0.24);
        backdrop-filter: blur(22px);
        overflow: hidden;
        opacity: 0;
        animation:
          panelArrive 1s cubic-bezier(.2,.8,.2,1) 1.55s both,
          floatPanel 5.5s ease-in-out 2.55s infinite;
        transform: translate3d(calc(var(--mouse-x, 0px) * -0.015), calc(var(--mouse-y, 0px) * -0.015), 0);
      }

      .glass-panel::before {
        content: "";
        position: absolute;
        right: -18px;
        bottom: -24px;
        width: 132px;
        height: 132px;
        background: url("assets/ain-logo.png") center / contain no-repeat;
        opacity: 0.08;
        mix-blend-mode: screen;
        filter: drop-shadow(0 0 22px rgba(143, 228, 238, 0.26));
      }

      .glass-panel small {
        position: relative;
        z-index: 1;
        display: block;
        margin-bottom: 12px;
        color: var(--gold);
        font-size: 11px;
        font-weight: 900;
        letter-spacing: 0.16em;
        text-transform: uppercase;
      }

      .glass-panel p {
        position: relative;
        z-index: 1;
        margin: 0;
        color: rgba(255, 255, 255, 0.82);
        line-height: 1.8;
        font-size: 14px;
      }

      .content {
        position: relative;
        z-index: 2;
        max-width: 1200px;
        margin: -110px auto 0;
        padding: 0 70px 150px;
      }

      .story {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 420px;
        gap: 110px;
        align-items: center;
        margin-bottom: 180px;
      }

      .story.wide {
        grid-template-columns: 1fr;
      }

      .story.wide .story-copy {
        max-width: none;
      }

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

      html.has-reveal .reveal {
        opacity: 0;
        transform: translateY(34px);
        transition: opacity 0.8s ease, transform 0.8s ease;
      }

      html.has-reveal .reveal.is-visible {
        opacity: 1;
        transform: translateY(0);
      }

      .story:nth-child(even) {
        grid-template-columns: 420px minmax(0, 1fr);
      }

      .story:nth-child(even) .story-copy {
        order: 2;
      }

      .story.reverse {
        grid-template-columns: 420px minmax(0, 1fr);
      }

      .story.reverse .story-copy {
        order: 2;
      }

      .story.wide,
      .story.wide.motion-gallery {
        grid-template-columns: 1fr;
      }

      .story.wide .story-copy,
      .story.wide.motion-gallery .story-copy {
        order: 0;
      }

      .story-copy {
        position: relative;
      }

      .number {
        position: absolute;
        left: -92px;
        top: -86px;
        color: rgba(255, 255, 255, 0.08);
        font-size: 214px;
        font-weight: 800;
        line-height: 1;
        text-shadow: 0 0 70px rgba(143, 228, 238, 0.08);
        animation: numberFloat 7s ease-in-out infinite;
      }

      .story h2 {
        margin: 0 0 28px;
        font-family: "Hiragino Mincho ProN", "Yu Mincho", Georgia, serif;
        font-size: 56px;
        line-height: 1.25;
        font-weight: 600;
      }

      .story p {
        margin: 0 0 28px;
        color: var(--muted);
        font-size: 17px;
        line-height: 2;
      }

      .readmore {
        color: var(--gold);
        font-weight: 800;
        display: inline-flex;
        transition: transform 0.25s ease, color 0.25s ease;
      }

      .readmore:hover {
        color: var(--aqua);
        transform: translateX(6px);
      }

      .photo {
        height: 560px;
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 44%),
          linear-gradient(135deg, rgba(251, 215, 132, 0.18), rgba(12, 68, 86, 0.34)),
          #102b35;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.12);
        box-shadow: 0 36px 110px rgba(2, 15, 20, 0.26);
        position: relative;
        transform: translateZ(0);
        transition: transform 0.45s ease, box-shadow 0.45s ease, border-color 0.45s ease;
      }

      .photo::after {
        content: "";
        position: absolute;
        inset: -40%;
        background:
          radial-gradient(circle at 30% 20%, rgba(255,255,255,.18), transparent 18%),
          linear-gradient(115deg, transparent 0 38%, rgba(143, 228, 238, .22) 47%, transparent 56% 100%);
        mix-blend-mode: screen;
        opacity: 0;
        transform: rotate(12deg) translateX(-18%);
        transition: opacity .45s ease;
        animation: cardGlow 7s ease-in-out infinite;
      }

      .photo:hover {
        transform: translateY(-10px) scale(1.015);
        border-color: rgba(251, 215, 132, 0.34);
        box-shadow: 0 46px 130px rgba(2, 15, 20, 0.36);
      }

      .photo::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(115deg, transparent 0 34%, rgba(255,255,255,.24) 48%, transparent 62% 100%);
        transform: translateX(-115%);
        transition: transform 0.8s ease;
        z-index: 1;
      }

      .photo:hover::before {
        transform: translateX(115%);
      }

      .photo:hover::after {
        opacity: 1;
      }

      .photo.mountain {
        background:
          linear-gradient(180deg, rgba(7, 24, 32, 0.02), rgba(7, 24, 32, 0.28)),
          url("assets/about-ai-niigata.png") center bottom / cover no-repeat;
      }

      .photo.workshop {
        background:
          linear-gradient(180deg, rgba(7, 24, 32, 0.02), rgba(7, 24, 32, 0.5)),
          url("assets/asamoya-hero.png") center / cover;
      }

      .asamooya-note,
      .asamoya-note {
        position: absolute;
        left: 24px;
        right: 24px;
        bottom: 24px;
        z-index: 2;
        padding: 18px;
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 8px;
        background: rgba(7, 24, 32, 0.28);
        backdrop-filter: blur(16px);
      }

      .asamoya-note small {
        display: block;
        margin-bottom: 8px;
        color: var(--gold);
        font-size: 11px;
        font-weight: 900;
        letter-spacing: 0.14em;
        text-transform: uppercase;
      }

      .asamoya-note span {
        color: rgba(255, 255, 255, 0.86);
        font-size: 14px;
        font-weight: 800;
      }

      .photo.sea-card {
        background:
          linear-gradient(180deg, rgba(7, 24, 32, 0.02), rgba(7, 24, 32, 0.48)),
          url("assets/main-hero-v2.png") 72% 34% / cover;
        position: relative;
      }

      .photo.sea-card::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(251, 215, 132, 0.18), transparent 38%, rgba(143, 228, 238, 0.16));
      }

      .motion-gallery {
        position: relative;
        margin-top: -18px;
      }

      .motion-gallery::before {
        content: "";
        position: absolute;
        inset: 22% -10% auto;
        height: 260px;
        pointer-events: none;
        background:
          linear-gradient(90deg, transparent, rgba(143, 228, 238, 0.14), transparent),
          repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 72px);
        mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
        transform: skewY(-3deg);
        animation: galleryScan 12s linear infinite;
      }

      .motion-gallery .story-copy {
        max-width: 760px;
      }

      .activity-stage {
        position: relative;
        width: calc(100vw - 140px);
        margin: 48px 50% 0;
        transform: translateX(-50%);
        overflow: hidden;
        padding: 34px 0 38px;
        border-top: 1px solid rgba(255, 255, 255, 0.11);
        border-bottom: 1px solid rgba(255, 255, 255, 0.11);
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 22%, transparent 78%, rgba(255, 255, 255, 0.035)),
          rgba(7, 24, 32, 0.18);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -1px 0 rgba(255, 255, 255, 0.05);
      }

      .activity-stage::before,
      .activity-stage::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 130px;
        pointer-events: none;
        z-index: 4;
      }

      .activity-stage::before {
        left: 0;
        background: linear-gradient(90deg, var(--deep), rgba(7, 24, 32, 0));
      }

      .activity-stage::after {
        right: 0;
        background: linear-gradient(270deg, var(--deep), rgba(7, 24, 32, 0));
      }

      .activity-track {
        display: flex;
        width: max-content;
        gap: 18px;
        will-change: transform;
        animation: filmSlide 54s linear infinite;
      }

      .activity-stage:hover .activity-track {
        animation-play-state: paused;
      }

      .activity-card {
        position: relative;
        z-index: 1;
        flex: 0 0 clamp(210px, 20vw, 280px);
        height: clamp(250px, 25vw, 330px);
        overflow: hidden;
        margin: 0;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 8px;
        background: rgba(7, 24, 32, 0.36);
        box-shadow: 0 28px 95px rgba(0, 0, 0, 0.24);
        transform: translateY(var(--lift, 0)) rotate(var(--tilt, 0deg));
        transition: transform 0.42s ease, border-color 0.42s ease, box-shadow 0.42s ease, filter 0.42s ease;
        isolation: isolate;
      }

      .activity-card::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background:
          linear-gradient(180deg, rgba(7, 24, 32, 0) 42%, rgba(7, 24, 32, 0.76) 100%),
          linear-gradient(120deg, transparent 0 34%, rgba(255, 255, 255, 0.18) 48%, transparent 62% 100%);
        mix-blend-mode: screen;
        opacity: 0.72;
      }

      .activity-card::after {
        content: "";
        position: absolute;
        inset: -30%;
        z-index: 2;
        pointer-events: none;
        background: linear-gradient(120deg, transparent 0 42%, rgba(143, 228, 238, 0.22) 50%, transparent 58% 100%);
        transform: translateX(-48%) rotate(12deg);
        animation: cardSweep 8.4s ease-in-out infinite;
      }

      .activity-card:hover {
        z-index: 5;
        border-color: rgba(251, 215, 132, 0.52);
        box-shadow: 0 52px 140px rgba(0, 0, 0, 0.38);
        transform: translateY(calc(var(--lift, 0) - 14px)) rotate(0deg) scale(1.035);
      }

      .activity-card img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: saturate(0.9) contrast(1.06) brightness(0.9);
        transform: scale(1.04);
        transition: transform 0.7s ease, filter 0.7s ease;
      }

      .activity-card:hover img {
        filter: saturate(1.04) contrast(1.1) brightness(1);
        transform: scale(1.1);
      }

      .activity-card figcaption {
        position: absolute;
        left: 18px;
        right: 18px;
        bottom: 16px;
        z-index: 3;
        color: rgba(255, 255, 255, 0.86);
        font-size: 13px;
        font-weight: 800;
        line-height: 1.55;
        text-shadow: 0 2px 18px rgba(0, 0, 0, 0.38);
      }

      .activity-card figcaption span {
        display: block;
        margin-bottom: 4px;
        color: var(--gold);
        font-size: 10px;
        font-weight: 900;
        letter-spacing: 0.14em;
        text-transform: uppercase;
      }

      .card-large {
        --lift: 8px;
        --tilt: -0.8deg;
        flex-basis: clamp(280px, 27vw, 360px);
      }

      .card-wide {
        --lift: -8px;
        --tilt: 0.7deg;
        flex-basis: clamp(300px, 30vw, 420px);
        height: clamp(245px, 24vw, 310px);
      }

      .card-portrait {
        --lift: 10px;
        --tilt: -0.6deg;
        flex-basis: clamp(210px, 20vw, 280px);
      }

      .card-flyer {
        --lift: -6px;
        --tilt: 0.8deg;
        flex-basis: clamp(210px, 20vw, 280px);
      }

      .card-medium {
        --lift: 8px;
        --tilt: -0.5deg;
        flex-basis: clamp(300px, 30vw, 410px);
        height: clamp(245px, 24vw, 310px);
      }

      .card-small {
        --lift: -8px;
        --tilt: 0.9deg;
        flex-basis: clamp(260px, 27vw, 360px);
        height: clamp(245px, 24vw, 310px);
      }

      .card-mini {
        --lift: 8px;
        --tilt: -0.7deg;
        flex-basis: clamp(290px, 29vw, 400px);
        height: clamp(245px, 24vw, 310px);
      }

      .card-tall {
        --lift: -6px;
        --tilt: 0.7deg;
        flex-basis: clamp(210px, 20vw, 280px);
      }

      .card-poster {
        --lift: 8px;
        --tilt: -0.7deg;
        flex-basis: clamp(210px, 20vw, 280px);
      }

      .card-long {
        --lift: -8px;
        --tilt: 0.6deg;
        flex-basis: clamp(310px, 32vw, 450px);
        height: clamp(245px, 24vw, 310px);
      }

      .activity-more {
        margin-top: 24px;
      }

      .footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 30px;
        padding-top: 20px;
        color: rgba(255, 255, 255, 0.55);
      }

      .footer strong {
        display: inline-flex;
        align-items: center;
        gap: 10px;
      }

      .footer strong img {
        width: 28px;
        height: 28px;
        object-fit: contain;
        opacity: 0.5;
      }

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

      .journal-card {
        min-height: 260px;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 8px;
        background:
          linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.035)),
          rgba(7, 24, 32, 0.3);
        box-shadow: 0 28px 90px rgba(2, 15, 20, 0.2);
        backdrop-filter: blur(16px);
        overflow: hidden;
        transition: transform 0.32s ease, border-color 0.32s ease, background 0.32s ease;
      }

      .journal-card:hover {
        transform: translateY(-8px);
        border-color: rgba(251, 215, 132, 0.45);
        background:
          linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.05)),
          rgba(7, 24, 32, 0.36);
      }

      .journal-card::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: radial-gradient(circle at var(--card-x, 50%) var(--card-y, 50%), rgba(143, 228, 238, 0.16), transparent 38%);
        opacity: 0;
        transition: opacity 0.25s ease;
      }

      .journal-card:hover::after {
        opacity: 1;
      }

      .journal-card small {
        display: block;
        margin-bottom: 18px;
        color: var(--gold);
        font-size: 11px;
        font-weight: 900;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }

      .journal-card strong {
        display: block;
        margin-bottom: 16px;
        color: #fff;
        font-size: 18px;
        line-height: 1.6;
      }

      .journal-card span {
        color: rgba(255, 255, 255, 0.62);
        font-size: 13px;
        font-weight: 800;
      }

      .journal-thumb {
        width: 100%;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        opacity: 0.86;
        filter: saturate(0.92) contrast(1.05);
        transition: transform 0.45s ease, opacity 0.45s ease;
      }

      .journal-card:hover .journal-thumb {
        transform: scale(1.07);
        opacity: 1;
      }

      .journal-body {
        display: block;
        padding: 20px;
      }

      .journal-loading {
        display: block;
        padding: 22px;
        color: rgba(255, 255, 255, 0.64);
        font-weight: 800;
      }

      .journal-more-link {
        display: inline-flex;
        align-items: center;
        margin-top: 28px;
        color: var(--gold);
        font-size: 14px;
        font-weight: 900;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        border-bottom: 1px solid rgba(251, 215, 132, 0.45);
        padding-bottom: 8px;
        transition: color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
      }

      .journal-more-link:hover {
        color: #fff;
        border-color: rgba(143, 228, 238, 0.65);
        transform: translateX(6px);
      }

      .post-date {
        display: inline-block;
        margin-top: 6px;
        color: rgba(255, 255, 255, 0.48);
        font-size: 12px;
        font-weight: 800;
      }

      .about-page {
        background:
          radial-gradient(circle at 78% 16%, rgba(143, 228, 238, 0.16), transparent 22%),
          linear-gradient(180deg, #0b2631 0%, #071820 62%, #071820 100%);
      }

      .about-detail-hero {
        position: relative;
        min-height: 920px;
        isolation: isolate;
        overflow: hidden;
      }

      .about-backdrop {
        position: absolute;
        inset: 0;
        z-index: -8;
        background:
          linear-gradient(90deg, rgba(7, 24, 32, 0.76) 0%, rgba(7, 24, 32, 0.32) 48%, rgba(7, 24, 32, 0.04) 100%),
          linear-gradient(180deg, rgba(7, 24, 32, 0) 0%, rgba(7, 24, 32, 0.08) 58%, #071820 100%),
          url("assets/about-ai-niigata.png") right 8% top / auto 100% no-repeat,
          linear-gradient(135deg, #7dc9f1 0%, #d9f2fb 52%, #0b2631 100%);
        transform: scale(1.03) translate3d(0, calc(var(--scroll-y, 0px) * 0.025), 0);
        animation: heroDrift 24s ease-in-out infinite alternate;
      }

      .about-detail-copy {
        position: relative;
        z-index: 8;
        width: min(980px, calc(100% - 112px));
        padding: 285px 0 0 7vw;
      }

      .about-detail-copy h1 {
        max-width: 980px;
        font-size: clamp(48px, 7vw, 104px);
        line-height: 1.02;
      }

      .about-tagline {
        max-width: 780px;
        margin: 28px 0 0;
        color: var(--gold);
        font-size: clamp(20px, 2.3vw, 34px);
        font-weight: 900;
        line-height: 1.5;
        text-shadow: 0 16px 34px rgba(0, 0, 0, 0.35);
      }

      .about-stats {
        position: relative;
        z-index: 9;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1px;
        width: min(880px, calc(100% - 56px));
        margin: 72px 0 0 7vw;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.07);
        box-shadow: 0 30px 100px rgba(0, 0, 0, 0.26);
        backdrop-filter: blur(20px);
      }

      .about-stats span {
        display: grid;
        gap: 8px;
        padding: 26px 28px;
        background: rgba(7, 24, 32, 0.42);
      }

      .about-stats strong {
        font: 800 30px/1 Georgia, "Times New Roman", serif;
      }

      .about-stats small {
        color: rgba(255, 255, 255, 0.58);
        font-size: 11px;
        font-weight: 900;
        letter-spacing: 0.16em;
        text-transform: uppercase;
      }

      .about-detail-content {
        position: relative;
        z-index: 4;
        width: min(1180px, calc(100% - 80px));
        margin: -70px auto 0;
        padding: 0 0 110px;
      }

      .about-intro {
        width: min(920px, 100%);
        margin: 0 auto 120px;
        padding: 62px 0 0;
        border-top: 1px solid rgba(255, 255, 255, 0.16);
      }

      .about-intro p {
        margin: 0 0 28px;
        color: rgba(255, 255, 255, 0.78);
        font-size: clamp(17px, 1.8vw, 22px);
        font-weight: 500;
        line-height: 2.05;
      }

      .achievement-section {
        margin-bottom: 120px;
      }

      .achievement-section h2,
      .member-section h2,
      .about-cta h2 {
        margin: 0 0 34px;
        font: 700 clamp(38px, 5vw, 70px)/1.08 Georgia, "Times New Roman", serif;
      }

      .section-heading {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 32px;
      }

      .achievement-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
      }

      .achievement-card {
        position: relative;
        min-height: 260px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        overflow: hidden;
        padding: 24px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 8px;
        background:
          radial-gradient(circle at var(--card-x, 50%) var(--card-y, 20%), rgba(143, 228, 238, 0.18), transparent 26%),
          linear-gradient(145deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.035));
        box-shadow: 0 24px 90px rgba(0, 0, 0, 0.18);
        transition: transform 0.42s ease, border-color 0.42s ease, background 0.42s ease;
      }

      .achievement-card::before {
        content: "";
        position: absolute;
        inset: -1px;
        pointer-events: none;
        background: linear-gradient(120deg, transparent 0 26%, rgba(255,255,255,.18) 42%, transparent 58% 100%);
        opacity: 0;
        transform: translateX(-30%);
        transition: opacity 0.42s ease, transform 0.42s ease;
      }

      .achievement-card:hover {
        transform: translateY(-8px);
        border-color: rgba(143, 228, 238, 0.5);
        background:
          radial-gradient(circle at var(--card-x, 50%) var(--card-y, 20%), rgba(251, 215, 132, 0.18), transparent 24%),
          linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.05));
      }

      .achievement-card:hover::before {
        opacity: 1;
        transform: translateX(24%);
      }

      .achievement-card small {
        position: relative;
        z-index: 1;
        color: var(--gold);
        font-size: 11px;
        font-weight: 900;
        letter-spacing: 0.14em;
        text-transform: uppercase;
      }

      .achievement-card strong {
        position: relative;
        z-index: 1;
        margin-top: 34px;
        font-size: 20px;
        line-height: 1.55;
      }

      .achievement-card span {
        position: relative;
        z-index: 1;
        margin-top: 30px;
        color: rgba(255, 255, 255, 0.58);
        font-size: 12px;
        font-weight: 900;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .member-section {
        margin-bottom: 120px;
      }

      .member-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
        gap: 12px;
      }

      .member-card {
        position: relative;
        min-height: 214px;
        overflow: hidden;
        padding: 24px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 8px;
        background:
          radial-gradient(circle at var(--card-x, 48%) var(--card-y, 18%), rgba(251, 215, 132, 0.14), transparent 28%),
          linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.032));
        box-shadow: 0 24px 90px rgba(0, 0, 0, 0.17);
        transition: transform 0.42s ease, border-color 0.42s ease, background 0.42s ease;
      }

      .member-card::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background:
          linear-gradient(135deg, rgba(255,255,255,.12), transparent 32%),
          repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 18px);
        opacity: 0.38;
        mask-image: linear-gradient(180deg, #000, transparent 86%);
      }

      .member-card:hover {
        transform: translateY(-8px);
        border-color: rgba(251, 215, 132, 0.5);
        background:
          radial-gradient(circle at var(--card-x, 48%) var(--card-y, 18%), rgba(143, 228, 238, 0.2), transparent 28%),
          linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.045));
      }

      .member-index {
        position: absolute;
        right: 18px;
        top: 10px;
        color: rgba(255, 255, 255, 0.08);
        font: 800 86px/1 Georgia, "Times New Roman", serif;
      }

      .member-card small,
      .member-card strong,
      .member-card p {
        position: relative;
        z-index: 1;
      }

      .member-card small {
        display: inline-flex;
        margin-bottom: 34px;
        color: var(--gold);
        font-size: 12px;
        font-weight: 900;
        letter-spacing: 0.18em;
        text-transform: uppercase;
      }

      .member-card strong {
        display: block;
        font: 800 clamp(23px, 2.2vw, 34px)/1 Georgia, "Times New Roman", serif;
      }

      .member-card p {
        max-width: 360px;
        margin: 18px 0 0;
        color: rgba(255, 255, 255, 0.7);
        font-size: 14px;
        font-weight: 700;
        line-height: 1.8;
      }

      .about-cta {
        position: relative;
        overflow: hidden;
        padding: 62px;
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 8px;
        background:
          linear-gradient(120deg, rgba(143, 228, 238, 0.12), transparent 34%),
          rgba(255, 255, 255, 0.055);
      }

      .about-cta::after {
        content: "";
        position: absolute;
        right: -8%;
        bottom: -58%;
        width: 460px;
        aspect-ratio: 1;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(143, 228, 238, 0.18), transparent 62%);
        pointer-events: none;
      }

      .cta-lead {
        position: relative;
        z-index: 1;
        max-width: 760px;
        margin: -10px 0 28px;
        color: rgba(255, 255, 255, 0.76);
        font-size: clamp(16px, 1.7vw, 21px);
        font-weight: 700;
        line-height: 1.9;
      }

      .consult-link-grid {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        margin: 0 0 30px;
      }

      .consult-link-card {
        position: relative;
        overflow: hidden;
        min-height: 160px;
        padding: 22px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 8px;
        background:
          radial-gradient(circle at var(--card-x, 46%) var(--card-y, 20%), rgba(143, 228, 238, 0.16), transparent 28%),
          rgba(7, 24, 32, 0.38);
        transition: transform 0.36s ease, border-color 0.36s ease, background 0.36s ease;
      }

      .consult-link-card:hover {
        transform: translateY(-5px);
        border-color: rgba(251, 215, 132, 0.5);
        background:
          radial-gradient(circle at var(--card-x, 46%) var(--card-y, 20%), rgba(251, 215, 132, 0.18), transparent 28%),
          rgba(255, 255, 255, 0.075);
      }

      .consult-link-card small,
      .consult-link-card strong,
      .consult-link-card span {
        position: relative;
        z-index: 1;
        display: block;
      }

      .consult-link-card small {
        color: var(--gold);
        font-size: 11px;
        font-weight: 900;
        letter-spacing: 0.16em;
        text-transform: uppercase;
      }

      .consult-link-card strong {
        margin-top: 34px;
        font-size: 20px;
        line-height: 1.55;
      }

      .consult-link-card span {
        margin-top: 18px;
        color: rgba(255, 255, 255, 0.58);
        font-size: 12px;
        font-weight: 900;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .contact-methods {
        position: relative;
        z-index: 1;
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        margin-top: 28px;
      }

      .contact-method-card {
        position: relative;
        width: 64px;
        height: 64px;
        display: grid;
        place-items: center;
        overflow: hidden;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 999px;
        background:
          radial-gradient(circle at var(--card-x, 50%) var(--card-y, 20%), rgba(143, 228, 238, 0.17), transparent 30%),
          linear-gradient(145deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.03));
        box-shadow: 0 22px 80px rgba(0, 0, 0, 0.16);
        transition: transform 0.36s ease, border-color 0.36s ease, background 0.36s ease;
      }

      .contact-method-card::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(120deg, transparent 0 30%, rgba(255, 255, 255, 0.15) 46%, transparent 62% 100%);
        opacity: 0;
        transform: translateX(-34%);
        transition: opacity 0.36s ease, transform 0.36s ease;
      }

      .contact-method-card:hover {
        transform: translateY(-5px) scale(1.04);
        border-color: rgba(143, 228, 238, 0.52);
        background:
          radial-gradient(circle at var(--card-x, 50%) var(--card-y, 20%), rgba(251, 215, 132, 0.18), transparent 30%),
          linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.045));
      }

      .contact-method-card:hover::after {
        opacity: 1;
        transform: translateX(24%);
      }

      .contact-method-card small,
      .contact-method-card strong,
      .contact-method-card svg {
        position: relative;
        z-index: 1;
        display: block;
      }

      .contact-icon {
        width: 100%;
        height: 100%;
        display: grid;
        place-items: center;
        margin: 0;
        border: 0;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.08);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
      }

      .contact-icon svg {
        width: 27px;
        height: 27px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.75;
        stroke-linecap: round;
        stroke-linejoin: round;
      }

      .contact-icon-line {
        color: #a6f3b8;
        background: rgba(6, 199, 85, 0.13);
      }

      .contact-icon-instagram {
        color: #ffc2df;
        background: linear-gradient(145deg, rgba(255, 214, 102, 0.13), rgba(214, 41, 118, 0.15), rgba(79, 91, 213, 0.13));
      }

      .contact-icon-mail {
        color: var(--aqua);
      }

      @keyframes galleryScan {
        from { background-position: 0 0, 0 0; }
        to { background-position: 220px 0, 320px 0; }
      }

      @keyframes filmSlide {
        from { transform: translate3d(0, 0, 0); }
        to { transform: translate3d(calc(-50% - 9px), 0, 0); }
      }

      @keyframes galleryBeam {
        0%, 100% {
          opacity: 0.34;
          transform: rotate(-5deg) translateX(-8%);
        }
        50% {
          opacity: 0.88;
          transform: rotate(-5deg) translateX(8%);
        }
      }

      @keyframes softPulse {
        0%, 100% {
          opacity: 0.28;
          transform: scale(0.92);
        }
        50% {
          opacity: 0.58;
          transform: scale(1.08);
        }
      }

      @keyframes cardSweep {
        0%, 74%, 100% {
          opacity: 0;
          transform: translateX(-48%) rotate(12deg);
        }
        84% {
          opacity: 1;
        }
        96% {
          opacity: 0;
          transform: translateX(48%) rotate(12deg);
        }
      }

      @keyframes logoAura {
        0%, 100% {
          opacity: 0.1;
          transform: translate3d(calc(var(--mouse-x, 0px) * 0.05), calc(var(--mouse-y, 0px) * 0.04), 0) scale(0.98) rotate(-2deg);
        }
        50% {
          opacity: 0.18;
          transform: translate3d(calc(var(--mouse-x, 0px) * 0.05), calc(var(--mouse-y, 0px) * 0.04), 0) scale(1.03) rotate(2deg);
        }
      }

      @keyframes heroDrift {
        from { transform: scale(1.04) translate3d(0, 0, 0); }
        to { transform: scale(1.09) translate3d(-18px, -10px, 0); }
      }

      @keyframes cinematicBlurIn {
        0% {
          filter: blur(14px) saturate(0.86) brightness(0.72);
          transform: scale(1.16) translate3d(0, 0, 0);
        }
        62% {
          filter: blur(2.8px) saturate(1.04) brightness(1.02);
        }
        100% {
          filter: blur(0) saturate(1) brightness(1);
          transform: scale(1.04) translate3d(0, 0, 0);
        }
      }

      @keyframes heroWake {
        0% { clip-path: inset(0 0 8% 0); }
        100% { clip-path: inset(0 0 0 0); }
      }

      @keyframes heroLightBloom {
        0% { opacity: 0; transform: scaleX(0.72); }
        42% { opacity: 0.86; transform: scaleX(1.04); }
        100% { opacity: 0.54; transform: scaleX(1); }
      }

      @keyframes glassNavDrop {
        0% {
          opacity: 0;
          transform: translateY(-26px) scale(.985);
          backdrop-filter: blur(3px);
        }
        68% {
          opacity: 1;
          transform: translateY(3px) scale(1);
        }
        100% {
          opacity: 1;
          transform: translateY(0) scale(1);
          backdrop-filter: blur(18px);
        }
      }

      @keyframes grainShift {
        to { transform: translate3d(-18px, 12px, 0); }
      }

      @keyframes auroraMove {
        from { transform: translate3d(-24px, 8px, 0) rotate(-1deg); opacity: 0.54; }
        to { transform: translate3d(28px, -16px, 0) rotate(1deg); opacity: 0.95; }
      }

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

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

      @keyframes pulseRing {
        0%, 100% { box-shadow: 0 0 0 0 rgba(251, 215, 132, 0.32); }
        50% { box-shadow: 0 0 0 12px rgba(251, 215, 132, 0); }
      }

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

      @keyframes panelArrive {
        from { opacity: 0; transform: translateY(18px) scale(.98); }
        to { opacity: 1; transform: translateY(0) scale(1); }
      }

      @keyframes particleRise {
        0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.7); }
        14% { opacity: .72; }
        100% { opacity: 0; transform: translate3d(52px, -460px, 0) scale(1.5); }
      }

      @keyframes ambientFlow {
        from { transform: translate3d(-2%, -1%, 0) rotate(-2deg); }
        to { transform: translate3d(2%, 1%, 0) rotate(2deg); }
      }

      @keyframes spin {
        to { transform: rotate(1turn); }
      }

      @keyframes horizonLine {
        0% { transform: scaleX(0); opacity: 0; }
        18% { opacity: 1; }
        76% { transform: scaleX(1); opacity: 1; }
        100% { transform: scaleX(1.08); opacity: 0; }
      }

      @keyframes horizonGlow {
        0% { opacity: 0; transform: translate(-50%, -50%) scale(0.72); }
        45% { opacity: 1; }
        100% { opacity: 0; transform: translate(-50%, -50%) scale(1.28); }
      }

      @keyframes horizonSweep {
        0% { opacity: 0; transform: translate(-50%, -50%) rotate(90deg) scaleY(0); }
        22% { opacity: 0.8; }
        78% { opacity: 0.55; transform: translate(-50%, -50%) rotate(90deg) scaleY(1); }
        100% { opacity: 0; transform: translate(-50%, -50%) rotate(90deg) scaleY(1.15); }
      }

      @keyframes horizonAtmosphere {
        0% { opacity: 0.62; }
        100% { opacity: 0; }
      }

      @keyframes digitalGridOpen {
        0% {
          opacity: 0;
          background-position: 0 0, 0 0, 120% 0;
          transform: perspective(720px) rotateX(64deg) translateY(20%) scale(.88);
        }
        18% { opacity: 0.78; }
        58% {
          opacity: 0.64;
          background-position: 0 38px, 38px 0, 20% 0;
        }
        100% {
          opacity: 0;
          background-position: 0 74px, 74px 0, -60% 0;
          transform: perspective(720px) rotateX(58deg) translateY(4%) scale(1.16);
        }
      }

      @keyframes dataRise {
        0% { opacity: 0; transform: translateY(70px) scaleY(.28); }
        22% { opacity: .92; }
        72% { opacity: .72; transform: translateY(-42px) scaleY(1); }
        100% { opacity: 0; transform: translateY(-150px) scaleY(.62); }
      }

      @keyframes digitalHeroSweep {
        0% { opacity: 0; transform: translateX(-30%) skewX(-8deg); }
        22% { opacity: .7; }
        72% { opacity: .36; }
        100% { opacity: 0; transform: translateX(34%) skewX(-8deg); }
      }

      @keyframes markFloat {
        0% { opacity: 0; transform: translateY(14px) scale(.96); }
        28% { opacity: 1; }
        100% { opacity: .92; transform: translateY(0) scale(1); }
      }

      @keyframes scanLines {
        to { transform: translateY(56px); }
      }

      @keyframes waterShimmer {
        from { transform: translateX(-10%) skewY(-1deg); opacity: 0.18; }
        to { transform: translateX(8%) skewY(1deg); opacity: 0.44; }
      }

      @keyframes soundBars {
        from {
          height: 9px;
          box-shadow:
            7px 0 0 rgba(255, 255, 255, 0.44),
            -7px 0 0 rgba(255, 255, 255, 0.44);
        }
        to {
          height: 17px;
          box-shadow:
            7px 0 0 rgba(251, 215, 132, 0.72),
            -7px 0 0 rgba(143, 228, 238, 0.72);
        }
      }

      @keyframes soundPulse {
        0%, 100% { transform: scale(0.68); opacity: 0.28; }
        50% { transform: scale(1.15); opacity: 0.62; }
      }

      @keyframes charReveal {
        to {
          opacity: 1;
          transform: translateY(0) rotateX(0);
        }
      }

      @keyframes typeChar {
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      @keyframes caretBlink {
        0%, 48% { opacity: 1; }
        49%, 100% { opacity: 0; }
      }

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

      @keyframes cardGlow {
        0%, 70%, 100% { opacity: 0; transform: rotate(12deg) translateX(-20%); }
        82% { opacity: 0.8; transform: rotate(12deg) translateX(12%); }
      }

      @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
          animation: none !important;
          transition: none !important;
          scroll-behavior: auto !important;
        }
      }

      @media (max-width: 900px) {
        .header {
          left: 28px;
          right: 28px;
          border-radius: 22px;
          min-height: auto;
          align-items: flex-start;
          flex-direction: column;
          gap: 14px;
          padding: 18px 20px;
        }

        .account,
        .side-social,
        .side-progress {
          display: none;
        }

        .sound-toggle {
          right: 18px;
          bottom: 18px;
          min-height: 44px;
          padding: 10px 13px;
        }

        .sound-text {
          display: none;
        }

        .nav {
          display: flex;
          flex-wrap: wrap;
          gap: 8px 14px;
          font-size: 12px;
          line-height: 1.2;
        }

        .nav a {
          padding: 7px 10px;
          border: 1px solid rgba(255, 255, 255, 0.16);
          border-radius: 999px;
          background: rgba(255, 255, 255, 0.08);
        }

        .nav a::after {
          display: none;
        }

        .logo {
          font-size: 23px;
        }

        .logo img {
          width: 30px;
          height: 30px;
        }

        .hero {
          min-height: 840px;
        }

        .hero-copy {
          width: auto;
          padding: 250px 28px 0;
        }

        h1 {
          font-size: clamp(36px, 10.2vw, 46px);
        }

        .hero-lead {
          font-size: 15px;
        }

        .glass-panel {
          display: none;
        }

        .hero-logo-mark {
          right: 22px;
          top: 210px;
          width: 180px;
          opacity: 0.09;
        }

        .content {
          margin-top: -70px;
          padding: 0 28px 90px;
        }

        .hero-photo {
          background:
            linear-gradient(90deg, rgba(7, 24, 32, 0.62) 0%, rgba(7, 24, 32, 0.28) 62%, rgba(7, 24, 32, 0.08) 100%),
            linear-gradient(180deg, rgba(7, 24, 32, 0) 0%, rgba(7, 24, 32, 0.06) 54%, rgba(7, 24, 32, 0.62) 100%),
            url("assets/main-hero-v2.png") 48% 35% / cover no-repeat;
        }

        .story,
        .story:nth-child(even) {
          grid-template-columns: 1fr;
          gap: 38px;
          margin-bottom: 100px;
        }

        .story:nth-child(even) .story-copy,
        .story.reverse .story-copy,
        .story.wide .story-copy {
          order: 0;
        }

        .story.reverse,
        .story.wide,
        .story.wide.motion-gallery {
          grid-template-columns: 1fr;
        }

        .number {
          left: -8px;
          top: -72px;
          font-size: 150px;
        }

        .story h2 {
          font-size: 38px;
        }

        .photo {
          height: 360px;
        }

        .photo.mountain {
          height: 520px;
          background-size: cover;
          background-position: center bottom;
        }

        .activity-stage {
          display: block;
          width: calc(100vw - 56px);
          margin: 34px 50% 0;
          padding: 12px 0 34px;
          overflow: hidden;
          scroll-snap-type: none;
        }

        .activity-track {
          gap: 14px;
          animation-duration: 44s;
        }

        .activity-stage::before,
        .activity-stage::after,
        .motion-gallery::before {
          display: none;
        }

        .activity-card {
          flex: 0 0 78vw;
          height: 420px;
          grid-column: auto;
          grid-row: auto;
          transform: none;
        }

        .activity-card:hover {
          transform: translateY(-6px);
        }

        .card-flyer,
        .card-poster {
          flex-basis: 66vw;
        }

        .footer {
          flex-direction: column;
        }

        .journal-links {
          grid-template-columns: 1fr;
        }

        .about-detail-hero {
          min-height: 860px;
        }

        .about-detail-copy {
          width: auto;
          padding: 250px 28px 0;
        }

        .about-detail-copy h1 {
          font-size: 44px;
        }

        .about-stats {
          grid-template-columns: 1fr;
          width: calc(100% - 56px);
          margin: 52px 28px 0;
        }

        .about-detail-content {
          width: calc(100% - 56px);
          margin-top: -40px;
        }

        .achievement-grid {
          grid-template-columns: 1fr;
        }

        .section-heading {
          display: block;
        }

        .achievement-card {
          min-height: 210px;
        }

        .member-grid {
          grid-template-columns: 1fr;
        }

        .member-card {
          min-height: 190px;
        }

        .about-cta {
          padding: 38px 28px;
        }

        .consult-link-grid {
          grid-template-columns: 1fr;
        }

        .contact-methods {
          gap: 12px;
        }
      }