:root {
  --ink: #071426;
  --paper: #f2f1ec;
  --line: #c9ced1;
  --muted: #5b6673;
  --blue: #0b63f6;
  --cyan: #58ddff;
  --dark: #061120;
  --white: #fff;
  --max: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif; -webkit-font-smoothing: antialiased; }
button, a { font: inherit; -webkit-tap-highlight-color: transparent; }
.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 10px 14px; color: #fff; background: #071426; transform: translateY(-160%); }
.skip-link:focus { transform: none; }

.site-header { display: flex; min-height: 70px; align-items: center; justify-content: space-between; gap: 24px; padding: 0 max(24px,calc((100vw - var(--max))/2)); border-bottom: 1px solid #252f3e; color: #dce6f2; background: var(--dark); }
.brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand>span { display: grid; width: 34px; height: 34px; place-items: center; color: var(--dark); background: var(--cyan); font: 900 .65rem Arial,sans-serif; }
.brand strong { font: 900 .69rem Arial,sans-serif; letter-spacing: .13em; }
.site-header nav { display: flex; align-items: center; gap: 24px; }
.site-header nav a { color: #9eb0c5; font-size: .75rem; font-weight: 800; text-decoration: none; }
.site-header nav a:hover, .site-header nav a:focus-visible { color: var(--cyan); outline: none; }

.intro { display: grid; min-height: 650px; align-content: center; padding: 95px max(24px,calc((100vw - var(--max))/2)); color: #edf4fa; background-color: var(--dark); background-image: linear-gradient(rgba(110,151,202,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(110,151,202,.07) 1px,transparent 1px); background-size: 44px 44px; }
.kicker { margin: 0 0 30px; color: var(--cyan); font: 850 .61rem Arial,sans-serif; letter-spacing: .18em; }
.intro h1 { max-width: 9em; margin: 0; font-size: clamp(3.4rem,7.4vw,7.8rem); line-height: .92; letter-spacing: -.08em; }
.intro-copy { max-width: 620px; margin: 34px 0 0; color: #b1c0d1; font-size: clamp(.88rem,1.2vw,1.05rem); font-weight: 650; line-height: 1.9; }
.intro-price { display: flex; align-items: end; gap: 14px; margin: 34px 0 0; }
.intro-price strong { color: #fff; font: 900 clamp(2rem,3.2vw,3rem) Arial,sans-serif; letter-spacing: -.05em; }
.intro-price span { padding-bottom: 6px; color: #8ea1b8; font-size: .69rem; font-weight: 800; }
.intro-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.button { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; padding: 0 18px; border: 1px solid transparent; font-size: .8125rem; font-weight: 900; text-decoration: none; }
.button-primary { color: #061120; background: var(--cyan); }
.button-secondary { color: #eaf1f8; border-color: #40516a; background: transparent; }
.button:hover, .button:focus-visible { filter: brightness(1.09); outline: 2px solid #fff; outline-offset: 3px; }
.intro-specs { display: grid; max-width: 760px; grid-template-columns: repeat(3,1fr); margin: 54px 0 0; border-top: 1px solid #314156; border-left: 1px solid #314156; }
.intro-specs div { padding: 17px 18px; border-right: 1px solid #314156; border-bottom: 1px solid #314156; }
.intro-specs dt { color: #7f92ab; font-size: .59rem; font-weight: 800; }
.intro-specs dd { margin: 8px 0 0; color: #edf4fa; font-size: .69rem; font-weight: 850; }

.demo-block { padding: 110px max(24px,calc((100vw - var(--max))/2)) 125px; }
.demo-block-dark { color: #edf4fa; background: #091827; }
.demo-heading { display: grid; max-width: var(--max); grid-template-columns: 130px minmax(0,1fr) auto; align-items: end; gap: 38px; margin: 0 auto 48px; }
.demo-heading>div { min-width: 0; }
.demo-heading>p:first-child { margin: 0; color: var(--blue); font: 850 .56rem Arial,sans-serif; letter-spacing: .16em; }
.demo-block-dark .demo-heading>p:first-child { color: var(--cyan); }
.demo-heading h2 { margin: 0; font-size: clamp(2.4rem,4.5vw,5rem); line-height: .96; letter-spacing: -.065em; overflow-wrap: anywhere; }
.demo-heading div>p { max-width: 620px; margin: 17px 0 0; color: var(--muted); font-size: .81rem; font-weight: 650; line-height: 1.85; }
.demo-block-dark .demo-heading div>p { color: #9eafc3; }
.metric { margin: 0; color: #7b8793; font: 800 .56rem Arial,sans-serif; letter-spacing: .12em; white-space: nowrap; }
.metric span { color: var(--blue); font-size: 1.5rem; letter-spacing: -.04em; }
.demo-block-dark .metric span { color: var(--cyan); }

.trail-stage { position: relative; min-height: min(58vw,650px); overflow: hidden; border: 1px solid #33465c; background-color: #061120; background-image: linear-gradient(rgba(110,151,202,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(110,151,202,.07) 1px,transparent 1px); background-size: 38px 38px; cursor: crosshair; touch-action: pan-y; }
.trail-stage>p { position: absolute; z-index: 1; right: 24px; bottom: 19px; margin: 0; color: #65768d; font: 850 .54rem Arial,sans-serif; letter-spacing: .17em; }
.trail-seed { position: absolute; z-index: 1; width: clamp(125px,17vw,230px); aspect-ratio: 4/3; overflow: hidden; box-shadow: 0 28px 70px rgba(0,0,0,.36); transition: opacity .25s ease; }
.trail-seed img { display: block; width: 100%; height: 100%; object-fit: cover; }
.trail-seed-a { top: 17%; left: 16%; transform: rotate(-8deg); }
.trail-seed-b { top: 34%; left: 42%; transform: rotate(5deg); }
.trail-seed-c { top: 13%; right: 12%; transform: rotate(10deg); }
.trail-stage.is-active .trail-seed { opacity: .14; }

.split-stage { position: relative; min-height: min(68vw,690px); overflow: hidden; border: 1px solid var(--line); background: #d9dde1; }
.preset-buttons { display: flex; border: 1px solid var(--line); }
.preset-buttons button { min-width: 58px; min-height: 40px; padding: 0 12px; color: #5e6875; border: 0; border-left: 1px solid var(--line); background: transparent; font-size: .8125rem; font-weight: 850; cursor: pointer; }
.preset-buttons button:first-child { border-left: 0; }
.preset-buttons button:hover, .preset-buttons button:focus-visible, .preset-buttons button.is-active { color: #fff; background: var(--blue); outline: none; }

.demo-block-list { color: #f1f5f8; background: var(--dark); }
.demo-block-list .demo-heading div>p { color: #9eafc3; }
.demo-block-list .demo-heading>p:first-child, .demo-block-list .metric span { color: var(--cyan); }
.preview-list { position: relative; min-height: 500px; border-top: 1px solid #33465c; }
.preview-list>button { position: relative; z-index: 1; display: grid; width: 100%; min-height: 112px; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 28px; padding: 0 24px; color: #eaf1f8; border: 0; border-bottom: 1px solid #33465c; background: transparent; text-align: left; cursor: pointer; }
.preview-list>button:hover, .preview-list>button:focus-visible { color: var(--cyan); background: rgba(88,221,255,.045); outline: none; }
.preview-list>button span { color: #7f93ad; font: 800 .57rem Arial,sans-serif; letter-spacing: .12em; }
.preview-list>button strong { font-size: clamp(1.2rem,2.3vw,2rem); letter-spacing: -.03em; }
.preview-list>button i { color: #71849d; font: 800 .55rem Arial,sans-serif; font-style: normal; }

.tech-strip { display: grid; grid-template-columns: repeat(5,1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); background: #fff; }
.tech-strip p { display: grid; min-height: 90px; place-items: center; margin: 0; color: #5d6875; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); font: 850 .55rem Arial,sans-serif; letter-spacing: .1em; text-transform: uppercase; }

.package { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 70px; padding: 110px max(24px,calc((100vw - var(--max))/2)); background: #fff; }
.package-copy h2, .purchase h2 { margin: 0; font-size: clamp(2.7rem,5vw,5rem); line-height: .96; letter-spacing: -.07em; }
.package-copy>p:last-child, .purchase>div:first-child>p:last-child { max-width: 520px; margin: 22px 0 0; color: var(--muted); font-size: .84rem; font-weight: 650; line-height: 1.8; }
.package-list { margin: 0; border-top: 1px solid var(--line); }
.package-list div { display: grid; grid-template-columns: 120px minmax(0,1fr); gap: 25px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.package-list dt { color: var(--muted); font-size: .64rem; font-weight: 850; }
.package-list dd { min-width: 0; margin: 0; font-size: .78rem; font-weight: 850; overflow-wrap: anywhere; }

.purchase { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 70px; padding: 110px max(24px,calc((100vw - var(--max))/2)); color: #edf4fa; background: #091827; }
.purchase .kicker { color: var(--cyan); }
.purchase-card { padding: 34px; border: 1px solid #33465c; background: #061120; }
.purchase-card ul { display: grid; gap: 13px; margin: 0 0 28px; padding: 0; list-style: none; }
.purchase-card li { color: #bcc9d8; font-size: .76rem; font-weight: 700; line-height: 1.65; }
.purchase-card li::before { margin-right: 9px; color: var(--cyan); content: "✓"; }
.purchase-note { margin: 17px 0 0; color: #8294aa; font-size: .61rem; font-weight: 650; line-height: 1.7; }

footer { display: flex; min-height: 130px; align-items: center; justify-content: space-between; gap: 25px; padding: 0 max(24px,calc((100vw - var(--max))/2)); color: #8c9db2; background: var(--dark); }
footer strong { color: #e8eff6; font: 900 .65rem Arial,sans-serif; letter-spacing: .13em; }
footer nav { display: flex; flex-wrap: wrap; gap: 18px; }
footer a { color: #8c9db2; font-size: .62rem; font-weight: 700; text-decoration: none; }
footer a:hover, footer a:focus-visible { color: #fff; outline: none; }

@media (max-width: 820px) {
  .intro { min-height: 570px; }.intro-specs { grid-template-columns: 1fr; max-width: 520px; }
  .demo-block { padding-top: 80px; padding-bottom: 90px; }
  .demo-heading { grid-template-columns: 1fr auto; }.demo-heading>p:first-child { grid-column: 1/-1; }.demo-heading>div:nth-child(2) { grid-column: 1; }
  .trail-stage { min-height: 68vw; }.split-stage { min-height: 74vw; }
  .preview-list>button { grid-template-columns: 1fr auto; }.preview-list>button span { grid-column: 1; }.preview-list>button strong { grid-column: 1; grid-row: 2; }.preview-list>button i { grid-column: 2; grid-row: 1/3; }
  .tech-strip { grid-template-columns: repeat(2,1fr); }.tech-strip p:last-child { grid-column: 1/-1; }
  .package, .purchase { grid-template-columns: 1fr; gap: 42px; padding-top: 80px; padding-bottom: 80px; }
}

@media (max-width: 520px) {
  .site-header { min-height: 62px; padding: 0 16px; }.site-header nav { gap: 12px; }.site-header nav a:not(:last-child) { display: none; }
  .intro, .demo-block, footer { padding-right: 18px; padding-left: 18px; }
  .intro { min-height: 530px; padding-top: 70px; padding-bottom: 70px; }.intro h1 { font-size: clamp(3.05rem,16vw,4.2rem); }.intro-specs { margin-top: 40px; }
  .demo-heading { grid-template-columns: 1fr; gap: 22px; }.demo-heading>div:nth-child(2), .demo-heading>p:first-child { grid-column: auto; }.metric, .preset-buttons { justify-self: start; }
  .trail-stage { min-height: 104vw; }.trail-seed { width: 38vw; }.trail-seed-a { left: 8%; }.trail-seed-b { top: 45%; left: 34%; }.trail-seed-c { top: 18%; right: 5%; }
  .split-stage { min-height: 94vw; }
  .preview-list { min-height: 0; }.preview-list>button { min-height: 100px; padding: 0 10px; }
  .tech-strip { grid-template-columns: 1fr; }.tech-strip p:last-child { grid-column: auto; }.tech-strip p { min-height: 70px; }
  .package, .purchase { padding-right: 18px; padding-left: 18px; }.package-list div { grid-template-columns: 92px 1fr; }.purchase-card { padding: 26px 20px; }.purchase-card .button { width: 100%; }
  footer { min-height: 150px; align-items: flex-start; flex-direction: column; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}