:root {
  --ink: #111827;
  --muted: #667085;
  --line: rgba(17, 24, 39, .09);
  --blue: #5b7cfa;
  --cyan: #56c7d8;
  --violet: #8d6bff;
  --coral: #ff8fa3;
  --gold: #f8c86a;
  --shadow: 0 24px 80px rgba(28, 43, 77, .12);
  --shadow-soft: 0 14px 42px rgba(28, 43, 77, .08);
  --radius-xl: 34px;
  --radius-lg: 26px;
  --max: 1160px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: radial-gradient(circle at 12% 8%, rgba(141, 107, 255, .16), transparent 28vw), radial-gradient(circle at 88% 18%, rgba(86, 199, 216, .18), transparent 26vw), linear-gradient(180deg, #fff 0%, #f8faff 48%, #fff 100%);
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(17,24,39,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(17,24,39,.02) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(180deg, rgba(0,0,0,.35), transparent 70%); }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.ambient { position: fixed; width: 380px; height: 380px; border-radius: 50%; filter: blur(58px); opacity: .24; pointer-events: none; z-index: -1; }
.ambient-one { left: -140px; top: 180px; background: var(--violet); }
.ambient-two { right: -150px; top: 540px; background: var(--cyan); }
.site-header { position: sticky; top: 16px; z-index: 20; width: min(calc(100% - 32px), var(--max)); margin: 16px auto 0; padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; border: 1px solid rgba(255,255,255,.8); background: rgba(255,255,255,.72); backdrop-filter: blur(22px) saturate(140%); border-radius: 999px; box-shadow: 0 10px 30px rgba(26,39,68,.07); }
.brand { display: inline-flex; gap: 10px; align-items: center; padding-left: 2px; min-width: 0; }
.brand-mark { width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: -.03em; background: linear-gradient(135deg, #111827, #5b7cfa 58%, #56c7d8); box-shadow: 0 10px 22px rgba(91,124,250,.24); }
.brand-text { font-size: 14px; font-weight: 680; letter-spacing: -.025em; white-space: nowrap; }
.nav-links { display: flex; gap: 2px; }
.nav-links a { padding: 8px 13px; border-radius: 999px; color: rgba(17,24,39,.66); font-size: 13px; font-weight: 600; transition: background .2s ease, color .2s ease; }
.nav-links a:hover { background: rgba(91,124,250,.09); color: var(--ink); }

.section-shell { width: min(calc(100% - 36px), var(--max)); margin: 0 auto; }
.hero { min-height: calc(100svh - 66px); padding: clamp(64px, 8vw, 112px) 0 86px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(34px, 7vw, 84px); align-items: stretch; }
.eyebrow, .section-kicker, .lens-label { margin: 0 0 14px; color: rgba(91,124,250,.95); text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 800; }
.hero-copy { display: flex; flex-direction: column; justify-content: center; }
.hero h1 { margin: 0; max-width: 720px; font-size: clamp(42px, 5.5vw, 72px); line-height: 1.02; letter-spacing: -.06em; font-weight: 600; }
.hero-lead { margin: 28px 0 0; max-width: 640px; color: rgba(17,24,39,.66); font-size: clamp(18px, 2.3vw, 24px); line-height: 1.45; letter-spacing: -.025em; font-weight: 420; }
.identity-line { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }.identity-line span { padding: 8px 12px; border: 1px solid rgba(91,124,250,.12); border-radius: 999px; background: rgba(255,255,255,.62); color: rgba(17,24,39,.64); box-shadow: 0 8px 22px rgba(38,54,89,.04); font-size: 12px; font-weight: 650; letter-spacing: -.01em; }
.hero-actions, .connect-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 34px; }
.primary-button, .ghost-button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 18px; border-radius: 999px; font-size: 14px; font-weight: 700; letter-spacing: -.015em; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.primary-button { color: #fff; background: #111827; box-shadow: 0 16px 38px rgba(17,24,39,.18); }
.ghost-button { color: rgba(17,24,39,.74); background: rgba(255,255,255,.7); border: 1px solid var(--line); }
.primary-button:hover, .ghost-button:hover, .world-card:hover { transform: translateY(-3px); }
.hero-visual { display: flex; min-width: 0; }.visual-card { position: relative; display: flex; flex: 1; flex-direction: column; padding: 18px; border-radius: var(--radius-xl); border: 1px solid rgba(255,255,255,.86); background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.62)); box-shadow: var(--shadow); backdrop-filter: blur(26px) saturate(132%); overflow: hidden; }
.visual-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 73% 30%, rgba(91,124,250,.12), transparent 34%), radial-gradient(circle at 24% 82%, rgba(248,200,106,.13), transparent 30%); pointer-events: none; }
.visual-header, figcaption { position: relative; z-index: 1; display: flex; justify-content: space-between; margin: 2px 2px 10px; color: rgba(17,24,39,.52); font-size: 12px; font-weight: 660; }
.confocal-image { position: relative; z-index: 1; display: block; flex: 1; min-height: 0; width: 100%; object-fit: cover; object-position: center; border-radius: 22px; filter: saturate(.94) contrast(1.05) brightness(.87); }
figcaption { display: block; margin: 11px 2px 2px; }

