:root { --paper:#f6f4ef; --ink:#18212b; --muted:#64707a; --line:#d8d8d2; --orange:#f26a3d; --blue:#3568f2; --violet:#7b5cda; --green:#1f9c75; }
* { box-sizing:border-box; } body { margin:0; background:var(--paper); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; } a { color:inherit; }
.site-shell { min-height:100vh; padding:34px clamp(20px,5vw,76px) 36px; } .site-header,.site-footer,.hero,.products,.note { max-width:1120px; margin:0 auto; } .site-header,.site-footer { display:flex; justify-content:space-between; align-items:center; } .site-header { border-bottom:1px solid var(--line); padding-bottom:22px; } .brand { display:flex; align-items:center; gap:10px; font-size:15px; font-weight:700; text-decoration:none; } .brand-mark { display:grid; place-items:center; width:28px; height:28px; background:var(--ink); color:var(--paper); border-radius:8px; font-size:13px; } .context,.product-type,.eyebrow,.visual-kicker { color:var(--muted); font-size:11px; letter-spacing:.12em; text-transform:uppercase; } .context { letter-spacing:.04em; text-transform:none; }
.hero { padding:clamp(70px,11vw,144px) 0 72px; } .eyebrow { color:var(--orange); font-weight:700; margin:0 0 22px; } h1 { font-size:clamp(44px,7vw,92px); font-weight:650; letter-spacing:-.075em; line-height:.98; margin:0; } h1 em { color:var(--orange); font-style:normal; } .hero-copy { color:var(--muted); font-size:clamp(16px,2vw,19px); line-height:1.75; margin:34px 0 0; max-width:500px; }
.viewport { background:#fff; border:1px solid rgba(24,33,43,.08); border-radius:28px; box-shadow:0 24px 70px rgba(24,33,43,.08); overflow:hidden; } .slide { display:grid; grid-template-columns:7fr 5fr; min-height:460px; } .visual { display:flex; flex-direction:column; justify-content:space-between; min-height:460px; overflow:hidden; padding:38px; position:relative; } .visual:after { border:1px solid rgba(255,255,255,.32); border-radius:50%; content:""; height:420px; position:absolute; right:-110px; top:-110px; width:420px; } .color-orange .visual { background:var(--orange); } .color-blue .visual { background:var(--blue); } .color-violet .visual { background:var(--violet); } .color-green .visual { background:var(--green); } .visual-kicker { color:rgba(255,255,255,.75); font-weight:650; position:relative; z-index:1; } .visual strong { color:#fff; font-size:clamp(28px,4vw,52px); letter-spacing:-.06em; line-height:1.02; position:relative; z-index:1; }
.copy { align-self:center; padding:56px clamp(28px,5vw,70px); } .product-type { margin:0 0 19px; } h2 { font-size:clamp(34px,4vw,56px); letter-spacing:-.065em; line-height:1; margin:0 0 26px; } .copy p { color:var(--muted); font-size:16px; line-height:1.8; margin:0; } .tag { border:1px solid var(--line); border-radius:999px; display:inline-block; font-size:12px; margin-top:38px; padding:8px 14px; }
.pager { align-items:center; display:flex; gap:22px; justify-content:center; padding:22px 0 0; } button { font:inherit; } .arrow { background:none; border:0; color:var(--ink); cursor:pointer; font-size:22px; padding:5px; } .arrow:hover { color:var(--orange); } button:focus-visible,a:focus-visible { outline:3px solid rgba(53,104,242,.35); outline-offset:4px; } .dots { display:flex; gap:8px; } .dots button { background:var(--line); border:0; border-radius:999px; cursor:pointer; height:6px; padding:0; width:20px; } .dots button.active { background:var(--ink); width:42px; } .counter { color:var(--muted); font-size:12px; } .counter small { font-size:10px; }
.note { display:flex; gap:16px; padding:92px 0 74px; } .note span { background:var(--orange); flex:0 0 30px; height:2px; margin-top:10px; } .note p { color:var(--muted); font-size:14px; line-height:1.7; margin:0; max-width:450px; } .site-footer { align-items:center; border-top:1px solid var(--line); color:var(--muted); display:flex; flex-direction:column; font-size:11px; gap:10px; justify-content:center; padding-top:20px; text-align:center; } .site-footer a:hover { color:var(--ink); }
.jimu-model { height:190px; position:absolute; right:15%; top:27%; transform:rotate(-12deg); width:230px; } .jimu-model i,.jimu-model b { background:#ffcf3f; border:3px solid var(--ink); border-radius:12px; display:block; height:92px; position:absolute; width:92px; } .jimu-model i:nth-child(1) { left:10px; top:28px; } .jimu-model i:nth-child(2) { left:78px; top:76px; } .jimu-model i:nth-child(3) { background:#ffe98d; left:126px; top:2px; } .jimu-model b { background:var(--orange); height:44px; left:82px; top:20px; width:44px; }
.piano-keys { display:flex; gap:5px; height:152px; margin:auto; padding-left:4%; position:relative; transform:rotate(-8deg); width:86%; } .piano-keys i { background:#fff; border-radius:0 0 8px 8px; flex:1; height:150px; } .piano-keys b { background:var(--ink); border-radius:0 0 5px 5px; height:87px; position:absolute; top:0; width:26px; } .piano-keys b:nth-of-type(1) { left:14%; } .piano-keys b:nth-of-type(2) { left:35%; } .piano-keys b:nth-of-type(3) { right:21%; }
.letters { display:grid; gap:8px; grid-template-columns:repeat(3,74px); margin:auto; transform:rotate(-8deg); } .letters b { align-items:center; background:#f0eaff; border-radius:12px; color:var(--violet); display:flex; font-size:38px; height:74px; justify-content:center; } .letters b:nth-child(even) { background:#ffdeef; transform:translateY(18px); }
.orbit { border:2px solid rgba(255,255,255,.6); border-radius:50%; height:220px; margin:auto; position:relative; transform:rotate(-16deg); width:220px; } .orbit:before,.orbit:after { border:2px solid rgba(255,255,255,.45); border-radius:50%; content:""; inset:34px; position:absolute; } .orbit:after { inset:70px; } .orbit i { background:#b9f2d9; border:2px solid var(--ink); border-radius:50%; height:26px; position:absolute; width:26px; } .orbit i:nth-child(1) { left:-12px; top:95px; } .orbit i:nth-child(2) { right:32px; top:5px; } .orbit i:nth-child(3) { bottom:15px; right:5px; } .orbit b { background:#fff; border-radius:50%; height:38px; left:89px; position:absolute; top:89px; width:38px; }
@media (max-width:800px) { .site-shell { padding-top:22px; } .context { display:none; } .hero { padding:78px 0 52px; } h1 { letter-spacing:-.065em; } .slide { grid-template-columns:1fr; } .visual { min-height:310px; padding:25px; } .copy { padding:38px 28px 42px; } .visual strong { font-size:34px; } .jimu-model { right:12%; top:22%; transform:scale(.82) rotate(-12deg); } .piano-keys { height:106px; margin:46px auto 32px; } .piano-keys i { height:105px; } .piano-keys b { height:61px; width:18px; } .letters { transform:scale(.78) rotate(-8deg); } .orbit { height:155px; margin:28px auto; width:155px; } .orbit:before { inset:24px; } .orbit:after { inset:49px; } .orbit b { height:27px; left:63px; top:63px; width:27px; } .orbit i { height:20px; width:20px; } .orbit i:nth-child(1) { left:-10px; top:66px; } .orbit i:nth-child(2) { right:22px; top:0; } .orbit i:nth-child(3) { bottom:5px; right:0; } .note { padding:66px 0 54px; } .site-footer { flex-direction:column; gap:10px; } }
@media (prefers-reduced-motion:reduce) { .dots button { transition:none; } }