.hero { display:grid; grid-template-columns:1.15fr 1fr; border:1px solid var(--line); border-radius:16px; overflow:hidden; margin-top:2px; background:white; }
.hero-copy { padding:52px 46px; }
.hero .eyebrow { font-size:9px; color:var(--blue); display:flex; align-items:center; gap:8px; }
.status-dot { width:6px; height:6px; background:var(--blue); border-radius:50%; }
.hero h1 { font-size:clamp(35px,4.3vw,57px); letter-spacing:-.045em; line-height:1.1; margin:26px 0 22px; }
.hero h1>span { color:var(--blue); }
.hero-copy>p { font-size:14px; color:var(--muted); line-height:1.85; max-width:420px; margin-bottom:30px; }
.hero-notes { display:flex; gap:22px; flex-wrap:wrap; font-size:10px; color:var(--muted); margin-top:30px; }
.hero-notes span { display:flex; align-items:center; gap:7px; }
.hero-notes .icon { width:16px; height:16px; color:var(--blue); }
.hero-visual { position:relative; display:flex; flex-direction:column; justify-content:center; padding:28px 30px; background-color:#eaf0fa; background-image:linear-gradient(#dfe7f4 1px,transparent 1px),linear-gradient(90deg,#dfe7f4 1px,transparent 1px); background-size:28px 28px; }
.hero-visual img { width:100%; margin:auto; }
.diagram-label { font-size:8px; letter-spacing:.16em; color:#6f85a6; }
.diagram-footer { display:flex; justify-content:space-between; align-items:flex-end; color:#556e92; font-size:11px; line-height:1.6; }
.diagram-number { font-family:monospace; font-size:10px; }
.category-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.category-card { background:white; border:1px solid var(--line); border-radius:var(--radius); padding:26px; position:relative; display:block; color:var(--ink); min-height:178px; transition:border-color .15s,box-shadow .15s,transform .15s; }
.category-card:hover { border-color:#93b2ec; color:var(--ink); box-shadow:var(--shadow); transform:translateY(-2px); }
.category-card-icon { width:40px; height:40px; display:grid; place-items:center; background:#edf3ff; color:var(--blue); border-radius:8px; margin-bottom:20px; }
.category-card-image { display:block; width:120px; height:120px; object-fit:contain; margin:0 auto 20px; }
.category-card h2 { font-size:17px; line-height:1.4; margin-bottom:8px; }
.category-card-caption { font-size:11px; color:var(--muted); }
.category-card>.icon { position:absolute; right:24px; bottom:26px; width:17px; height:17px; color:#98a7bb; }
.how-it-works { border-top:1px solid var(--line); margin-top:64px; padding-top:38px; display:grid; grid-template-columns:1fr 1.8fr; gap:50px; }
.how-it-works h2 { font-size:28px; }
.how-it-works ol { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
.how-it-works li>span { display:block; color:var(--blue); font-family:monospace; font-size:12px; margin-bottom:18px; }
.how-it-works h3 { font-size:14px; line-height:1.45; margin-bottom:8px; }
.how-it-works p { color:var(--muted); font-size:12px; }
@media(max-width:1000px) { .hero-copy { padding:36px 30px; }.hero-notes { gap:12px; }.category-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.how-it-works { grid-template-columns:1fr; gap:30px; } }
@media(max-width:720px) { .hero { grid-template-columns:1fr; }.hero-copy { padding:30px 24px; }.hero h1 { font-size:39px; }.hero-visual { min-height:260px; padding:18px 22px; }.hero-visual img { max-height:220px; }.category-card { padding:20px; min-height:174px; }.category-card h2 { font-size:15px; overflow-wrap:anywhere; }.category-card>.icon { right:17px; bottom:23px; }.category-card-caption { font-size:10px; }.how-it-works { margin-top:40px; }.how-it-works ol { grid-template-columns:1fr; gap:24px; }.how-it-works li { display:flex; gap:18px; }.how-it-works li>span { margin-top:3px; } }
@media(max-width:380px) { .hero h1 { font-size:34px; }.category-grid { grid-template-columns:1fr; } }