@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Gaegu:wght@700&display=swap');

:root{
  --paper:#f4efdf;
  --paper-2:#fffaf0;
  --ink:#121314;
  --muted:#66645e;
  --line:#161616;
  --red:#d95b60;
  --red-hot:#ff464d;
  --yellow:#ffc928;
  --card:#f8f2e5;
  --shadow:rgba(18,19,20,.14);
  --panel:#121314;
  --white:#fffdf7;
}

html[data-theme="dark"]{
  --paper:#111314;
  --paper-2:#17191a;
  --ink:#fffaf0;
  --muted:#b9b5aa;
  --line:#f7f2e8;
  --card:#17191a;
  --shadow:rgba(0,0,0,.42);
  --panel:#f3eedf;
  --white:#111314;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"DM Sans",system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button{font:inherit}
.noise{
  position:fixed; inset:0; pointer-events:none; opacity:.035; z-index:99;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
}
.logo-dark{display:none!important}
html[data-theme="dark"] .logo-light{display:none!important}
html[data-theme="dark"] .logo-dark{display:block!important}

.nav{
  height:88px; display:flex; align-items:center; justify-content:space-between;
  max-width:1320px; margin:auto; padding:0 34px; position:relative; z-index:10;
}
.brand-logo{width:92px;height:auto}
.nav-links{display:flex;align-items:center;gap:28px;font-weight:700;font-size:14px}
.nav-links a{opacity:.72;transition:.2s}
.nav-links a:hover{opacity:1;transform:translateY(-1px)}
.nav-download{
  border:2px solid var(--ink); border-radius:999px; padding:10px 18px;
  box-shadow:3px 3px 0 var(--ink); opacity:1!important;
}
.theme-toggle{
  width:42px;height:42px;border:2px solid var(--ink);border-radius:50%;
  background:transparent;color:var(--ink);cursor:pointer;display:grid;place-items:center;
  position:relative;
}
.theme-toggle .moon{display:none}
html[data-theme="dark"] .theme-toggle .sun{display:none}
html[data-theme="dark"] .theme-toggle .moon{display:inline}

.hero{
  min-height:760px; max-width:1320px; margin:0 auto; padding:54px 34px 100px;
  display:grid;grid-template-columns:1.02fr .98fr;gap:70px;align-items:center;
}
.eyebrow,.section-kicker{
  font-size:12px;letter-spacing:.17em;font-weight:800;text-transform:uppercase;
}
.eyebrow{display:inline-flex;align-items:center;gap:9px;border:1.5px solid currentColor;border-radius:999px;padding:8px 12px}
.status-dot{width:9px;height:9px;border-radius:50%;background:var(--red-hot);box-shadow:0 0 0 4px rgba(255,70,77,.12)}
.hero h1,.story>h2,.split-copy>h2,.download h2{
  font-size:clamp(58px,7.4vw,108px);letter-spacing:-.075em;line-height:.84;margin:28px 0 26px;font-weight:800;
}
.hero h1 em,.story h2 em{font-family:"Gaegu",cursive;font-style:normal;color:var(--red-hot);letter-spacing:-.02em}
.hero-lead{font-size:20px;line-height:1.55;max-width:650px;color:var(--muted)}
.hero-actions{display:flex;gap:14px;align-items:center;margin-top:34px;flex-wrap:wrap}
.cta{
  border:2px solid var(--ink);border-radius:18px;padding:16px 22px;
  font-weight:800;display:inline-flex;align-items:center;gap:12px;transition:.18s ease;
}
.cta:hover{transform:translateY(-3px)}
.cta.primary{background:var(--ink);color:var(--paper);box-shadow:5px 5px 0 color-mix(in srgb,var(--ink) 25%, transparent)}
html[data-theme="dark"] .cta.primary{background:var(--paper);color:var(--ink)}
.cta.secondary{background:transparent}
.cta-eye{font-size:26px;line-height:0}
.microcopy{margin-top:24px;font-size:12px;font-weight:700;color:var(--muted);display:flex;flex-wrap:wrap;gap:9px}

.hero-art{position:relative;display:grid;place-items:center;min-height:610px}
.app-card{
  width:min(460px,90vw); aspect-ratio:432/533; background:var(--card);color:var(--ink);
  border:2px solid color-mix(in srgb,var(--ink) 48%, transparent);border-radius:30px;
  padding:28px 30px 24px;position:relative;z-index:4;
  box-shadow:0 24px 70px var(--shadow); transition:.4s cubic-bezier(.2,.8,.2,1);
}
html[data-theme="dark"] .app-card{background:#111314;color:#fffdf7;border-color:#555}
.card-top{height:68px;position:relative;display:flex;justify-content:center;align-items:flex-start}
.app-logo{width:126px;height:auto;max-height:68px;object-fit:contain}
.gear{position:absolute;right:3px;top:1px;font-size:25px}
.character-wrap{height:164px;display:grid;place-items:end center;position:relative}
.character{position:absolute;max-width:100%;max-height:160px;object-fit:contain;transition:.28s ease}
.character.awake{opacity:0;transform:scale(.92) translateY(8px)}
.app-card.is-on .character.sleeping{opacity:0;transform:scale(.92)}
.app-card.is-on .character.awake{opacity:1;transform:scale(1)}
html[data-theme="dark"] .character.sleeping{content:url("assets/character-sleep-dark.png")}
html[data-theme="dark"] .character.awake{content:url("assets/character-awake-dark.png")}
.state-copy{text-align:center;margin-top:7px}
.state-copy h2{font-family:"Gaegu",cursive;font-size:35px;line-height:1;margin:0 0 5px}
.state-copy p{font-size:13px;margin:0;color:color-mix(in srgb,currentColor 72%,transparent)}
.state-on{display:none}
.app-card.is-on .state-off{display:none}
.app-card.is-on .state-on{display:block}
.app-card.is-on .state-copy h2{color:var(--red-hot)}
.fake-main-button{
  width:100%;height:86px;margin-top:22px;border:4px solid currentColor;border-radius:30px;
  background:transparent;color:inherit;box-shadow:0 7px 0 rgba(0,0,0,.10);
  font-family:"Gaegu",cursive;font-size:37px;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;padding:0 27px;transition:.2s;
}
.fake-main-button:active{transform:translateY(3px);box-shadow:0 3px 0 rgba(0,0,0,.10)}
.button-on{display:none}
.app-card.is-on .fake-main-button{background:var(--red);color:#111;border-color:#111;box-shadow:none}
.app-card.is-on .button-off{display:none}
.app-card.is-on .button-on{display:inline}
.button-glyph{font-family:system-ui;font-size:38px;font-weight:900}
.keep-for{display:flex;align-items:center;gap:14px;margin:23px 0 13px;justify-content:center;font-size:11px;letter-spacing:.05em}
.keep-for span{height:1px;width:42px;background:currentColor;opacity:.55}
.duration-row{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}
.duration-row button{
  height:52px;border:1.5px solid currentColor;background:transparent;color:inherit;border-radius:10px;font-weight:800;
}
.duration-row .selected{background:var(--yellow);color:#111;border-color:#111;font-size:22px}
.app-card.is-on .duration-row .selected{background:var(--red);color:#111}
.orbit{position:absolute;border:2px dashed color-mix(in srgb,var(--ink) 24%,transparent);border-radius:50%}
.orbit-one{width:550px;height:550px;animation:spin 35s linear infinite}
.orbit-two{width:430px;height:430px;animation:spin 22s linear reverse infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.marquee{
  border-block:2px solid var(--ink);overflow:hidden;background:var(--yellow);color:#111;
  transform:rotate(-1.3deg) scale(1.02);margin:15px 0 120px;
}
.marquee-track{
  display:flex;gap:22px;align-items:center;white-space:nowrap;padding:15px 0;
  font-family:"Gaegu",cursive;font-size:28px;font-weight:700;animation:marquee 22s linear infinite;width:max-content
}
.marquee-track i{font-style:normal;color:var(--red-hot)}
@keyframes marquee{to{transform:translateX(-50%)}}

.story{max-width:1320px;margin:auto;padding:30px 34px 150px}
.story>h2,.split-copy>h2,.download h2{font-size:clamp(54px,6vw,84px)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:56px}
.step{
  border:2px solid var(--ink);border-radius:26px;padding:28px;min-height:300px;position:relative;background:var(--paper-2);
  box-shadow:6px 6px 0 var(--ink);
}
.step.hot{background:var(--red);color:#111}
.step-number{font-size:12px;font-weight:800;opacity:.6}
.step-eye{font-size:64px;margin:32px 0 15px;line-height:1}
.step h3{font-family:"Gaegu",cursive;font-size:34px;margin:0 0 10px}
.step p{line-height:1.6;color:color-mix(in srgb,currentColor 72%,transparent);margin:0}

.split{
  max-width:1320px;margin:0 auto 150px;padding:0 34px;
  display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:center;
}
.dark-hole{
  background:#101213;border-radius:50%;aspect-ratio:1;display:grid;place-items:center;position:relative;overflow:hidden;
  box-shadow:inset 0 0 90px rgba(0,0,0,.6),0 22px 65px var(--shadow)
}
.dark-hole img{width:72%;transform:translateY(10%);filter:drop-shadow(0 0 1px rgba(255,255,255,.7))}
.dark-hole span{
  position:absolute;bottom:12%;right:7%;color:#fff;font-family:"Gaegu",cursive;font-size:22px;transform:rotate(-8deg);text-align:center
}
.feature-list{margin-top:35px}
.feature-list>div{border-top:1.5px solid color-mix(in srgb,var(--ink) 32%,transparent);padding:22px 0;display:grid;grid-template-columns:190px 1fr;gap:20px}
.feature-list b{font-family:"Gaegu",cursive;font-size:27px}
.feature-list p{margin:0;color:var(--muted);line-height:1.55}

.quote{text-align:center;padding:90px 34px 130px}
.quote-icon{width:130px;border-radius:28px;box-shadow:0 14px 35px var(--shadow)}
.quote blockquote{font-family:"Gaegu",cursive;font-size:clamp(45px,6vw,82px);margin:28px auto 4px;max-width:900px;line-height:.95}
.quote p{color:var(--muted)}

.download{max-width:1320px;margin:0 auto;padding:0 34px 100px}
.download-card{
  background:var(--yellow);color:#111;border:3px solid #111;border-radius:38px;padding:55px 58px;
  min-height:480px;position:relative;overflow:hidden;box-shadow:9px 9px 0 #111
}
.download h2{margin-top:18px;max-width:700px}
.download-card>div>p{max-width:650px;font-size:17px;line-height:1.6}
.download code{background:rgba(255,255,255,.45);padding:3px 7px;border-radius:5px}
.download-actions{display:flex;align-items:center;gap:22px;margin-top:26px;flex-wrap:wrap}
.cta.giant{font-size:18px;background:#111;color:#fff5dc;border-color:#111}
.version{font-size:12px;font-weight:800;opacity:.65}
.download-guy{position:absolute;right:-18px;bottom:-22px;width:42%;max-width:510px}

footer{
  max-width:1320px;margin:auto;padding:20px 34px 58px;display:flex;justify-content:space-between;gap:30px;align-items:flex-end
}
.footer-logo{width:105px}
.footer-brand p{font-family:"Gaegu",cursive;font-size:20px;color:var(--muted);margin:8px 0 0}
.footer-links{display:flex;gap:24px;align-items:center;font-size:12px;font-weight:700;color:var(--muted);flex-wrap:wrap;justify-content:flex-end}
.footer-links a{text-decoration:underline;text-underline-offset:3px;color:var(--ink)}

@media (max-width:950px){
  .hero{grid-template-columns:1fr;padding-top:35px}
  .hero-copy{text-align:center}
  .hero-lead{margin-inline:auto}
  .hero-actions,.microcopy{justify-content:center}
  .hero-art{min-height:580px}
  .steps{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .split-art{max-width:560px;margin:auto}
  .download-guy{opacity:.25;width:65%}
  .download-card>div{position:relative;z-index:2}
}
@media (max-width:680px){
  .nav{height:72px;padding:0 18px}
  .nav-links>a:not(.nav-download){display:none}
  .nav-links{gap:12px}
  .nav-download{padding:8px 13px}
  .hero{padding:30px 18px 80px;gap:20px}
  .hero h1{font-size:58px}
  .hero-lead{font-size:17px}
  .app-card{width:96vw;padding:24px 24px 22px}
    .orbit{display:none}
    .story,.split,.download{padding-inline:18px}
  .story{padding-bottom:100px}
  .split{gap:45px;margin-bottom:100px}
  .feature-list>div{grid-template-columns:1fr;gap:5px}
  .download-card{padding:38px 28px}
  .download-guy{width:92%;right:-34%;bottom:-5%}
  footer{padding:10px 18px 40px;display:block}
  .footer-links{justify-content:flex-start;margin-top:25px}
}

.pricing{max-width:1320px;margin:0 auto 140px;padding:0 34px}
.pricing-card{border:3px solid var(--ink);border-radius:34px;padding:52px 56px;display:grid;grid-template-columns:1.15fr .85fr;gap:50px;align-items:center;background:var(--paper-2);box-shadow:8px 8px 0 var(--ink)}
.pricing h2{font-size:clamp(54px,6vw,82px);line-height:.88;letter-spacing:-.06em;margin:18px 0 22px}
.pricing h2 em{font-family:"Gaegu",cursive;font-style:normal;color:var(--red-hot)}
.pricing-copy>p{font-size:18px;line-height:1.6;color:var(--muted);max-width:620px}
.price-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.price-badges span{border:1.5px solid var(--ink);border-radius:999px;padding:8px 12px;font-size:12px;font-weight:800}
.pricing-action{text-align:center}
.coming-soon{width:100%;justify-content:center;opacity:1;cursor:not-allowed}
.pricing-action p{font-size:12px;color:var(--muted);margin:14px auto 0;max-width:320px;line-height:1.5}
.review-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:28px;max-width:700px}
.review-grid>div{border:1.5px solid rgba(17,17,17,.7);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:5px;background:rgba(255,255,255,.20)}
.review-grid b{font-family:"Gaegu",cursive;font-size:23px}
.review-grid span{font-size:13px;font-weight:700}
html[data-theme="dark"] .review-grid>div{border-color:#111;background:rgba(255,255,255,.16)}
.legal-page{max-width:820px;margin:0 auto;padding:70px 28px 100px;line-height:1.7}
.legal-page h1{font-size:clamp(48px,8vw,76px);letter-spacing:-.05em;line-height:.95}
.legal-page h2{font-family:"Gaegu",cursive;font-size:34px;margin-top:36px}
.legal-page p{color:var(--muted);font-size:16px}
.legal-page a{text-decoration:underline;text-underline-offset:3px;color:var(--ink)}
.legal-back{display:inline-block;margin-bottom:30px;font-weight:800}
@media (max-width:950px){.pricing-card{grid-template-columns:1fr}}
@media (max-width:680px){.pricing{padding-inline:18px;margin-bottom:100px}.pricing-card{padding:36px 26px}.review-grid{grid-template-columns:1fr}}

.old-price{
  font-size:.48em;
  font-style:normal;
  font-weight:700;
  opacity:.42;
  text-decoration:line-through;
  text-decoration-thickness:2px;
  vertical-align:middle;
  margin-right:.18em;
}