<!doctype html>
<html lang="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="PLAI 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;
    }

    .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;
    }

    .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;
    }

    .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;
    }

    .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)); }
      .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; }
      h1 { font-size: 40px; }
    }

    @media (max-width: 720px) {
      .wrap { width: min(100% - 22px, 1280px); }
      .topbar { position: relative; 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; }
      .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; }
      h2 { font-size: 26px; }
    }
  </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="PLAI Chain symbol" />
        <div>
          <div class="brand-title"><%= chainName %></div>
          <div class="brand-sub"><%= networkId %></div>
        </div>
      </a>
      <nav class="nav-actions" aria-label="main navigation">
        <a class="button" href="https://aisfor.kr/home">PLAIFOR 홈</a>
        <a class="button primary" href="/explorer">Explorer</a>
        <a class="button" href="https://aisfor.kr/chain-wallet?next=/wallet">Wallet</a>
        <a class="button" href="/whitepaper/ko">백서</a>
        <a class="button" href="/source">Source</a>
        <a class="button" href="/listing">Listing</a>
        <a class="button" href="#install">설치</a>
      </nav>
    </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"><%= isMainnet ? 'PLAI CHAIN MAINNET' : 'PLAI CHAIN TESTNET' %></p>
        <h1>AI 앱 활동과 분산 저장 보상을 검증 가능한 체인 원장으로 연결합니다.</h1>
        <p class="lead">
          PLAI Chain은 PLAI 생태계의 앱 사용 active 보상, 스토리지 보상, 노드 active 보상과 감점 기록을
          블록, 지갑, 증명 원장으로 추적하는 AI 서비스형 블록체인입니다.
        </p>
        <div class="hero-actions">
          <a class="button primary" href="/explorer">체인 익스플로러 열기</a>
          <a class="button" href="https://aisfor.kr/downloads/aisfor-latest.apk">PLAI 앱 설치</a>
          <a class="button" href="/whitepaper/ko">백서 보기</a>
        </div>
        <div class="mode-strip">
          <div class="mode-item"><span>네트워크</span><strong><%= isMainnet ? 'Mainnet' : 'Testnet' %></strong></div>
          <div class="mode-item"><span>체인 검증</span><strong><%= chainStatus %></strong></div>
          <div class="mode-item"><span>준비도</span><strong><%= readinessScore %>%</strong></div>
          <div class="mode-item"><span>심볼</span><strong><%= symbol %></strong></div>
        </div>
      </div>
    </div>
    <div class="hero-bottom">
      <div class="wrap ticker">
        <div><span>최신 블록</span><strong>#<%= latestHeight %></strong></div>
        <div><span>지갑</span><strong><%= walletCount %></strong></div>
        <div><span>검증자</span><strong><%= validatorCount %></strong></div>
        <div><span>노드</span><strong><%= onlineNodeCount %>/<%= nodeCount %></strong></div>
        <div><span>순 보상</span><strong><%= formatNumber(rewardSummary.net, 2) %> <%= symbol %></strong></div>
      </div>
    </div>
  </section>

  <main>
    <section class="section">
      <div class="wrap">
        <div class="section-head">
          <div>
            <h2>PLAI 블록체인이 하는 일</h2>
            <div class="section-sub">
              앱에서 발생한 활동, 저장소 기여, 노드 운영 기록을 하나의 보상 원장으로 합치고 검증 가능한 블록 기록으로 남깁니다.
            </div>
          </div>
          <a class="button teal" href="/status">운영 상태</a>
        </div>
        <div class="grid-4">
          <article class="panel">
            <small>Activity Reward</small>
            <h3>앱 사용 active 보상</h3>
            <p>PLAI 앱 사용, AI 캐릭터 성장, 클라우드 활동처럼 실제 사용 행동을 보상 원장에 반영합니다.</p>
          </article>
          <article class="panel">
            <small>Storage Reward</small>
            <h3>분산 저장 기여</h3>
            <p>PC 노드가 암호화 chunk 저장과 검증에 참여하면 저장 성공, 용량 제공, 검증 성공 보상으로 기록됩니다.</p>
          </article>
          <article class="panel">
            <small>Node Active</small>
            <h3>노드 운영 보상</h3>
            <p>온라인 유지, heartbeat, 검증 참여 상태를 기준으로 노드 active 보상과 감점 흐름을 추적합니다.</p>
          </article>
          <article class="panel">
            <small>Proof Ledger</small>
            <h3>블록체인 증명</h3>
            <p>포인트와 코인 보상 흐름을 hash chain과 블록 기록으로 검증하고 Explorer에서 조회합니다.</p>
          </article>
        </div>
      </div>
    </section>

    <section class="band">
      <div class="wrap split">
        <div class="whitepaper">
          <div>
            <p class="eyebrow">WHITEPAPER</p>
            <h2>백서와 메인넷 정책</h2>
            <p>
              PLAI Chain의 보상 구조, 토크노믹스, 테스트넷 운영 범위, 메인넷 전환 기준은 백서와 정책 문서로 관리합니다.
              현재 화면은 테스트넷과 메인넷 전환 이후에도 같은 구조로 사용할 수 있게 설계했습니다.
            </p>
          </div>
          <div class="whitepaper-actions">
            <a class="button primary" href="/whitepaper/ko">한국어 백서</a>
            <a class="button" href="/whitepaper">English Whitepaper</a>
            <a class="button" href="/explorer">보상 원장 확인</a>
          </div>
        </div>
        <div class="grid-3">
          <article class="panel">
            <small>Supply</small>
            <h3>총 발행 한도</h3>
            <strong class="value"><%= totalSupply %> <%= symbol %></strong>
            <p>메인넷 전환 전 정책값과 원장 상태를 분리해서 확인합니다.</p>
          </article>
          <article class="panel">
            <small>Circulation</small>
            <h3>현재 유통량</h3>
            <strong class="value"><%= formatNumber(circulating, 2) %> <%= symbol %></strong>
            <p>지갑 서비스 기준으로 집계되는 체인 내 유통 흐름입니다.</p>
          </article>
          <article class="panel">
            <small>Reward Ledger</small>
            <h3>원장 기록</h3>
            <strong class="value"><%= rewardSummary.count %>건</strong>
            <p>보상 합계 <%= formatNumber(rewardSummary.positive, 2) %>, 감점 <%= formatNumber(rewardSummary.negative, 2) %>.</p>
          </article>
        </div>
      </div>
    </section>

    <section class="section">
      <div class="wrap">
        <div class="section-head">
          <div>
            <h2>연결되는 앱과 서비스</h2>
            <div class="section-sub">PLAI Chain은 하나의 앱이 아니라 PLAI 생태계 전체의 활동 원장을 받는 구조입니다.</div>
          </div>
        </div>
        <div class="grid-4">
          <article class="panel">
            <small>PLAI APP</small>
            <h3>AI 비서 앱</h3>
            <p>메모, 녹음, 클라우드, AI펫 성장 활동이 앱 사용 active 보상으로 연결됩니다.</p>
          </article>
          <article class="panel">
            <small>PLAI TALK / GROUP</small>
            <h3>대화와 그룹 활동</h3>
            <p>커뮤니티와 그룹 활동은 별도 연동 후 생태계 보상 항목으로 확장할 수 있습니다.</p>
          </article>
          <article class="panel">
            <small>PLAI MALL</small>
            <h3>상거래 연동</h3>
            <p>주문, 결제, 리뷰, 스토어 활동을 정책 검토 후 보상 또는 검증 원장으로 연결합니다.</p>
          </article>
          <article class="panel">
            <small>Node Pool</small>
            <h3>PC 저장 노드</h3>
            <p>사용자 PC가 저장, 검증, 복구 기여에 참여하고 노드 보상과 담보 상태를 확인합니다.</p>
          </article>
        </div>
      </div>
    </section>

    <section id="install" class="section">
      <div class="wrap split">
        <div>
          <div class="section-head">
            <div>
              <h2>설치하고 확인하는 순서</h2>
              <div class="section-sub">일반 사용자는 PLAI 앱과 포인트 화면을 먼저 보면 되고, 세부 검증은 Explorer에서 확인합니다.</div>
            </div>
          </div>
          <div class="flow">
            <div class="flow-row">
              <div class="num">1</div>
              <div><h3>PLAI 앱 설치</h3><p>최신 APK를 설치하고 로그인하면 앱 활동 포인트와 체인 지갑 연결을 사용할 수 있습니다.</p></div>
            </div>
            <div class="flow-row">
              <div class="num">2</div>
              <div><h3>PLAI Point 확인</h3><p>평소에는 포인트 화면에서 총 포인트, 앱 활동 포인트, 저장 포인트, 감점을 확인합니다.</p></div>
            </div>
            <div class="flow-row">
              <div class="num">3</div>
              <div><h3>Explorer로 검증</h3><p>보상 원장, 블록 높이, txHash, proof id/hash가 필요할 때 체인 익스플로러에서 확인합니다.</p></div>
            </div>
            <div class="flow-row">
              <div class="num">4</div>
              <div><h3>Node Pool 참여</h3><p>PC 저장 노드를 켜면 저장소 제공과 검증 기여 기록이 노드 원장에 반영됩니다.</p></div>
            </div>
          </div>
        </div>
        <div class="whitepaper">
          <div>
            <p class="eyebrow">DOWNLOAD</p>
            <h2>PLAI 앱과 노드 도구</h2>
            <p>
              모바일 앱은 사용자 활동과 포인트 확인의 중심이고, PC 노드는 저장소 기여와 검증 참여의 중심입니다.
              메인넷 전환 후에도 사용 흐름은 동일하게 유지하는 방향입니다.
            </p>
            <div class="chain-flow-visual" aria-label="PLAI reward ledger animation">
              <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>PLAI</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">최신 APK</a>
            <a class="button" href="https://aisfor.kr/points">PLAI Point</a>
            <a class="button" href="https://aisfor.kr/chain-wallet?next=/wallet">Wallet</a>
          </div>
        </div>
      </div>
    </section>

    <section class="band">
      <div class="wrap">
        <div class="section-head">
          <div>
            <h2>네트워크 상태</h2>
            <div class="section-sub">홈페이지 첫 화면에서도 현재 테스트넷과 메인넷 준비 상태를 바로 판단할 수 있게 유지합니다.</div>
          </div>
          <a class="button dark" href="/explorer">Explorer</a>
        </div>
        <div class="grid-4">
          <article class="panel">
            <small>Latest Block</small>
            <h3>최신 블록</h3>
            <strong class="value">#<%= latestHeight %></strong>
            <p>확정 블록 <%= finalizedBlocks %>개</p>
          </article>
          <article class="panel">
            <small>Chain Verify</small>
            <h3>체인 검증</h3>
            <strong class="value <%= chainStatus === 'OK' ? 'status-ok' : 'status-warn' %>"><%= chainStatus %></strong>
            <p>Proof ledger hash chain 기준입니다.</p>
          </article>
          <article class="panel">
            <small>Readiness</small>
            <h3>메인넷 준비도</h3>
            <strong class="value"><%= readinessScore %>%</strong>
            <p><%= readinessLabel %></p>
          </article>
          <article class="panel">
            <small>Validators</small>
            <h3>검증자 / 노드</h3>
            <strong class="value"><%= validatorCount %> / <%= nodeCount %></strong>
            <p>온라인 노드 <%= 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>앱 홈으로 이동</span></a>
        <a class="footer-link" href="/explorer">Explorer <span>보상, 블록, TX</span></a>
        <a class="footer-link" href="https://aisfor.kr/chain-wallet?next=/wallet">Wallet <span>지갑과 노드 담보</span></a>
        <a class="footer-link" href="/whitepaper/ko">Whitepaper <span>정책과 구조</span></a>
        <a class="footer-link" href="/source">Source <span>공개 소스 다운로드</span></a>
        <a class="footer-link" href="/listing">Listing <span>상장 심사 자료</span></a>
        <a class="footer-link" href="/status">운영 상태 <span>체인 점검 화면</span></a>
      </div>
    </section>
  </main>
</body>
</html>
