:root { --paper:#f4f1e8; --ink:#131411; --muted:#666960; --line:rgba(19,20,17,.17); --accent:#ff784b; --white:#fffef8; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"Avenir Next","Helvetica Neue",sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
.shell { max-width:1180px; margin:auto; padding:24px 24px 80px; }
.topbar { display:flex; justify-content:space-between; align-items:center; }
.brand { display:flex;align-items:center;gap:10px;font-weight:760; }
.mark { display:grid;place-items:center;width:31px;height:31px;border-radius:8px;background:var(--ink);color:#d8ff3e;font:italic 19px Georgia,serif; }
.back { font-size:13px;font-weight:700;border-bottom:1px solid var(--ink); }
.hero { display:grid;grid-template-columns:1fr 1fr;gap:74px;align-items:center;min-height:700px;padding:70px 0; }
.eyebrow { margin:0 0 22px;font:700 11px "SFMono-Regular",Consolas,monospace;letter-spacing:.13em;text-transform:uppercase; }
h1 { margin:0;font-size:clamp(65px,8vw,112px);line-height:.86;letter-spacing:-.075em; }
.lead { max-width:550px;margin:30px 0 0;color:var(--muted);font-size:18px;line-height:1.7; }
.actions { display:flex;gap:20px;align-items:center;margin-top:34px;flex-wrap:wrap; }
.download { display:inline-flex;justify-content:space-between;gap:35px;min-width:220px;padding:16px 18px;border:1px solid var(--ink);border-radius:7px;background:var(--ink);color:var(--white);font-weight:750; }
.support { font-size:13px;font-weight:700;border-bottom:1px solid var(--ink); }
.visual { position:relative;min-height:530px;overflow:hidden;border:1px solid var(--ink);border-radius:12px;background:var(--accent);box-shadow:13px 13px 0 var(--ink); }
.visual-label { position:absolute;top:22px;left:22px;padding:7px 9px;border-radius:4px;background:var(--ink);color:var(--white);font:700 10px "SFMono-Regular",Consolas,monospace;letter-spacing:.1em; }
.mock { position:absolute;inset:90px 45px 45px;padding:26px;border:2px solid var(--ink);border-radius:18px;background:var(--white); }
.mock-title { font-size:21px;font-weight:750; }
.rows { display:grid;gap:17px;margin-top:30px; }
.rows i { display:block;height:13px;border-radius:8px;background:var(--ink); }
.rows i:nth-child(2) { width:70%;height:28px; }.rows i:nth-child(3) { width:88%;height:7px; }.rows i:nth-child(4) { width:55%;height:20px; }
.features { border-top:1px solid var(--line);padding:90px 0 30px; }
.features-head { display:grid;grid-template-columns:1fr 1fr;gap:60px;margin-bottom:45px; }
.features h2 { margin:0;font-size:clamp(42px,5vw,68px);line-height:.95;letter-spacing:-.055em; }
.features-head p { margin:0;color:var(--muted);line-height:1.7; }
.feature-grid { display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--ink);border-radius:10px;overflow:hidden;background:var(--white); }
.feature { min-height:190px;padding:28px;border-right:1px solid var(--ink); }
.feature:last-child { border:0; }
.feature span { font:700 11px "SFMono-Regular",Consolas,monospace; }
.feature h3 { margin:35px 0 10px;font-size:23px; }
.feature p { margin:0;color:var(--muted);line-height:1.6;font-size:14px; }
.resize { --accent:#9fc9ff; }.ringtone { --accent:#b8a8ff; }.transfer { --accent:#b8e3c7; }
.resize .mock { inset:82px 70px 55px; }
.crop { position:relative;height:100%;border:2px solid var(--ink);background:linear-gradient(145deg,transparent 49%,var(--ink) 50%,transparent 51%); }
.crop::after { content:"1080 × 1350";position:absolute;right:12px;bottom:10px;font:700 11px "SFMono-Regular",Consolas,monospace; }
.ringtone .mock { display:grid;place-items:center; }
.disc { width:210px;height:210px;border-radius:50%;background:repeating-radial-gradient(circle,var(--ink) 0 3px,transparent 4px 15px),var(--ink); }
.disc::after { content:"";display:block;width:62px;height:62px;margin:74px;border-radius:50%;background:#d8ff3e;border:3px solid var(--ink); }
.transfer .mock { display:flex;align-items:center;justify-content:center;gap:26px; }
.device { width:120px;height:235px;padding:20px 13px;border:3px solid var(--ink);border-radius:22px;background:var(--white);box-shadow:6px 6px 0 var(--ink); }
.device::before { content:"";display:block;width:34px;height:5px;margin:0 auto 28px;border-radius:4px;background:var(--ink); }
.device i { display:block;height:38px;margin-bottom:12px;border:2px solid var(--ink);border-radius:6px;background:#9fc9ff; }
.device:last-child i { background:#d8ff3e; }
.flow { font-size:44px;font-weight:800; }
footer { margin-top:80px;padding-top:25px;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:var(--muted);font-size:13px; }
@media(max-width:800px){ .hero{grid-template-columns:1fr;gap:45px;min-height:auto;padding:90px 0 70px}.visual{min-height:460px}.features-head{grid-template-columns:1fr}.feature-grid{grid-template-columns:1fr}.feature{border-right:0;border-bottom:1px solid var(--ink)}footer{flex-direction:column;gap:10px} }
@media(max-width:460px){ .shell{padding:18px 14px 55px}h1{font-size:60px}.visual{min-height:400px}.mock{inset:75px 22px 30px}.resize .mock{inset:75px 35px 35px}.disc{width:170px;height:170px}.disc::after{width:50px;height:50px;margin:60px}.transfer .mock{gap:12px}.device{width:88px;height:195px;padding:18px 9px}.flow{font-size:30px} }