:root { --ink:#071b1a; --panel:#0d2b29; --line:#315d57; --paper:#f1f7f4; --muted:#b5c7c1; --mint:#55dbac; --gold:#f2c454; }
* { box-sizing:border-box; } html { background:var(--ink); } body { margin:0; background:var(--ink); color:var(--paper); font-family:Inter,"Hiragino Sans","Yu Gothic",Meiryo,sans-serif; letter-spacing:0; } a { color:inherit; text-decoration:none; } img { display:block; max-width:100%; } .brand-mark { overflow:hidden; border-radius:10px; } .brand-mark img { width:100%; height:100%; object-fit:cover; } .shell { width:min(1120px,calc(100% - 48px)); margin-inline:auto; }
.site-header { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:12px max(28px,env(safe-area-inset-right)) 12px max(28px,env(safe-area-inset-left)); border-bottom:1px solid rgba(181,199,193,.22); } .brand { display:inline-flex; align-items:center; gap:12px; color:var(--paper); font-size:16px; font-weight:800; } .brand-mark { display:grid; width:39px; height:39px; place-items:center; border:1px solid rgba(85,219,172,.66); border-radius:6px; color:var(--mint); font-size:21px; } .header-action,.button { display:inline-flex; min-height:44px; align-items:center; justify-content:center; gap:10px; padding:0 17px; border-radius:6px; font-size:14px; font-weight:800; } .header-action { background:var(--mint); color:var(--ink); }
.hero { padding:84px 0 78px; } .hero-grid { display:grid; grid-template-columns:.92fr 1.08fr; gap:56px; align-items:center; } .eyebrow,.section-label { margin:0; color:var(--mint); font-size:12px; font-weight:800; letter-spacing:.08em; } h1 { margin:17px 0 20px; font-size:clamp(46px,6vw,76px); line-height:.97; } .lead { max-width:530px; margin:0; color:var(--muted); font-size:18px; line-height:1.85; } .actions { display:flex; flex-wrap:wrap; gap:20px; align-items:center; margin-top:30px; } .button-primary { background:var(--mint); color:var(--ink); } .button-secondary { margin-top:24px; border:1px solid var(--mint); color:var(--mint); } .text-link { border-bottom:1px solid rgba(85,219,172,.6); color:var(--mint); font-size:14px; font-weight:750; line-height:1.9; } .hero-media { overflow:hidden; border:1px solid var(--line); border-radius:8px; background:var(--panel); box-shadow:18px 18px 0 rgba(85,219,172,.09); } .hero-media img { width:100%; height:auto; }
.section { padding:78px 0; border-top:1px solid var(--line); } .feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:30px; border:1px solid var(--line); border-radius:8px; overflow:hidden; } .feature-grid article { min-width:0; padding:31px; background:var(--panel); border-right:1px solid var(--line); } .feature-grid article:last-child { border-right:0; } .feature-number { color:var(--gold); font-size:13px; font-weight:800; } h2 { margin:15px 0; font-size:28px; line-height:1.3; } .feature-grid p,.access-copy p { margin:0; color:var(--muted); font-size:15px; line-height:1.85; } .access-panel { display:grid; grid-template-columns:.85fr 1.15fr; gap:70px; background:#0b2422; padding-inline:42px; } .access-copy { display:grid; align-content:center; gap:18px; } .related-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:28px; } .related-grid a { display:grid; gap:8px; min-height:135px; padding:24px; border:1px solid var(--line); border-radius:7px; background:#092220; transition:border-color .16s ease,transform .16s ease; } .related-grid a:hover,.related-grid a:focus-visible { border-color:var(--mint); transform:translateY(-2px); } .related-grid strong { color:var(--paper); font-size:16px; } .related-grid span { color:var(--muted); font-size:13px; line-height:1.6; } .site-footer { display:flex; justify-content:space-between; gap:18px; padding:32px max(28px,calc((100% - 1120px)/2)); border-top:1px solid var(--line); color:var(--muted); font-size:13px; } .site-footer a { color:var(--mint); }
.privacy-roadmap { display:grid; grid-template-columns:.78fr 1.22fr; gap:54px; align-items:start; } .roadmap-intro > p:last-child { margin:0; color:var(--muted); font-size:15px; line-height:1.9; } .roadmap-grid { display:grid; gap:0; margin:0; padding:0; list-style:none; border:1px solid var(--line); border-radius:8px; overflow:hidden; } .roadmap-grid li { position:relative; min-width:0; padding:25px 26px 26px 82px; background:var(--panel); border-bottom:1px solid var(--line); } .roadmap-grid li:last-child { border-bottom:0; } .roadmap-grid li::before { position:absolute; top:31px; left:28px; width:30px; height:30px; display:grid; place-items:center; border:1px solid var(--mint); border-radius:50%; color:var(--mint); content:""; } .roadmap-grid li:nth-child(1)::before { background:var(--mint); box-shadow:inset 0 0 0 7px var(--panel); } .roadmap-grid li:nth-child(2)::before { background:linear-gradient(90deg,var(--mint) 50%,transparent 50%); } .roadmap-grid li:nth-child(3)::before { border-color:var(--gold); box-shadow:0 0 0 5px rgba(242,196,84,.09); } .roadmap-step { color:var(--mint); font-size:12px; font-weight:800; letter-spacing:.08em; } .roadmap-grid h3 { margin:7px 0 6px; color:var(--paper); font-size:18px; } .roadmap-grid p { margin:0; color:var(--muted); font-size:14px; line-height:1.75; } .roadmap-note { grid-column:2; margin:2px 0 0; color:var(--muted); font-size:13px; line-height:1.75; }
@media (max-width:760px) { .shell { width:min(100% - 32px,560px); } .site-header { min-height:66px; padding-inline:16px; } .brand { font-size:14px; } .brand-mark { width:34px; height:34px; font-size:18px; } .header-action { min-height:39px; padding-inline:12px; font-size:12px; } .hero { padding:52px 0 56px; } .hero-grid,.access-panel,.privacy-roadmap { grid-template-columns:1fr; gap:32px; } .hero-media { order:-1; box-shadow:10px 10px 0 rgba(85,219,172,.09); } .lead { font-size:16px; } .section { padding:54px 0; } .feature-grid,.related-grid { grid-template-columns:1fr; } .feature-grid article { padding:25px; border-right:0; border-bottom:1px solid var(--line); } .feature-grid article:last-child { border-bottom:0; } .access-panel { padding-inline:24px; } .roadmap-grid li { padding:22px 20px 23px 66px; } .roadmap-grid li::before { top:27px; left:21px; width:26px; height:26px; } .roadmap-note { grid-column:auto; margin-top:0; } h2 { font-size:25px; } .site-footer { padding:26px 16px; } }