:root { --green:#0e5132; --green-deep:#083b25; --lime:#d7ee71; --ink:#17231d; --muted:#627068; --line:#dce5df; --paper:#fbfcfa; --tint:#eef5ed; --white:#fff; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:"DM Sans", Arial, sans-serif; line-height:1.5; } a { color:inherit; } .skip-link { position:absolute; left:1rem; top:-4rem; z-index:10; background:var(--white); padding:.75rem 1rem; border-radius:.5rem; } .skip-link:focus { top:1rem; }
.topbar { min-height:84px; max-width:1200px; margin:auto; padding:16px 32px; display:flex; justify-content:space-between; align-items:center; gap:32px; } .brand { display:flex; align-items:center; gap:11px; text-decoration:none; } .brand-mark { display:grid; place-items:center; width:43px; height:43px; border-radius:12px; font-weight:700; color:var(--green-deep); background:var(--lime); letter-spacing:-.05em; } .brand strong,.brand small { display:block; } .brand strong { font-size:15px; } .brand small { color:var(--muted); font-size:12px; } .menu { display:flex; gap:26px; } .menu a { color:#425047; font-size:14px; font-weight:600; text-decoration:none; } .menu a:hover { color:var(--green); } .menu-button { display:none; }
.hero { max-width:1200px; min-height:480px; margin:0 auto 74px; border-radius:28px; padding:74px 76px; position:relative; overflow:hidden; background:radial-gradient(circle at 85% 26%,rgba(215,238,113,.38),transparent 28%),linear-gradient(135deg,var(--green-deep),var(--green)); color:white; } .hero:after { content:""; position:absolute; width:480px; height:480px; right:-180px; bottom:-275px; border:1px solid rgba(255,255,255,.25); border-radius:50%; box-shadow:0 0 0 38px rgba(255,255,255,.06),0 0 0 76px rgba(255,255,255,.05); } .hero-content { max-width:675px; position:relative; z-index:1; } .eyebrow { margin:0 0 12px; color:var(--green); text-transform:uppercase; font-size:11px; font-weight:700; letter-spacing:.13em; } .hero .eyebrow,.help-panel .eyebrow { color:var(--lime); } h1,h2 { font-family:"Fraunces", Georgia, serif; letter-spacing:-.04em; margin:0; } h1 { max-width:700px; font-size:clamp(2.6rem,5vw,4.7rem); line-height:1; } h2 { font-size:clamp(2rem,3vw,2.8rem); line-height:1.08; } .hero-copy { max-width:565px; margin:24px 0 31px; color:#e3eee8; font-size:17px; } .hero-actions { display:flex; flex-wrap:wrap; gap:12px; } .button { display:inline-flex; align-items:center; justify-content:center; padding:13px 18px; border-radius:10px; font-size:14px; font-weight:700; text-decoration:none; } .button-primary { color:var(--green-deep); background:var(--lime); } .button-secondary { color:#fff; border:1px solid rgba(255,255,255,.4); } .notice { position:absolute; z-index:1; right:66px; bottom:47px; max-width:322px; display:flex; gap:12px; padding:18px; border:1px solid rgba(255,255,255,.19); border-radius:14px; background:rgba(3,43,26,.45); backdrop-filter:blur(5px); } .notice-icon { width:24px; height:24px; flex:0 0 24px; display:grid; place-items:center; background:var(--lime); color:var(--green-deep); border-radius:50%; font-weight:800; } .notice strong { font-size:14px; } .notice p { margin:4px 0 0; color:#d6e4dc; font-size:12px; line-height:1.4; }
.section { max-width:1200px; margin:0 auto; padding:0 32px 92px; } .section-tint { max-width:none; padding:82px max(32px,calc((100% - 1136px)/2)) 92px; background:var(--tint); } .section-heading { display:flex; align-items:end; justify-content:space-between; gap:40px; margin-bottom:30px; } .section-heading > p { max-width:345px; margin:0; color:var(--muted); font-size:14px; } .quick-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; } .quick-card { min-height:132px; display:flex; gap:15px; padding:22px; border:1px solid var(--line); border-radius:16px; background:var(--white); text-decoration:none; transition:transform .2s,box-shadow .2s; } .quick-card:hover,.platform-card:hover { transform:translateY(-3px); box-shadow:0 10px 22px rgba(20,51,33,.09); } .quick-card.featured { border-color:var(--green); background:var(--green); color:var(--white); } .card-icon { display:grid; place-items:center; height:34px; width:34px; flex:0 0 34px; border-radius:9px; background:#e8f2e6; color:var(--green); font-weight:800; } .featured .card-icon { background:var(--lime); color:var(--green-deep); } .quick-card strong,.quick-card small { display:block; } .quick-card strong { margin:3px 0 5px; font-size:15px; line-height:1.2; } .quick-card small { color:var(--muted); font-size:12px; line-height:1.35; } .featured small { color:#d4e4da; }
.document-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; } .document-card { min-height:248px; padding:26px; border-radius:16px; background:var(--white); } .document-card summary { list-style:none; cursor:pointer; } .document-card summary::-webkit-details-marker { display:none; } .document-card span { color:#a5b4a8; font-size:12px; font-weight:700; } .document-card h3 { margin:34px 0 10px; font-family:"Fraunces",Georgia,serif; font-size:22px; letter-spacing:-.03em; } .document-card p { min-height:76px; margin:0; color:var(--muted); font-size:13px; } .document-card b { color:var(--green); font-size:13px; } .document-card i { display:inline-block; margin-left:5px; font-style:normal; transition:transform .15s; } .document-card[open] i { transform:rotate(180deg); } .document-card ul { margin:18px 0 0; padding:15px 0 0; border-top:1px solid var(--line); color:var(--muted); font-size:12px; line-height:1.65; } .access-note { margin:22px 0 0; color:var(--muted); font-size:13px; }
.platform-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; } .platform-card { min-height:196px; padding:22px; border:1px solid var(--line); border-radius:16px; background:var(--white); display:flex; flex-direction:column; text-decoration:none; transition:transform .2s,box-shadow .2s; } .platform-tag { display:grid; place-items:center; width:38px; height:38px; margin-bottom:25px; border-radius:10px; background:var(--green); color:var(--lime); font-size:12px; font-weight:700; } .platform-card strong { font-size:15px; } .platform-card small { margin:4px 0 auto; color:var(--muted); font-size:12px; } .platform-card b { color:var(--green); font-size:13px; }
.help-panel { max-width:1136px; margin:0 auto 74px; padding:53px 58px; display:flex; align-items:center; justify-content:space-between; gap:32px; border-radius:22px; background:var(--green-deep); color:white; } .help-panel p:not(.eyebrow) { max-width:680px; color:#d3e0d8; font-size:14px; } .button-light { flex:0 0 auto; color:var(--green-deep); background:white; } footer { max-width:1200px; margin:auto; padding:0 32px 36px; display:flex; align-items:end; justify-content:space-between; gap:20px; color:var(--muted); font-size:13px; } footer strong { color:var(--ink); } footer p { margin:4px 0 0; } footer a { color:var(--green); font-weight:700; text-decoration:none; }
@media (max-width:850px) { .topbar { padding:16px 22px; } .menu-button { display:block; border:0; background:var(--tint); padding:9px 12px; border-radius:8px; color:var(--green); font-weight:700; } .menu { display:none; position:absolute; top:72px; left:20px; right:20px; z-index:4; flex-direction:column; gap:0; padding:10px; border:1px solid var(--line); border-radius:13px; background:white; box-shadow:0 10px 30px rgba(0,0,0,.1); } .menu.open { display:flex; } .menu a { padding:10px; } .hero { min-height:610px; margin:0 20px 60px; padding:58px 28px; } .notice { right:28px; left:28px; bottom:28px; max-width:none; } .section { padding-left:22px; padding-right:22px; padding-bottom:70px; } .section-tint { padding:68px 22px 70px; } .quick-grid,.document-grid { grid-template-columns:repeat(2,1fr); } .platform-grid { grid-template-columns:repeat(2,1fr); } .help-panel { margin:0 22px 58px; padding:36px 28px; } footer { padding:0 22px 30px; } }
@media (max-width:540px) { .hero { min-height:630px; } .section-heading { display:block; } .section-heading > p { margin-top:14px; } .quick-grid,.document-grid,.platform-grid { grid-template-columns:1fr; } .document-card { min-height:205px; } .document-card h3 { margin-top:20px; } .document-card p { min-height:auto; margin-bottom:17px; } .help-panel,footer { align-items:flex-start; flex-direction:column; } .help-panel { gap:22px; } }