@charset "UTF-8";
  
.hero-visual {
  overflow:clip}
.share-art .share-card-image img {
  top:-43px}

.hero-actions>.button-play {
  flex-shrink:0;
  white-space:nowrap}
.hero-actions>.text-link {
  white-space:nowrap}

@media(max-width:800px) {
  .hero .hero-actions {
  gap:16px}
}
@media(max-width:390px) {
  .hero .hero-actions {
  flex-wrap:wrap;
  gap:6px 14px}
}

:root {
  color-scheme:dark;
  --bg:#10120e;
  --surface:#1a1d16;
  --ink:#f3f4eb;
  --muted:#adb1a2;
  --lime:#d4ff3a;
  --line:#34392c;
  --font:"Pretendard","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif}
* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth;
  scroll-padding-top:110px}
body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.7 var(--font);
  word-break:keep-all;
  -webkit-font-smoothing:antialiased}
a {
  color:inherit;
  text-decoration:none}
button,input {
  font:inherit}
button,a,input,summary {
  -webkit-tap-highlight-color:transparent}
button,a,summary {
  touch-action:manipulation}
button {
  cursor:pointer}
img {
  display:block;
  max-width:100%;
  height:auto}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible,[tabindex]:focus-visible {
  outline:3px solid var(--lime);
  outline-offset:6px}
::selection {
  background:var(--lime);
  color:var(--bg)}
.wrap {
  width:min(1200px,calc(100% - 96px));
  margin-inline:auto}
.header {
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(16,18,14,.94);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line)}
.header-inner {
  height:91px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:26px}
.brand {
  display:inline-flex;
  align-items:center;
  min-height:44px}
.brand img {
  width:145px;
  height:auto}
.nav {
  display:flex;
  gap:34px;
  font-size:14px;
  font-weight:600}
.nav a {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  color:#c1c5b7;
  transition:color .2s}
.nav a:hover {
  color:var(--lime)}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  min-height:54px;
  padding:14px 24px;
  border:1px solid transparent;
  border-radius:5px;
  background:var(--lime);
  color:#161b08;
  font-weight:800;
  line-height:1.3;
  transition:transform .2s,background .2s}
.button:hover {
  background:#e0ff7a;
  transform:translateY(-2px)}
.button-small {
  font-size:13px;
  min-height:44px;
  padding:12px 18px;
  gap:25px}
.eyebrow {
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  line-height:1.5;
  color:var(--muted);
  margin:0 0 25px}
.status-dot {
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--lime);
  box-shadow:0 0 12px #d4ff3a40;
  margin-right:9px}
.hero {
  position:relative;
  display:grid;
  grid-template-columns:1.05fr 1fr;
  align-items:center;
  min-height:780px;
  gap:10px;
  padding-top:50px;
  padding-bottom:95px}
.hero-copy {
  position:relative;
  z-index:2}
.hero h1 {
  font-size:clamp(42px,4.8vw,66px);
  line-height:1.24;
  letter-spacing:-.065em;
  font-weight:850;
  margin:0 0 32px}
.hero h1 span,h2 span {
  color:var(--lime)}
.hero-description {
  color:#bfc3b4;
  font-size:17px;
  line-height:1.9;
  letter-spacing:-.03em;
  margin:0 0 35px}
.hero-actions {
  display:flex;
  align-items:center;
  gap:25px}
.button-play {
  gap:15px;
  min-height:70px;
  padding:15px 22px;
  font-size:16px}
.button-play svg {
  width:22px;
  height:26px}
.button-play small {
  display:block;
  font:500 10px/1.4 var(--font);
  letter-spacing:.02em;
  margin-bottom:3px}
.button-play .arrow {
  margin-left:12px;
  font-size:22px;
  font-weight:400}
.text-link {
  font-size:13px;
  font-weight:650;
  display:inline-flex;
  align-items:center;
  gap:20px;
  min-height:44px}
.text-link span {
  font-size:19px;
  color:var(--lime)}
.hero-notes {
  display:flex;
  gap:13px;
  font-size:11px;
  color:var(--muted);
  margin-top:22px}
