:root { --ink:#172028; --muted:#61707b; --line:#dce4e7; --paper:#f7f9f8; --yellow:#ffc107; --green:#118850; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--paper); color:var(--ink); font-family:Arial, Helvetica, sans-serif; margin:0; }
.topbar { align-items:center; background:#fff; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; min-height:76px; padding:0 max(28px, calc((100% - 1180px) / 2)); position:sticky; top:0; z-index:10; }
.brand { align-items:center; color:var(--ink); display:inline-flex; font-size:15px; gap:10px; text-decoration:none; }.brand span { background:var(--ink); border-radius:5px; color:var(--yellow); font-size:12px; font-weight:900; letter-spacing:.04em; padding:6px 7px; }.brand strong { font-size:14px; }
nav { align-items:center; display:flex; gap:25px; } nav a { color:#34424c; font-size:14px; font-weight:700; text-decoration:none; } nav .login-link { background:var(--ink); border-radius:7px; color:#fff; padding:11px 14px; } nav .login-link span { color:var(--yellow); margin-left:4px; }
.hero { display:grid; gap:80px; grid-template-columns:1.05fr .95fr; margin:0 auto; max-width:1180px; min-height:650px; padding:108px 28px 88px; }.hero-copy { align-self:center; }.eyebrow { color:#0879dd; font-size:12px; font-weight:800; letter-spacing:.095em; margin:0 0 16px; }.hero h1,.features h2,.how-it-works h2,.closing h2 { font-size:clamp(42px,5vw,69px); letter-spacing:-.065em; line-height:.98; margin:0; }.hero h1 em { color:#d69b00; font-style:normal; }.hero-description { color:var(--muted); font-size:19px; line-height:1.55; margin:28px 0 32px; max-width:570px; }.hero-actions { display:flex; flex-wrap:wrap; gap:12px; }.button { border-radius:7px; display:inline-block; font-size:14px; font-weight:800; padding:15px 19px; text-decoration:none; }.button-primary { background:var(--green); color:#fff; }.button-primary span { font-size:18px; margin-left:10px; }.button-secondary { border:1px solid #aab7bd; color:var(--ink); }
.board-preview { align-self:center; background:#20272c; border-radius:16px; box-shadow:0 25px 60px rgb(16 27 32 / 19%); overflow:hidden; padding:15px; transform:rotate(2deg); }.preview-header { align-items:center; color:#fff; display:flex; font-size:12px; gap:9px; padding:5px 4px 14px; }.preview-header strong { background:var(--yellow); border-radius:4px; color:var(--ink); font-size:10px; padding:4px; }.preview-header time { color:#bdc9d0; margin-left:auto; }.notice { background:#fff; border-radius:7px; margin-top:10px; padding:17px; }.notice div { align-items:center; display:flex; gap:10px; }.notice span { border-radius:4px; font-size:11px; font-weight:800; padding:5px 8px; }.notice-urgent span { background:#e9374b; color:#fff; }.notice-pending span { background:var(--yellow); color:var(--ink); }.notice small { color:#66747d; font-size:11px; }.notice h2 { font-size:19px; letter-spacing:-.03em; margin:20px 0 7px; }.notice p { color:#53636d; font-size:12px; line-height:1.4; margin:0; }.preview-footer { align-items:center; color:#c4d0d6; display:flex; font-size:11px; gap:7px; padding:16px 4px 4px; }.preview-footer i { background:#4bd183; border-radius:50%; height:7px; width:7px; }
.statement { background:var(--yellow); padding:31px 28px; text-align:center; }.statement p { font-size:clamp(20px,2.2vw,30px); font-weight:800; letter-spacing:-.035em; margin:0; }
.features,.how-it-works { margin:0 auto; max-width:1180px; padding:120px 28px; }.section-intro,.how-intro { max-width:760px; }.features h2,.how-it-works h2 { font-size:clamp(36px,4.3vw,56px); }.feature-grid { display:grid; gap:20px; grid-template-columns:repeat(3, 1fr); margin-top:60px; }.feature-grid article { background:#fff; border:1px solid var(--line); border-radius:14px; min-height:247px; padding:27px; }.feature-number { color:#d69b00; font-size:12px; font-weight:900; }.feature-grid h3,.how-it-works h3 { font-size:21px; letter-spacing:-.035em; margin:48px 0 10px; }.feature-grid p,.how-it-works li p { color:var(--muted); font-size:15px; line-height:1.55; margin:0; }
.how-it-works { border-top:1px solid var(--line); display:grid; gap:80px; grid-template-columns:.9fr 1.1fr; }.how-it-works ol { border-top:1px solid var(--ink); list-style:none; margin:0; padding:0; }.how-it-works li { border-bottom:1px solid var(--line); display:flex; gap:23px; padding:23px 0; }.how-it-works li > span { align-items:center; background:var(--yellow); border-radius:50%; display:flex; flex:0 0 29px; font-size:13px; font-weight:900; height:29px; justify-content:center; }.how-it-works h3 { margin:2px 0 8px; }
.closing { background:var(--ink); color:#fff; padding:115px 28px; text-align:center; }.closing .eyebrow { color:var(--yellow); }.closing h2 { font-size:clamp(38px,5vw,64px); margin-bottom:35px; }.closing .button { background:var(--yellow); color:var(--ink); }
footer { align-items:center; background:#fff; display:flex; justify-content:space-between; padding:25px max(28px, calc((100% - 1180px) / 2)); } footer p { color:#64737d; font-size:12px; margin:0; }
@media (max-width:760px) { .topbar { min-height:65px; padding:0 18px; }.brand strong,nav > a:not(.login-link) { display:none; } nav { gap:0; }.hero { gap:52px; grid-template-columns:1fr; min-height:auto; padding:66px 22px; }.hero h1 { font-size:50px; }.hero-description { font-size:17px; }.board-preview { margin:0 8px; transform:none; }.features,.how-it-works { padding:76px 22px; }.feature-grid,.how-it-works { grid-template-columns:1fr; }.feature-grid { margin-top:36px; }.feature-grid article { min-height:0; }.feature-grid h3 { margin-top:36px; }.how-it-works { gap:45px; }.closing { padding:78px 22px; } footer { align-items:flex-start; flex-direction:column; gap:17px; padding:24px 18px; } }