:root { color-scheme: light; --ink: #30283f; --muted: #716a80; --violet: #6f55dc; --pink: #ed6497; --line: rgba(72,55,105,.14); }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; color: var(--ink); font-family: "M PLUS 1p",system-ui,sans-serif; background: radial-gradient(circle at 8% 5%,rgba(111,85,220,.17),transparent 34rem),radial-gradient(circle at 92% 12%,rgba(237,100,151,.18),transparent 30rem),#f8f6ff; }
main { width: min(1120px,calc(100% - 40px)); margin: 0 auto; padding: 84px 0 52px; }
.hero { max-width: 790px; }
.eyebrow { margin: 0 0 10px; color: var(--violet); font-weight: 900; letter-spacing: .2em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(2.5rem,8vw,5.6rem); line-height: .98; letter-spacing: -.065em; }
h1 span { color: var(--pink); }
.lead { margin: 28px 0 0; max-width: 700px; color: var(--muted); font-size: clamp(1rem,2vw,1.25rem); line-height: 1.9; }
.trial-note { display: inline-block; margin: 24px 0 0; padding: 10px 15px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.72); font-size: .82rem; }
.tools { margin-top: 72px; }
.tools > h2,.notice h2 { font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; }
.tool-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.tool-card { position: relative; overflow: hidden; min-height: 440px; padding: 38px; border: 1px solid var(--line); border-radius: 28px; background: rgba(255,255,255,.84); box-shadow: 0 22px 60px rgba(57,42,92,.09); }
.tool-card::after { content: ""; position: absolute; right: -70px; top: -70px; width: 220px; height: 220px; border-radius: 50%; opacity: .16; }
.schedule::after { background: var(--violet); } .calendar::after { background: var(--pink); }
.tool-number { color: rgba(48,40,63,.16); font-size: 4rem; font-weight: 900; line-height: 1; }
.tool-kind { margin: 24px 0 5px; color: var(--muted); font-size: .75rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.tool-card h3 { margin: 0; font-size: clamp(1.8rem,4vw,2.7rem); letter-spacing: -.04em; }
.tool-card > p:not(.tool-kind) { min-height: 58px; color: var(--muted); line-height: 1.7; }
.tool-card ul { margin: 24px 0 32px; padding-left: 1.2em; color: var(--muted); line-height: 1.9; }
.launch { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 15px 18px; border-radius: 14px; color: white; font-weight: 900; text-decoration: none; transition: transform .18s ease,box-shadow .18s ease; }
.schedule .launch { background: var(--violet); } .calendar .launch { background: var(--pink); }
.launch:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(51,37,80,.18); }
.launch:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.notice { margin-top: 24px; padding: 24px 30px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.58); }
.notice h2 { margin: 0 0 8px; } .notice p { margin: 0; color: var(--muted); line-height: 1.75; }
footer { display: flex; justify-content: space-between; width: min(1120px,calc(100% - 40px)); margin: 0 auto; padding: 26px 0 38px; border-top: 1px solid var(--line); color: var(--muted); font-size: .8rem; font-weight: 700; }
footer a { color: inherit; }
@media (max-width: 760px) { main { width: min(100% - 24px,560px); padding-top: 54px; } .trial-note { border-radius: 16px; line-height: 1.6; } .tools { margin-top: 48px; } .tool-grid { grid-template-columns: 1fr; } .tool-card { min-height: 0; padding: 28px 24px; } .tool-card > p:not(.tool-kind) { min-height: 0; } footer { width: min(100% - 24px,560px); } }