:root{
  --mint-50:#effaf6; --mint-100:#d8f4ea; --reef-100:#dff3ff;
  --ink:#0f2433; --ink-soft:#5f7787; --border:#cfe3ef;
  --mint:#22c7a3; --reef:#2aa4f4; --coral:#ff7f6e;
}
html,body{background:#fff;color:var(--ink)}
.section{padding:64px 0}
.text-muted-app{color:var(--ink-soft)}
.bg-soft{background:var(--reef-100)}

.brand-pill{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-weight:800;color:#fff;background:linear-gradient(180deg,var(--mint),var(--reef))}
.card-app{background:#fff;border:1px solid var(--border);border-radius:16px}
.border-app{border:1px solid var(--border)}

.btn-app{background:linear-gradient(180deg,var(--mint),var(--reef));color:#fff;border:none}
.btn-app:hover{filter:brightness(.95);color:#fff}
.btn-outline-app{background:#fff;border:1px solid var(--border);color:var(--ink)}
.btn-outline-app:hover{background:var(--mint-50,#effaf6);color:var(--ink)}

.ribbon{display:inline-block;padding:.35rem .7rem;border-radius:12px;background:#fff;border:1px solid var(--border);font-weight:600;color:#3b5a6b}
.ribbon-coral{background:#fff1ed;border-color:#ffd4c9;color:#a25343}
.ribbon-reef{background:#eef7ff;border-color:#cfe4ff;color:#295a96}
.ribbon-ink{background:#f2f4f6;border-color:#d7e1ea;color:#2d3f4d}

.hero-wave{background:linear-gradient(180deg,var(--mint-100),#fff);position:relative}
.wave-sep{height:28px;background:
  radial-gradient(20px 14px at 10px 28px,#fff 98%,transparent 100%),
  radial-gradient(20px 14px at 30px 0,#fff 98%,transparent 100%),
  linear-gradient(#fff,#fff)
}

.list-check li{margin-bottom:.5rem}
.list-check i{margin-right:.55rem;color:var(--mint)}

.grid-demo{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;background:#fff;border:1px solid var(--border);border-radius:12px;padding:8px;max-width:360px}
.grid-demo .cell{width:32px;height:32px;border-radius:8px;border:1px solid var(--border);background:#f6fbff;display:grid;place-items:center;font-weight:700;color:#3b6e86;user-select:none;cursor:pointer}
.grid-demo .cell.ship{background:#d6fff4}
.grid-demo .cell.hit{background:#ffe5e0;color:#c24040}

/* Dark theme */
html.dark{--ink:#d9ecf8;--ink-soft:#9bc0d6;--border:#1f3a4a;background:#0d1a22}
html.dark .bg-soft{background:#0f1c24}
html.dark .card-app{background:#0f1c24;border-color:var(--border)}
html.dark .btn-outline-app{background:#0f1c24;color:var(--ink)}
.footer-dark{background:#0f1c24}
.footer-sep{border:0;border-top:1px solid var(--border, #1f3a4a);opacity:.5}
.text-footer{color:#b9d0de}
.btn-footer{border-color:rgba(255,255,255,.2);color:#e6f4ff;background:transparent}
.btn-footer:hover{background:rgba(255,255,255,.06);color:#fff}
.footer-link{color:#d5e9f6;text-decoration:none}
.footer-link:hover{text-decoration:underline;color:#ffffff}
.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:1080;background:#0f1c24;color:#d5e9f6;padding:16px 0;box-shadow:0 -6px 24px rgba(0,0,0,.25)}
.cookie-text{line-height:1.4}
.cookie-link{color:#9fd3ff;text-decoration:underline}
.cookie-link:hover{color:#ffffff}
.cookie-actions .btn{min-width:160px}
@media (max-width: 991.98px){
  .cookie-actions .btn{width:100%}
}
html.dark .cookie-banner{background:#0b141a;color:#d5e9f6}