:root {
  color-scheme:dark;
  --bg:#050505;
  --surface:#111;
  --text:#f5f5f5;
  --muted:#a3a3a3;
  --gold:#fccd45;
  --line:#ffffff18;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-synthesis:none;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased}

* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth;
  scroll-padding-top:100px}
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  line-height:1.6}
body,button {
  font-family:inherit}
a {
  color:inherit;
  text-decoration:none}
button {
  font:inherit}
img {
  max-width:100%;
  height:auto;
  display:block}
figure,p,h1,h2,h3 {
  margin:0}
button,a,summary {
  -webkit-tap-highlight-color:transparent}
a,button,summary {
  touch-action:manipulation}
:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:6px}
::selection {
  background:#fccd4540;
  color:#fff}
.container {
  width:min(1120px,calc(100% - 80px));
  margin-inline:auto}
.skip-link {
  position:absolute;
  z-index:100;
  left:16px;
  top:12px;
  padding:12px 20px;
  background:var(--gold);
  color:#17130a;
  transform:translateY(-160%)}
.skip-link:focus {
  transform:none}
.site-header {
  position:sticky;
  top:0;
  z-index:20;
  background:#050505eb;
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line)}
.nav-shell {
  min-height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px}
.brand {
  display:inline-flex;
  align-items:center;
  gap:11px;
  font-size:24px;
  font-weight:650;
  letter-spacing:-1px;
  flex-shrink:0}
.brand img {
  border-radius:9px}
.desktop-nav {
  display:flex;
  gap:30px;
  align-items:center;
  margin-left:auto;
  margin-right:28px}
.desktop-nav a,.site-footer nav a {
  color:#b9b9b9;
  font-size:14px;
  transition:color .2s}
.desktop-nav a:hover,.site-footer nav a:hover {
  color:var(--gold)}
.button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:20px;
  min-height:54px;
  padding:14px 26px;
  border:1px solid #ffe7a475;
  border-radius:999px;
  background:linear-gradient(130deg,#ffdf78,#fccd45 65%,#e9b72c);
  color:#241c06;
  font-size:15px;
  font-weight:650;
  line-height:1.4;
  box-shadow:0 0 26px #fccd4515,inset 0 1px 0 #fff5;
  transition:box-shadow .2s,transform .2s}
.button:hover {
  box-shadow:0 0 32px #fccd4535;
  transform:translateY(-2px)}
.button span {
  font-size:20px;
  line-height:1}
.button-small {
  min-height:42px;
  padding:10px 19px;
  font-size:13px;
  gap:18px}
