:root {
    color-scheme: light dark;
    --page: #faf8f5;
    --ink: #211a20;
    --muted: #645960;
    --line: #ded6d8;
    --accent: #a51f41;
    --button: #8f1735;
    --icon: #f4e4e8;
    font-family: "Instrument Sans", system-ui, "PingFang TC", "Microsoft JhengHei", sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --page: #191318;
        --ink: #fbf2f6;
        --muted: #c6b6be;
        --line: #493944;
        --accent: #ffa4b8;
        --button: #97203e;
        --icon: #38212d;
    }
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--page); color: var(--ink); line-height: 1.65; }
a { color: var(--accent); text-underline-offset: .24em; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.shell { width: min(1120px, calc(100% - 48px)); margin-inline: auto; }
.site-header { border-bottom: 1px solid var(--line); }
.site-bar, .site-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.site-bar { min-height: 74px; }
.brand {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    color: var(--ink);
    font-size: 23px;
    font-weight: 780;
    letter-spacing: -.055em;
    text-decoration: none;
}
.brand-icon {
    display: grid;
    width: 30px;
    aspect-ratio: 1;
    place-items: center;
    border-radius: 9px;
    background: #90233e;
}
.brand-icon::after {
    content: "";
    width: 12px;
    height: 15px;
    background: #fff3f5;
    clip-path: polygon(4% 0, 100% 56%, 59% 63%, 42% 100%);
    transform: rotate(-12deg);
}
.site-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px clamp(15px, 3vw, 32px); }
.site-nav a, .site-footer > a:last-child { color: var(--muted); font-size: .875rem; font-weight: 650; text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current], .site-footer > a:last-child:hover { color: var(--accent); text-decoration: underline; }

