:root { --bg:#f5f8ff; --surface:rgba(255,255,255,.72); --ink:#111827; --muted:#64748b; --line:rgba(71,85,105,.16); --blue:#3676f4; --blue-soft:#dce8ff; --shadow:0 24px 60px rgba(39,66,116,.14); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; color:var(--ink); background:radial-gradient(circle at 82% 8%,#d7e7ff 0,transparent 25rem),radial-gradient(circle at 8% 48%,#eef3ff 0,transparent 30rem),var(--bg); font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Noto Sans CJK SC","Segoe UI",sans-serif; line-height:1.65; }
a { color:var(--blue); } .shell { width:min(1080px,calc(100% - 40px)); margin:0 auto; }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:24px 0; }.brand { display:inline-flex; align-items:center; gap:10px; color:var(--ink); font-weight:800; text-decoration:none; font-size:1.2rem; }.brand-mark { display:grid; width:38px; height:38px; place-items:center; border-radius:13px; background:linear-gradient(145deg,#5a8eff,#275fd8); color:#fff; box-shadow:0 8px 18px rgba(54,118,244,.24); }nav { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:18px; }nav a { color:var(--muted); font-size:.92rem; font-weight:650; text-decoration:none; }nav a:hover { color:var(--ink); }
.hero { display:grid; grid-template-columns:1.08fr .92fr; align-items:center; gap:70px; min-height:650px; padding:78px 0 100px; }.eyebrow { margin:0 0 15px; color:var(--blue); font-size:.76rem; font-weight:800; letter-spacing:.12em; }h1,h2 { letter-spacing:-.055em; line-height:1.04; }h1 { margin:0; font-size:clamp(3.4rem,8vw,6.7rem); }h2 { margin:0 0 15px; font-size:clamp(1.75rem,3.5vw,3rem); }.lead { max-width:580px; color:var(--muted); font-size:1.14rem; }.actions { display:flex; align-items:center; flex-wrap:wrap; gap:22px; margin-top:29px; }.button { display:inline-flex; min-height:48px; align-items:center; justify-content:center; padding:10px 18px; border-radius:16px; background:var(--blue); color:#fff; box-shadow:0 10px 24px rgba(54,118,244,.27); font-weight:750; text-decoration:none; }.text-link { font-weight:750; text-decoration:none; }
.memory-card { position:relative; min-height:460px; overflow:hidden; border:1px solid rgba(255,255,255,.8); border-radius:42px; background:linear-gradient(160deg,#d5e7ff 0%,#93b7f6 47%,#394f91 100%); box-shadow:var(--shadow); transform:rotate(2.5deg); }.memory-top,.memory-caption { position:absolute; right:22px; left:22px; display:flex; justify-content:space-between; align-items:center; color:#fff; font-size:.85rem; font-weight:650; }.memory-top { top:22px; }.record-dot { width:10px; height:10px; border-radius:50%; background:#ff655d; box-shadow:0 0 0 5px rgba(255,255,255,.18); }.memory-scene { position:absolute; inset:0; overflow:hidden; }.sun { position:absolute; top:25%; right:21%; width:84px; height:84px; border-radius:50%; background:#fff1bc; box-shadow:0 0 60px rgba(255,245,195,.8); }.hill { position:absolute; bottom:-15%; border-radius:50% 50% 0 0; }.hill-a { width:125%; height:50%; left:-25%; background:#5c7bad; }.hill-b { width:115%; height:38%; right:-35%; background:#405f95; }.memory-caption { bottom:24px; flex-direction:column; align-items:flex-start; gap:1px; }.memory-caption strong { font-size:1.12rem; }.memory-caption span { opacity:.74; }
.features { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:40px 0 118px; }.features article { padding:27px; border:1px solid var(--line); border-radius:28px; background:var(--surface); box-shadow:0 10px 30px rgba(55,75,113,.05); backdrop-filter:blur(18px); }.feature-icon { display:inline-flex; align-items:center; min-width:46px; height:28px; padding:0 9px; border-radius:9px; background:var(--blue-soft); color:var(--blue); font-size:.72rem; font-weight:850; }.features h2 { margin:17px 0 7px; font-size:1.45rem; }.features p,.promise p { color:var(--muted); }.promise { margin-bottom:96px; padding:clamp(30px,7vw,72px); border-radius:38px; background:linear-gradient(135deg,#1e4fbe,#4d89ff); color:#fff; box-shadow:var(--shadow); }.promise .eyebrow,.promise p { color:#dce8ff; }.promise h2 { max-width:650px; }.promise .text-link { color:#fff; }
.document { max-width:860px; margin:35px auto 86px; padding:clamp(28px,6vw,64px); border:1px solid var(--line); border-radius:34px; background:var(--surface); box-shadow:var(--shadow); backdrop-filter:blur(20px); }.document h1 { font-size:clamp(2.8rem,6vw,4.9rem); }.document h2 { margin-top:2.2em; font-size:1.65rem; }.document p,.document li { color:#46546a; }.updated { color:var(--muted)!important; font-size:.9rem; }.notice { padding:18px 20px; border-left:4px solid var(--blue); border-radius:12px; background:#eaf1ff; }.divider { height:1px; margin:54px 0; background:var(--line); }.footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; padding:0 0 34px; color:var(--muted); font-size:.88rem; }.footer span:last-child { display:flex; flex-wrap:wrap; gap:16px; }.footer a { color:inherit; text-decoration:none; }
@media (max-width:760px) { .shell { width:min(100% - 32px,1080px); }.topbar { align-items:flex-start; }.hero { grid-template-columns:1fr; gap:48px; min-height:auto; padding:55px 0 70px; }.memory-card { width:min(100%,390px); min-height:390px; justify-self:center; }.features { grid-template-columns:1fr; padding-bottom:72px; }.promise { margin-bottom:66px; }.document { margin-top:14px; border-radius:26px; } }
/* FramyGo document pages */
:root{--bg:#efeee5;--surface:#f9f8f2;--ink:#202b23;--muted:#64715f;--line:#202b2325;--blue:#425d43;--blue-soft:#e1e6d9;--shadow:0 20px 60px #2435220b}body{background:#efeee5}.brand-mark{background:#263c2c;color:#ff785d;box-shadow:none}.button{background:#263c2c;box-shadow:none;border-radius:99px}.document{border-radius:12px}.notice{background:#e4e8db;border-color:#e39472}.document p,.document li{color:#495744}html{scroll-behavior:smooth}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.document-language{padding:9px;border:1px solid #bbc5d8;border-radius:12px;background:#fff;color:#243046;font:inherit;font-size:12px;max-width:130px}.topbar{flex-wrap:wrap;gap:18px}.document h1{overflow-wrap:anywhere}.document p{line-height:1.9}