.hero {
  position:relative;
  padding-top:88px;
  isolation:isolate;
  background:radial-gradient(ellipse at 50% 23%,#ffffff05,transparent 48%)}
.hero-copy {
  text-align:center;
  position:relative;
  z-index:1}
.eyebrow {
  color:#a8a8a8;
  font-size:12px;
  letter-spacing:1.3px;
  font-weight:500;
  line-height:1.6}
.hero-eyebrow {
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:6px 16px;
  letter-spacing:.15px;
  border:1px solid #ffffff20;
  border-radius:999px;
  background:#ffffff04;
  font-size:12px}
.status-dot {
  height:6px;
  width:6px;
  background:var(--gold);
  border-radius:50%;
  box-shadow:0 0 12px #fccd4580}
h1 {
  font-size:clamp(58px,6.8vw,88px);
  letter-spacing:-4.5px;
  font-weight:600;
  line-height:1.04;
  margin-top:28px}
.gold-text {
  color:var(--gold);
  background:linear-gradient(120deg,#e9b92a 0%,#ffe7a1 100%);
  background-clip:text;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent}
.hero-description {
  color:#a3a3a3;
  font-size:18px;
  line-height:1.65;
  margin:25px auto 25px;
  max-width:580px}
.store-badge {
  display:inline-flex;
  align-items:center;
  padding:0;
  min-height:60px;
  transition:opacity .2s}
.store-badge:hover {
  opacity:.8}
.store-badge img {
  width:174px;
  height:auto}
.hero-meta {
  font-size:11px;
  color:#929292;
  margin-top:9px;
  letter-spacing:.35px}
.hero-meta span {
  margin:0 8px}
.meteor-field {
  position:absolute;
  inset:0 0 35%;
  z-index:-1;
  overflow:hidden;
  pointer-events:none;
  mask-image:linear-gradient(#000,transparent 90%)}
.meteor-field i {
  position:absolute;
  width:160px;
  height:1px;
  background:linear-gradient(90deg,transparent,#ffffff40);
  transform:rotate(-35deg);
  box-shadow:0 0 10px #ffffff10;
  animation:glimmer 8s ease-in-out infinite}
.meteor-field i::after {
  content:"";
  position:absolute;
  right:0;
  top:-2px;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#ddd;
  box-shadow:0 0 10px 2px #ffffff50}
.meteor-field i:nth-child(1) {
  left:4%;
  top:12%;
  animation-delay:-2s}
.meteor-field i:nth-child(2) {
  right:7%;
  top:20%;
  width:220px}
.meteor-field i:nth-child(3) {
  left:16%;
  top:52%;
  width:110px;
  animation-delay:-4s}
.meteor-field i:nth-child(4) {
  right:19%;
  top:66%;
  animation-delay:-6s}
.meteor-field i:nth-child(5) {
  left:38%;
  top:4%;
  width:100px;
  animation-delay:-3s}
.meteor-field i:nth-child(6) {
  right:-4%;
  top:44%;
  width:130px;
  animation-delay:-1s}
@keyframes glimmer {
  0%,100% {
  opacity:.15}
50% {
  opacity:.65}
}
.showcase {
  position:relative;
  margin-top:56px}
.showcase::before {
  content:"";
  position:absolute;
  inset:10% 0 0;
  background:radial-gradient(ellipse at 50% 70%,#9e7c2220,transparent 70%);
  z-index:-1}
.hero-gallery {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px}
.hero-shot {
  width:240px;
  min-width:0;
  flex:0 1 240px}
.hero-shot img {
  width:100%;
  border:1px solid #ffffff15;
  border-radius:18px;
  background:#0a0d0b;
  box-shadow:0 24px 60px #0008}
.shot-main {
  width:280px;
  flex-basis:280px}
.shot-side {
  margin-top:68px}
.hero-shot figcaption {
  text-align:center;
  color:#898989;
  font-size:11px;
  letter-spacing:.3px;
  margin-top:17px}
.gallery-controls {
  display:none}
.flow-section {
  padding-block:126px 112px;
  text-align:center}
h2 {
  font-size:clamp(40px,4.5vw,58px);
  font-weight:550;
  letter-spacing:-2.8px;
  line-height:1.1}
.flow-section h2 {
  margin-top:18px}
.flow-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:54px;
  text-align:left;
  margin-top:60px}
.flow-grid article {
  border-top:1px solid var(--line);
  padding-top:21px}
.step-number {
  font-size:11px;
  color:var(--gold);
  letter-spacing:1px}
.flow-grid h3 {
  font-size:24px;
  letter-spacing:-.8px;
  font-weight:550;
  margin:14px 0 9px}
.flow-grid p {
  font-size:14px;
  color:var(--muted);
  line-height:1.7;
  max-width:260px}
.features-wrap {
  border-block:1px solid var(--line);
  background:linear-gradient(180deg,#ffffff02,transparent 40%)}
.feature-section {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);
  gap:70px;
  align-items:center;
  padding-block:100px}
.feature-section+.feature-section {
  border-top:1px solid var(--line)}
.feature-copy .eyebrow {
  letter-spacing:.5px;
  font-size:11px}
.section-mark {
  color:var(--gold);
  margin-right:7px}
.feature-copy h2 {
  margin-top:22px}
.section-description {
  color:var(--muted);
  font-size:16px;
  line-height:1.8;
  margin-top:24px;
  max-width:430px}
.feature-list {
  padding:0;
  margin:26px 0;
  list-style:none}
.feature-list li {
  position:relative;
  padding-left:22px;
  font-size:13px;
  color:#d0d0d0;
  line-height:1.6;
  margin-top:13px}
.feature-list li::before {
  content:"↗";
  position:absolute;
  left:0;
  color:var(--gold)}
.fine-print {
  font-size:11px;
  line-height:1.8;
  color:#858585;
  max-width:410px}
.paired-art {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  align-items:start;
  position:relative}
.paired-art img {
  width:100%;
  border-radius:15px;
  border:1px solid #ffffff12;
  background:#0a0d0b;
  box-shadow:0 20px 60px #0005}
.paired-art img:nth-child(2) {
  margin-top:62px}
.feature-reversed {
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
.feature-reversed .feature-copy {
  grid-column:2;
  grid-row:1}
.feature-reversed .shape-art {
  grid-column:1;
  grid-row:1}
.shape-art {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  align-items:start}
.capture-frame {
  overflow:hidden;
  position:relative;
  border:1px solid #ffffff26;
  background:#0b0d0b;
  border-radius:28px;
  margin-top:50px}
.capture-frame img {
  width:100%;
  height:auto}
.art-label {
  display:block;
  text-align:center;
  font-size:10px;
  color:#b4bdb6;
  padding:14px 8px;
  border-top:1px solid #ffffff10}
.expansion-poster {
  border-radius:15px;
  border:1px solid #ffffff12;
  width:100%;
  background:#0a0d0b}
.privacy-section {
  padding-block:110px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:100px;
  align-items:center}
.privacy-art {
  position:relative;
  background:radial-gradient(ellipse,#1b291f70,transparent 68%);
  display:flex;
  justify-content:center}
.privacy-art img {
  width:280px;
  border-radius:18px;
  border:1px solid #ffffff15}
.privacy-points {
  margin-block:28px;
  display:grid;
  gap:22px}
.privacy-points h3 {
  font-size:16px;
  font-weight:550;
  margin-bottom:6px;
  letter-spacing:-.4px}
.privacy-points p {
  font-size:13px;
  color:var(--muted);
  max-width:380px}
.text-link {
  display:inline-block;
  color:#e4d5aa;
  font-size:13px;
  text-decoration:underline;
  text-underline-offset:5px;
  text-decoration-color:#e4d5aa55}
.feature-copy>.text-link {
  margin-top:22px}
.text-link:hover {
  color:var(--gold)}
.faq-section {
  padding-block:100px;
  display:grid;
  grid-template-columns:1fr 1.35fr;
  gap:100px;
  border-top:1px solid var(--line)}
.faq-intro h2 {
  margin-top:20px}
.faq-intro>p:last-child {
  margin-top:28px;
  font-size:14px;
  color:var(--muted);
  line-height:2}
.faq-list details {
  border-bottom:1px solid var(--line)}
.faq-list details:first-child {
  border-top:1px solid var(--line)}
.faq-list summary {
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:center;
  padding-block:23px;
  cursor:pointer;
  list-style:none;
  font-size:14px;
  line-height:1.6;
  min-height:68px}
.faq-list summary::-webkit-details-marker {
  display:none}
.faq-list summary>span {
  color:#b6a77e;
  font-size:20px;
  font-weight:400;
  flex-shrink:0}
.faq-list details[open] summary>span {
  transform:rotate(45deg)}
.faq-list details>p {
  color:var(--muted);
  font-size:13px;
  line-height:1.85;
  padding:0 30px 24px 0}
.faq-list details a {
  color:#e4d5aa;
  text-decoration:underline;
  text-underline-offset:3px}
.closing-section {
  text-align:center;
  padding-block:105px 100px;
  background:radial-gradient(ellipse at 50% 100%,#fccd4510,transparent 65%);
  border-top:1px solid var(--line)}
.closing-icon {
  margin:0 auto 25px;
  border-radius:18px;
  box-shadow:0 0 70px #79e39a12}
.closing-section h2 {
  margin-top:21px;
  font-size:clamp(44px,5.5vw,70px);
  letter-spacing:-3px}
.closing-section h2+p {
  color:var(--muted);
  font-size:15px;
  margin-top:24px}
.closing-section .button {
  margin-top:30px}
.closing-meta {
  font-size:11px;
  color:#929292;
  margin-top:18px}
.site-footer {
  padding-block:36px 30px;
  border-top:1px solid var(--line)}
.footer-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px}
.footer-top .brand {
  font-size:20px}
.site-footer nav {
  display:flex;
  gap:28px}
.site-footer nav a {
  font-size:12px;
  min-height:44px;
  display:inline-flex;
  align-items:center}
.footer-bottom {
  display:flex;
  align-items:start;
  justify-content:space-between;
  gap:40px;
  margin-top:30px;
  color:#929292;
  font-size:10px;
  line-height:1.7}

@media(min-width:1600px) {
  .hero {
  padding-top:108px}
.showcase {
  margin-top:68px}
}

@media(max-width:1000px) {
  .container {
  width:calc(100% - 64px)}
.feature-section {
  gap:38px;
  padding-block:80px}
.feature-copy h2 {
  font-size:44px}
.privacy-section {
  gap:60px}
.faq-section {
  gap:50px}
.desktop-nav {
  gap:23px;
  margin-right:10px}
.paired-art {
  gap:12px}
.shape-art {
  gap:12px}
.section-description {
  font-size:15px}
.hero-shot {
  flex-basis:210px}
.shot-main {
  flex-basis:250px}
}

@media(max-width:760px) {
  .container {
  width:calc(100% - 40px)}
.nav-shell {
  min-height:70px;
  gap:14px}
.brand {
  font-size:22px}
.brand img {
  width:32px;
  height:32px}
.desktop-nav {
  display:none}
.button-small {
  font-size:12px;
  gap:14px;
  min-height:42px;
  padding:9px 16px}
.hero {
  padding-top:60px}
.hero-eyebrow {
  font-size:10px;
  padding:6px 12px}
h1 {
  font-size:64px;
  letter-spacing:-3.4px;
  margin-top:27px}
.hero-description {
  font-size:16px;
  max-width:450px;
  margin-block:23px}
.hero-meta {
  font-size:10px}
.showcase {
  margin-top:42px}
.hero-gallery {
  gap:14px}
.hero-shot {
  flex-basis:185px}
.shot-main {
  flex-basis:220px}
.shot-side {
  margin-top:45px}
.hero-shot img {
  border-radius:12px}
.flow-section {
  padding-block:90px 74px}
h2 {
  font-size:43px;
  letter-spacing:-2px}
.flow-grid {
  gap:25px;
  margin-top:42px}
.flow-grid h3 {
  font-size:22px}
.flow-grid p {
  font-size:12px}
.feature-section,.feature-reversed {
  grid-template-columns:1fr;
  gap:38px;
  padding-block:70px}
.feature-reversed .feature-copy,.feature-reversed .shape-art {
  grid-column:auto;
  grid-row:auto}
.feature-copy {
  max-width:520px}
.feature-copy h2 {
  font-size:46px}
.feature-copy .eyebrow {
  font-size:10px}
.section-description {
  font-size:15px;
  max-width:470px}
.feature-list {
  margin-block:22px}
.fine-print {
  max-width:460px}
.paired-art,.shape-art {
  max-width:500px;
  width:100%;
  margin-inline:auto;
  gap:18px}
.paired-art img:nth-child(2) {
  margin-top:40px}
.capture-frame {
  margin-top:36px}
.privacy-section {
  grid-template-columns:1fr;
  gap:36px;
  padding-block:74px}
.privacy-art {
  order:2}
.privacy-art img {
  width:min(280px,80%)}
.faq-section {
  grid-template-columns:1fr;
  gap:35px;
  padding-block:74px}
.faq-intro h2 br {
  display:none}
.faq-intro>p:last-child {
  margin-top:20px}
.faq-intro h2 {
  font-size:43px}
.faq-list summary {
  font-size:14px;
  padding-block:22px}
.closing-section {
  padding-block:74px}
.closing-section h2 {
  font-size:52px;
  letter-spacing:-2.5px}
.closing-section h2+p {
  max-width:300px;
  margin-inline:auto;
  font-size:14px}
.footer-bottom {
  flex-direction:column;
  gap:14px;
  margin-top:20px}
.footer-top {
  gap:15px}
.site-footer nav {
  gap:16px}
}

@media(max-width:540px) {
  .hero {
  padding-top:49px}
.hero-eyebrow {
  font-size:9px}
h1 {
  font-size:clamp(48px,13vw,65px);
  letter-spacing:-2.8px}
.hero-description {
  font-size:15px;
  max-width:320px}
.desktop-break {
  display:none}
.hero-gallery {
  justify-content:flex-start;
  align-items:start;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  gap:16px;
  padding:4px 22px 20px;
  scroll-padding-inline:22px;
  overscroll-behavior-x:contain}
.hero-gallery::-webkit-scrollbar {
  display:none}
.showcase {
  width:100%;
  margin-top:37px}
.hero-shot,.shot-main {
  flex:0 0 min(69vw,285px);
  width:min(69vw,285px);
  scroll-snap-align:center;
  margin-top:0}
.hero-gallery::before,.hero-gallery::after {
  content:"";
  flex:0 0 max(0px,calc((100vw - min(69vw,285px)) / 2 - 38px))}
.hero-shot figcaption {
  font-size:11px;
  margin-top:14px}
.hero-shot img {
  border-radius:16px}
.gallery-controls:not([hidden]) {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  margin-top:2px}
.gallery-controls p {
  font-size:11px;
  color:#b8b8b8;
  font-variant-numeric:tabular-nums}
.gallery-hint {
  margin-left:14px;
  color:#858585}
.gallery-arrow {
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  color:#ddd;
  font-size:19px;
  background:transparent;
  border:1px solid #ffffff28;
  border-radius:50%;
  cursor:pointer}
.gallery-arrow:disabled {
  opacity:.3;
  cursor:default}
.flow-section {
  padding-top:70px}
.flow-grid {
  grid-template-columns:1fr;
  gap:23px;
  text-align:left;
  margin-top:34px}
.flow-grid article {
  display:grid;
  grid-template-columns:25px 1fr;
  gap:0 12px;
  padding-top:18px}
.step-number {
  grid-column:1;
  grid-row:1;
  padding-top:5px}
.flow-grid h3 {
  grid-column:2;
  margin:0 0 6px;
  font-size:22px}
.flow-grid p {
  grid-column:2;
  max-width:300px;
  font-size:13px}
.feature-copy h2 {
  font-size:43px}
.paired-art,.shape-art {
  gap:11px}
.paired-art img,.expansion-poster {
  border-radius:11px}
.capture-frame {
  border-radius:20px}
.art-label {
  font-size:8px;
  padding:10px 3px}
.section-description {
  font-size:14px}
.feature-list li {
  font-size:12px}
.fine-print {
  font-size:10px}
.privacy-points {
  gap:20px}
.faq-intro h2 {
  font-size:40px}
.faq-list summary {
  font-size:13px;
  gap:18px}
.closing-section h2 {
  font-size:45px}
.closing-section .button {
  font-size:13px;
  gap:15px;
  padding:14px 21px}
.footer-top {
  align-items:flex-start;
  flex-direction:column;
  gap:14px}
.site-footer nav {
  width:100%;
  gap:28px}
.site-footer {
  padding-block:30px}
.meteor-field i {
  width:90px;
  opacity:.25}
.meteor-field i:nth-child(2) {
  width:130px;
  right:-14%}
.meteor-field i:nth-child(3) {
  left:-14%}
.meteor-field i:nth-child(4) {
  right:-15%}
}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}
*,*::before,*::after {
  animation:none!important;
  transition:none!important;
  scroll-behavior:auto!important}
}

/* Localized pages share the layout; Korean text keeps natural word boundaries. */
html[lang="ko"] {
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", sans-serif;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
html[lang="ko"] h1 {
  font-size: clamp(48px, 5.6vw, 72px);
  letter-spacing: -2.6px;
  line-height: 1.2;
}
html[lang="ko"] h2 {
  font-size: clamp(38px, 4vw, 52px);
  letter-spacing: -1.8px;
  line-height: 1.25;
}
html[lang="ko"] .closing-section h2 { font-size: clamp(42px, 5vw, 64px); }
.language-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 22px;
  padding-top: 12px;
}
.language-picker { position: relative; }
.language-picker summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 44px;
  min-width: 124px;
  padding: 9px 12px;
  color: #b9b9b9;
  font-size: 13px;
  line-height: 1.5;
  list-style: none;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
}
.language-picker summary::-webkit-details-marker { display: none; }
.language-picker summary:hover,
.language-picker[open] summary { background: #ffffff08; border-color: #ffffff18; color: #f5f5f5; }
.language-picker summary > span { font-size: 17px; }
.language-picker[open] summary > span { transform: rotate(180deg); }
.site-footer .language-picker nav {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 25;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 160px;
  padding: 6px;
  border: 1px solid #ffffff24;
  border-radius: 10px;
  background: #171717;
  box-shadow: 0 10px 35px #0009;
}
.site-footer .language-picker nav a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 9px 11px;
  font-size: 13px;
  border-radius: 5px;
  color: #d6d6d6;
}
.site-footer .language-picker nav a:hover { background: #ffffff0b; color: #fff; }
.site-footer .language-picker nav a[aria-current="page"] { color: var(--gold); }
@media(max-width:760px) {
  html[lang="ko"] h1 { font-size: clamp(32px, 8.4vw, 56px); letter-spacing: -1.5px; }
  html[lang="ko"] h2 { font-size: clamp(34px, 7.8vw, 44px); letter-spacing: -1.2px; }
  html[lang="ko"] .closing-section h2 { font-size: clamp(36px, 9vw, 48px); }
  html[lang="ko"] .hero-description { line-height: 1.9; }
  html[lang="ko"] .hero-eyebrow { font-size: 11px; }
}