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

:root { --ink:#15211d; --muted:#64716b; --mint:#b8f3d0; --lime:#d9ff72; --paper:#f7f6f0; --line:#dce0d5; --night:#12221d; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Manrope,Arial,sans-serif; }
a { color:inherit; text-decoration:none; }
.shell { width:min(1160px, calc(100% - 48px)); margin:auto; }
.nav { height:76px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:10px; font-size:19px; font-weight:800; letter-spacing:-.8px; }
.brand-mark { width:28px; height:28px; border-radius:7px; object-fit:cover; }
.nav-links { display:flex; gap:29px; align-items:center; color:#4e5a54; font-size:14px; font-weight:700; }
.nav-links a[aria-current="page"] { color:var(--ink); }
.button { cursor:pointer; border:0; display:inline-flex; justify-content:center; align-items:center; gap:8px; padding:13px 19px; border-radius:9px; font:700 14px Manrope,sans-serif; transition:transform .18s, background .18s; }
.button:hover { transform:translateY(-2px); }
.button-dark { color:white; background:var(--ink); }
.button-lime { color:var(--ink); background:var(--lime); }
.eyebrow { color:#32674d; font:500 12px 'DM Mono',monospace; letter-spacing:.12em; text-transform:uppercase; }
.hero { display:grid; grid-template-columns:1.04fr .96fr; gap:65px; align-items:center; padding:108px 0 90px; }
h1,h2,h3,p { margin-top:0; }
h1 { max-width:650px; margin-bottom:25px; font-size:clamp(43px,5.6vw,76px); line-height:1.06; letter-spacing:-.065em; }
.hero p, .lede { max-width:565px; color:var(--muted); font-size:17px; line-height:1.7; }
.hero-actions { display:flex; gap:12px; margin-top:31px; }
.hero-note { display:flex; align-items:center; gap:8px; margin-top:15px; color:#758078; font-size:12px; }
.dot { width:7px; height:7px; background:#62c786; border-radius:50%; }
.app-shot { border:1px solid #8d988d; border-radius:18px; padding:9px; background:#d8dfd5; box-shadow:16px 18px 0 #c6dfbc, 0 26px 60px #203a2a28; transform:rotate(2deg); }
.app-window { overflow:hidden; min-height:370px; border-radius:11px; background:#202c27; color:#edf5ed; }
.traffic { padding:11px 13px; background:#33413a; display:flex; gap:6px; }
.traffic i { width:9px; height:9px; display:block; border-radius:50%; background:#f17e70; }.traffic i:nth-child(2){background:#f7c75c}.traffic i:nth-child(3){background:#77cd85}
.shot-content { padding:22px; }.shot-label { color:#aebcb3; font-size:11px; }.shot-title { margin:4px 0 22px; font-size:19px; font-weight:700; }
.window-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; height:220px; }.mini-window { position:relative; min-height:94px; padding:11px; background:#425149; border:1px solid #5b6b61; border-radius:8px; font-size:10px; }.mini-window::after { content:""; position:absolute; left:11px; right:11px; bottom:12px; height:4px; border-radius:4px; background:#65766b; }.mini-window.selected { background:#c4f279; color:#21331f; border-color:#d8ff98; }.mini-window.selected::after { background:#8eaf50; }
.section { padding:100px 0; }.section-tint { background:#e7f4df; }.section-dark { background:var(--night); color:#f5f8ef; }.section-heading { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:42px; }.section-heading h2 { max-width:610px; margin:9px 0 0; font-size:clamp(32px,4vw,51px); line-height:1.1; letter-spacing:-.052em; }.section-heading p { margin:0; max-width:350px; color:var(--muted); line-height:1.65; }.section-dark .section-heading p { color:#b9c5ba; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }.feature { min-height:272px; padding:22px; background:#fffefa; border:1px solid var(--line); border-radius:14px; }.feature-number { color:#80a164; font:500 12px 'DM Mono',monospace; }.feature h3 { margin:48px 0 10px; font-size:19px; letter-spacing:-.04em; }.feature p { color:var(--muted); font-size:13px; line-height:1.65; }
.split { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }.steps { display:grid; gap:0; border-top:1px solid #426153; }.step { display:grid; grid-template-columns:50px 1fr; gap:17px; padding:20px 0; border-bottom:1px solid #426153; }.step b { color:var(--lime); font:500 13px 'DM Mono',monospace; }.step h3 { margin:0 0 7px; font-size:17px; }.step p { margin:0; color:#b9c5ba; font-size:13px; line-height:1.6; }
.layout-card { padding:32px; border-radius:16px; background:#d9ff72; color:#1a291d; min-height:330px; }.layout-card h3 { font-size:27px; letter-spacing:-.05em; }.layout-squares { display:grid; grid-template-columns:1.1fr .9fr; gap:11px; height:210px; }.layout-squares span { border:2px solid #1b3022; border-radius:8px; }.layout-squares span:first-child { grid-row:span 2; }.layout-squares span:nth-child(3) { background:#244835; }
.cta { padding:94px 0; text-align:center; }.cta h2 { max-width:650px; margin:11px auto 18px; font-size:clamp(35px,5vw,62px); letter-spacing:-.06em; line-height:1.05; }.cta p { max-width:480px; margin:0 auto 28px; color:var(--muted); line-height:1.65; }
.footer { padding:28px 0 42px; border-top:1px solid var(--line); display:flex; justify-content:space-between; color:#758078; font-size:12px; }.footer-links { display:flex; gap:18px; }
.page-hero { padding:82px 0 62px; border-bottom:1px solid var(--line); }.page-hero h1 { max-width:800px; margin:12px 0 18px; }.page-hero p { max-width:615px; color:var(--muted); font-size:17px; line-height:1.7; }
.detail-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }.detail { padding:30px; border:1px solid var(--line); border-radius:14px; background:#fffefa; }.detail .icon { display:grid; place-items:center; width:42px; height:42px; margin-bottom:39px; border-radius:11px; background:var(--mint); font-size:19px; }.detail h2 { margin-bottom:10px; font-size:25px; letter-spacing:-.05em; }.detail p { margin:0; color:var(--muted); font-size:14px; line-height:1.7; }
.guide-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }.guide-card { padding:25px; background:#fffefa; border:1px solid var(--line); border-radius:14px; }.guide-card .guide-num { color:#55836a; font:500 12px 'DM Mono',monospace; }.guide-card h2 { margin:54px 0 10px; font-size:23px; letter-spacing:-.05em; }.guide-card p { color:var(--muted); font-size:14px; line-height:1.65; }
.download-box { display:grid; grid-template-columns:1fr auto; align-items:center; gap:25px; padding:36px; border-radius:16px; background:var(--ink); color:white; }.download-box h2 { margin:7px 0 8px; font-size:32px; letter-spacing:-.05em; }.download-box p { margin:0; color:#bac7bc; font-size:14px; }.availability { margin-top:20px; color:#aebcb3; font-size:13px; }.availability span { color:var(--lime); }
dialog { max-width:360px; padding:0; overflow:hidden; border:0; border-radius:15px; box-shadow:0 24px 80px #12221d50; }.modal { padding:29px; }.modal h2 { margin:10px 0; font-size:28px; letter-spacing:-.05em; }.modal p { color:var(--muted); line-height:1.6; font-size:14px; }.modal form { margin-top:23px; text-align:right; } dialog::backdrop { background:#12221d88; }
@media (max-width:820px) { .shell{width:min(100% - 32px, 620px)} .nav-links{display:none}.hero,.split{grid-template-columns:1fr;gap:43px}.hero{padding:72px 0}.hero-copy{order:1}.app-shot{order:2;max-width:500px;transform:none}.feature-grid{grid-template-columns:1fr 1fr}.section{padding:72px 0}.section-heading{display:block}.section-heading p{margin-top:18px}.detail-grid,.guide-grid{grid-template-columns:1fr}.download-box{grid-template-columns:1fr}.footer{display:block}.footer-links{margin-top:12px}.page-hero{padding:62px 0 48px} }
@media (max-width:440px) { .feature-grid{grid-template-columns:1fr}.hero-actions{flex-direction:column;align-items:stretch}.button{width:100%}.download-box .button{width:100%}h1{font-size:42px}.window-grid{height:190px}.footer-links{flex-wrap:wrap} }

body.coming-soon {
  min-height: 100vh;
  color: #f4f4f8;
  background: #1d1c25;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.coming-soon__hero {
  display: grid;
  min-height: 100vh;
  padding: 28px;
  place-items: center;
  background:
    radial-gradient(circle at 50% 35%, rgba(101, 92, 148, .23), transparent 32rem),
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px),
    #1d1c25;
  background-size: auto, 44px 44px, 44px 44px, auto;
}

.coming-soon__frame {
  display: flex;
  width: min(100%, 760px);
  min-height: min(730px, calc(100vh - 56px));
  padding: clamp(42px, 7vw, 78px) 30px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .018));
  box-shadow: 0 30px 100px rgba(0, 0, 0, .32), inset 0 1px rgba(255, 255, 255, .08);
  text-align: center;
}

.coming-soon__icon {
  width: clamp(116px, 16vw, 156px);
  height: clamp(116px, 16vw, 156px);
  margin-bottom: 27px;
  border-radius: 21%;
  box-shadow: 0 19px 44px rgba(0, 0, 0, .42);
}

.coming-soon h1 {
  max-width: 650px;
  margin: 0;
  color: #fff;
  font-size: clamp(38px, 5.2vw, 64px);
  font-weight: 750;
  line-height: 1.06;
  letter-spacing: -.055em;
}

.coming-soon__aside {
  margin: 25px 0 0;
  color: #85818f;
  font-size: 14px;
  font-style: italic;
}

.coming-soon__notify {
  margin: 14px 0 0;
  color: #aaa6b8;
  font-size: 14px;
}

.coming-soon__notify a {
  color: #f3f1ff;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: #79728f;
  text-underline-offset: 4px;
}

@media (max-height: 720px) and (min-width: 600px) {
  .coming-soon__frame { min-height: calc(100vh - 56px); padding-block: 34px; }
  .coming-soon__icon { width: 118px; height: 118px; margin-bottom: 25px; }
  .coming-soon__aside { margin-top: 19px; }
}

@media (max-width: 520px) {
  .coming-soon__hero { padding: 14px; }
  .coming-soon__frame { min-height: calc(100vh - 28px); border-radius: 20px; }
}