/* Useful Apps — main styles */
:root{
  --bg: #f5f7fb;
  --fg: #0b1220;
  --muted: #5b657a;
  --brand: #0a84ff;
  --brand-2: #34c759;
  --card: #ffffff;
  --shadow: 0 10px 30px rgba(16,24,40,0.08);
  --radius: 16px;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg: #0b1220;
    --fg: #f6f7fb;
    --muted: #a1a7b8;
    --card: #151b2b;
    --shadow: 0 10px 30px rgba(0,0,0,0.4);
  }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background: radial-gradient(1200px 600px at 20% -10%, rgba(10,132,255,0.12), transparent 60%),
              radial-gradient(1200px 600px at 120% 10%, rgba(52,199,89,0.10), transparent 60%),
              var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  line-height: 1.5;
}

.container{max-width:1100px;margin:0 auto;padding:24px}
.header{
  position:sticky; top:0; backdrop-filter:saturate(180%) blur(12px);
  background: color-mix(in srgb, var(--bg), transparent 20%);
  border-bottom: 1px solid color-mix(in srgb, var(--muted), transparent 80%);
  z-index:10;
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
}
.brand{display:flex; gap:12px; align-items:center; text-decoration:none; color:inherit}
.brand .logo{
  width:36px;height:36px;border-radius:8px;background:linear-gradient(180deg,#57a5ff,#0a84ff);
  display:grid;place-items:center; color:white; font-weight:700; letter-spacing:.5px;
  box-shadow: var(--shadow);
}
.nav a{color:inherit; text-decoration:none; opacity:.9}
.nav a:hover{opacity:1}
.nav .links{display:flex; gap:18px; align-items:center}

.button{
  appearance:none; border:none; border-radius:12px; padding:12px 16px; font-weight:600;
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand), white 10%), var(--brand));
  color:#fff; box-shadow: 0 6px 16px rgba(10,132,255,0.35); cursor:pointer;
}
.button.ghost{
  background: transparent; color: var(--fg);
  border: 1px solid color-mix(in srgb, var(--muted), transparent 60%);
  box-shadow:none;
}
.button:focus-visible{outline:3px solid color-mix(in srgb, var(--brand), white 40%); outline-offset:2px}

.hero{
  padding:80px 0 30px;
  text-align:center;
}
.hero h1{font-size: clamp(32px, 5vw, 54px); margin:0 0 12px}
.hero p{font-size: clamp(16px, 2vw, 22px); color: var(--muted); margin:0 auto 28px; max-width:760px}
.hero .cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

.cards{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap:18px; margin: 36px 0 64px;
}
.card{
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding:22px;
  display:flex; flex-direction:column; gap:12px; min-height: 210px;
}
.card .eyebrow{font-size:12px; letter-spacing:.3px; text-transform:uppercase; color: var(--muted)}
.card h3{margin: 2px 0 6px; font-size: 20px}
.card p{color: var(--muted); margin:0 0 8px}
.card .actions{margin-top:auto; display:flex; gap:10px; align-items:center}

.product-icon{
  width:56px;height:56px;border-radius:14px; object-fit:cover; box-shadow: var(--shadow);
}

.section-title{font-size:28px; margin: 6px 0 6px}
.grid-2{display:grid; grid-template-columns: 1fr; gap:24px}
@media(min-width:900px){ .grid-2{ grid-template-columns: .8fr 1.2fr} }

.footer{
  border-top:1px solid color-mix(in srgb, var(--muted), transparent 80%);
  color: var(--muted); padding: 20px 0 50px; font-size:14px
}
.kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; background: color-mix(in srgb, var(--muted), transparent 85%); padding: 2px 6px; border-radius:6px}
.badge{padding:4px 10px; border-radius:999px; font-size:12px; background: color-mix(in srgb, var(--brand-2), white 80%); color: color-mix(in srgb, var(--brand-2), black 10%); font-weight:600}