/* digitalutilities.net — geteilte Design-Tokens für Hub + zukünftige App-Landingpages.
   Bewusst an die Farbwelt von zeyt angelehnt (--hero), aber als eigenständige,
   App-neutrale Marke gehalten. */
:root{
  --hero:#20957C;
  --hero-dark:#15705B;
  --hero-tint:#E7F5F1;
  --ink:#0B0B0C;
  --ink-2:#1C1C1E;
  --muted:#6B6B70;
  --line:#E3E3E5;
  --bg:#FFFFFF;
  --bg-alt:#F7F7F8;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --radius: 6px;
}
*{box-sizing:border-box;}
html,body{margin:0; padding:0;}
body{
  font-family:var(--font-ui); color:var(--ink); background:var(--bg);
  line-height:1.5; -webkit-font-smoothing:antialiased;
}
a{color:var(--hero-dark);}
.wrap{ max-width:1040px; margin:0 auto; padding:0 24px; }

header.site{
  background:var(--ink); color:#fff; padding:16px 0;
}
header.site .wrap{ display:flex; align-items:center; gap:10px; }
header.site .brand{ font-weight:700; letter-spacing:0.02em; font-size:15px; display:flex; align-items:center; gap:8px; }
header.site .brand .dot{ width:9px; height:9px; border-radius:50%; background:var(--hero); box-shadow:0 0 0 3px rgba(32,149,124,0.35); }

.hero{ padding:64px 0 48px; border-bottom:1px solid var(--line); background:var(--bg-alt); }
.hero h1{ font-size:clamp(28px, 4vw, 42px); margin:0 0 14px; letter-spacing:-0.01em; }
.hero p{ font-size:16px; color:var(--muted); max-width:640px; margin:0; }

.section{ padding:48px 0; }
.section h2{ font-size:13px; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); margin:0 0 22px; }

.apps-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:18px; }
.app-card{
  border:1px solid var(--line); border-radius:var(--radius); padding:22px; background:#fff;
  display:flex; flex-direction:column; gap:12px;
}
.app-card .icon{ width:48px; height:48px; border-radius:12px; }
.app-card h3{ margin:0; font-size:18px; }
.app-card p{ margin:0; color:var(--muted); font-size:13.5px; flex:1; }
.app-card ul{ margin:0; padding-left:18px; color:var(--muted); font-size:12.5px; }
.app-card .btn{
  align-self:flex-start; background:var(--hero); color:#fff; border:none; padding:9px 16px;
  border-radius:4px; font-weight:600; font-size:13px; text-decoration:none; display:inline-block;
}
.app-card .btn:hover{ background:var(--hero-dark); }
.app-card.placeholder{ border-style:dashed; color:var(--muted); align-items:flex-start; justify-content:center; opacity:0.75; }

footer.site{ border-top:1px solid var(--line); padding:26px 0; color:var(--muted); font-size:12px; }
footer.site .wrap{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }
footer.site a{ color:var(--muted); margin-left:14px; }
footer.site a:first-child{ margin-left:0; }