/* ===== Titillium Web (self-hosted) ===== */
@font-face{font-family:"Titillium Web";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/titillium-web-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Titillium Web";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/titillium-web-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Titillium Web";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/titillium-web-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Titillium Web";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/titillium-web-700-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Titillium Web";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/titillium-web-700-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ===== Brand tokens (from frankenjura.com) ===== */
:root{
  --bg:#f3f3f3;--card:#fff;--ink:#4e4e4e;--ink-strong:#2a2a2a;--muted:#777;
  --red:#de0a18;--red-dark:#aa0611;--green:#33a049;--green-dark:#007213;
  --border:#dbdbdb;--border-soft:#e9e9e9;--hint-bg:#feedba;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Titillium Web",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink);line-height:1.55;font-size:16px}
a{color:var(--red)}

.wrap{max-width:760px;margin:0 auto;padding:0 1rem 3rem}

/* ===== Hero ===== */
.hero{text-align:center;padding:1.75rem 0 1.25rem;border-bottom:4px solid var(--red);margin-bottom:1.5rem;background:#fff}
.hero .logo{max-width:320px;width:70%;height:auto;display:block;margin:0 auto .7rem}
.hero h1{font-weight:700;margin:0;font-size:clamp(1.6rem,5vw,2.5rem);color:var(--ink-strong);letter-spacing:.5px;text-transform:uppercase}
.hero h1 b{color:var(--red);font-weight:700}
.hero .tagline{margin:.6rem auto 0;max-width:34rem;color:var(--muted);font-size:clamp(1rem,2.6vw,1.15rem)}

/* ===== Cards ===== */
.card{background:var(--card);border:1px solid var(--border);border-radius:4px;padding:1.2rem 1.4rem;margin:0 0 1rem;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.intro p{margin:0 0 .6rem}
.intro p:last-child{margin-bottom:0}
.intro .hint{margin:.8rem 0 0;padding:.6rem .8rem;background:var(--hint-bg);border-radius:4px;color:var(--ink-strong);font-size:.92rem}

h2.section-title{font-weight:700;font-size:1.45rem;line-height:1.2;color:var(--ink-strong);margin:0 0 1rem;display:flex;align-items:center;gap:.6rem}
.dot{flex:0 0 auto;display:inline-grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:50%;background:var(--red);color:#fff;font-size:.95rem;font-weight:700}

/* ===== Download card ===== */
.download{text-align:center;border-top:4px solid var(--red)}
.download h2{justify-content:center}
.download p{margin:0 0 1.3rem;color:var(--ink)}
.badges{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;align-items:center}
.badges a{display:inline-flex;border-radius:9px;transition:transform .12s ease,box-shadow .12s ease;outline-offset:4px}
.badges a:hover,.badges a:focus-visible{transform:translateY(-3px);box-shadow:0 6px 18px rgba(0,0,0,.18)}
.badges img{display:block;height:56px;width:auto}

/* ===== Features ===== */
.features ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.7rem 1.4rem}
.features li{display:flex;align-items:flex-start;gap:.6rem;padding:.2rem 0}
.features li::before{content:"";flex:0 0 auto;width:1.4rem;height:1.4rem;margin-top:.1rem;border-radius:50%;background:var(--green);
  -webkit-mask:no-repeat center/1rem url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>');
  mask:no-repeat center/1rem url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>')}

/* ===== Footer ===== */
.foot{text-align:center;color:var(--muted);font-size:.85rem;margin-top:2rem}
.foot a{color:var(--red);text-decoration:none}
.foot a:hover{text-decoration:underline}

@media (max-width:420px){
  .badges img{height:48px}
}