:root{--navy:#0A192F;--slate:#3A4F66;--gold:#CBB58A;--champagne-soft:#F7F0E1;--bg:#F2F5F7;--card:#FFFFFF;--line:#D9E0E7;--head:"Urbanist","Roboto",system-ui,sans-serif;--body:"Lato","Roboto",system-ui,sans-serif}*{box-sizing:border-box}html,body{margin:0;background:var(--bg)}body{color:var(--navy);font-family:var(--body);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}.app{max-width:1060px;margin:0 auto;padding:max(14px,env(safe-area-inset-top)) max(clamp(14px,3vw,28px),env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(clamp(14px,3vw,28px),env(safe-area-inset-left))}.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0 18px}.brand{font-family:var(--head);font-weight:800;font-size:18px;letter-spacing:.4px}.hero{padding:clamp(8px,3vw,28px) 0 clamp(18px,3vw,30px)}.hero h1{margin:0;font-family:var(--head);font-weight:800;font-size:clamp(30px,5vw,44px);line-height:1.1}.hero h1:after{content:"";display:block;width:44px;height:4px;background:var(--gold);margin-top:10px;border-radius:2px}.lead{margin:16px 0 0;color:var(--slate);font-size:clamp(16px,1.9vw,18px);max-width:720px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}.card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-top:4px solid var(--gold);border-radius:8px;padding:clamp(18px,2.4vw,26px);box-shadow:0 2px 10px #0a192f0d}.card h2{margin:0 0 8px;font-family:var(--head);font-weight:800;font-size:22px;line-height:1.2}.card p{margin:0 0 20px;color:var(--slate);font-size:16px;flex:1}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 20px;border-radius:4px;font-family:var(--head);font-weight:700;font-size:16px;text-decoration:none;cursor:pointer;border:1.5px solid var(--navy)}.btn.primary{background:var(--navy);color:#fff}.btn.ghost{background:transparent;color:var(--navy);font-size:15px;min-height:40px;padding:8px 14px}.btn.off{border-color:var(--line);color:var(--slate);background:var(--bg);cursor:default}.card .btn{align-self:flex-start}@media(hover:hover){.btn.primary:hover{background:var(--slate);border-color:var(--slate)}.btn.ghost:hover{background:var(--champagne-soft)}}.btn:focus-visible{outline:3px solid var(--gold);outline-offset:2px}.note{color:var(--slate);margin:0}.foot{margin-top:28px;color:var(--slate);font-size:15px}