:root {
      --ink: #17203b;
      --ink-soft: #505b74;
      --night: #101633;
      --night-2: #19244c;
      --paper: #f7f5ef;
      --white: #ffffff;
      --gold: #f4c95d;
      --gold-deep: #d8a936;
      --aqua: #5ed5cf;
      --coral: #ee786c;
      --line: rgba(23, 32, 59, .13);
      --shadow: 0 22px 60px rgba(16, 22, 51, .12);
      --radius: 1.5rem;
      --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", "Noto Sans", Arial, sans-serif;
      --serif: "Noto Serif SC", "Songti SC", Georgia, serif;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--ink);
      background: var(--paper);
      font-family: var(--sans);
      font-size: 16px;
      line-height: 1.72;
      text-rendering: optimizeLegibility;
    }
    a { color: inherit; }
    button, a { -webkit-tap-highlight-color: transparent; }
    .skip-link {
      position: fixed;
      top: .75rem;
      left: .75rem;
      z-index: 99;
      padding: .7rem 1rem;
      border-radius: 999px;
      background: var(--white);
      color: var(--night);
      transform: translateY(-180%);
    }
    .skip-link:focus { transform: translateY(0); }
    .shell { width: min(1180px, calc(100% - 2.5rem)); margin-inline: auto; }

    header {
      position: absolute;
      inset: 0 0 auto;
      z-index: 10;
      color: var(--white);
    }
    .nav {
      min-height: 84px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1.5rem;
      border-bottom: 1px solid rgba(255,255,255,.14);
    }
    .brand {
      display: inline-flex;
      align-items: center;
      gap: .8rem;
      text-decoration: none;
      font-weight: 760;
      letter-spacing: .04em;
      white-space: nowrap;
    }
    .brand-mark { width: 38px; height: 38px; flex: 0 0 auto; }
    .nav-right { display: flex; align-items: center; gap: 1.4rem; }
    nav { display: flex; gap: 1.2rem; }
    nav a {
      color: rgba(255,255,255,.78);
      text-decoration: none;
      font-size: .9rem;
      transition: color .2s ease;
    }
    nav a:hover, nav a:focus-visible { color: var(--white); }
    .languages {
      display: inline-flex;
      padding: .25rem;
      border: 1px solid rgba(255,255,255,.2);
      border-radius: 999px;
      background: rgba(255,255,255,.06);
    }
    .languages button {
      border: 0;
      border-radius: 999px;
      padding: .38rem .58rem;
      color: rgba(255,255,255,.7);
      background: transparent;
      font: 700 .72rem/1 var(--sans);
      cursor: pointer;
    }
    .languages button[aria-pressed="true"] { color: var(--night); background: var(--gold); }

    .hero {
      position: relative;
      min-height: 770px;
      display: grid;
      align-items: center;
      overflow: hidden;
      color: var(--white);
      background:
        radial-gradient(circle at 76% 42%, rgba(94,213,207,.16), transparent 23rem),
        radial-gradient(circle at 14% 88%, rgba(238,120,108,.12), transparent 28rem),
        linear-gradient(137deg, var(--night) 2%, var(--night-2) 62%, #172447 100%);
    }
    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      opacity: .22;
      background-image:
        radial-gradient(circle, rgba(255,255,255,.7) 0 1px, transparent 1.5px),
        linear-gradient(110deg, transparent 46%, rgba(255,255,255,.05) 47%, transparent 48%);
      background-size: 47px 47px, 100% 100%;
      mask-image: linear-gradient(to bottom, black, transparent 90%);
    }
    .hero-grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
      gap: 5rem;
      align-items: center;
      padding: 145px 0 90px;
    }
    .eyebrow {
      margin: 0 0 1.15rem;
      color: var(--gold);
      font-size: clamp(.78rem, 1.2vw, .94rem);
      font-weight: 800;
      letter-spacing: .15em;
      text-transform: uppercase;
    }
    h1 {
      margin: 0;
      max-width: 720px;
      font-family: var(--serif);
      font-size: clamp(3.8rem, 8vw, 7.4rem);
      font-weight: 700;
      line-height: .98;
      letter-spacing: -.055em;
    }
    .hero-en {
      margin: 1rem 0 0;
      color: rgba(255,255,255,.48);
      font-size: clamp(1.12rem, 2vw, 1.55rem);
      font-weight: 650;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .promise {
      margin: 2rem 0 .7rem;
      max-width: 690px;
      font-size: clamp(1.45rem, 2.5vw, 2.2rem);
      font-weight: 680;
      line-height: 1.35;
    }
    .hero-copy {
      max-width: 650px;
      margin: 0;
      color: rgba(255,255,255,.7);
      font-size: 1.06rem;
    }
    .hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem; }
    .button {
      display: inline-flex;
      min-height: 48px;
      align-items: center;
      justify-content: center;
      gap: .55rem;
      padding: .72rem 1.25rem;
      border: 1px solid rgba(255,255,255,.22);
      border-radius: 999px;
      color: var(--white);
      background: rgba(255,255,255,.07);
      text-decoration: none;
      font-weight: 750;
      transition: transform .2s ease, background .2s ease, border-color .2s ease;
    }
    .button.primary { border-color: var(--gold); color: var(--night); background: var(--gold); }
    .button:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.12); }
    .button.primary:hover { border-color: #ffe08e; background: #ffe08e; }
    .button .arrow { font-size: 1.15em; }

    .orbit-stage {
      position: relative;
      aspect-ratio: 1;
      width: min(100%, 480px);
      justify-self: center;
      filter: drop-shadow(0 30px 55px rgba(0,0,0,.25));
    }
    .orbit {
      position: absolute;
      inset: var(--inset);
      border-radius: 50%;
      background: conic-gradient(from var(--angle), var(--color) 0 72deg, transparent 72deg 102deg, var(--color) 102deg 245deg, transparent 245deg 290deg, var(--color) 290deg 360deg);
      -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--weight)), #000 calc(100% - var(--weight) + 1px));
      mask: radial-gradient(farthest-side, transparent calc(100% - var(--weight)), #000 calc(100% - var(--weight) + 1px));
      animation: breathe 8s ease-in-out infinite alternate;
    }
    .orbit.one { --inset: 2%; --weight: 18px; --angle: -34deg; --color: var(--gold); }
    .orbit.two { --inset: 16%; --weight: 8px; --angle: 42deg; --color: var(--aqua); animation-delay: -2s; }
    .orbit.three { --inset: 31%; --weight: 22px; --angle: 155deg; --color: var(--coral); animation-delay: -4s; }
    .orbit.four { --inset: 44%; --weight: 5px; --angle: 220deg; --color: rgba(255,255,255,.85); animation-delay: -6s; }
    .orbit-note {
      position: absolute;
      inset: 50% auto auto 50%;
      width: 8rem;
      transform: translate(-50%, -50%);
      color: rgba(255,255,255,.82);
      text-align: center;
      font-family: var(--serif);
      font-size: 1rem;
      line-height: 1.45;
    }
    @keyframes breathe { to { transform: rotate(8deg) scale(1.012); } }

    main { overflow: hidden; }
    section { padding: clamp(5rem, 9vw, 8rem) 0; }
    .section-kicker {
      margin: 0 0 .75rem;
      color: var(--gold-deep);
      font-size: .78rem;
      font-weight: 850;
      letter-spacing: .14em;
      text-transform: uppercase;
    }
    h2 {
      margin: 0;
      max-width: 800px;
      font-family: var(--serif);
      font-size: clamp(2.1rem, 4.5vw, 4.4rem);
      line-height: 1.18;
      letter-spacing: -.035em;
    }
    .lead { margin: 1.5rem 0 0; max-width: 760px; color: var(--ink-soft); font-size: 1.12rem; }

    .meaning { background: var(--white); }
    .meaning-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 5rem; align-items: end; }
    .statement {
      margin: 0;
      padding-left: 1.5rem;
      border-left: 4px solid var(--aqua);
      font-family: var(--serif);
      font-size: clamp(1.35rem, 2.3vw, 2rem);
      line-height: 1.6;
    }
    .not-list { display: grid; gap: .8rem; margin-top: 2rem; }
    .not-item { display: flex; gap: .8rem; color: var(--ink-soft); }
    .not-item strong { color: var(--ink); }
    .dash { color: var(--coral); font-weight: 900; }

    .fields { background: var(--paper); }
    .field-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .85rem; margin-top: 3rem; }
    .field-card {
      min-height: 230px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 1.25rem;
      border: 1px solid var(--line);
      border-radius: 1.25rem;
      background: rgba(255,255,255,.7);
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    }
    .field-card:hover { transform: translateY(-5px); border-color: rgba(216,169,54,.45); box-shadow: var(--shadow); }
    .field-number { color: var(--gold-deep); font-size: .8rem; font-weight: 850; letter-spacing: .12em; }
    .field-card h3 { margin: 0; font-family: var(--serif); font-size: 1.12rem; line-height: 1.45; }
    .field-card p { margin: .45rem 0 0; color: var(--ink-soft); font-size: .88rem; line-height: 1.55; }

    .why { color: var(--white); background: var(--night); }
    .why .section-kicker { color: var(--aqua); }
    .why .lead { color: rgba(255,255,255,.68); }
    .why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 3rem; }
    .why-item {
      padding: 1.8rem;
      border: 1px solid rgba(255,255,255,.13);
      border-radius: var(--radius);
      background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
    }
    .why-item span { display: block; margin-bottom: .7rem; color: var(--gold); font-weight: 820; }
    .why-item h3 { margin: 0 0 .55rem; font-family: var(--serif); font-size: 1.35rem; }
    .why-item p { margin: 0; color: rgba(255,255,255,.64); }

    .participate { background: var(--white); }
    .path-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 3rem; }
    .path {
      position: relative;
      overflow: hidden;
      min-height: 305px;
      padding: 2rem;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--paper);
    }
    .path::after {
      content: "";
      position: absolute;
      right: -40px;
      bottom: -40px;
      width: 140px;
      aspect-ratio: 1;
      border: 22px solid var(--ring-color, var(--gold));
      border-right-color: transparent;
      border-radius: 50%;
      opacity: .36;
    }
    .path:nth-child(2) { --ring-color: var(--aqua); }
    .path:nth-child(3) { --ring-color: var(--coral); }
    .path-label { color: var(--gold-deep); font-size: .78rem; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
    .path h3 { margin: 1.3rem 0 .75rem; font-family: var(--serif); font-size: 1.65rem; }
    .path p { position: relative; z-index: 1; max-width: 85%; margin: 0; color: var(--ink-soft); }

    .closing { padding-top: 0; background: var(--white); }
    .closing-panel {
      position: relative;
      overflow: hidden;
      display: grid;
      grid-template-columns: 1.2fr auto;
      gap: 2rem;
      align-items: center;
      padding: clamp(2.3rem, 6vw, 5rem);
      border-radius: 2rem;
      color: var(--white);
      background: linear-gradient(125deg, var(--night), #243565);
    }
    .closing-panel::after {
      content: "";
      position: absolute;
      width: 290px;
      height: 290px;
      right: -160px;
      top: -150px;
      border: 42px solid var(--gold);
      border-left-color: transparent;
      border-radius: 50%;
      opacity: .7;
    }
    .closing h2 { position: relative; z-index: 1; font-size: clamp(2rem, 4vw, 3.7rem); }
    .closing p { position: relative; z-index: 1; max-width: 680px; margin: 1rem 0 0; color: rgba(255,255,255,.68); }
    .closing .button { position: relative; z-index: 1; white-space: nowrap; }

    footer { padding: 2.2rem 0; color: var(--ink-soft); background: var(--white); }
    .footer-grid { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
    .footer-brand { color: var(--ink); font-weight: 800; }
    .footer-meta { margin: .25rem 0 0; font-size: .83rem; }
    .footer-link { color: var(--ink); text-underline-offset: .25em; }

    :focus-visible { outline: 3px solid var(--aqua); outline-offset: 4px; }
    @media (max-width: 1080px) {
      .hero-grid { grid-template-columns: 1fr 400px; gap: 2rem; }
      .field-grid { grid-template-columns: repeat(4, 1fr); }
      .field-card:nth-child(n+5) { min-height: 190px; }
    }
    @media (max-width: 820px) {
      .shell { width: min(100% - 1.5rem, 680px); }
      .nav { min-height: 72px; }
      nav { display: none; }
      .nav-right { gap: 0; }
      .hero { min-height: auto; }
      .hero-grid { grid-template-columns: 1fr; gap: 1.8rem; padding: 118px 0 65px; }
      .hero-copy { font-size: 1rem; }
      .orbit-stage { width: min(78vw, 365px); margin-top: .5rem; }
      .meaning-grid { grid-template-columns: 1fr; gap: 2.5rem; }
      .field-grid { grid-template-columns: repeat(2, 1fr); }
      .field-card { min-height: 190px; }
      .why-grid, .path-grid { grid-template-columns: 1fr; }
      .path { min-height: 245px; }
      .closing-panel { grid-template-columns: 1fr; }
      .closing .button { justify-self: start; }
      .footer-grid { align-items: flex-start; flex-direction: column; }
    }
    @media (max-width: 500px) {
      .brand span { font-size: .88rem; }
      .brand-mark { width: 33px; height: 33px; }
      .languages button { padding: .35rem .48rem; }
      h1 { font-size: clamp(3.35rem, 18vw, 5rem); }
      .hero-en { font-size: .95rem; }
      .field-grid { grid-template-columns: 1fr; }
      .field-card { min-height: 165px; }
      .why-item, .path { padding: 1.5rem; }
      .closing-panel { border-radius: 1.5rem; }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    }