/* Nut Sort: a night workshop. Brushed slate, brass and machined hex nuts. */
.app-nutsort {
  --bg: #121722; --bg2: #1B2230; --surface: #1D2533; --line: #2F3A4C;
  --text: #EDF0F5; --muted: #98A3B6; --accent: #E6B04E; --accent-ink: #241A08; --accent2: #5CC395;
  --font-head: "Space Grotesk", system-ui, sans-serif; --font-body: "Space Grotesk", system-ui, sans-serif;
  --radius: 10px; --shadow: 0 22px 50px rgba(0, 0, 0, .45);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, #1B2230, #121722 60%);
}
.app-nutsort .hero h1 { text-transform: uppercase; letter-spacing: .02em; }
.app-nutsort .store-btn, .app-nutsort .home-pill {
  background: linear-gradient(180deg, #F2C66E, #E6B04E 45%, #B9852C);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 10px 26px rgba(185,133,44,.3);
}
.app-nutsort .store-btn.soon { background: transparent; box-shadow: none; }
/* Rivets on every card corner. */
.app-nutsort .feature, .app-nutsort .promise, .app-nutsort .faq, .app-nutsort .contact-card {
  background:
    radial-gradient(circle at 10px 10px, #5B6678 2.5px, transparent 3.5px),
    radial-gradient(circle at calc(100% - 10px) 10px, #5B6678 2.5px, transparent 3.5px),
    radial-gradient(circle at 10px calc(100% - 10px), #5B6678 2.5px, transparent 3.5px),
    radial-gradient(circle at calc(100% - 10px) calc(100% - 10px), #5B6678 2.5px, transparent 3.5px),
    linear-gradient(160deg, #232C3C, #1A2130);
}
.app-nutsort .feature-icon { border-radius: 8px; clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); width: 54px; }
.app-nutsort .section-title::after { content: ""; display: block; width: 72px; height: 6px; margin-top: 14px;
  background: repeating-linear-gradient(-45deg, var(--accent) 0 8px, transparent 8px 14px); }
.app-nutsort .phone { background: linear-gradient(145deg, #4A5568, #1C222D); border-radius: 34px; }
.app-nutsort .nut { position: absolute; color: rgba(230, 176, 78, .12); animation: nut-spin 40s linear infinite; }
.app-nutsort .nut svg { width: 100%; height: 100%; }
.app-nutsort .n1 { width: 220px; height: 220px; right: -60px; top: -40px; }
.app-nutsort .n2 { width: 120px; height: 120px; left: 4%; bottom: 8%; animation-duration: 28s; animation-direction: reverse; color: rgba(92,195,149,.12); }
.app-nutsort .n3 { width: 70px; height: 70px; left: 46%; top: 12%; animation-duration: 22s; }
.app-nutsort .n4 { width: 160px; height: 160px; right: 30%; bottom: -60px; animation-duration: 50s; color: rgba(226,103,92,.1); }
.app-nutsort .n5 { width: 54px; height: 54px; left: 30%; bottom: 30%; animation-duration: 18s; animation-direction: reverse; }
@keyframes nut-spin { to { transform: rotate(360deg); } }
.app-nutsort .nut svg { rotate: calc(var(--spin, 0) * 1deg); transition: rotate .2s ease-out; }