<!doctype html>
<html lang="<%= chainLang || 'ko' %>">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title><%= chainName %></title>
  <link rel="icon" type="image/png" href="/images/plai-symbol-mark-v1.png" />
  <link rel="apple-touch-icon" sizes="180x180" href="/images/plai-icon-180.png" />
  <link rel="manifest" href="/site.webmanifest" />
  <meta name="theme-color" content="#087b73" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-title" content="plais Chain" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
  <style>
    :root {
      --ink: #07111f;
      --muted: #506178;
      --line: #d8e3ee;
      --panel: #ffffff;
      --surface: #eef5f8;
      --teal: #087b73;
      --blue: #245ad6;
      --green: #148a52;
      --amber: #b76b00;
      --danger: #bd2f35;
      --dark: #081421;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--ink);
      background: var(--surface);
      font-family: Arial, "Noto Sans KR", sans-serif;
      letter-spacing: 0;
    }
    a { color: inherit; text-decoration: none; }

    .wrap {
      width: min(1280px, calc(100% - 32px));
      margin: 0 auto;
    }

    .topbar {
      position: absolute;
      z-index: 5;
      inset: 0 0 auto;
      color: #fff;
      border-bottom: 1px solid rgba(255, 255, 255, 0.16);
      background: rgba(7, 17, 31, 0.72);
      backdrop-filter: blur(12px);
    }

    .nav {
      min-height: 76px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }

    .brand-mark {
      width: 44px;
      height: 44px;
      border-radius: 8px;
      border: 1px solid rgba(255, 255, 255, 0.35);
      background: #0d2638;
      object-fit: cover;
      display: block;
    }

    .brand-title {
      font-size: 22px;
      line-height: 1.1;
      font-weight: 900;
      white-space: nowrap;
    }

    .brand-sub {
      color: #b9c8da;
      margin-top: 3px;
      font-size: 13px;
      word-break: break-word;
    }

    .lang-actions,
    .nav-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      flex-wrap: wrap;
    }

    .button {
      min-height: 42px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 10px 15px;
      border-radius: 8px;
      border: 1px solid rgba(255, 255, 255, 0.28);
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
      font-weight: 900;
      font-size: 14px;
      line-height: 1.2;
    }

    .lang-actions .button { min-width: 48px; padding-inline: 12px; }
    .lang-actions .button.active { background: #fff; border-color: #fff; color: var(--ink); }

    .button.primary {
      background: #fff;
      border-color: #fff;
      color: var(--ink);
    }

    .button.dark {
      background: var(--dark);
      border-color: var(--dark);
      color: #fff;
    }

    .button.teal {
      background: var(--teal);
      border-color: var(--teal);
      color: #fff;
    }

    .hero {
      min-height: 760px;
      color: #fff;
      position: relative;
      display: flex;
      align-items: center;
      background: #06101d;
      overflow: hidden;
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: -18px;
      z-index: 0;
      background-image: url("/images/plai-chain-hero-sharp.png");
      background-size: cover;
      background-position: center;
      transform: scale(1.02);
      animation: heroImageDrift 24s ease-in-out infinite alternate;
      will-change: transform, background-position;
    }

    .hero::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(90deg, rgba(4, 12, 24, 0.92) 0%, rgba(4, 12, 24, 0.72) 42%, rgba(4, 12, 24, 0.18) 100%);
      pointer-events: none;
    }

    .hero-motion {
      position: absolute;
      inset: 76px 0 74px;
      z-index: 2;
      pointer-events: none;
      overflow: hidden;
    }

    .hero-motion::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(105deg, transparent 0%, rgba(109, 227, 255, 0.02) 35%, rgba(109, 227, 255, 0.18) 46%, rgba(122, 247, 210, 0.1) 52%, transparent 66%),
        linear-gradient(90deg, transparent, rgba(116, 185, 255, 0.08), transparent);
      transform: translateX(-65%);
      animation: heroScan 5.8s ease-in-out infinite;
    }

    .hero-motion::after {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        radial-gradient(circle, rgba(122, 247, 210, 0.82) 0 2px, rgba(122, 247, 210, 0.28) 4px, transparent 9px),
        radial-gradient(circle, rgba(116, 185, 255, 0.88) 0 2px, rgba(116, 185, 255, 0.24) 4px, transparent 10px);
      background-size: 260px 170px, 340px 220px;
      background-position: 72% 34%, 84% 62%;
      animation: heroSparkle 3.4s ease-in-out infinite;
    }

    .hero-beam {
      position: absolute;
      right: 9%;
      top: 46%;
      width: 42%;
      height: 2px;
      background: linear-gradient(90deg, transparent, rgba(122, 247, 210, 0.86), rgba(116, 185, 255, 0.42), transparent);
      box-shadow: 0 0 18px rgba(116, 185, 255, 0.4);
      transform-origin: right center;
      opacity: 0;
      animation: heroBeam 3.8s ease-in-out infinite;
    }

    .hero-beam.beam-2 {
      top: 58%;
      right: 18%;
      width: 34%;
      transform: rotate(-12deg);
      animation-delay: -1.1s;
    }

    .hero-beam.beam-3 {
      top: 35%;
      right: 6%;
      width: 30%;
      transform: rotate(18deg);
      animation-delay: -2.2s;
    }

    .hero-flow-line {
      position: absolute;
      height: 1px;
      background:
        linear-gradient(90deg,
          transparent 0%,
          rgba(75, 172, 255, 0.18) 18%,
          rgba(122, 247, 210, 0.9) 42%,
          rgba(255, 255, 255, 0.9) 50%,
          rgba(116, 185, 255, 0.42) 62%,
          transparent 100%);
      background-size: 220% 100%;
      box-shadow:
        0 0 8px rgba(116, 185, 255, 0.38),
        0 0 16px rgba(122, 247, 210, 0.18);
      opacity: 0.68;
      transform-origin: center;
      animation: lineCurrent 3.6s linear infinite;
    }

    .hero-flow-line.flow-1 { width: 42%; right: 8%; top: 44%; transform: rotate(0deg); }
    .hero-flow-line.flow-2 { width: 38%; right: 12%; top: 52%; transform: rotate(-13deg); animation-delay: -0.6s; }
    .hero-flow-line.flow-3 { width: 34%; right: 5%; top: 34%; transform: rotate(17deg); animation-delay: -1.2s; }
    .hero-flow-line.flow-4 { width: 30%; right: 27%; top: 63%; transform: rotate(8deg); animation-delay: -1.8s; }
    .hero-flow-line.flow-5 { width: 28%; right: 31%; top: 73%; transform: rotate(-21deg); animation-delay: -2.4s; }
    .hero-flow-line.flow-6 { width: 24%; right: 3%; top: 68%; transform: rotate(20deg); animation-delay: -3s; }

    .hero-flow-dot {
      position: absolute;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #b8f8ff;
      box-shadow:
        0 0 12px rgba(184, 248, 255, 0.95),
        0 0 24px rgba(122, 247, 210, 0.46);
      opacity: 0;
      animation: dotCurrent 4.2s ease-in-out infinite;
    }

    .hero-flow-dot.dot-1 { right: 42%; top: 45%; animation-delay: -0.4s; }
    .hero-flow-dot.dot-2 { right: 27%; top: 55%; animation-delay: -1.4s; }
    .hero-flow-dot.dot-3 { right: 17%; top: 36%; animation-delay: -2.4s; }
    .hero-flow-dot.dot-4 { right: 36%; top: 70%; animation-delay: -3.2s; }

    .hero-circuit-svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      opacity: 0.92;
      mix-blend-mode: screen;
    }

    .hero-circuit-svg .base {
      fill: none;
      stroke: rgba(66, 169, 255, 0.18);
      stroke-width: 1.1;
      vector-effect: non-scaling-stroke;
    }

    .hero-circuit-svg .flow {
      fill: none;
      stroke: url(#heroCircuitGradient);
      stroke-width: 2.1;
      stroke-linecap: round;
      stroke-dasharray: 18 190;
      stroke-dashoffset: 0;
      filter: url(#heroCircuitGlow);
      vector-effect: non-scaling-stroke;
      animation: circuitFlow 3.2s linear infinite;
    }

    .hero-circuit-svg .flow.slow {
      stroke-dasharray: 26 230;
      animation-duration: 4.3s;
      animation-direction: reverse;
    }

    .hero-circuit-svg .flow.fast {
      stroke-dasharray: 14 150;
      animation-duration: 2.7s;
    }

    .hero-circuit-svg .junction {
      fill: rgba(185, 247, 255, 0.86);
      filter: url(#heroCircuitGlow);
      opacity: 0.4;
      animation: junctionPulse 2.8s ease-in-out infinite;
    }

    .hero-circuit-svg .junction.j2 { animation-delay: -0.7s; }
    .hero-circuit-svg .junction.j3 { animation-delay: -1.4s; }
    .hero-circuit-svg .junction.j4 { animation-delay: -2.1s; }

    .hero-pulse {
      position: absolute;
      right: 29%;
      top: 35%;
      width: 132px;
      height: 132px;
      border-radius: 50%;
      border: 1px solid rgba(122, 247, 210, 0.38);
      box-shadow: 0 0 28px rgba(116, 185, 255, 0.2);
      animation: heroPulse 3.2s ease-out infinite;
    }

    .hero-pulse.pulse-2 {
      right: 14%;
      top: 49%;
      width: 92px;
      height: 92px;
      animation-delay: -1.35s;
    }

    .hero-inner {
      position: relative;
      z-index: 3;
      padding: 128px 0 96px;
      max-width: 720px;
    }

    .eyebrow {
      margin: 0 0 14px;
      color: #a8fff0;
      font-size: 13px;
      font-weight: 900;
      text-transform: uppercase;
    }

    h1 {
      margin: 0;
      font-size: 44px;
      line-height: 1.14;
      font-weight: 900;
    }

    .lead {
      max-width: 710px;
      margin: 20px 0 0;
      color: #e0ebfb;
      font-size: 19px;
      line-height: 1.72;
    }

    .hero-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 28px;
    }

    .mode-strip {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      margin-top: 34px;
      max-width: 860px;
    }

    .mode-item {
      min-height: 92px;
      border-radius: 8px;
      border: 1px solid rgba(255, 255, 255, 0.22);
      background: rgba(6, 18, 32, 0.66);
      padding: 14px;
    }

    .mode-item span {
      display: block;
      color: #aebdd1;
      font-size: 12px;
      font-weight: 800;
      margin-bottom: 9px;
    }

    .mode-item strong {
      display: block;
      font-size: 22px;
      line-height: 1.12;
      font-weight: 900;
      word-break: break-word;
    }

    .hero-bottom {
      position: absolute;
      z-index: 3;
      left: 0;
      right: 0;
      bottom: 0;
      min-height: 74px;
      background: rgba(238, 245, 248, 0.96);
      color: var(--ink);
      border-top: 1px solid rgba(255, 255, 255, 0.25);
    }

    .ticker {
      min-height: 74px;
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 1px;
    }

    .ticker div {
      padding: 14px 16px;
      border-left: 1px solid var(--line);
    }

    .ticker div:first-child { border-left: 0; }
    .ticker span {
      color: var(--muted);
      display: block;
      font-size: 12px;
      font-weight: 800;
      margin-bottom: 5px;
    }
    .ticker strong {
      font-size: 22px;
      font-weight: 900;
      word-break: break-word;
    }

    main { padding: 34px 0 64px; }

    .section {
      margin-top: 18px;
      padding: 30px 0;
    }

    .section-head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 18px;
    }

    h2 {
      margin: 0;
      font-size: 30px;
      line-height: 1.2;
      font-weight: 900;
    }

    .section-sub {
      margin-top: 8px;
      color: var(--muted);
      font-size: 15px;
      line-height: 1.55;
      max-width: 760px;
    }

    .symbol-band {
      margin-top: 18px;
      padding: 42px 0;
      border-top: 1px solid #203447;
      border-bottom: 1px solid #203447;
      background: #081421;
      color: #fff;
    }

    .symbol-story {
      display: grid;
      grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
      gap: 46px;
      align-items: center;
    }

    .symbol-art {
      width: 100%;
      aspect-ratio: 1;
      object-fit: contain;
    }

    .symbol-copy .section-sub { color: #aebed0; }
    .symbol-points {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
      margin-top: 28px;
    }

    .symbol-point {
      padding-top: 16px;
      border-top: 2px solid #36e39a;
    }

    .symbol-point strong { display: block; font-size: 17px; }
    .symbol-point p { margin: 8px 0 0; color: #aebed0; font-size: 14px; line-height: 1.55; }

    .grid-3,
    .grid-4 {
      display: grid;
      gap: 12px;
    }

    .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    .panel {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 20px;
      min-height: 154px;
    }

    .panel small {
      display: block;
      color: var(--teal);
      font-weight: 900;
      margin-bottom: 10px;
      text-transform: uppercase;
      font-size: 12px;
    }

    .panel h3 {
      margin: 0;
      font-size: 21px;
      line-height: 1.28;
      font-weight: 900;
    }

    .panel p {
      margin: 10px 0 0;
      color: var(--muted);
      line-height: 1.58;
      font-size: 15px;
    }

    .panel strong.value {
      display: block;
      font-size: 30px;
      line-height: 1.1;
      margin-top: 7px;
      word-break: break-word;
    }

    .split {
      display: grid;
      grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
      gap: 16px;
      align-items: stretch;
    }

    .band {
      background: #fff;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      padding: 34px 0;
    }

    .whitepaper {
      background: #081421;
      color: #fff;
      border-radius: 8px;
      padding: 28px;
      min-height: 278px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 22px;
    }

    .whitepaper p {
      color: #c7d5e8;
      line-height: 1.62;
      margin: 12px 0 0;
    }

    .whitepaper-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .patent-band {
      position: relative;
      overflow: hidden;
      margin-top: 18px;
      padding: 46px 0;
      color: #fff;
      border-top: 1px solid #203447;
      border-bottom: 1px solid #203447;
      background:
        radial-gradient(circle at 88% 4%, rgba(54, 227, 154, 0.15), transparent 34%),
        radial-gradient(circle at 12% 100%, rgba(36, 90, 214, 0.2), transparent 34%),
        #081421;
    }

    .patent-band .section-sub { color: #b9c9dc; }

    .patent-summary {
      min-width: 188px;
      padding: 15px 18px;
      border: 1px solid rgba(168, 255, 240, 0.32);
      border-radius: 8px;
      background: rgba(8, 123, 115, 0.18);
      text-align: center;
    }

    .patent-summary span {
      display: block;
      color: #a8fff0;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .patent-summary strong {
      display: block;
      margin-top: 5px;
      font-size: 24px;
      line-height: 1.2;
    }

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

    .patent-card {
      position: relative;
      min-height: 250px;
      padding: 24px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.06);
    }

    .patent-card::after {
      content: "";
      position: absolute;
      right: -48px;
      bottom: -58px;
      width: 150px;
      height: 150px;
      border: 1px solid rgba(116, 185, 255, 0.13);
      border-radius: 50%;
    }

    .patent-card.coin-core {
      border-color: rgba(168, 255, 240, 0.42);
      background: linear-gradient(145deg, rgba(8, 123, 115, 0.25), rgba(255, 255, 255, 0.06));
    }

    .patent-meta {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 17px;
    }

    .patent-number,
    .patent-status {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-size: 12px;
      font-weight: 900;
    }

    .patent-number {
      color: #a8fff0;
      letter-spacing: 0.04em;
    }

    .patent-status {
      padding: 7px 9px;
      color: #dffcf5;
      border: 1px solid rgba(168, 255, 240, 0.24);
      border-radius: 999px;
      background: rgba(8, 123, 115, 0.18);
      white-space: nowrap;
    }

    .patent-status::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #36e39a;
      box-shadow: 0 0 10px rgba(54, 227, 154, 0.8);
    }

    .patent-card h3 {
      position: relative;
      z-index: 1;
      margin: 0;
      max-width: 94%;
      font-size: 20px;
      line-height: 1.5;
      word-break: keep-all;
    }

    .patent-card p {
      position: relative;
      z-index: 1;
      margin: 14px 0 0;
      color: #b9c9dc;
      font-size: 14px;
      line-height: 1.65;
    }

    .patent-core-label {
      position: relative;
      z-index: 1;
      display: inline-flex;
      margin-top: 17px;
      padding: 7px 10px;
      color: #07111f;
      border-radius: 5px;
      background: #a8fff0;
      font-size: 12px;
      font-weight: 900;
    }

    .patent-notice {
      margin: 18px 0 0;
      padding-left: 12px;
      color: #91a6bd;
      border-left: 2px solid rgba(168, 255, 240, 0.45);
      font-size: 13px;
      line-height: 1.6;
    }

    .copyright-band {
      padding: 58px 0;
      color: #eaf2ff;
      background: #0b1726;
      border-bottom: 1px solid #203447;
    }

    .copyright-band .section-sub { color: #aebed1; }

    .copyright-summary {
      min-width: 188px;
      padding: 15px 18px;
      border: 1px solid rgba(116, 185, 255, 0.32);
      border-radius: 8px;
      background: rgba(36, 90, 214, 0.14);
      text-align: center;
    }

    .copyright-summary span {
      display: block;
      color: #9ecbff;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .copyright-summary strong {
      display: block;
      margin-top: 5px;
      color: #fff;
      font-size: 24px;
      line-height: 1.2;
    }

    .copyright-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }

    .copyright-card {
      display: grid;
      grid-template-columns: 48px minmax(0, 1fr);
      gap: 15px;
      align-content: start;
      padding: 20px;
      border: 1px solid rgba(255, 255, 255, 0.13);
      border-radius: 8px;
      background: #101f31;
    }

    .copyright-seal {
      width: 48px;
      height: 48px;
      display: grid;
      place-items: center;
      color: #07111f;
      border-radius: 6px;
      background: #a8fff0;
      font-size: 19px;
      font-weight: 1000;
    }

    .copyright-card small {
      display: block;
      color: #8fb5df;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.06em;
    }

    .copyright-card h3 {
      margin: 7px 0 0;
      color: #fff;
      font-size: 18px;
      line-height: 1.35;
      word-break: keep-all;
    }

    .copyright-card p {
      margin: 8px 0 0;
      color: #b9c9dc;
      font-size: 13px;
      line-height: 1.55;
    }

    .copyright-registration {
      display: inline-flex;
      margin-top: 13px;
      padding: 6px 8px;
      color: #dffcf5;
      border: 1px solid rgba(168, 255, 240, 0.24);
      border-radius: 5px;
      background: rgba(8, 123, 115, 0.15);
      font-size: 12px;
      font-weight: 900;
    }

    .copyright-document {
      grid-column: 1 / -1;
      display: block;
      margin-top: 5px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: 6px;
      background: #fff;
    }

    .copyright-document img {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 210 / 297;
      object-fit: contain;
      background: #fff;
    }

    .copyright-document span {
      display: block;
      padding: 9px 12px;
      color: #dbe8f7;
      border-top: 1px solid rgba(255, 255, 255, 0.13);
      background: #0b1726;
      font-size: 12px;
      font-weight: 900;
      text-align: center;
    }

    .copyright-modal[hidden] { display: none; }

    .copyright-modal {
      position: fixed;
      z-index: 100;
      inset: 0;
      display: grid;
      place-items: center;
      padding: 22px;
    }

    .copyright-modal-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(2, 8, 16, 0.86);
      backdrop-filter: blur(6px);
    }

    .copyright-modal-dialog {
      position: relative;
      z-index: 1;
      width: min(820px, 100%);
      max-height: calc(100vh - 44px);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 8px;
      background: #0b1726;
      box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
    }

    .copyright-modal-head {
      min-height: 58px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 10px 12px 10px 18px;
      color: #fff;
      border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    }

    .copyright-modal-head h3 {
      margin: 0;
      font-size: 17px;
      line-height: 1.35;
    }

    .copyright-modal-close {
      flex: 0 0 40px;
      width: 40px;
      height: 40px;
      display: grid;
      place-items: center;
      padding: 0;
      color: #fff;
      border: 1px solid rgba(255, 255, 255, 0.22);
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.08);
      font-size: 28px;
      line-height: 1;
      cursor: pointer;
    }

    .copyright-modal-close:hover,
    .copyright-modal-close:focus-visible {
      color: #07111f;
      background: #a8fff0;
      outline: none;
    }

    .copyright-modal-body {
      overflow: auto;
      padding: 16px;
      background: #162334;
      overscroll-behavior: contain;
    }

    .copyright-modal-body img {
      display: block;
      width: min(100%, 720px);
      height: auto;
      margin: 0 auto;
      background: #fff;
    }

    body.copyright-modal-open { overflow: hidden; }

    .copyright-notice {
      margin: 18px 0 0;
      padding: 14px 16px;
      color: #aebed1;
      border: 1px solid rgba(255, 255, 255, 0.11);
      border-radius: 6px;
      background: rgba(0, 0, 0, 0.16);
      font-size: 13px;
      line-height: 1.6;
    }

    .chain-flow-visual {
      position: relative;
      min-height: 238px;
      margin: 20px 0 8px;
      border-radius: 8px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      background:
        linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px),
        rgba(255, 255, 255, 0.035);
      background-size: 28px 28px;
      overflow: hidden;
    }

    .chain-flow-visual::before,
    .chain-flow-visual::after {
      content: "";
      position: absolute;
      inset: auto;
      border-radius: 999px;
      filter: blur(2px);
      opacity: 0.75;
      pointer-events: none;
    }

    .chain-flow-visual::before {
      width: 180px;
      height: 180px;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border: 1px solid rgba(86, 219, 255, 0.22);
      animation: flowPulse 4.2s ease-in-out infinite;
    }

    .chain-flow-visual::after {
      width: 88px;
      height: 88px;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background: rgba(8, 123, 115, 0.28);
      animation: coreGlow 3.4s ease-in-out infinite;
    }

    .star-field,
    .star-field::before,
    .star-field::after {
      position: absolute;
      inset: 0;
      pointer-events: none;
      background-repeat: repeat;
      opacity: 0.78;
    }

    .star-field {
      background-image:
        radial-gradient(circle, rgba(216, 240, 255, 0.96) 0 1px, rgba(116, 185, 255, 0.68) 2px, transparent 5px),
        radial-gradient(circle, rgba(122, 247, 210, 0.72) 0 1px, rgba(74, 144, 255, 0.46) 2px, transparent 6px);
      background-size: 92px 84px, 138px 118px;
      background-position: 14px 18px, 62px 44px;
      animation: starTwinkle 5.8s ease-in-out infinite;
    }

    .star-field::before,
    .star-field::after {
      content: "";
    }

    .star-field::before {
      background-image:
        radial-gradient(circle, rgba(74, 144, 255, 0.88) 0 2px, rgba(74, 144, 255, 0.38) 3px, transparent 7px),
        radial-gradient(circle, rgba(210, 236, 255, 0.82) 0 1px, rgba(116, 185, 255, 0.5) 2px, transparent 6px);
      background-size: 124px 96px, 176px 148px;
      background-position: 36px 64px, 118px 12px;
      animation: starTwinkle 7.6s ease-in-out infinite reverse;
    }

    .star-field::after {
      background-image:
        radial-gradient(circle, rgba(116, 185, 255, 0.68) 0 2px, rgba(116, 185, 255, 0.24) 4px, transparent 9px);
      background-size: 76px 132px;
      background-position: 24px 28px;
      animation: starDrift 18s linear infinite;
    }

    .flow-line {
      position: absolute;
      height: 2px;
      left: 15%;
      right: 15%;
      top: 50%;
      background: linear-gradient(90deg, rgba(96, 213, 255, 0), rgba(96, 213, 255, 0.58), rgba(96, 213, 255, 0));
      transform-origin: center;
    }

    .flow-line.line-2 { transform: rotate(45deg); }
    .flow-line.line-3 { transform: rotate(-45deg); }
    .flow-line.line-4 { transform: rotate(90deg); }

    .flow-node {
      position: absolute;
      z-index: 2;
      width: 92px;
      min-height: 58px;
      display: grid;
      place-items: center;
      padding: 8px;
      border-radius: 8px;
      border: 1px solid rgba(255, 255, 255, 0.18);
      background: rgba(255, 255, 255, 0.1);
      color: #e8f7ff;
      text-align: center;
      font-size: 12px;
      font-weight: 900;
      line-height: 1.25;
      animation: nodeFloat 4.8s ease-in-out infinite;
    }

    .flow-node strong {
      display: block;
      color: #fff;
      font-size: 14px;
    }

    .flow-node.app { left: 7%; top: 17%; animation-delay: -0.4s; }
    .flow-node.point { right: 7%; top: 17%; animation-delay: -1.2s; }
    .flow-node.ledger { left: 50%; top: 50%; transform: translate(-50%, -50%); animation: ledgerBeat 3s ease-in-out infinite; }
    .flow-node.ledger {
      background: linear-gradient(135deg, rgba(14, 197, 164, 0.96), rgba(37, 99, 235, 0.94));
      border-color: rgba(190, 255, 239, 0.72);
      color: #ffffff;
      box-shadow:
        0 0 0 1px rgba(122, 247, 210, 0.2),
        0 0 28px rgba(20, 211, 183, 0.44),
        0 0 42px rgba(74, 144, 255, 0.32);
    }

    .flow-node.ledger strong {
      color: #ffffff;
      text-shadow: 0 0 12px rgba(255, 255, 255, 0.35);
    }
    .flow-node.block { left: 7%; bottom: 17%; animation-delay: -2s; }
    .flow-node.node { right: 7%; bottom: 17%; animation-delay: -2.8s; }

    .flow-packet {
      position: absolute;
      z-index: 3;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #7af7d2;
      box-shadow: 0 0 18px rgba(122, 247, 210, 0.9);
      offset-path: path("M 70 54 C 185 30, 310 35, 430 54 C 335 105, 335 135, 430 184 C 310 205, 185 205, 70 184 C 165 135, 165 105, 70 54");
      animation: packetMove 11s linear infinite;
    }

    .flow-packet.packet-2 {
      background: #ffd166;
      box-shadow: 0 0 18px rgba(255, 209, 102, 0.8);
      animation-delay: -1.8s;
    }

    .flow-packet.packet-3 {
      background: #74b9ff;
      box-shadow: 0 0 18px rgba(116, 185, 255, 0.8);
      animation-delay: -3.6s;
    }

    @keyframes packetMove {
      to { offset-distance: 100%; }
    }

    @keyframes heroImageDrift {
      0% {
        transform: scale(1.02) translate3d(0, 0, 0);
        background-position: center center;
      }
      50% {
        transform: scale(1.075) translate3d(-14px, -8px, 0);
        background-position: 53% 48%;
      }
      100% {
        transform: scale(1.055) translate3d(16px, 9px, 0);
        background-position: 47% 52%;
      }
    }

    @keyframes heroScan {
      0%, 10% { transform: translateX(-74%); opacity: 0; }
      30% { opacity: 1; }
      66% { transform: translateX(78%); opacity: 0.82; }
      100% { transform: translateX(78%); opacity: 0; }
    }

    @keyframes heroSparkle {
      0%, 100% { opacity: 0.38; filter: brightness(0.95); }
      42% { opacity: 0.96; filter: brightness(1.45); }
      72% { opacity: 0.54; filter: brightness(1.12); }
    }

    @keyframes heroBeam {
      0%, 100% { opacity: 0; scale: 0.75 1; }
      18% { opacity: 1; scale: 1 1; }
      46% { opacity: 0.28; scale: 1.22 1; }
      64% { opacity: 0; scale: 0.88 1; }
    }

    @keyframes lineCurrent {
      0% { background-position: 120% 0; opacity: 0.28; }
      15% { opacity: 0.72; }
      55% { opacity: 0.92; }
      100% { background-position: -120% 0; opacity: 0.34; }
    }

    @keyframes dotCurrent {
      0%, 100% { opacity: 0; transform: scale(0.7); }
      22% { opacity: 0.95; transform: scale(1.2); }
      52% { opacity: 0.36; transform: scale(0.9); }
    }

    @keyframes circuitFlow {
      to { stroke-dashoffset: -420; }
    }

    @keyframes junctionPulse {
      0%, 100% { opacity: 0.28; transform: scale(0.82); }
      45% { opacity: 0.94; transform: scale(1.18); }
      70% { opacity: 0.46; transform: scale(0.95); }
    }

    @keyframes heroPulse {
      0% { opacity: 0; transform: scale(0.62); }
      20% { opacity: 0.88; }
      100% { opacity: 0; transform: scale(1.55); }
    }

    @keyframes starTwinkle {
      0%, 100% { opacity: 0.35; }
      45% { opacity: 0.82; }
      70% { opacity: 0.48; }
    }

    @keyframes starDrift {
      0% { transform: translate3d(0, 0, 0); opacity: 0.25; }
      50% { opacity: 0.64; }
      100% { transform: translate3d(18px, -14px, 0); opacity: 0.25; }
    }

    @keyframes nodeFloat {
      0%, 100% { translate: 0 0; }
      50% { translate: 0 -7px; }
    }

    @keyframes ledgerBeat {
      0%, 100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 0 rgba(122, 247, 210, 0); }
      50% { transform: translate(-50%, -50%) scale(1.05); box-shadow: 0 0 24px rgba(122, 247, 210, 0.34); }
    }

    @keyframes flowPulse {
      0%, 100% { opacity: 0.38; scale: 0.92; }
      50% { opacity: 0.78; scale: 1.08; }
    }

    @keyframes coreGlow {
      0%, 100% { opacity: 0.38; }
      50% { opacity: 0.75; }
    }

    @media (prefers-reduced-motion: reduce) {
      .flow-node,
      .flow-packet,
      .hero::before,
      .hero-motion::before,
      .hero-motion::after,
      .hero-beam,
      .hero-flow-line,
      .hero-flow-dot,
      .hero-circuit-svg .flow,
      .hero-circuit-svg .junction,
      .hero-pulse,
      .star-field,
      .star-field::before,
      .star-field::after,
      .chain-flow-visual::before,
      .chain-flow-visual::after {
        animation: none;
      }
    }

    .flow {
      display: grid;
      gap: 10px;
    }

    .flow-row {
      display: grid;
      grid-template-columns: 46px minmax(0, 1fr);
      gap: 12px;
      align-items: start;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 16px;
    }

    .num {
      width: 34px;
      height: 34px;
      border-radius: 8px;
      display: grid;
      place-items: center;
      background: #e8fff3;
      color: var(--green);
      font-weight: 900;
    }

    .flow-row h3 {
      margin: 0;
      font-size: 18px;
      font-weight: 900;
    }

    .flow-row p {
      margin: 6px 0 0;
      color: var(--muted);
      line-height: 1.52;
      font-size: 14px;
    }

    .status-ok { color: var(--green); }
    .status-warn { color: var(--amber); }
    .status-neg { color: var(--danger); }

    .footer-links {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 12px;
    }

    .footer-link {
      min-height: 78px;
      padding: 16px;
      background: var(--dark);
      color: #fff;
      border-radius: 8px;
      font-weight: 900;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .footer-link span {
      color: #a9bad0;
      font-size: 13px;
      font-weight: 700;
    }

    @media (max-width: 1080px) {
      .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .patent-grid { grid-template-columns: 1fr; }
      .copyright-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .grid-3,
      .split { grid-template-columns: 1fr; }
      .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .ticker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .mode-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .hero { min-height: 820px; }
      .symbol-story { grid-template-columns: 220px minmax(0, 1fr); gap: 28px; }
      h1 { font-size: 40px; }
    }

    @media (max-width: 720px) {
      .wrap { width: min(100% - 22px, 1280px); }
      .topbar { position: sticky; top: 0; background: #07111f; }
      .nav { align-items: flex-start; flex-direction: column; padding: 14px 0; }
      .nav-actions { justify-content: flex-start; }
      .hero {
        min-height: auto;
        display: block;
      }
      .hero-inner { padding: 42px 0 124px; }
      h1 { font-size: 31px; }
      .lead { font-size: 16px; }
      .mode-strip,
      .ticker,
      .grid-4,
      .footer-links { grid-template-columns: 1fr; }
      .patent-card { min-height: auto; }
      .patent-meta { align-items: flex-start; flex-direction: column; }
      .copyright-grid { grid-template-columns: 1fr; }
      .copyright-card { min-height: auto; }
      .copyright-modal { padding: 10px; }
      .copyright-modal-dialog { max-height: calc(100vh - 20px); }
      .copyright-modal-body { padding: 8px; }
      .chain-flow-visual { min-height: 270px; }
      .flow-node { width: 82px; font-size: 11px; }
      .flow-node.app { left: 4%; }
      .flow-node.point { right: 4%; }
      .flow-node.block { left: 4%; }
      .flow-node.node { right: 4%; }
      .hero-bottom { position: relative; }
      .section-head { align-items: flex-start; flex-direction: column; }
      .symbol-story { grid-template-columns: 1fr; }
      .symbol-art { width: min(240px, 70vw); margin: 0 auto; }
      .symbol-points { grid-template-columns: 1fr; }
      h2 { font-size: 26px; }
    }
    /* AISFOR Android WebView safe area */
    body.aisfor-native-webview .topbar {
      position: sticky;
      top: 0;
      padding-top: min(52px, var(--aismall-android-top-inset, 0px));
    }

    body.aisfor-native-webview .hero-inner {
      padding-bottom: calc(96px + min(56px, var(--aismall-android-bottom-inset, 0px)));
    }

    body.aisfor-native-webview main,
    body.aisfor-native-webview footer {
      padding-bottom: calc(64px + min(56px, var(--aismall-android-bottom-inset, 0px)));
    }

    @media (max-width: 760px) {
      body.aisfor-native-webview .topbar {
        position: sticky;
        top: 0;
        padding-top: min(48px, var(--aismall-android-top-inset, 0px));
      }
      body.aisfor-native-webview .hero-inner {
        padding-top: 42px;
        padding-bottom: calc(124px + min(56px, var(--aismall-android-bottom-inset, 0px)));
      }
      body.aisfor-native-webview .hero-bottom {
        padding-bottom: calc(18px + min(48px, var(--aismall-android-bottom-inset, 0px)));
      }
    }
  </style>
</head>
<body>
  <header class="topbar">
    <div class="wrap nav">
      <a class="brand" href="/">
        <img class="brand-mark" src="/images/plai-symbol-mark-v1.png" alt="plais Chain symbol" />
        <div>
          <div class="brand-title"><%= chainName %></div>
          <div class="brand-sub"><%= networkId %></div>
        </div>
      </a>
      <nav class="nav-actions" aria-label="<%= chainT('mainNavigation') %>">
        <a class="button primary" href="/?lang=<%= chainLang %>" aria-current="page"><%= chainT('navChainHome') %></a>
        <a class="button" href="https://aisfor.kr/home"><%= chainT('navHome') %></a>
        <a class="button" href="/explorer?lang=<%= chainLang %>"><%= chainT('navExplorer') %></a>
        <a class="button" href="https://aisfor.kr/chain-wallet?next=/wallet/evm"><%= chainT('navWallet') %></a>
        <a class="button" href="<%= chainLang === 'ko' ? '/whitepaper/ko' : '/whitepaper' %>"><%= chainT('navWhitepaper') %></a>
        <a class="button" href="/source"><%= chainT('navSource') %></a>
        <a class="button" href="/listing"><%= chainT('navListing') %></a>
        <a class="button" href="#install"><%= chainT('navInstall') %></a>
      </nav>
      <div class="lang-actions" aria-label="<%= chainT('languageLabel') %>">
        <% chainLangs.forEach(function(item){ %>
          <a class="button <%= chainLang === item ? 'active' : '' %>" href="<%= chainLangUrl(item) %>"><%= item.toUpperCase() %></a>
        <% }) %>
      </div>
    </div>
  </header>

  <section class="hero">
    <div class="hero-motion" aria-hidden="true">
      <svg class="hero-circuit-svg" viewBox="0 0 1440 620" preserveAspectRatio="none">
        <defs>
          <linearGradient id="heroCircuitGradient" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stop-color="rgba(122,247,210,0)" />
            <stop offset="34%" stop-color="rgba(122,247,210,0.95)" />
            <stop offset="52%" stop-color="rgba(255,255,255,0.95)" />
            <stop offset="72%" stop-color="rgba(78,174,255,0.78)" />
            <stop offset="100%" stop-color="rgba(78,174,255,0)" />
          </linearGradient>
          <filter id="heroCircuitGlow" x="-35%" y="-35%" width="170%" height="170%">
            <feGaussianBlur stdDeviation="3.4" result="blur" />
            <feMerge>
              <feMergeNode in="blur" />
              <feMergeNode in="SourceGraphic" />
            </feMerge>
          </filter>
        </defs>
        <path class="base" d="M690 300 C780 260 850 240 930 230 C1035 218 1135 182 1240 138" />
        <path class="base" d="M690 300 C805 322 890 350 982 390 C1092 438 1198 492 1340 548" />
        <path class="base" d="M690 300 C780 345 812 428 860 520 C904 604 1044 600 1190 584" />
        <path class="base" d="M690 300 C760 198 805 156 890 112 C982 64 1120 50 1322 58" />
        <path class="base" d="M620 374 C748 390 842 384 936 358 C1042 328 1136 316 1276 330" />
        <path class="base" d="M590 458 C732 454 842 452 944 472 C1034 490 1114 520 1248 520" />

        <path class="flow fast" d="M690 300 C780 260 850 240 930 230 C1035 218 1135 182 1240 138" />
        <path class="flow" d="M690 300 C805 322 890 350 982 390 C1092 438 1198 492 1340 548" />
        <path class="flow slow" d="M690 300 C780 345 812 428 860 520 C904 604 1044 600 1190 584" />
        <path class="flow" d="M690 300 C760 198 805 156 890 112 C982 64 1120 50 1322 58" />
        <path class="flow fast" d="M620 374 C748 390 842 384 936 358 C1042 328 1136 316 1276 330" />
        <path class="flow slow" d="M590 458 C732 454 842 452 944 472 C1034 490 1114 520 1248 520" />

        <circle class="junction j1" cx="690" cy="300" r="5" />
        <circle class="junction j2" cx="930" cy="230" r="4" />
        <circle class="junction j3" cx="982" cy="390" r="4" />
        <circle class="junction j4" cx="944" cy="472" r="4" />
      </svg>
      <span class="hero-beam"></span>
      <span class="hero-beam beam-2"></span>
      <span class="hero-beam beam-3"></span>
      <span class="hero-flow-line flow-1"></span>
      <span class="hero-flow-line flow-2"></span>
      <span class="hero-flow-line flow-3"></span>
      <span class="hero-flow-line flow-4"></span>
      <span class="hero-flow-line flow-5"></span>
      <span class="hero-flow-line flow-6"></span>
      <span class="hero-flow-dot dot-1"></span>
      <span class="hero-flow-dot dot-2"></span>
      <span class="hero-flow-dot dot-3"></span>
      <span class="hero-flow-dot dot-4"></span>
      <span class="hero-pulse"></span>
      <span class="hero-pulse pulse-2"></span>
    </div>
    <div class="wrap">
      <div class="hero-inner">
        <p class="eyebrow"><%= chainT(isMainnet ? 'mainnetLabel' : 'testnetLabel') %></p>
        <h1><%= chainT('heroTitle') %></h1>
        <p class="lead"><%= chainT('heroLead') %></p>
        <div class="hero-actions">
          <a class="button primary" href="/explorer?lang=<%= chainLang %>"><%= chainT('openExplorer') %></a>
          <a class="button" href="https://aisfor.kr/downloads/aisfor-latest.apk"><%= chainT('installApp') %></a>
          <a class="button" href="<%= chainLang === 'ko' ? '/whitepaper/ko' : '/whitepaper' %>"><%= chainT('viewWhitepaper') %></a>
        </div>
        <div class="mode-strip">
          <div class="mode-item"><span><%= chainT('modeSymbol') %></span><strong><%= symbol %></strong></div>
        </div>
      </div>
    </div>
    <div class="hero-bottom">
    <div class="wrap ticker">
      <div><span><%= chainT('statLatestBlock') %></span><strong>#<%= latestHeight %></strong></div>
      <div><span><%= chainT('statWallets') %></span><strong><%= walletCount %></strong></div>
      <div><span><%= chainT('statValidators') %></span><strong><%= validatorCount %></strong></div>
      <div><span><%= chainT('statNodes') %></span><strong><%= onlineNodeCount %></strong></div>
      <div><span><%= chainT('statNetReward') %></span><strong><%= formatNumber(rewardSummary.net, 2) %> <%= rewardUnit %></strong></div>
    </div>
  </div>
</section>

  <main>
    <section class="section">
      <div class="wrap">
        <div class="section-head">
          <div>
            <h2><%= chainT('whatTitle') %></h2>
            <div class="section-sub">
              <%= chainT('whatSub') %>
            </div>
          </div>
          <a class="button teal" href="/status"><%= chainT('operatingStatus') %></a>
        </div>
        <div class="grid-4">
          <article class="panel">
            <small><%= chainT('activityLabel') %></small>
            <h3><%= chainT('activityTitle') %></h3>
            <p><%= chainT('activityDesc') %></p>
          </article>
          <article class="panel">
            <small><%= chainT('storageLabel') %></small>
            <h3><%= chainT('storageTitle') %></h3>
            <p><%= chainT('storageDesc') %></p>
          </article>
          <article class="panel">
            <small><%= chainT('nodeLabel') %></small>
            <h3><%= chainT('nodeTitle') %></h3>
            <p><%= chainT('nodeDesc') %></p>
          </article>
          <article class="panel">
            <small><%= chainT('proofLabel') %></small>
            <h3><%= chainT('proofTitle') %></h3>
            <p><%= chainT('proofDesc') %></p>
          </article>
        </div>
      </div>
    </section>

    <section class="symbol-band">
      <div class="wrap symbol-story">
        <img class="symbol-art" src="/images/plais-symbol.png" alt="PLAIS coin symbol">
        <div class="symbol-copy">
          <p class="eyebrow">PLAIS SYMBOL</p>
          <h2><%= chainT('symbolTitle') %></h2>
          <div class="section-sub"><%= chainT('symbolSub') %></div>
          <div class="symbol-points">
            <div class="symbol-point"><strong><%= chainT('symbolPTitle') %></strong><p><%= chainT('symbolPDesc') %></p></div>
            <div class="symbol-point"><strong><%= chainT('symbolLoopTitle') %></strong><p><%= chainT('symbolLoopDesc') %></p></div>
            <div class="symbol-point"><strong><%= chainT('symbolNodeTitle') %></strong><p><%= chainT('symbolNodeDesc') %></p></div>
          </div>
        </div>
      </div>
    </section>

    <section class="band">
      <div class="wrap split">
        <div class="whitepaper">
          <div>
            <p class="eyebrow">WHITEPAPER</p>
            <h2><%= chainT('whitepaperTitle') %></h2>
            <p><%= chainT('whitepaperDesc') %></p>
          </div>
          <div class="whitepaper-actions">
            <a class="button primary" href="/whitepaper/ko"><%= chainT('koreanWhitepaper') %></a>
            <a class="button" href="/whitepaper"><%= chainT('englishWhitepaper') %></a>
            <a class="button" href="/explorer?lang=<%= chainLang %>"><%= chainT('rewardLedgerLink') %></a>
          </div>
        </div>
        <div class="grid-3">
          <article class="panel">
            <small><%= chainT('supplyLabel') %></small>
            <h3><%= chainT('supplyTitle') %></h3>
            <strong class="value"><%= totalSupply %> <%= symbol %></strong>
            <p><%= chainT('supplyDesc') %></p>
          </article>
          <article class="panel">
            <small><%= chainT('circulationLabel') %></small>
            <h3><%= chainT('circulationTitle') %></h3>
            <strong class="value"><%= formatNumber(circulating, 2) %> <%= symbol %></strong>
            <p><%= chainT('circulationDesc') %></p>
          </article>
          <article class="panel">
            <small><%= chainT('rewardLedgerLabel') %></small>
            <h3><%= chainT('rewardLedgerTitle') %></h3>
            <strong class="value"><%= rewardSummary.count %><%= chainT('countSuffix') %></strong>
            <p><%= chainT('rewardTotalLabel') %> <%= formatNumber(rewardSummary.positive, 2) %>, <%= chainT('penaltyLabel') %> <%= formatNumber(rewardSummary.negative, 2) %>.</p>
          </article>
        </div>
      </div>
    </section>

    <section class="section">
      <div class="wrap">
        <div class="section-head">
          <div>
            <h2><%= chainT('servicesTitle') %></h2>
            <div class="section-sub"><%= chainT('servicesDesc') %></div>
          </div>
        </div>
        <div class="grid-4">
          <article class="panel">
            <small>plais APP</small>
            <h3><%= chainT('appServiceTitle') %></h3>
            <p><%= chainT('appServiceDesc') %></p>
          </article>
          <article class="panel">
            <small>plais TALK / GROUP</small>
            <h3><%= chainT('talkServiceTitle') %></h3>
            <p><%= chainT('talkServiceDesc') %></p>
          </article>
          <article class="panel">
            <small>plais MALL</small>
            <h3><%= chainT('mallServiceTitle') %></h3>
            <p><%= chainT('mallServiceDesc') %></p>
          </article>
          <article class="panel">
            <small>Node Pool</small>
            <h3><%= chainT('nodeServiceTitle') %></h3>
            <p><%= chainT('nodeServiceDesc') %></p>
          </article>
        </div>
      </div>
    </section>

    <section id="patents" class="patent-band" aria-labelledby="patent-title">
      <div class="wrap">
        <div class="section-head">
          <div>
            <p class="eyebrow">PLAIS IP PORTFOLIO</p>
            <h2 id="patent-title"><%= chainT('patentTitle') %></h2>
            <div class="section-sub"><%= chainT('patentDesc') %></div>
          </div>
          <div class="patent-summary" aria-label="<%= chainT('patentSummaryAria') %>">
            <span><%= chainT('patentPending') %></span>
            <strong><%= chainT('countryFour') %></strong>
          </div>
        </div>

        <div class="patent-grid">
          <article class="patent-card">
            <div class="patent-meta">
              <span class="patent-number"><%= chainT('patent1Label') %></span>
              <span class="patent-status"><%= chainT('patentPending') %></span>
            </div>
            <h3><%= chainT('patent1Title') %></h3>
            <p><%= chainT('patent1Desc') %></p>
          </article>

          <article class="patent-card">
            <div class="patent-meta">
              <span class="patent-number"><%= chainT('patent2Label') %></span>
              <span class="patent-status"><%= chainT('patentPending') %></span>
            </div>
            <h3><%= chainT('patent2Title') %></h3>
            <p><%= chainT('patent2Desc') %></p>
          </article>

          <article class="patent-card">
            <div class="patent-meta">
              <span class="patent-number"><%= chainT('patent3Label') %></span>
              <span class="patent-status"><%= chainT('patentPending') %></span>
            </div>
            <h3><%= chainT('patent3Title') %></h3>
            <p><%= chainT('patent3Desc') %></p>
          </article>

          <article class="patent-card coin-core">
            <div class="patent-meta">
              <span class="patent-number"><%= chainT('patent4Label') %></span>
              <span class="patent-status"><%= chainT('patentPending') %></span>
            </div>
            <h3><%= chainT('patent4Title') %></h3>
            <p><%= chainT('patent4Desc') %></p>
            <span class="patent-core-label"><%= chainT('coinCoreLabel') %></span>
          </article>
        </div>

        <p class="patent-notice"><%= chainT('patentNotice') %></p>
      </div>
    </section>

    <section id="copyright-registrations" class="copyright-band" aria-labelledby="copyright-title">
      <div class="wrap">
        <div class="section-head">
          <div>
            <p class="eyebrow">PLAIS SOFTWARE COPYRIGHT</p>
            <h2 id="copyright-title"><%= chainT('copyrightTitle') %></h2>
            <div class="section-sub"><%= chainT('copyrightDesc') %></div>
          </div>
          <div class="copyright-summary" aria-label="<%= chainT('copyrightSummaryAria') %>">
            <span><%= chainT('registeredSoftware') %></span>
            <strong><%= chainT('countrySix') %></strong>
          </div>
        </div>

        <div class="copyright-grid">
          <article class="copyright-card">
            <div class="copyright-seal" aria-hidden="true">C</div>
            <div>
              <small>APPLICATION · BUSINESS MANAGEMENT</small>
              <h3><%= chainT('plaiforName') %></h3>
              <p><%= chainT('plaiforDesc') %></p>
              <span class="copyright-registration">C-2026-036685 · 2026. 7. 27.</span>
            </div>
            <a class="copyright-document" href="/copyright/plaifor.png?v=20260805-redacted" aria-label="PLAIFOR <%= chainT('certificateLabel') %> <%= chainT('certificateOpen') %>">
              <img src="/copyright/plaifor.png?v=20260805-redacted" alt="PLAIFOR <%= chainT('certificateLabel') %>" loading="lazy" />
              <span><%= chainT('certificateView') %></span>
            </a>
          </article>

          <article class="copyright-card">
            <div class="copyright-seal" aria-hidden="true">C</div>
            <div>
              <small>APPLICATION PROGRAM</small>
              <h3><%= chainT('plaitalkName') %></h3>
              <p><%= chainT('plaitalkDesc') %></p>
              <span class="copyright-registration">C-2026-036686 · 2026. 7. 27.</span>
            </div>
            <a class="copyright-document" href="/copyright/plaitalk.png?v=20260805-redacted" aria-label="PLAITALK <%= chainT('certificateLabel') %> <%= chainT('certificateOpen') %>">
              <img src="/copyright/plaitalk.png?v=20260805-redacted" alt="PLAITALK <%= chainT('certificateLabel') %>" loading="lazy" />
              <span><%= chainT('certificateView') %></span>
            </a>
          </article>

          <article class="copyright-card">
            <div class="copyright-seal" aria-hidden="true">C</div>
            <div>
              <small>APPLICATION · BUSINESS MANAGEMENT</small>
              <h3><%= chainT('plaigroupName') %></h3>
              <p><%= chainT('plaigroupDesc') %></p>
              <span class="copyright-registration">C-2026-036687 · 2026. 7. 27.</span>
            </div>
            <a class="copyright-document" href="/copyright/plaigroup.png?v=20260805-redacted" aria-label="PLAIGROUP <%= chainT('certificateLabel') %> <%= chainT('certificateOpen') %>">
              <img src="/copyright/plaigroup.png?v=20260805-redacted" alt="PLAIGROUP <%= chainT('certificateLabel') %>" loading="lazy" />
              <span><%= chainT('certificateView') %></span>
            </a>
          </article>

          <article class="copyright-card">
            <div class="copyright-seal" aria-hidden="true">C</div>
            <div>
              <small>APPLICATION PROGRAM</small>
              <h3><%= chainT('plaisharingName') %></h3>
              <p><%= chainT('plaisharingDesc') %></p>
              <span class="copyright-registration">C-2026-036688 · 2026. 7. 27.</span>
            </div>
            <a class="copyright-document" href="/copyright/plaisharing.png?v=20260805-redacted" aria-label="PLAISHARING <%= chainT('certificateLabel') %> <%= chainT('certificateOpen') %>">
              <img src="/copyright/plaisharing.png?v=20260805-redacted" alt="PLAISHARING <%= chainT('certificateLabel') %>" loading="lazy" />
              <span><%= chainT('certificateView') %></span>
            </a>
          </article>

          <article class="copyright-card">
            <div class="copyright-seal" aria-hidden="true">C</div>
            <div>
              <small>INDUSTRIAL · E-COMMERCE</small>
              <h3><%= chainT('plaimallName') %></h3>
              <p><%= chainT('plaimallDesc') %></p>
              <span class="copyright-registration">C-2026-036689 · 2026. 7. 27.</span>
            </div>
            <a class="copyright-document" href="/copyright/plaimall.png?v=20260805-redacted" aria-label="PLAIMALL <%= chainT('certificateLabel') %> <%= chainT('certificateOpen') %>">
              <img src="/copyright/plaimall.png?v=20260805-redacted" alt="PLAIMALL <%= chainT('certificateLabel') %>" loading="lazy" />
              <span><%= chainT('certificateView') %></span>
            </a>
          </article>

          <article class="copyright-card">
            <div class="copyright-seal" aria-hidden="true">C</div>
            <div>
              <small>SYSTEM · DISTRIBUTED PROCESSING</small>
              <h3><%= chainT('plaischainName') %></h3>
              <p><%= chainT('plaischainDesc') %></p>
              <span class="copyright-registration">C-2026-036690 · 2026. 7. 27.</span>
            </div>
            <a class="copyright-document" href="/copyright/plaischain.png?v=20260805-redacted" aria-label="PLAISCHAIN <%= chainT('certificateLabel') %> <%= chainT('certificateOpen') %>">
              <img src="/copyright/plaischain.png?v=20260805-redacted" alt="PLAISCHAIN <%= chainT('certificateLabel') %>" loading="lazy" />
              <span><%= chainT('certificateView') %></span>
            </a>
          </article>
        </div>

        <p class="copyright-notice"><%= chainT('copyrightNotice') %></p>
      </div>
    </section>

    <section id="install" class="section">
      <div class="wrap split">
        <div>
          <div class="section-head">
            <div>
              <h2><%= chainT('installTitle') %></h2>
              <div class="section-sub"><%= chainT('installDesc') %></div>
            </div>
          </div>
          <div class="flow">
            <div class="flow-row">
              <div class="num">1</div>
              <div><h3><%= chainT('step1Title') %></h3><p><%= chainT('step1Desc') %></p></div>
            </div>
            <div class="flow-row">
              <div class="num">2</div>
              <div><h3><%= chainT('step2Title') %></h3><p><%= chainT('step2Desc') %></p></div>
            </div>
            <div class="flow-row">
              <div class="num">3</div>
              <div><h3><%= chainT('step3Title') %></h3><p><%= chainT('step3Desc') %></p></div>
            </div>
            <div class="flow-row">
              <div class="num">4</div>
              <div><h3><%= chainT('step4Title') %></h3><p><%= chainT('step4Desc') %></p></div>
            </div>
          </div>
        </div>
        <div class="whitepaper">
          <div>
            <p class="eyebrow">DOWNLOAD</p>
            <h2><%= chainT('downloadTitle') %></h2>
            <p><%= chainT('downloadDesc') %></p>
            <div class="chain-flow-visual" aria-label="<%= chainT('rewardFlowAria') %>">
              <div class="star-field"></div>
              <div class="flow-line line-1"></div>
              <div class="flow-line line-2"></div>
              <div class="flow-line line-3"></div>
              <div class="flow-line line-4"></div>
              <div class="flow-node app"><span><strong>APP</strong>active</span></div>
              <div class="flow-node point"><span><strong>POINT</strong>earned</span></div>
              <div class="flow-node ledger"><span><strong>plais</strong>ledger</span></div>
              <div class="flow-node block"><span><strong>BLOCK</strong>record</span></div>
              <div class="flow-node node"><span><strong>NODE</strong>verify</span></div>
              <div class="flow-packet"></div>
              <div class="flow-packet packet-2"></div>
              <div class="flow-packet packet-3"></div>
            </div>
          </div>
          <div class="whitepaper-actions">
            <a class="button primary" href="https://aisfor.kr/downloads/aisfor-latest.apk"><%= chainT('latestApk') %></a>
            <a class="button" href="https://aisfor.kr/points">plais Point</a>
            <a class="button" href="https://aisfor.kr/chain-wallet?next=/wallet/evm">EVM Wallet</a>
          </div>
        </div>
      </div>
    </section>

    <section class="band">
      <div class="wrap">
        <div class="section-head">
          <div>
            <h2><%= chainT('networkStatusTitle') %></h2>
            <div class="section-sub"><%= chainT('networkStatusSub') %></div>
          </div>
          <a class="button dark" href="/explorer?lang=<%= chainLang %>">Explorer</a>
        </div>
        <div class="grid-4">
          <article class="panel">
            <small><%= chainT('statLatestBlock') %></small>
            <h3><%= chainT('statLatestBlock') %></h3>
            <strong class="value">#<%= latestHeight %></strong>
            <p><%= chainT('finalizedBlocks') %> <%= finalizedBlocks %></p>
          </article>
          <article class="panel">
            <small><%= chainT('modeChainStatus') %></small>
            <h3><%= chainT('chainVerifyTitle') %></h3>
            <strong class="value <%= chainStatus === 'OK' ? 'status-ok' : 'status-warn' %>"><%= chainStatus %></strong>
            <p><%= chainT('chainVerifyDesc') %></p>
          </article>
          <article class="panel">
            <small><%= chainT('modeReadiness') %></small>
            <h3><%= chainT('mainnetOperationTitle') %></h3>
            <strong class="value <%= mainnetOperational ? 'status-ok' : 'status-warn' %>"><%= chainT(mainnetOperational ? 'mainnetOperating' : 'mainnetChecking') %></strong>
            <p>QBFT <%= validatorCount %> / <%= expectedValidatorCount %></p>
          </article>
          <article class="panel">
            <small><%= chainT('statValidators') %></small>
            <h3><%= chainT('validatorNodeTitle') %></h3>
            <strong class="value"><%= validatorCount %> / <%= onlineNodeCount %></strong>
            <p><%= chainT('onlineNodes') %> <%= onlineNodeCount %></p>
          </article>
        </div>
      </div>
    </section>

    <section class="section">
      <div class="wrap footer-links">
        <a class="footer-link" href="https://aisfor.kr/home">PLAIFOR <span><%= chainT('footerPlaifor') %></span></a>
        <a class="footer-link" href="/explorer?lang=<%= chainLang %>">Explorer <span><%= chainT('footerExplorer') %></span></a>
        <a class="footer-link" href="https://aisfor.kr/chain-wallet?next=/wallet/evm">EVM Wallet <span><%= chainT('footerWallet') %></span></a>
        <a class="footer-link" href="<%= chainLang === 'ko' ? '/whitepaper/ko' : '/whitepaper' %>">Whitepaper <span><%= chainT('footerWhitepaper') %></span></a>
        <a class="footer-link" href="/source">Source <span><%= chainT('footerSource') %></span></a>
        <a class="footer-link" href="/listing">Listing <span><%= chainT('footerListing') %></span></a>
        <a class="footer-link" href="/status"><%= chainT('footerStatusTitle') %> <span><%= chainT('footerStatus') %></span></a>
      </div>
    </section>
  </main>

  <div id="copyright-modal" class="copyright-modal" role="dialog" aria-modal="true" aria-labelledby="copyright-modal-title" hidden>
    <div class="copyright-modal-backdrop" data-copyright-close></div>
    <div class="copyright-modal-dialog">
      <div class="copyright-modal-head">
        <h3 id="copyright-modal-title"><%= chainT('modalTitle') %></h3>
        <button class="copyright-modal-close" type="button" data-copyright-close aria-label="<%= chainT('modalClose') %>">&times;</button>
      </div>
      <div class="copyright-modal-body">
        <img id="copyright-modal-image" src="" alt="" />
      </div>
    </div>
  </div>

  <script>
    (() => {
      const modal = document.getElementById('copyright-modal');
      const modalImage = document.getElementById('copyright-modal-image');
      const modalTitle = document.getElementById('copyright-modal-title');
      const closeButton = modal.querySelector('.copyright-modal-close');
      const certificateFallback = <%- JSON.stringify(chainT('certificateLabel')) %>;
      let trigger = null;

      const closeModal = () => {
        if (modal.hidden) return;
        modal.hidden = true;
        document.body.classList.remove('copyright-modal-open');
        modalImage.removeAttribute('src');
        modalImage.alt = '';
        if (trigger) trigger.focus();
      };

      document.querySelectorAll('.copyright-document').forEach((link) => {
        link.addEventListener('click', (event) => {
          event.preventDefault();
          const thumbnail = link.querySelector('img');
          trigger = link;
          modalImage.src = link.href;
          modalImage.alt = thumbnail ? thumbnail.alt : certificateFallback;
          modalTitle.textContent = thumbnail ? thumbnail.alt : certificateFallback;
          modal.hidden = false;
          document.body.classList.add('copyright-modal-open');
          closeButton.focus();
        });
      });

      modal.querySelectorAll('[data-copyright-close]').forEach((element) => {
        element.addEventListener('click', closeModal);
      });

      document.addEventListener('keydown', (event) => {
        if (event.key === 'Escape' && !modal.hidden) closeModal();
      });
    })();
  </script>
</body>
</html>
