:root { --ink:#0b0a08; --surface:#12100d; --surface-2:#181510; --paper:#f2ecdf; --muted:#a79d90; --dim:#70685e; --amber:#d7a469; --line:rgba(242,236,223,.13); --shell:1200px; }
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; background:var(--ink); }
body { min-width:320px; overflow-x:hidden; color:var(--paper); background:radial-gradient(circle at 82% 5%,rgba(215,164,105,.09),transparent 28%),var(--ink); font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif; -webkit-font-smoothing:antialiased; }
body::before { content:""; position:fixed; z-index:40; inset:0; pointer-events:none; opacity:.035; 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='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
a { color:inherit; text-decoration:none; } img { display:block; max-width:100%; }
.section-shell,.nav-shell,.footer-shell { width:min(calc(100% - 64px),var(--shell)); margin:0 auto; }
.site-header { position:sticky; z-index:30; top:0; border-bottom:1px solid rgba(242,236,223,.08); background:rgba(11,10,8,.82); backdrop-filter:blur(22px); }
.nav-shell { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:30px; }
.brand { display:inline-flex; align-items:center; gap:12px; font-size:20px; font-weight:680; letter-spacing:-.03em; }
.brand img { border:1px solid rgba(255,255,255,.12); border-radius:11px; }
.nav-links { display:flex; align-items:center; gap:28px; color:#9d9488; font-size:13px; }
.nav-links a { transition:color .2s,border-color .2s,background .2s; }
.nav-links a:hover { color:var(--paper); }
.nav-download { padding:11px 17px; border:1px solid var(--line); border-radius:999px; background:rgba(242,236,223,.04); color:var(--paper)!important; }
.eyebrow,.feature-index,.info-label { color:#8f8578; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; font-weight:650; letter-spacing:.16em; }
.hero { min-height:780px; padding-top:90px; padding-bottom:120px; display:grid; grid-template-columns:.95fr 1.05fr; align-items:center; gap:64px; }
.hero h1 { margin-top:22px; max-width:680px; font-size:clamp(50px,4.8vw,68px); font-weight:690; line-height:1.08; letter-spacing:-.06em; }
.hero h1 span { color:#8e8579; }
.hero-description { max-width:560px; margin-top:30px; color:var(--muted); font-size:17px; line-height:1.85; }
.hero-actions { margin-top:38px; display:flex; align-items:center; gap:24px; }
.primary-button { min-height:52px; padding:0 23px; display:inline-flex; align-items:center; justify-content:center; gap:12px; border-radius:999px; background:var(--paper); color:#16120d; font-size:14px; font-weight:650; transition:transform .2s,background .2s; }
.primary-button:hover { transform:translateY(-2px); background:#fff; }
.primary-button span { color:#72522d; }
.text-button { color:#b2a89c; font-size:14px; }
.text-button span { display:inline-block; margin-left:7px; color:var(--amber); transition:transform .2s; }
.text-button:hover span { transform:translateY(3px); }
.app-meta { margin-top:42px; display:flex; flex-wrap:wrap; gap:9px; }
.app-meta span { padding:8px 11px; border:1px solid var(--line); border-radius:999px; color:#796f64; font-size:11px; }
.hero-visual { min-height:620px; position:relative; }
.contact-sheet { width:82%; height:550px; position:absolute; top:10px; right:0; padding:20px 20px 48px; border:1px solid var(--line); background:#12100d; box-shadow:0 40px 90px rgba(0,0,0,.42); transform:rotate(1.5deg); }
.contact-sheet::before,.contact-sheet::after { content:""; position:absolute; left:18px; right:18px; height:8px; background:repeating-linear-gradient(90deg,#0b0a08 0 18px,transparent 18px 33px); opacity:.75; }
.contact-sheet::before { top:6px; } .contact-sheet::after { bottom:7px; }
.contact-sheet img { width:100%; height:100%; object-fit:cover; object-position:center; filter:saturate(.87); }
.sheet-label { position:absolute; left:22px; right:22px; bottom:19px; display:flex; justify-content:space-between; color:#82786c; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:9px; letter-spacing:.16em; }
.phone-preview { width:205px; position:absolute; z-index:4; left:0; bottom:0; overflow:hidden; border:5px solid #1f1c18; border-radius:32px; background:#111; box-shadow:0 36px 80px rgba(0,0,0,.68); transform:rotate(-2deg); }
.phone-preview img { width:100%; }
.exposure-glow { width:210px; height:210px; position:absolute; z-index:-1; right:-30px; top:40px; border-radius:50%; background:rgba(215,164,105,.28); filter:blur(80px); }
.film-strip { overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.film-strip-track { min-height:66px; width:max-content; padding:0 5vw; display:flex; align-items:center; gap:28px; color:#625b52; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10px; letter-spacing:.18em; }
.film-strip-track i { width:5px; height:5px; border-radius:50%; background:var(--amber); opacity:.55; }
.features,.about { padding-top:122px; padding-bottom:122px; }
.section-heading { max-width:720px; margin-bottom:48px; }
.section-heading h2 { margin-top:18px; font-size:clamp(38px,4vw,56px); font-weight:680; letter-spacing:-.055em; }
.section-heading > p:last-child { max-width:610px; margin-top:18px; color:var(--muted); font-size:16px; line-height:1.8; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.feature-card { position:relative; overflow:hidden; border:1px solid var(--line); background:linear-gradient(145deg,#15120e,#0e0d0b); transition:transform .25s,border-color .25s; }
.feature-card:hover { transform:translateY(-3px); border-color:rgba(242,236,223,.26); }
.feature-primary { min-height:430px; grid-column:1/-1; padding:46px; display:grid; grid-template-columns:.85fr 1.15fr; gap:54px; border-radius:28px; }
.feature-copy { align-self:center; }
.feature-copy h3 { margin-top:22px; font-size:clamp(32px,3.6vw,48px); line-height:1.12; letter-spacing:-.05em; }
.feature-copy > p:nth-of-type(2) { max-width:490px; margin-top:22px; color:var(--muted); font-size:16px; line-height:1.8; }
.feature-pills { margin-top:28px; display:flex; flex-wrap:wrap; gap:8px; }
.feature-pills span { padding:8px 11px; border:1px solid var(--line); border-radius:999px; color:#837a6f; font-size:11px; }
.feature-image { min-height:330px; position:relative; overflow:hidden; border-radius:18px; background:#080706; }
.feature-image img { width:100%; height:100%; object-fit:cover; object-position:center 25%; }
.feature-image::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(11,10,8,.25),transparent); }
.feature-image > span { position:absolute; z-index:2; right:16px; bottom:13px; color:rgba(242,236,223,.55); font:9px ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.15em; }
.compact-card { min-height:240px; padding:27px; border-radius:20px; }
.card-top { display:flex; align-items:center; justify-content:space-between; }
.compact-card h3 { margin-top:50px; font-size:22px; letter-spacing:-.025em; }
.compact-card > p { max-width:34ch; margin-top:13px; color:#91877c; font-size:14px; line-height:1.7; }
.curve-mark { width:46px; height:26px; border-bottom:1px solid rgba(215,164,105,.55); border-radius:0 0 90% 0; transform:rotate(-20deg); }
.scale { position:absolute; right:25px; bottom:22px; display:flex; gap:5px; opacity:.38; }
.scale i { width:1px; height:8px; background:var(--paper); }.scale i:nth-child(3n+1){height:15px}
.roll-stack { width:43px; height:28px; position:relative; }.roll-stack i { width:34px; height:20px; position:absolute; right:0; border:1px solid rgba(215,164,105,.5); border-radius:2px; }.roll-stack i:nth-child(2){right:5px;top:4px}.roll-stack i:nth-child(3){right:10px;top:8px}
.frame-grid { width:41px; display:grid; grid-template-columns:1fr 1fr; gap:3px; }.frame-grid i { height:14px; border:1px solid rgba(242,236,223,.35); background:#27221b; }
.screens { padding:122px 0; overflow:hidden; border-top:1px solid rgba(242,236,223,.06); border-bottom:1px solid rgba(242,236,223,.06); background:#080705; }
.screens-track { padding:0 max(32px,calc((100vw - var(--shell))/2)); display:flex; gap:18px; overflow-x:auto; scrollbar-width:none; scroll-snap-type:x mandatory; }
.screens-track::-webkit-scrollbar { display:none; }
.screen-card { flex:0 0 282px; scroll-snap-align:start; padding:14px 14px 17px; border:1px solid var(--line); background:#12100d; }
.screen-card::before { content:""; height:6px; display:block; margin-bottom:9px; background:repeating-linear-gradient(90deg,#050403 0 12px,transparent 12px 23px); }
.screen-card img { width:100%; aspect-ratio:784/1392; object-fit:cover; background:#050505; }
.screen-card figcaption { margin-top:15px; display:flex; justify-content:space-between; gap:12px; color:#b6ac9f; font-size:13px; }.screen-card figcaption span { color:#6f675d; font:9px ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.12em; }
.info-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:16px; }
.info-card { min-height:260px; padding:34px; border:1px solid var(--line); border-radius:20px; background:#11100d; }
.info-card h3 { margin-top:28px; font-size:25px; letter-spacing:-.035em; }.info-card > p:not(.info-label) { margin-top:15px; color:#978d81; font-size:14px; line-height:1.8; }
.developer-card a { margin-top:28px; display:inline-flex; gap:10px; color:#c9bdad; font-size:13px; }.developer-card a span { color:var(--amber); }
.version-card { background:#d2a36b; color:#17120d; }.version-card .info-label,.version-card > p:not(.info-label) { color:rgba(23,18,13,.64); }.version-card strong { margin-top:16px; display:block; font-size:76px; line-height:1; letter-spacing:-.07em; }
.update-card ul { margin:20px 0 0 1.15em; color:#978d81; font-size:14px; line-height:1.9; }
.legal-links { margin-top:25px; display:flex; gap:12px; }.legal-links a { padding:9px 12px; border:1px solid var(--line); border-radius:999px; color:#afa497; font-size:12px; }
.cta { margin-bottom:122px; min-height:440px; padding:54px; display:grid; grid-template-columns:1fr .7fr; align-items:center; gap:40px; position:relative; overflow:hidden; border:1px solid var(--line); border-radius:28px; background:#17130e; }
.cta h2 { margin-top:20px; font-size:clamp(38px,4vw,58px); letter-spacing:-.055em; }.cta-copy > p:nth-of-type(2) { margin-top:18px; color:#9f9588; line-height:1.8; }.cta .primary-button { margin-top:30px; }
.cta-frame { height:330px; padding:12px 12px 35px; position:relative; background:#0a0907; transform:rotate(2deg); box-shadow:0 24px 65px rgba(0,0,0,.4); }.cta-frame img { width:100%; height:100%; object-fit:cover; }.cta-frame::after { content:"REFILM / 36 EXP"; position:absolute; left:12px; bottom:12px; color:#695f54; font:9px ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.16em; }
.site-footer { border-top:1px solid var(--line); }.footer-shell { min-height:116px; display:flex; align-items:center; justify-content:space-between; gap:28px; color:#71685e; font-size:11px; }.footer-shell .brand { color:var(--paper); font-size:17px; }.footer-links { display:flex; gap:20px; }.footer-links a:hover { color:#bbb0a2; }
@keyframes reveal { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }.reveal { animation:reveal .8s both cubic-bezier(.2,.7,.2,1); }
@media(max-width:900px){.hero{grid-template-columns:1fr;padding-top:72px;gap:54px}.hero-visual{min-height:570px}.feature-grid{grid-template-columns:1fr}.feature-primary{grid-template-columns:1fr;gap:32px}.compact-card{min-height:200px}.info-grid{grid-template-columns:1fr}.cta{grid-template-columns:1fr}.cta-frame{height:280px}.nav-links>a:not(.nav-download){display:none}}
@media(max-width:600px){.section-shell,.nav-shell,.footer-shell{width:min(calc(100% - 40px),var(--shell))}.nav-shell{min-height:68px;gap:12px;justify-content:flex-start}.nav-links{margin-left:auto;gap:0}.nav-download{padding:10px 13px;white-space:nowrap;font-size:12px}.hero{min-height:auto;padding:66px 0 84px}.hero h1{font-size:45px}.hero-description{font-size:15px}.hero-actions{align-items:flex-start;flex-direction:column}.hero-visual{min-height:440px}.contact-sheet{width:90%;height:390px;padding:14px 14px 40px}.phone-preview{width:145px;border-width:4px;border-radius:24px}.features,.about,.screens{padding-top:84px;padding-bottom:84px}.section-heading{margin-bottom:34px}.feature-primary{min-height:auto;padding:28px}.feature-image{min-height:300px}.compact-card{padding:24px}.compact-card h3{margin-top:36px}.screens-track{padding-left:20px;padding-right:20px}.screen-card{flex-basis:74vw}.info-card{min-height:auto;padding:26px}.version-card strong{font-size:62px}.cta{min-height:auto;margin-bottom:84px;padding:30px}.cta-frame{height:230px}.footer-shell{padding:30px 0;align-items:flex-start;flex-direction:column}.film-strip-track{min-height:56px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}