/* Blockwise: a dark green board. Square grid, coral and mint blocks, bevelled tiles. */
.app-blockwise {
  --bg: #0D1612; --bg2: #17251F; --surface: #17251F; --line: #284036;
  --text: #EAF2EE; --muted: #8FA79C; --accent: #FF8A5B; --accent-ink: #2A1208; --accent2: #63D2A1;
  --font-head: "Outfit", system-ui, sans-serif; --font-body: "Outfit", system-ui, sans-serif;
  --radius: 6px; --shadow: 0 20px 48px rgba(0, 0, 0, .5);
  background:
    linear-gradient(rgba(99,210,161,.045) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(99,210,161,.045) 1px, transparent 1px) 0 0 / 44px 44px,
    radial-gradient(120% 80% at 50% 0, #1C3029, #0D1612 70%);
}
.app-blockwise .hero h1 { font-weight: 800; letter-spacing: -.03em; }
.app-blockwise .section-title { display: inline-block; padding-bottom: 10px;
  background: linear-gradient(90deg, #FF8A5B 0 24px, transparent 24px 28px, #63D2A1 28px 52px, transparent 52px 56px, #F5C451 56px 80px) bottom left / 80px 8px no-repeat; }
.app-blockwise .feature, .app-blockwise .faq, .app-blockwise .promise, .app-blockwise .contact-card {
  box-shadow: inset 0 3px 0 rgba(255,255,255,.04), inset 0 -4px 0 rgba(0,0,0,.25);
}
.app-blockwise .feature-icon { border-radius: 6px; background: #FF8A5B; color: #2A1208; box-shadow: inset 0 3px 0 rgba(255,255,255,.35), inset 0 -4px 0 rgba(0,0,0,.2); }
.app-blockwise .feature:nth-child(3n+2) .feature-icon { background: #63D2A1; color: #08261A; }
.app-blockwise .feature:nth-child(3n) .feature-icon { background: #F5C451; color: #2E2200; }
.app-blockwise .store-btn, .app-blockwise .home-pill { border-radius: 8px; box-shadow: inset 0 3px 0 rgba(255,255,255,.3), inset 0 -4px 0 rgba(0,0,0,.2), 0 12px 26px rgba(255,138,91,.25); }
.app-blockwise .store-btn.soon { box-shadow: none; }
.app-blockwise .phone { border-radius: 30px; background: #050A08; }
.app-blockwise .piece-cloud { position: absolute; right: 3%; top: 8%; width: 264px; height: 220px; opacity: .55; }
.app-blockwise .cell {
  position: absolute; width: 40px; height: 40px; left: calc(var(--x) * 44px); top: calc(var(--y) * 44px);
  border-radius: 6px; box-shadow: inset 0 4px 0 rgba(255,255,255,.3), inset 0 -5px 0 rgba(0,0,0,.25);
  animation: drop 7s ease-in-out infinite;
}
.app-blockwise .cell.a { background: #FF8A5B; }
.app-blockwise .cell.b { background: #63D2A1; animation-delay: -2.3s; }
.app-blockwise .cell.c { background: #F5C451; animation-delay: -4.6s; }
@keyframes drop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(10px); } }
@media (max-width: 899px) { .app-blockwise .piece-cloud { top: auto; bottom: 2%; right: -60px; opacity: .3; } }