/* ===== Base ===== */
:root { --container: 1000px; --bg:#000000; --ink:#fff; --ink-2:#cfd2d6; --bar:#231f20; --accent:#306082; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@font-face{
  font-family:"Unifont";
  src:url("./fonts/unifont-12.0.01.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
body { margin:0; background:var(--bg); color:var(--ink); font-family:"Unifont",system-ui,Segoe UI,Roboto,Arial,sans-serif; }
a { color:inherit; text-decoration:none; }

/* ===== Layout ===== */
.container { max-width:var(--container); margin:0 auto; padding:0 20px; }
section { scroll-margin-top:84px; }

/* ===== Nav ===== */
#navbar { position:fixed; inset:0 auto auto 0; right:0; z-index:1000; background:var(--bar); padding:16px 24px; }
.nav { display:flex; align-items:center; justify-content:space-between; }
.logo { display:inline-flex; align-items:center; gap:10px; }
.logo img { height:80px; width:auto; display:block; }
.logo span { font-size:50px; }

/* ===== Hero ===== */
.hero { background:var(--accent); padding:80px 0 20px; min-height:60vh; display:flex; align-items:center; }
.hero .content { text-align:center; }
.hero h1 { margin:40px 0; font-size:40px; color:#000000; font-weight:1000; }
.hero .subtitle { margin:40px 0; color:#000000; }
.app-icon { width:100px; border:4px solid #fff; border-radius:10px; }

/* ===== About (index) ===== */
.about { --gap:80px; padding: var(--gap) 0; }
.row { display:flex; align-items:center; justify-content:space-between; gap:48px; }
.row + .row { margin-top: var(--gap); }
.row:nth-of-type(even) { flex-direction: row-reverse; }
.col-text { max-width:550px; }
.col-text h2 { font-size:2rem; margin:0 0 16px; }
.col-text p { margin:0 0 14px; line-height:1.7; color:var(--ink-2); }
.col-visual { min-width:260px; display:flex; justify-content:center; }
.col-visual img { max-width:360px; max-height:460px; width:auto; height:auto; display:block; }

/* ===== Page (privacy) ===== */
.page { padding:48px 0 64px; }
.page h2 { font-size:1.4rem; margin:28px 0 12px; }
.page p, .page li { line-height:1.7; color:var(--ink-2); margin:0 0 12px; }
.muted { color:#9aa0a6; font-size:.9rem; }

/* ===== Footer ===== */
footer { background:var(--bar); padding:32px 0; text-align:center; }
.footer-links { display:flex; gap:24px; justify-content:center; flex-wrap:wrap; }

/* ===== Responsive ===== */
@media (max-width:900px){
  .logo span { font-size:20px; }
  .logo img { height:40px; }
  .row { flex-direction:column; gap:24px; }
  .row:nth-of-type(even) { flex-direction:column; }
  .col-text { max-width:700px; }
  .col-visual img { max-width:70vw; max-height:50vh; }
}
@media (max-width:720px){
  #navbar { padding:14px 16px; }
}