.split-section { padding: 92px 0; display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(24px, 6vw, 86px); align-items: start; }
.section-shell h2 { margin: 0; font-size: clamp(34px, 4.4vw, 58px); line-height: 1.02; letter-spacing: -.055em; font-weight: 740; }
.quiet-card, .concept-lens, .world-card { border: 1px solid rgba(255,255,255,.86); background: rgba(255,255,255,.7); backdrop-filter: blur(22px) saturate(128%); box-shadow: var(--shadow-soft); }
.quiet-card { border-radius: var(--radius-xl); }
.manifesto-card { padding: clamp(26px, 4vw, 44px); }
.manifesto-card p { margin: 0; color: rgba(17,24,39,.76); font-size: clamp(22px, 2.8vw, 34px); line-height: 1.28; letter-spacing: -.045em; font-weight: 620; }
.flow-steps { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 30px; color: rgba(17,24,39,.58); font-size: 13px; font-weight: 720; }
.flow-steps span { padding: 9px 12px; border-radius: 999px; background: rgba(91,124,250,.08); }.flow-steps i { width: 26px; height: 1px; background: rgba(17,24,39,.16); }
.atlas-section, .worlds-section { padding: 92px 0; }.section-heading { max-width: 780px; margin-bottom: 28px; }.section-heading p:not(.section-kicker) { margin: 18px 0 0; color: rgba(17,24,39,.6); font-size: 18px; line-height: 1.55; letter-spacing: -.02em; }.section-heading.narrow { max-width: 680px; }
.concept-grid { display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0 18px; }.concept-chip { border: 1px solid var(--line); background: rgba(255,255,255,.68); color: rgba(17,24,39,.64); border-radius: 999px; min-height: 42px; padding: 0 16px; font-size: 14px; font-weight: 680; cursor: pointer; transition: transform .18s ease, background .18s ease; }.concept-chip:hover { transform: translateY(-1px); background: #fff; }.concept-chip.active { color: #fff; background: linear-gradient(135deg, #111827, #5b7cfa); border-color: transparent; box-shadow: 0 14px 32px rgba(91,124,250,.24); }
.concept-lens { min-height: 306px; display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 34px; align-items: center; padding: clamp(28px, 4vw, 48px); border-radius: var(--radius-xl); overflow: hidden; }.concept-lens h3 { margin: 0 0 14px; font-size: clamp(34px, 4.2vw, 60px); line-height: 1; letter-spacing: -.06em; }.concept-lens p:not(.lens-label) { margin: 0; color: rgba(17,24,39,.68); max-width: 760px; font-size: clamp(18px, 2vw, 22px); line-height: 1.55; letter-spacing: -.025em; }
.lens-orbit { position: relative; width: 224px; height: 224px; margin-left: auto; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, #fff 0 32%, rgba(91,124,250,.10) 33% 48%, transparent 49%); }.lens-orbit::before, .lens-orbit::after { content: ""; position: absolute; inset: 22px; border: 1px solid rgba(91,124,250,.18); border-radius: 50%; }.lens-orbit::after { inset: 54px; border-color: rgba(86,199,216,.24); }.lens-orbit span { position: absolute; width: 11px; height: 11px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 24px rgba(255,143,163,.45); }.lens-orbit span:nth-child(1) { left: 35px; top: 72px; background: var(--gold); }.lens-orbit span:nth-child(2) { right: 42px; top: 56px; background: var(--cyan); }.lens-orbit span:nth-child(3) { right: 58px; bottom: 40px; background: var(--blue); }.lens-orbit strong { position: relative; z-index: 1; color: rgba(17,24,39,.74); font-size: 15px; font-weight: 800; letter-spacing: -.02em; }
.world-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 30px; }.world-card { min-height: 290px; padding: 26px; border-radius: var(--radius-lg); transition: transform .22s ease, box-shadow .22s ease, background .22s ease; }.world-card:hover { background: rgba(255,255,255,.9); box-shadow: var(--shadow); }.world-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 16px; color: #fff; background: linear-gradient(135deg, #5b7cfa, #56c7d8); box-shadow: 0 12px 26px rgba(91,124,250,.20); font-size: 19px; }.icon-coral { background: linear-gradient(135deg, #ff8fa3, #8d6bff); }.icon-gold { background: linear-gradient(135deg, #f8c86a, #ff8fa3); }.world-card h3 { margin: 34px 0 10px; font-size: 25px; line-height: 1.05; letter-spacing: -.045em; }.world-card p { margin: 0; color: rgba(17,24,39,.58); font-size: 15px; line-height: 1.62; letter-spacing: -.015em; }.card-link { display: inline-block; margin-top: 22px; color: #4f6ce2; font-size: 13px; font-weight: 750; }
.connect-section { padding: 92px 0 60px; }.connect-card { padding: clamp(34px, 6vw, 68px); border-radius: 40px; background: linear-gradient(145deg, rgba(17,24,39,.96), rgba(56,67,102,.94)); color: #fff; box-shadow: 0 26px 90px rgba(17,24,39,.25); overflow: hidden; position: relative; }.connect-card::before { content: ""; position: absolute; right: -120px; top: -160px; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(86,199,216,.34), transparent 62%); }.connect-card .section-kicker { color: rgba(248,200,106,.9); }.connect-card h2, .connect-card p { position: relative; }.connect-card h2 { max-width: 760px; font-size: clamp(42px, 6.2vw, 84px); letter-spacing: -.07em; }.connect-card p { max-width: 760px; margin: 24px 0 0; color: rgba(255,255,255,.72); font-size: clamp(18px, 2.1vw, 22px); line-height: 1.55; letter-spacing: -.02em; }.connect-card .primary-button { background: #fff; color: #111827; box-shadow: none; }.connect-card .ghost-button { color: rgba(255,255,255,.86); background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.16); }
.footer { width: min(calc(100% - 36px), var(--max)); margin: 0 auto; padding: 26px 0 38px; color: rgba(17,24,39,.46); display: flex; justify-content: space-between; gap: 20px; font-size: 13px; font-weight: 560; }
@media (max-width: 980px) { .hero { grid-template-columns: 1fr; align-items: center; padding-top: 78px; }.confocal-image { aspect-ratio: 16 / 10; }.split-section, .concept-lens { grid-template-columns: 1fr; }.lens-orbit { margin: 0; width: 190px; height: 190px; }.world-card-grid { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .site-header { top: 10px; width: calc(100% - 20px); }.brand-text { display: none; }.nav-links a { padding: 8px 9px; font-size: 12px; }.section-shell { width: min(calc(100% - 24px), var(--max)); }.hero { min-height: auto; padding: 58px 0; }.hero h1 { font-size: clamp(43px, 14vw, 62px); }.hero-lead { font-size: 18px; }.visual-card { padding: 12px; border-radius: 26px; }.split-section, .atlas-section, .worlds-section, .connect-section { padding: 58px 0; }.section-shell h2 { font-size: clamp(34px, 12vw, 48px); }.manifesto-card p { font-size: 22px; }.concept-lens { padding: 24px; border-radius: 28px; }.footer { flex-direction: column; } }