:root {
  --ink: #161719;
  --muted: #676158;
  --paper: #fffaf0;
  --cream: #f7f1e5;
  --yellow: #f5d54f;
  --yellow-soft: #ffe986;
  --blue: #a7dcf7;
  --green: #b8e9aa;
  --grey: #dadada;
  --pink: #f7c3d3;
  --purple: #d5c4fb;
  --line: rgba(22, 23, 25, 0.12);
  --shadow: 0 24px 80px rgba(39, 31, 11, 0.12);
  --radius: 28px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 999;
  opacity: .025;
  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='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
.shell { width: min(1180px, calc(100% - 44px)); margin-inline: auto; }
.section-pad { padding-block: 112px; }

.site-header {
  width: min(1180px, calc(100% - 44px));
  margin: 18px auto 0;
  height: 68px;
  display: flex; align-items: center; justify-content: space-between;
  position: relative; z-index: 10;
}
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:750; letter-spacing:-.03em; font-size:20px; }
.brand img { width:36px; height:36px; border-radius:10px; }
nav { display:flex; align-items:center; gap:28px; }
nav a { text-decoration:none; color:#504b43; font-size:14px; font-weight:650; }
nav a:hover { color:var(--ink); }
.nav-download { padding:10px 15px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.6); }

.hero {
  min-height: 740px;
  display:grid; grid-template-columns: 1.02fr .98fr; align-items:center; gap:50px;
  padding-block:70px 90px;
}
.eyebrow, .kicker { font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#71695d; }
.eyebrow { display:flex; align-items:center; gap:9px; }
.eyebrow .dot { width:9px; height:9px; border-radius:50%; background:var(--yellow); box-shadow:0 0 0 5px rgba(245,213,79,.24); }
h1 { font-size:clamp(64px, 7.5vw, 106px); line-height:.9; letter-spacing:-.065em; margin:26px 0 28px; font-weight:850; }
h1 span { color:#b09316; }
.lede { max-width:650px; font-size:20px; line-height:1.55; color:#59544c; letter-spacing:-.015em; }
.hero-actions { display:flex; gap:12px; align-items:center; margin-top:34px; flex-wrap:wrap; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:9px; text-decoration:none; border-radius:14px; padding:15px 20px; font-size:15px; font-weight:750; transition:.25s ease; }
.button svg { width:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.button.primary { background:var(--ink); color:#fff; box-shadow:0 10px 30px rgba(22,23,25,.18); }
.button.primary:hover, .button.dark:hover { transform:translateY(-2px); box-shadow:0 15px 38px rgba(22,23,25,.24); }
.button.ghost { border:1px solid var(--line); background:#fff7; }
.button.ghost:hover { background:#fff; transform:translateY(-1px); }
.compat { margin-top:18px; color:#8a8175; font-size:12px; }

.hero-visual { position:relative; min-height:560px; display:grid; place-items:center; }
.sun-orb { position:absolute; width:530px; height:530px; border-radius:50%; background:radial-gradient(circle at 40% 35%, #fff2a2, #f8d84c 58%, #e9bd14); filter:blur(.2px); box-shadow:0 40px 100px rgba(212,167,0,.25); }
.app-icon { position:relative; z-index:2; width:min(390px, 70vw); filter:drop-shadow(0 34px 36px rgba(67,49,2,.22)); transform:rotate(-5deg); animation:float 5s ease-in-out infinite; }
.mini-note { position:absolute; z-index:3; right:-4px; bottom:80px; width:210px; height:165px; border-radius:22px; overflow:hidden; box-shadow:0 22px 50px rgba(51,41,10,.22); transform:rotate(7deg); border:1px solid rgba(255,255,255,.55); }
.yellow-note { background:#ffe986; }
.mini-bar { height:38px; background:rgba(187,158,38,.18); display:flex; gap:7px; align-items:center; padding:0 11px; }
.mini-bar i { width:9px; height:9px; border-radius:50%; display:block; background:#ff6158; box-shadow:16px 0 0 #ffbd2e, 32px 0 0 #28c840; }
.mini-bar i:nth-child(n+2){display:none}.mini-bar span{margin-left:auto;opacity:.45;font-size:18px}.mini-note p{margin:20px 18px;font-size:23px;line-height:1.1;font-weight:700;letter-spacing:-.04em}
@keyframes float { 50% { transform:rotate(-3deg) translateY(-12px); } }

.marquee-wrap { border-block:1px solid var(--line); overflow:hidden; background:#fffdf8; }
.marquee { width:max-content; display:flex; gap:28px; align-items:center; padding:17px 0; animation:marquee 22s linear infinite; text-transform:uppercase; font-size:12px; font-weight:800; letter-spacing:.11em; color:#6f675b; }
.marquee b { color:#d4af1f; }
@keyframes marquee { to { transform:translateX(-50%); } }

.section-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:34px; }
h2 { font-size:clamp(42px, 5vw, 68px); letter-spacing:-.055em; line-height:.98; margin:10px 0 0; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.feature-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:34px; min-height:300px; box-shadow:0 8px 24px rgba(45,38,20,.04); }
.feature-card h3 { font-size:24px; letter-spacing:-.035em; margin:44px 0 10px; }
.feature-card p { color:#6d665b; line-height:1.62; margin:0; font-size:15px; }
.feature-icon { width:58px; height:58px; border-radius:18px; display:flex; align-items:center; justify-content:center; background:var(--cream); font-size:29px; }
.palette { gap:4px; }
.palette span { width:7px; height:24px; border-radius:999px; background:var(--blue); }
.palette span:nth-child(2){background:var(--green)}.palette span:nth-child(3){background:var(--yellow-soft)}
.pencil { background:#eef7ff; }.pin { background:#fff3bd; }

.preview-section { background:#151617; color:#fff; position:relative; overflow:hidden; }
.preview-section::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 76% 47%, rgba(245,213,79,.13), transparent 34%); }
.preview-shell { position:relative; display:grid; grid-template-columns:.78fr 1.22fr; gap:60px; align-items:center; }
.preview-copy .kicker { color:#b8b09f; }
.preview-copy h2 { margin-bottom:24px; }
.preview-copy > p:not(.kicker) { color:#bbb8b1; line-height:1.65; font-size:17px; max-width:470px; }
.swatches { display:flex; gap:12px; margin-top:30px; }
.swatch { width:42px; height:42px; border-radius:50%; border:2px solid transparent; outline:none; cursor:pointer; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); transition:.2s; }
.swatch.blue { background:var(--blue); }.swatch.green { background:var(--green); }.swatch.yellow{background:var(--yellow-soft)}.swatch.grey{background:var(--grey)}.swatch.pink{background:var(--pink)}.swatch.purple{background:var(--purple)}
.swatch:hover { transform:scale(1.08); }.swatch.active { border-color:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.22); }
.preview-stage { min-height:560px; display:grid; place-items:center; position:relative; }
.preview-stage .glow { position:absolute; width:70%; aspect-ratio:1; border-radius:50%; background:var(--yellow); opacity:.13; filter:blur(80px); }
.preview-stage img { position:relative; width:min(620px,100%); border-radius:34px; filter:drop-shadow(0 35px 60px rgba(0,0,0,.4)); transition:opacity .18s ease, transform .18s ease; }
.preview-stage img.changing { opacity:.2; transform:scale(.985); }
.preview-label { position:absolute; right:15px; bottom:24px; font-size:12px; text-transform:uppercase; letter-spacing:.15em; color:#9c988f; }

.pin-card { background:linear-gradient(135deg, #fff4b5, #f4d65c); border-radius:40px; padding:58px; display:grid; grid-template-columns:.85fr 1.15fr; gap:40px; align-items:center; overflow:hidden; box-shadow:var(--shadow); }
.pin-copy p:not(.kicker) { color:#645a31; line-height:1.6; max-width:470px; }
.text-link { display:inline-block; margin-top:14px; font-weight:800; text-decoration:none; border-bottom:1px solid rgba(22,23,25,.28); padding-bottom:3px; }
.text-link span { transition:.2s; display:inline-block; }.text-link:hover span{transform:translateX(4px)}
.desktop-demo { min-height:390px; position:relative; }
.back-window { position:absolute; width:88%; height:310px; top:20px; right:0; background:#f7f5f0; border-radius:24px; box-shadow:0 20px 60px rgba(58,46,5,.18); transform:rotate(3deg); overflow:hidden; }
.fake-titlebar { height:46px; background:#e6e2da; }.fake-lines{margin:34px;width:60%;height:10px;border-radius:10px;background:#ddd8cd;box-shadow:0 26px 0 #ddd8cd,0 52px 0 #ddd8cd,0 78px 0 #ddd8cd}
.front-note { position:absolute; width:320px; height:260px; left:2%; bottom:0; background:var(--green); border-radius:28px; overflow:hidden; box-shadow:0 28px 70px rgba(41,40,11,.28); transform:rotate(-5deg); border:1px solid rgba(255,255,255,.45); }
.note-top{height:48px;background:rgba(84,129,74,.16);display:flex;align-items:center;gap:8px;padding:0 14px}.note-top i{width:10px;height:10px;border-radius:50%;background:#ff6158;box-shadow:18px 0 0 #ffbd2e,36px 0 0 #28c840}.note-top i:nth-child(n+2){display:none}.note-top span{margin-left:auto;font-size:19px;opacity:.5}.front-note p{font-size:29px;line-height:1.08;font-weight:650;letter-spacing:-.035em;margin:28px 24px}

.download-cta { margin-bottom:34px; min-height:330px; border-radius:36px; background:#fff; border:1px solid var(--line); padding:48px; display:flex; align-items:center; justify-content:space-between; gap:40px; box-shadow:0 16px 50px rgba(44,35,10,.06); }
.download-cta img { width:64px; height:64px; border-radius:18px; float:left; margin-right:18px; }
.download-cta h2 { font-size:clamp(36px,4vw,54px); max-width:690px; clear:both; padding-top:24px; }
.download-cta p:not(.kicker) { color:#756e63; }
.button.dark { background:var(--ink); color:#fff; white-space:nowrap; padding-inline:24px; }

footer { border-top:1px solid var(--line); min-height:120px; display:flex; align-items:center; justify-content:space-between; gap:20px; color:#7a7266; font-size:13px; }
.footer-brand { display:flex; align-items:center; gap:10px; color:var(--ink); }.footer-brand img{width:30px;height:30px;border-radius:9px}

.reveal { opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.visible { opacity:1; transform:none; }.delay-1{transition-delay:.1s}.delay-2{transition-delay:.2s}

@media (max-width: 900px) {
  nav a:not(.nav-download) { display:none; }
  .hero { grid-template-columns:1fr; padding-top:60px; text-align:center; min-height:auto; }
  .hero-copy { display:flex; flex-direction:column; align-items:center; }
  .hero-visual { min-height:500px; }
  .mini-note { right:8%; bottom:55px; }
  .feature-grid { grid-template-columns:1fr; }
  .feature-card { min-height:auto; }
  .feature-card h3 { margin-top:28px; }
  .preview-shell, .pin-card { grid-template-columns:1fr; }
  .preview-stage { min-height:430px; }
  .pin-card { padding:42px; }
  .download-cta { align-items:flex-start; flex-direction:column; }
}
@media (max-width: 620px) {
  .shell, .site-header { width:min(100% - 28px, 1180px); }
  .site-header { margin-top:8px; }
  .brand span { display:none; }
  .section-pad { padding-block:78px; }
  h1 { font-size:58px; }
  .lede { font-size:18px; }
  .hero { padding-top:45px; gap:20px; }
  .hero-visual { min-height:410px; }
  .sun-orb { width:360px; height:360px; }
  .app-icon { width:280px; }
  .mini-note { width:165px; height:130px; bottom:40px; right:0; }
  .mini-note p { font-size:18px; margin:15px; }
  .mini-bar { height:31px; }
  .section-heading { align-items:flex-start; flex-direction:column; }
  .feature-card { padding:28px; }
  .preview-stage { min-height:340px; }
  .pin-card { padding:30px 24px; border-radius:30px; }
  .desktop-demo { min-height:300px; }
  .back-window { height:240px; }
  .front-note { width:245px; height:205px; }
  .front-note p { font-size:23px; }
  .download-cta { padding:30px; border-radius:28px; }
  footer { flex-direction:column; align-items:flex-start; justify-content:center; padding-block:28px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .reveal { opacity:1; transform:none; }
}