:root {
  --ink: #0b0a07;
  --paper: #EDE6D6;
  --amber: #EAB308;
  --amber-soft: #F5C64B;
  --green: #3ED598;
  --muted: #B5AD98;
  --muted-2: #A79E88;
  --muted-3: #7C7461;
  --faint: #5F5847;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

::selection { background: var(--amber); color: var(--ink); }

a { color: inherit; }

.legal a { color: var(--amber); }
.legal a:hover { color: var(--amber-soft); }
.legal h2 { font-family: 'Space Grotesk', sans-serif; font-size: 20px; color: var(--paper); margin: 32px 0 10px; }
.legal p { margin: 0 0 1em; }

.dots-bg {
  background-image: radial-gradient(rgba(234, 179, 8, .16) 1.4px, transparent 1.7px);
  background-size: 20px 20px;
}

@keyframes flipReveal {
  0% { transform: rotateX(80deg); opacity: 0; }
  60% { transform: rotateX(-8deg); }
  100% { transform: rotateX(0deg); opacity: 1; }
}

@keyframes dotPulse {
  0%, 100% { opacity: .35; }
  50% { opacity: .8; }
}

.ss-hero-word:nth-child(1) { animation-delay: .05s; }
.ss-hero-word:nth-child(2) { animation-delay: .16s; }

.ss-feat-card:nth-child(1) .ss-feat-dot { animation-delay: 0s; }
.ss-feat-card:nth-child(2) .ss-feat-dot { animation-delay: .3s; }
.ss-feat-card:nth-child(3) .ss-feat-dot { animation-delay: .6s; }
.ss-feat-card:nth-child(4) .ss-feat-dot { animation-delay: .9s; }
.ss-feat-card:nth-child(5) .ss-feat-dot { animation-delay: 1.2s; }

@media (max-width: 860px) {
  .ss-hero-grid { grid-template-columns: 1fr !important; }
  .ss-hero-phone { order: -1; margin-bottom: 8px; }
  .ss-widgets-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .ss-screens-grid { grid-template-columns: repeat(2, minmax(140px, 1fr)) !important; }
  .ss-section-card { margin-left: 16px !important; margin-right: 16px !important; }
}

@media (max-width: 520px) {
  .ss-screens-grid { grid-template-columns: 1fr !important; max-width: 240px; margin-left: auto; margin-right: auto; }
  .ss-footer { flex-direction: column; align-items: flex-start !important; }
}