:root{
  --bg:#f5efe0; --surface:#fbf7ec; --text:#1b2a4a; --muted:#52607d; --line:#dcd2b8;
  --accent:#18284e; --accent-text:#f6f1e6; --focus:#2f5fd0;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#121a2b; --surface:#1a2338; --text:#ece6d6; --muted:#a6b0c6; --line:#2b3753;
         --accent:#ece6d6; --accent-text:#121a2b; --focus:#8fb0ff; }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--text);
  font:17px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
a{color:inherit}
:focus-visible{outline:3px solid var(--focus); outline-offset:3px; border-radius:4px}
.wrap{max-width:46rem; margin:0 auto; padding:0 16px}
header.hero{padding:56px 0 40px; text-align:center}
.logo{display:block; width:min(100%,440px); height:auto; margin:0 auto}
main section{padding:34px 0; border-top:1px solid var(--line)}
h2{margin:0 0 14px; font:600 .8rem/1.2 system-ui,sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
p{margin:0 0 12px}
.tools{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
.tool{display:block; text-decoration:none; background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:10px 10px 14px; transition:border-color .15s}
.tool:hover{border-color:var(--muted)}
.tool img{display:block; width:100%; aspect-ratio:4/3; object-fit:cover; object-position:top; border-radius:8px; border:1px solid var(--line)}
.tool h3{margin:12px 4px 0; text-align:center; font:600 1.1rem/1.25 Georgia,"Times New Roman",serif}
.tool:hover h3{text-decoration:underline}
.mail{font-weight:600; word-break:break-all}
footer{padding:30px 0 44px; text-align:center; color:var(--muted); font-size:.9rem; border-top:1px solid var(--line)}
@media (max-width:420px){ .tools{gap:10px} .tool{padding:8px 8px 12px} .tool h3{font-size:.95rem} }
@media (max-width:480px){ header.hero{padding:36px 0 28px} body{font-size:16px} }