:root{--ink:#f5eed4;--dim:#a89e88;--accent:#d4a03e;--bg:#0a0806;--panel:#161210;--rose:#c46d6d;--midnight:#3a3f4b}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,sans-serif}a{color:inherit;text-decoration:none}
.shell{width:min(1180px,calc(100% - 40px));margin:auto}.skip-link{position:absolute;left:-999px}
.site-header{height:92px;display:flex;align-items:center;gap:28px}.brand,.footer-brand{display:flex;align-items:center;gap:11px}.brand{font:700 14px monospace;letter-spacing:.18em}.brand img,.footer-brand img{border-radius:14px}.site-header nav{display:flex;gap:28px;margin-left:auto;font-size:14px;font-weight:700;color:#a89e88}.header-cta{border:1px solid #6e6455;padding:11px 17px;border-radius:999px;font-size:13px;font-weight:800}
.kicker,.index{color:var(--accent);font:700 11px/1.2 monospace;letter-spacing:.16em;text-transform:uppercase}.kicker{display:flex;align-items:center;gap:10px}.kicker span{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 7px #d4a03e1f}
.hero{min-height:800px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:30px;padding:60px 0 100px}
.hero h1,.section-intro h2,.cta-panel h2{font:400 clamp(56px,7vw,110px)/.84 Georgia,serif;letter-spacing:-.08em;margin:32px 0 34px}
.hero h1 em,.section-intro h2 em,.cta-panel h2 em{color:var(--accent);font-style:italic}
.hero-copy>p,.section-intro>p,.feature-intro p{max-width:420px;color:var(--dim);font:300 20px/1.5 Georgia,serif}
.hero-actions{display:flex;align-items:center;gap:26px;margin:34px 0}
.button{display:inline-flex;align-items:center;gap:30px;border-radius:999px;padding:17px 19px 17px 23px;background:var(--accent);color:#17110a;font-weight:800;box-shadow:0 8px 0 #d4a03e2b}.button span{font-size:18px}
.text-link{border-bottom:1px solid #6e6455;padding:8px 0;font-size:13px;font-weight:700}
.proof{display:flex;gap:14px;color:#6e665b;font:700 9px monospace;letter-spacing:.12em}.proof i{width:4px;height:4px;border-radius:50%;background:#6e665b}

/* Header photo + strip art */
.hero-photo-stack{position:absolute;z-index:2;right:24px;top:68px;width:380px;height:500px;transform:rotate(4deg)}.hero-photo-main{display:block;width:285px;height:385px;object-fit:cover;object-position:center;border:9px solid #f5eed4;border-bottom-width:32px;border-radius:5px;box-shadow:18px 28px 55px #00000080;transform:rotate(-7deg)}.hero-photo-small{position:absolute;right:-6px;bottom:7px;display:block;width:190px;height:260px;object-fit:cover;object-position:center;border:7px solid #f5eed4;border-bottom-width:25px;border-radius:4px;box-shadow:15px 20px 42px #00000080;transform:rotate(9deg)}.hero-photo-note{position:absolute;right:22px;top:18px;color:var(--accent);font:700 9px monospace;letter-spacing:.16em;transform:rotate(9deg)}
.hero-art{position:relative;min-height:650px;display:grid;place-items:center}
.strip-wrap{position:relative;z-index:1;display:flex;gap:14px;transform:translate(-46px,140px) rotate(4deg) scale(.82)}
.strip{width:130px;border-radius:4px;overflow:hidden;box-shadow:20px 30px 60px #00000080;background:#1a1512}
.strip-header{height:24px;background:#0e0c0a;display:flex;align-items:center;justify-content:center;font:700 7px monospace;letter-spacing:.15em;color:#6e665b}
.strip-frame{height:130px;background:#2a2218;border:1px solid #d4a03e18;margin:2px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#d4a03e30;font:300 32px Georgia,serif}
.strip-frame.rose-frame{background:#2a1818}
.strip-frame.night-frame{background:#1a1e26}
.strip-footer{height:28px;background:#0e0c0a;display:flex;align-items:center;justify-content:center;gap:6px;font:700 6px monospace;letter-spacing:.14em;color:#d4a03e}
.strip.two{transform:translateY(30px)}
.strip.three{transform:translateY(-20px);opacity:.7}
.orbit-bg{position:absolute;width:520px;height:520px;border-radius:50%;background:#1e1610;right:-40px;top:60px}
.orbit-sm{position:absolute;width:180px;height:180px;border-radius:50%;border:1px solid #d4a03e44;left:-10px;bottom:80px}

.marquee{background:var(--accent);color:#191108;overflow:hidden;white-space:nowrap;transform:rotate(-2deg) scale(1.04);margin:0 -10px}
.marquee div{padding:17px 0;width:max-content;font:700 12px monospace;letter-spacing:.14em}

/* Real-life moments */
.moments{padding:155px 0 130px}.moments-intro{display:grid;grid-template-columns:.3fr 1fr .8fr;gap:42px;align-items:end;margin-bottom:64px}.moments h2,.store-copy h2{font:400 clamp(56px,7vw,100px)/.84 Georgia,serif;letter-spacing:-.08em;margin:0}.moments h2 em,.store-copy h2 em{color:var(--rose);font-style:italic}.moments-intro p,.store-copy>p{color:var(--dim);font:300 20px/1.5 Georgia,serif;max-width:420px;margin:0}.moment-gallery{display:grid;grid-template-columns:1.06fr .94fr;gap:18px;align-items:start}.moment-card{margin:0;background:#161210;border:1px solid #f5eed41c;border-radius:24px;overflow:hidden;box-shadow:0 24px 70px #00000035}.moment-card img{display:block;width:100%;aspect-ratio:2/3;object-fit:cover}.moment-party{margin-top:72px}.moment-card figcaption{display:grid;grid-template-columns:40px 1fr;gap:4px 12px;padding:22px 24px 25px}.moment-card figcaption span{grid-row:span 2;color:var(--accent);font:700 11px monospace;letter-spacing:.12em}.moment-card strong{font:400 23px/1.05 Georgia,serif;letter-spacing:-.03em}.moment-card small{color:var(--dim);font:700 10px monospace;letter-spacing:.1em;text-transform:uppercase}

/* App Store-safe product story */
.app-store-preview{display:grid;grid-template-columns:1fr .8fr;gap:100px;align-items:center;padding:120px 0 150px}.store-copy{max-width:510px}.store-copy h2{margin:28px 0 34px}.store-copy>p{max-width:450px}.store-points{display:flex;flex-direction:column;gap:15px;margin-top:38px;color:var(--ink);font:700 12px monospace;letter-spacing:.09em}.store-points span{display:flex;align-items:center;gap:13px}.store-points i{display:grid;place-items:center;width:26px;height:26px;border:1px solid #d4a03e66;border-radius:50%;color:var(--accent);font-style:normal;font-size:9px}.ios-preview-card{position:relative;max-width:420px;margin-left:auto}.ios-preview-card:before{content:"";position:absolute;inset:20px -20px -20px 20px;border:1px solid #d4a03e33;border-radius:30px;transform:rotate(4deg)}.ios-preview-card img{position:relative;z-index:1;display:block;width:100%;border-radius:24px;box-shadow:22px 30px 70px #00000065}.ios-preview-label{position:relative;z-index:2;margin:16px 0 0;color:var(--accent);font:700 10px monospace;letter-spacing:.15em;text-align:center}

/* Features */
.features{padding:160px 0}
.section-intro{display:grid;grid-template-columns:.25fr 1fr .8fr;gap:42px;align-items:end;margin-bottom:80px}
.section-intro h2,.cta-panel h2{margin:0}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{min-height:260px;padding:27px;border:1px solid #f5eed421;border-radius:24px;background:#161210;display:flex;flex-direction:column;justify-content:space-between}
.card-icon{color:var(--accent);font:300 36px Georgia,serif;margin-bottom:auto}
.card h3{font:400 22px/1.05 Georgia,serif;margin:24px 0 10px;letter-spacing:-.03em}
.card p{color:var(--dim);font:300 14px/1.5 Georgia,serif;margin:0}
.card.gold{background:var(--accent);color:#191108}.card.gold p{color:#6f4714}

/* Themes section */
.themes{background:#f0e8d3;color:#201a13;padding:145px 0}
.themes .index{color:#9a681f}
.themes-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}
.themes-grid>div>p{color:#756b5f;margin-top:32px;font:300 20px/1.5 Georgia,serif;max-width:420px}
.swatches{display:flex;gap:16px;margin-top:40px}
.swatch{width:72px;height:72px;border-radius:50%;border:3px solid transparent;cursor:pointer}
.swatch.classic{background:#f5eed4;border-color:#c4b89a}
.swatch.midnight{background:#1a1e26;border-color:#3a3f4b}
.swatch.rose{background:#f2dada;border-color:#c46d6d}
.theme-card{min-height:260px;padding:35px;border-radius:22px;box-shadow:25px 27px #5641273b;transform:rotate(-5deg);display:flex;flex-direction:column;gap:16px}
.theme-card.classic-card{background:#f5eed4;color:#3a2e1c}
.theme-card.midnight-card{background:#1a1e26;color:#d4dce8;transform:rotate(-5deg) translateX(20px)}
.theme-card.rose-card{background:#f2dada;color:#5c2828;transform:rotate(-5deg) translateX(40px)}
.theme-card small{font:700 8px monospace;letter-spacing:.15em;opacity:.6}
.theme-card strong{font:400 22px/1.05 Georgia,serif}
.theme-frames{display:flex;flex-direction:column;gap:3px}
.t-frame{height:60px;border-radius:4px;background:#00000018}

/* Clip section */
.clip-section{padding:145px 0}
.clip-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}
.clip-badge{display:inline-flex;align-items:center;gap:10px;background:#f5eed418;border:1px solid #d4a03e44;border-radius:999px;padding:10px 20px;font:700 11px monospace;letter-spacing:.14em;color:var(--accent);margin-bottom:36px}
.clip-badge span{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.clip-steps{display:flex;flex-direction:column;gap:20px;margin-top:40px}
.step{display:flex;gap:18px;align-items:flex-start}
.step-num{width:32px;height:32px;border-radius:50%;background:#d4a03e18;border:1px solid #d4a03e44;display:flex;align-items:center;justify-content:center;color:var(--accent);font:700 11px monospace;flex-shrink:0;margin-top:2px}
.step p{color:var(--dim);font:300 16px/1.45 Georgia,serif;margin:0}
.step strong{color:var(--ink);font-weight:400}
.qr-card{background:#1e1a14;border-radius:24px;padding:36px;display:flex;flex-direction:column;gap:20px}
.qr-placeholder{width:100%;aspect-ratio:1;border-radius:16px;background:#2a2318;border:1px solid #d4a03e28;display:flex;align-items:center;justify-content:center;color:#d4a03e30;font:300 60px Georgia,serif}
.qr-label{font:700 10px monospace;letter-spacing:.15em;color:var(--dim);text-align:center}

/* CTA */
.download{padding-bottom:155px}
.cta-panel{position:relative;min-height:520px;display:grid;grid-template-columns:1fr 1fr;align-items:center;overflow:hidden;padding:72px;border-radius:35px;background:#201a12}
.cta-panel:after{content:"";position:absolute;width:490px;height:490px;border-radius:50%;right:-110px;bottom:-170px;background:#3a2a14;z-index:0}
.cta-panel>*{position:relative;z-index:1}
.app-icon-lg{border-radius:22px;display:block;margin-bottom:45px}
.cta-panel h2{margin:20px 0 24px}
.cta-panel p{color:var(--dim);font:300 18px/1.5 Georgia,serif;margin-bottom:28px;max-width:380px}
.button.light{background:var(--ink);color:#17110a}
.strip-preview{position:relative;z-index:1;display:flex;gap:10px;justify-content:center;transform:rotate(-6deg) scale(.82)}.cta-photo{position:absolute;z-index:3;right:-72px;top:72px;width:185px;height:255px;object-fit:cover;border:8px solid #f5eed4;border-bottom-width:28px;border-radius:4px;box-shadow:18px 24px 45px #00000070;transform:rotate(10deg)}

.site-footer{background:#070605;border-top:1px solid #f5eed41a}.footer-grid{min-height:150px;display:grid;grid-template-columns:1fr auto auto;gap:45px;align-items:center}.footer-brand div{display:grid}.footer-brand strong{font:700 12px monospace;letter-spacing:.16em}.footer-brand span,.site-footer p{font-size:12px;color:#ffffff80;margin:4px 0 0}.footer-links{display:flex;gap:24px;font-size:13px;font-weight:700}

/* Portfolio preview */
.portfolio-preview{display:grid;grid-template-columns:.7fr 1.3fr;gap:70px;align-items:center;padding:30px 0 155px}.portfolio-copy h2{font:400 clamp(56px,6vw,92px)/.84 Georgia,serif;letter-spacing:-.08em;margin:28px 0 30px}.portfolio-copy h2 em{color:var(--rose);font-style:italic}.portfolio-copy p{max-width:320px;color:var(--dim);font:300 19px/1.5 Georgia,serif}.portfolio-shot{position:relative;display:block;overflow:hidden;border-radius:22px;background:#f5eed4;box-shadow:18px 26px 60px #00000055;transform:rotate(2deg);transition:transform .25s ease,box-shadow .25s ease}.portfolio-shot:hover{transform:rotate(0deg) translateY(-5px);box-shadow:18px 34px 75px #00000070}.portfolio-shot img{display:block;width:100%;height:auto}.portfolio-shot span{position:absolute;right:18px;bottom:16px;padding:10px 13px;border-radius:999px;background:#17110ddd;color:var(--ink);font:700 9px monospace;letter-spacing:.12em}

@media(max-width:760px){
  .site-header{height:78px}.site-header nav{display:none}.header-cta{margin-left:auto}
  .hero{grid-template-columns:1fr;min-height:0;padding:65px 0 85px}.hero h1{font-size:74px}
  .hero-art{min-height:500px;order:-1}
  .hero-photo-stack{right:8px;top:46px;width:320px;height:420px;transform:rotate(3deg) scale(.88)}.hero-photo-main{width:240px;height:325px}.hero-photo-small{width:160px;height:220px}.strip-wrap{transform:translate(-20px,130px) rotate(2deg) scale(.7)}
  .orbit-bg{width:380px;height:380px;right:-80px}
  .section-intro{grid-template-columns:1fr;gap:16px}
  .moments{padding:100px 0}.moments-intro{grid-template-columns:1fr;gap:16px;margin-bottom:42px}.moment-gallery{grid-template-columns:1fr;gap:22px}.moment-party{margin-top:0}
  .app-store-preview{grid-template-columns:1fr;gap:50px;padding:90px 0 110px}.ios-preview-card{max-width:360px;margin:auto}.store-copy h2{font-size:74px}
  .cards{grid-template-columns:1fr}
  .themes-grid,.clip-grid{grid-template-columns:1fr;gap:40px}
  .cta-panel{grid-template-columns:1fr;padding:36px 26px}
  .strip-preview{display:flex;min-height:270px;transform:rotate(-4deg) scale(.68);margin:18px -28px 0}.cta-photo{right:-42px;top:52px;width:165px;height:230px}
  .footer-grid{grid-template-columns:1fr;padding:40px 0}
  .portfolio-preview{grid-template-columns:1fr;gap:36px;padding:0 0 100px}.portfolio-copy h2{font-size:74px}.portfolio-shot{transform:rotate(1deg)}
  .features{padding:100px 0}
  .themes,.clip-section{padding:100px 0}
}
.store-mini-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:28px}.store-mini-grid img{width:100%;border-radius:14px;box-shadow:10px 15px 30px #00000045}