.hero {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    align-items: center;
    gap: clamp(24px, 4.5vw, 66px);
    padding-block: clamp(46px, 6vw, 88px) clamp(50px, 7vw, 100px);
}
.hero-copy .platforms {
    margin: 0 0 18px;
    color: var(--accent);
    font-size: .84rem;
    font-weight: 760;
    letter-spacing: .09em;
}
.hero h1 {
    margin: 0;
    font-size: clamp(2rem, 4.3vw, 3.9rem);
    line-height: 1.24;
    letter-spacing: -.065em;
}
.hero h1 em { color: var(--accent); font-style: normal; }
.hero-copy > p:not(.platforms) {
    max-width: 35ch;
    margin: 20px 0 26px;
    color: var(--muted);
    font-size: clamp(1rem, 1.5vw, 1.125rem);
}
.action {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    padding: 10px 19px;
    border-radius: 8px;
    background: var(--button);
    color: #fff7fa;
    font-size: .94rem;
    font-weight: 680;
    text-decoration: none;
}
.action:hover { background: #ab2949; }
.hero-art {
    display: grid;
    aspect-ratio: 1.26;
    place-items: center;
    overflow: hidden;
    margin: 0;
    border-radius: clamp(16px, 2.3vw, 28px);
    background: radial-gradient(ellipse at 75% 10%, #853554, transparent 63%),
        radial-gradient(ellipse at 10% 100%, #4a203d, transparent 64%), #1d111d;
}
.device-scene { position: relative; width: 85%; aspect-ratio: 1.35; container-type: inline-size; }
.laptop {
    position: absolute;
    inset: 7% 11% 14% 4%;
    padding: 2%;
    border: 1px solid #846777;
    border-radius: 4% 4% 2% 2%;
    background: #201922;
    box-shadow: 0 18px 36px #100a11a0;
}
.laptop::after {
    content: "";
    position: absolute;
    right: -7%;
    bottom: -5%;
    left: -7%;
    height: 5%;
    border-radius: 0 0 50% 50%;
    background: linear-gradient(#978391, #5b4c59 35%, #2c222e);
}
.slide {
    position: relative;
    height: 100%;
    overflow: hidden;
    border-radius: 3% 3% 1% 1%;
    background: radial-gradient(ellipse at 93% 12%, #893851, transparent 53%), #3f1b34;
    color: #fff2f4;
}
.slide-copy { position: absolute; z-index: 1; inset: 13% auto auto 9%; }
.slide-copy span { display: block; margin-bottom: 4cqw; color: #ffc1ce; font-size: 3cqw; font-weight: 650; }
.slide-copy strong { display: block; font-size: 8.5cqw; line-height: .98; letter-spacing: -.075em; }
.slide-orbit {
    position: absolute;
    top: 18%;
    left: 55%;
    width: 46%;
    aspect-ratio: 1;
    border: 1px solid #f5a9ba90;
    border-radius: 50%;
    background: linear-gradient(145deg, #ed799d65, #88345100);
    box-shadow: 0 0 0 4cqw #e682a32e, 0 0 0 8cqw #e682a31a;
}
.slide-pointer, .phone-pad i { border-radius: 50%; background: #ffb3c1; }
.slide-pointer {
    position: absolute;
    top: 55%;
    left: 69%;
    width: 2.6cqw;
    aspect-ratio: 1;
    box-shadow: 0 0 0 1.5cqw #fd819665, 0 0 3cqw #ffa0b9;
}
.phone {
    position: absolute;
    right: 1%;
    bottom: 2%;
    display: flex;
    width: 24%;
    aspect-ratio: .52;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: stretch;
    padding: 3% 2%;
    border: 1px solid #987687;
    border-radius: 18% / 10%;
    background: #231924;
    color: #fff2f4;
    text-align: center;
    transform: rotate(8deg);
    box-shadow: 0 12px 28px #150a12b0, inset 0 0 0 2px #0e0a0f;
}
.phone-title { font-size: 2.5cqw; font-weight: 740; }
.phone-pad { display: grid; aspect-ratio: 1; place-items: center; border-radius: 16%; background: #5c2c4a; }
.phone-pad i { width: 2cqw; aspect-ratio: 1; box-shadow: 0 0 0 1.3cqw #ed7d9a60; }
.phone-keys { display: flex; gap: 8%; font-size: 3.8cqw; }
.phone-keys span { flex: 1; border-radius: 4px; background: #432d40; }

.features { padding-block: 29px 66px; border-top: 1px solid var(--line); scroll-margin-top: 24px; }
.features h2 { margin: 0 0 22px; font-size: clamp(1.5rem, 2.5vw, 2rem); }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.feature-grid article { padding: clamp(17px, 2.3vw, 28px); border: 1px solid var(--line); border-radius: 14px; }
.feature-icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 9px;
    background: var(--icon);
    color: var(--accent);
    font-size: 22px;
    line-height: 1;
}
.feature-grid h3 { margin: 13px 0 5px; font-size: 1.1rem; }
.feature-grid p { margin: 0; color: var(--muted); font-size: .95rem; }
.site-footer { padding-block: 20px; border-top: 1px solid var(--line); }
.site-footer .brand { font-size: 1.1rem; }
.site-footer .brand-icon { width: 24px; border-radius: 7px; }

.policy { max-width: 720px; padding-block: clamp(34px, 6vw, 78px); }
.policy section { scroll-margin-top: 24px; }
.policy section + section { margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--line); }
.policy h1, .policy #en > h2:first-child { margin: 0 0 8px; font-size: clamp(1.8rem, 4.5vw, 2.75rem); line-height: 1.25; letter-spacing: -.04em; }
.policy h2, .policy h3 { margin: 26px 0 8px; font-size: 1.2rem; }
.policy p, .policy li { margin: 8px 0; }
.policy ul { padding-inline-start: 1.4em; }
.policy .muted { color: var(--muted); font-size: .9rem; }
.policy .muted + p { margin-top: 20px; }

@media (max-width: 720px) {
    .hero { grid-template-columns: 1fr; gap: 32px; }
    .hero h1 { font-size: clamp(2.15rem, 7vw, 3.2rem); }
    .hero-art { width: min(100%, 530px); }
}

@media (max-width: 560px) {
    .shell { width: calc(100% - 36px); }
    .site-bar { min-height: 64px; }
    .feature-grid { grid-template-columns: 1fr; gap: 12px; }
    .features { padding-bottom: 40px; }
}