.hero-notes span+span:before {
  content:"·";
  margin-right:13px;
  color:#69705d}
.hero-visual {
  position:relative;
  height:615px;
  isolation:isolate;
  background:radial-gradient(ellipse at 55% 65%,#4f602126,transparent 65%)}
.phone {
  border:5px solid #30352a;
  border-radius:30px;
  padding:5px;
  background:#030403;
  overflow:hidden;
  box-shadow:0 24px 55px #0006;
  position:relative}
.phone img {
  width:100%;
  height:auto;
  border-radius:20px}
.phone-front {
  position:absolute;
  width:260px;
  right:4%;
  top:50px;
  transform:rotate(6deg);
  z-index:2}
.phone-back {
  position:absolute;
  width:235px;
  left:3%;
  top:115px;
  transform:rotate(-10deg);
  filter:brightness(.78);
  z-index:1}
.orbit {
  border:1px solid #d4ff3a17;
  border-radius:50%;
  position:absolute;
  z-index:-1;
  width:520px;
  height:520px;
  left:calc(50% - 260px);
  top:65px}
.orbit-two {
  width:390px;
  height:390px;
  left:calc(50% - 195px);
  top:130px;
  border-style:dashed;
  transform:rotate(-20deg)}
.visual-label {
  position:absolute;
  font-size:9px;
  letter-spacing:.18em;
  color:#7c866a;
  z-index:3}
.label-top {
  right:8%;
  top:12px}
.visual-caption {
  position:absolute;
  bottom:1px;
  right:0;
  font-size:11px;
  color:#b3ba9e;
  letter-spacing:-.02em}
.hero-bottom {
  position:absolute;
  bottom:28px;
  left:0;
  right:0;
  display:flex;
  justify-content:space-between;
  border-top:1px solid var(--line);
  padding-top:19px;
  color:#858e75;
  font-size:9px;
  font-weight:600;
  letter-spacing:.16em}
.hero-bottom a {
  display:flex;
  gap:35px;
  min-height:30px;
  align-items:center}
.hero-bottom a span {
  color:var(--lime);
  font-size:17px}
.ticker {
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  overflow:hidden;
  padding:17px 0;
  background:#151811}
.ticker>div {
  display:flex;
  align-items:center;
  gap:28px;
  white-space:nowrap;
  width:max-content;
  font-size:42px;
  font-weight:850;
  letter-spacing:-.04em;
  line-height:1.3;
  color:var(--lime);
  animation:marquee 48s linear infinite}
.ticker span {
  color:transparent;
  -webkit-text-stroke:1px #737c60}
.ticker i {
  font-size:28px;
  font-style:normal;
  margin-inline:25px}
.section {
  padding-top:125px;
  padding-bottom:125px}
.section-heading h2,h2 {
  font-size:clamp(32px,3.8vw,48px);
  line-height:1.35;
  letter-spacing:-.055em;
  font-weight:800;
  margin:0}
.intro>.section-heading {
  display:inline-block}
.intro-copy {
  color:var(--muted);
  font-size:15px;
  margin:30px 0 55px;
  line-height:1.9}
.feature-layout {
  display:grid;
  grid-template-columns:1.12fr 1fr;
  gap:95px;
  align-items:stretch}
.feature-controls {
  display:flex;
  flex-direction:column;
  justify-content:center}
.feature-tab {
  background:none;
  border:0;
  border-top:1px solid var(--line);
  color:var(--ink);
  display:grid;
  grid-template-columns:35px 1fr 24px;
  gap:16px;
  text-align:left;
  padding:30px 0;
  width:100%}
.feature-tab:last-child {
  border-bottom:1px solid var(--line)}
.feature-number {
  font-size:10px;
  color:#858c77;
  padding-top:8px;
  letter-spacing:.08em}
.feature-tab strong {
  font-size:20px;
  font-weight:700;
  letter-spacing:-.045em;
  line-height:1.6}
.feature-description {
  display:block;
  font-size:13px;
  color:var(--muted);
  line-height:1.9;
  margin-top:12px;
  max-width:350px}
.feature-tab[aria-selected=false] .feature-description {
  display:none}
.feature-tab[aria-selected=true] .feature-number,.feature-tab[aria-selected=true] strong,.feature-tab[aria-selected=true] .tab-arrow {
  color:var(--lime)}
.tab-arrow {
  color:#636c56;
  font-size:23px}
.feature-stage {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:640px;
  background:linear-gradient(140deg,#282f1a,#191d14);
  border:1px solid #40482f;
  position:relative;
  overflow:hidden;
  padding:34px 35px 0;
  border-radius:6px}
.feature-stage:before {
  content:"";
  position:absolute;
  width:430px;
  height:430px;
  border:1px solid #d4ff3a12;
  border-radius:50%;
  top:130px}
.stage-kicker {
  align-self:flex-start;
  font-size:9px;
  letter-spacing:.15em;
  color:#bac995;
  margin-bottom:25px}
.feature-phone {
  width:245px;
  border-radius:25px;
  transform:rotate(-4deg);
  margin:0 auto -7px}
.feature-phone img {
  border-radius:17px}
.screen-note {
  font-size:10px;
  color:#879073;
  letter-spacing:.01em;
  position:relative;
  margin:22px 0 20px}
.calculator-section {
  background:#191d14;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:100px 0}
.calculator-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:110px;
  align-items:center}
.calculator-copy>p:not(.eyebrow) {
  font-size:15px;
  color:var(--muted);
  line-height:1.9;
  margin-top:25px}
.ratio-stamp {
  font-size:120px;
  line-height:1;
  font-weight:850;
  letter-spacing:-.06em;
  color:#2e3720;
  margin-top:35px}
.ratio-stamp span {
  color:#48592b}
.calculator-card {
  border:1px solid #47532e;
  background:#12160e;
  border-radius:7px;
  padding:30px}
.calc-card-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:14px;
  font-weight:700;
  margin-bottom:30px}
.demo-label {
  font-size:9px;
  letter-spacing:.12em;
  color:var(--lime);
  border:1px solid #596c2b;
  border-radius:3px;
  padding:4px 7px}
.field-label {
  display:flex;
  justify-content:space-between;
  font-size:12px;
  font-weight:600;
  color:#d3d9c6;
  margin:20px 0 8px}
.field-label>span {
  color:#929c81;
  font-weight:400}
input {
  width:100%;
  background:#202619;
  color:var(--ink);
  border:1px solid #3c462e;
  border-radius:4px;
  padding:12px 15px;
  font-size:23px;
  line-height:1.4;
  min-height:56px;
  font-weight:600;
  font-variant-numeric:tabular-nums}
input::-webkit-inner-spin-button {
  appearance:none}
.presets {
  display:flex;
  gap:8px;
  margin-top:9px}
.presets button {
  border:1px solid #3c462e;
  color:#abb39a;
  background:transparent;
  min-height:44px;
  border-radius:4px;
  padding:7px 14px;
  font-size:11px;
  flex:1}
.presets button[aria-pressed=true] {
  border-color:#7c963f;
  color:var(--lime);
  background:#d4ff3a0c}
.ratio-input {
  display:flex;
  align-items:center;
  gap:18px}
.ratio-input>span {
  font-size:23px;
  white-space:nowrap}
.ratio-input input {
  min-width:0}
.calc-result {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid var(--line);
  margin-top:26px;
  padding-top:22px;
  gap:10px}
.calc-result>span {
  font-size:12px;
  color:#c2caae}
.calc-result strong {
  font-size:45px;
  letter-spacing:-.04em;
  color:var(--lime);
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere;
  line-height:1.3}
.calc-result small {
  font-size:15px;
  font-weight:500;
  letter-spacing:0}
.calc-explanation {
  font-size:10px;
  color:#8e997b;
  line-height:1.8;
  margin:18px 0 23px}
.calc-error {
  font-size:12px;
  color:#ffb0a7;
  margin:10px 0}
.calc-app-link {
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:44px;
  padding-top:18px;
  font-size:11px;
  color:#c5cdb7}
.calc-app-link span {
  font-size:19px;
  color:var(--lime)}
.sharing {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px;
  align-items:center}
.share-art {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  background:#1b2016;
  border:1px solid var(--line);
  border-radius:5px;
  padding:37px 35px 12px;
  overflow:hidden;
  min-height:480px}
.art-kicker {
  font-size:9px;
  letter-spacing:.13em;
  color:#b8c59c;
  align-self:flex-start}
.share-art-line {
  position:absolute;
  inset:60px -60px;
  transform:rotate(-25deg);
  background:repeating-linear-gradient(90deg,transparent 0 65px,#d4ff3a08 65px 66px)}
.share-card {
  position:relative;
  background:#11150e;
  border:1px solid #566344;
  border-radius:5px;
  padding:10px;
  transform:rotate(-7deg);
  width:85%;
  max-width:310px;
  margin:35px 0 10px;
  box-shadow:0 20px 40px #0005}
.share-card-image {
  height:240px;
  overflow:hidden;
  border-radius:2px;
  position:relative}
.share-card-image img {
  position:absolute;
  width:100%;
  max-width:none;
  top:-15px}
.share-card-caption {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:17px 2px 8px}
.share-card-caption img {
  width:90px}
.share-card-caption span {
  font-size:6px;
  letter-spacing:.06em;
  color:#98a783}
.share-copy>p:not(.eyebrow) {
  color:var(--muted);
  font-size:15px;
  line-height:1.95;
  margin:25px 0}
.share-copy .text-link {
  margin-top:5px}
.faq-section {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:110px;
  border-top:1px solid var(--line)}
.faq-heading .text-link {
  margin-top:30px;
  color:var(--muted)}
.faq-list {
  border-top:1px solid var(--line)}
details {
  border-bottom:1px solid var(--line)}
summary {
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:81px;
  font-size:15px;
  letter-spacing:-.025em;
  font-weight:600;
  padding:21px 0}
summary::-webkit-details-marker {
  display:none}
summary>span {
  font-size:22px;
  color:var(--lime);
  font-weight:400;
  transition:transform .2s}
details[open] summary>span {
  transform:rotate(45deg)}
details>p {
  color:var(--muted);
  font-size:13px;
  line-height:1.95;
  margin:0 0 25px;
  padding-right:30px}
.download-section {
  background:var(--lime);
  color:#182107;
  padding:85px 0}
.download-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px}
.download-section h2 {
  font-size:clamp(34px,4.2vw,55px);
  font-weight:850}
.download-section .eyebrow {
  color:#4c5e23;
  margin-bottom:18px}
.download-section p:last-child {
  font-size:13px;
  color:#52652a;
  margin:21px 0 0}
.button-dark {
  background:#1a220f;
  color:#edffd5;
  min-width:240px}
.button-dark:hover {
  background:#2b371a}
.footer {
  padding-top:48px;
  padding-bottom:42px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:35px}
.footer .brand img {
  width:120px}
.footer p {
  font-size:11px;
  color:#838b76;
  margin:8px 0 0}
.footer-links {
  display:flex;
  align-items:center;
  gap:25px;
  font-size:10px;
  color:#a4ad96}
.footer-links a {
  min-height:44px;
  display:inline-flex;
  align-items:center;
  gap:8px}
.footer-links>span {
  color:#737d64}
.skip-link {
  position:fixed;
  left:15px;
  top:-100px;
  z-index:100;
  background:var(--lime);
  color:#161b08;
  padding:14px 20px}
.skip-link:focus {
  top:12px}
@keyframes marquee {
  to {
  transform:translateX(-25%)}
}
@media(min-width:1500px) {
  .hero h1 {
  font-size:69px}
}
@media(max-width:1100px) {
  .wrap {
  width:calc(100% - 64px)}
.hero {
  min-height:720px}
.hero h1 {
  font-size:48px}
.hero-actions {
  gap:14px}
.hero-actions .text-link {
  font-size:11px;
  gap:8px}
.hero-visual {
  height:555px}
.phone-front {
  width:225px;
  right:0}
.phone-back {
  width:195px;
  left:0;
  top:120px}
.hero-description {
  font-size:15px}
.feature-layout {
  gap:55px}
.feature-tab strong {
  font-size:18px}
.calculator-layout {
  gap:65px}
.sharing {
  gap:65px}
.faq-section {
  gap:60px}
.nav {
  gap:20px;
  font-size:12px}
}
@media(max-width:800px) {
  .wrap {
  width:calc(100% - 40px)}
.header-inner {
  height:74px;
  gap:15px}
.brand img {
  width:120px}
.nav {
  display:none}
.button-small {
  font-size:11px;
  gap:14px;
  padding:10px 13px}
.hero {
  grid-template-columns:1fr;
  gap:0;
  padding-top:60px;
  padding-bottom:85px;
  min-height:0}
.hero-copy {
  text-align:center}
.hero .eyebrow {
  font-size:9px;
  margin-bottom:23px}
.hero h1 {
  font-size:clamp(39px,8vw,62px);
  margin-bottom:25px}
.hero-description {
  font-size:14px}
.hero-actions {
  justify-content:center;
  gap:22px}
.hero-notes {
  justify-content:center;
  font-size:10px}
.hero-visual {
  width:min(480px,100%);
  height:590px;
  margin:40px auto 20px}
.phone-front {
  width:250px;
  right:4%;
  top:35px}
.phone-back {
  width:220px;
  left:4%;
  top:90px}
.visual-label {
  display:none}
.orbit {
  width:430px;
  height:430px;
  left:calc(50% - 215px)}
.visual-caption {
  bottom:0;
  left:0;
  right:0;
  text-align:center;
  font-size:10px}
.hero-bottom {
  font-size:8px;
  letter-spacing:.09em}
.hero-bottom a {
  gap:10px}
.ticker {
  padding:13px 0}
.ticker>div {
  font-size:31px;
  gap:20px}
.section {
  padding-top:80px;
  padding-bottom:80px}
h2,.section-heading h2 {
  font-size:36px}
.eyebrow {
  font-size:9px;
  margin-bottom:20px}
.intro-copy {
  font-size:13px;
  margin-bottom:38px}
.feature-layout {
  gap:25px;
  grid-template-columns:1fr}
.feature-tab {
  padding:20px 0;
  grid-template-columns:27px 1fr 20px;
  gap:10px}
.feature-tab strong {
  font-size:18px}
.feature-description {
  font-size:12px;
  max-width:none;
  margin-top:8px}
.feature-stage {
  min-height:620px;
  padding-top:27px}
.feature-phone {
  width:245px}
.stage-kicker {
  align-self:center}
.calculator-section {
  padding:70px 0}
.calculator-layout {
  grid-template-columns:1fr;
  gap:35px}
.calculator-copy {
  position:relative}
.calculator-copy h2 {
  position:relative;
  z-index:1}
.calculator-copy>p:not(.eyebrow) {
  font-size:13px;
  margin-bottom:0}
.ratio-stamp {
  position:absolute;
  right:0;
  bottom:0;
  font-size:90px;
  margin:0;
  opacity:.7;
  z-index:0}
.calculator-card {
  padding:25px;
  max-width:500px;
  width:100%;
  justify-self:center}
.sharing {
  grid-template-columns:1fr;
  gap:40px}
.share-art {
  grid-row:2;
  min-height:460px}
.share-copy>p:not(.eyebrow) {
  font-size:14px}
.faq-section {
  grid-template-columns:1fr;
  gap:35px}
.faq-heading h2 br {
  display:none}
.faq-heading .text-link {
  margin-top:14px}
.faq-heading .eyebrow {
  margin-bottom:14px}
summary {
  font-size:14px;
  min-height:75px}
details>p {
  font-size:12px;
  padding-right:15px}
.download-section {
  padding:65px 0}
.download-inner {
  flex-direction:column;
  align-items:flex-start;
  gap:30px}
.download-section h2 {
  font-size:40px}
.footer {
  flex-direction:column;
  align-items:flex-start;
  gap:20px;
  padding-top:35px;
  padding-bottom:30px}
.footer-links {
  flex-wrap:wrap;
  gap:10px 25px}
.footer-links>span {
  flex-basis:100%}
}
@media(max-width:390px) {
  .hero h1 {
  font-size:38px}
.hero-actions {
  gap:14px}
.button-play {
  padding:14px 17px;
  font-size:14px;
  gap:10px}
.hero-actions .text-link {
  font-size:10px}
.hero-visual {
  height:520px}
.phone-front {
  width:215px}
.phone-back {
  width:185px}
.orbit {
  width:340px;
  height:340px;
  left:calc(50% - 170px)}
.orbit-two {
  width:270px;
  height:270px;
  left:calc(50% - 135px)}
.feature-stage {
  min-height:590px}
.feature-phone {
  width:230px}
.calculator-card {
  padding:21px}
.ratio-stamp {
  font-size:75px}
.share-card-image {
  height:210px}
.share-art {
  padding-inline:20px;
  min-height:420px}
}
@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}
*,*:before,*:after {
  animation:none!important;
  transition:none!important}
}