/* Base tokens */
:root{
  --bg:#0b0b10;
  --paper:#10121a;
  --ink:#eaf0ff;
  --muted:#a7b0c6;
  --primary:#6ea8ff;
  --primary-2:#b17cff;
  --accent:#ff65a3;
  --accent-2:#ffd27e;
  --card:#151927;
  --border:rgba(255,255,255,.08);
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --max:1100px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Zen Kaku Gothic New", system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
  color:var(--ink);
  background: radial-gradient(1200px 600px at 20% -10%, #1d2140 0%, #0b0b10 60%) fixed;
  line-height:1.7;
  font-weight:500;
}

img{max-width:100%;display:block}

/* Utilities */
.container{width:min(100% - 32px, var(--max)); margin-inline:auto}
.section{padding:72px 0}
.section.alt{background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.0))}
.section-title{
  font-size:clamp(22px, 3.5vw, 32px);
  margin:0 0 24px;
  letter-spacing:.02em;
}
.muted{color:var(--muted)}
.small{font-size:.9rem}
.strong{font-weight:700}
.link{color:var(--primary)}
address{font-style:normal}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; padding:.75rem 1rem;
  border-radius:999px; background:linear-gradient(135deg, var(--primary), var(--accent));
  color:#0a0a0e; font-weight:800; text-decoration:none; box-shadow:var(--shadow);
  transition:transform .12s ease, filter .2s ease;
}
.btn:hover{transform:translateY(-1px); filter:brightness(1.05)}
.btn--ghost{
  background:transparent; color:var(--ink); border:1px solid var(--border); box-shadow:none;
}
.btn--lg{padding:1rem 1.25rem; font-size:1.05rem}
.btn--sm{padding:.5rem .85rem; font-size:.95rem}

/* Header */
.site-header{
  position:sticky; top:0; z-index:100; backdrop-filter:saturate(1.2) blur(8px);
  background:rgba(11,11,16,.6); border-bottom:1px solid var(--border);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:12px 0}
.logo{display:flex; align-items:center; gap:.6rem; color:var(--ink); text-decoration:none; font-weight:900}
.logo span{letter-spacing:.03em}
.nav{display:flex; gap:18px; align-items:center}
.nav a{color:var(--ink); text-decoration:none; font-weight:700; opacity:.9}
.nav a:hover{opacity:1}

/* Hero */
.hero{position:relative; overflow:hidden; padding:64px 0 40px}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center}
.eyebrow{color:var(--accent-2); font-weight:800; letter-spacing:.08em}
.hero-title{
  font-size:clamp(36px, 6.5vw, 76px);
  line-height:1.05; margin:.25em 0 .3em; font-weight:900; letter-spacing:.02em;
}
.lead{font-size:clamp(15px, 2.2vw, 18px); color:var(--muted); max-width:46ch}
.hero-visual img{border-radius:24px; box-shadow:var(--shadow)}
.hero-bg{
  position:absolute; inset:auto -10% -20% -10%;
  height:40vh;
  background:
    radial-gradient(600px 200px at 10% 0%, rgba(110,168,255,.35), transparent 60%),
    radial-gradient(600px 200px at 90% 30%, rgba(255,101,163,.35), transparent 60%);
  filter:blur(30px); pointer-events:none; z-index:-1;
}
.cta-row{display:flex; gap:12px; margin-top:18px; flex-wrap:wrap}

/* Cards */
.cards-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:20px; box-shadow:var(--shadow);
}
.card-title{font-size:1.1rem; margin:0 0 .25rem}
.card-big{font-size:1.4rem; font-weight:900; letter-spacing:.02em}

/* Timeline */
.timeline{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.tl-item{background:var(--paper); border:1px solid var(--border); border-radius:var(--radius); padding:18px}
.tl-badge{
  display:inline-block; background:linear-gradient(135deg, var(--primary-2), var(--accent));
  color:#0a0a0e; font-weight:900; border-radius:999px; padding:.35rem .7rem; margin-bottom:.5rem
}

/* Steps */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:8px}
.step{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:20px; position:relative}
.step-num{position:absolute; top:14px; right:16px; font-weight:900; color:var(--muted); opacity:.6}
.step-title{margin:.2rem 0 .4rem; font-size:1.1rem}

/* Ticket */
.grid{display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:center}
.ticket-card{
  position:relative; height:240px; border-radius:22px; background:linear-gradient(135deg, #b17cff, #6ea8ff);
  display:flex; align-items:flex-end; justify-content:flex-end; padding:24px; overflow:hidden; border:1px solid var(--border)
}
.ticket-title{font-weight:900; text-align:right; font-size:40px; line-height:1; opacity:.15}
.ticket-shine{
  position:absolute; inset:-40% -10% auto; height:80%; transform:rotate(-12deg);
  background:linear-gradient(90deg, rgba(255,255,255,.0), rgba(255,255,255,.45), rgba(255,255,255,.0));
  filter:blur(10px)
}
.ticket-lines{position:absolute; inset:auto 0 0 0; height:56px; background:repeating-linear-gradient(90deg, rgba(255,255,255,.1) 0 6px, rgba(255,255,255,0) 6px 12px)}

/* Access */
.access{display:grid; grid-template-columns:1fr; gap:18px}

/* Contact */
.contact .cta-row{margin-top:8px}

/* Footer */
.site-footer{border-top:1px solid var(--border); padding:28px 0 40px; background:rgba(0,0,0,.25)}
.footer-inner{display:flex; align-items:center; justify-content:space-between}

/* Responsive */
@media (max-width: 960px){
  .nav{display:none}
  .hero-grid, .grid{grid-template-columns:1fr}
  .cards-3, .timeline, .steps{grid-template-columns:1fr}
  .hero{padding-top:24px}
}