/* namelesscloud.co: one marketing page. The header and every section under it follow
   helumi.app (measured 2026-10-20 at 1680 and 375) in helumi.css; this file holds the
   tokens, the base, the hero's inherited rules and the hero's files. Plain CSS, no build step. */

:root {
  --void: #0a0a0a;
  --ink: #fafafa;
  --lime: #c6ff3d;    /* brand lime: text selection here (the hero's clover carries its own fills) */
  --on-lime: #131a00;

  --ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* The sections under the header use Helumi's system font and its radius set, 6 / 8 / 12 /
     16 / full (helumi.css); the old savee-era tokens (surfaces, greys, 12/20/28 radii, a 1310
     page) went with the sections that used them, 2026-10-20. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --gutter: 24px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--void); }
html, body { overflow-x: clip; }
/* A thin, quiet scrollbar (Richie, 2026-11-03: "can be smaller and touched up"). Firefox and
   Chrome 121+ read scrollbar-width/color; Safari reads the ::-webkit- rules. */
html { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.16) transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; background: transparent; }
::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(255, 255, 255, 0.16); }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.28); }
body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font: 400 16px/1.5 var(--ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, figure { margin: 0; }
p { text-wrap: pretty; }
ul { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 999px; }
::selection { background: var(--lime); color: var(--on-lime); }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: 999px; background: var(--ink); color: var(--void); font-weight: 500;
}
.skip:focus { top: 12px; }


/* ---------- Hero ---------- */
.hero {
  position: relative; text-align: center;
  padding: 260px var(--gutter) 0; /* savee: headline top at 260 */
}
.hero::before { /* a soft warm light behind the header (the savee-era panel it once lit is gone) */
  content: ""; position: absolute; z-index: -1; left: 50%; top: 360px;
  width: 1600px; height: 900px; transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 70%, rgba(255, 238, 214, 0.075), rgba(255, 238, 214, 0) 70%);
  pointer-events: none;
}
.hero h1 {
  font: 500 clamp(36px, 6vw, 80px)/1.05 var(--display); /* savee: 80/84, -0.035em */
  letter-spacing: -0.035em; color: var(--ink);
  text-wrap: balance;
}
.hero .sub {
  margin: 12px auto 0; max-width: 560px; /* savee: 24/33, #737373, 554 wide, 12 under the headline */
  font-size: clamp(17px, 1.7vw, 24px); line-height: 1.375; letter-spacing: -0.007em; color: #737373;
}
.hero .sub span { display: block; }
.hero .actions { margin-top: 40px; display: flex; justify-content: center; gap: 16px; }

/* Entrance: once, on load. Opacity and a short rise, 60ms apart. */
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
.in { animation: rise 700ms var(--ease-out) backwards; }
.in-2 { animation-delay: 60ms; }
.in-3 { animation-delay: 120ms; }
.in-4 { animation-delay: 180ms; }
.in-5 { animation-delay: 260ms; }

/* ---------- Responsive: the hero's inherited rules ---------- */
@media (max-width: 640px) {
  :root { --gutter: 16px; }
  .hero { padding-top: 136px; }
  .hero .sub span { display: inline; }
  .hero .actions { flex-direction: column; align-items: stretch; max-width: 343px; margin-inline: auto; gap: 12px; }
}

/* ---------- Reduced motion: no rises, keep the fades that carry meaning ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .in { animation: fade 300ms ease-out backwards; animation-delay: 0ms; }
  @keyframes fade { from { opacity: 0; } }
}

/* ---------- Hero proof: files backing up ----------
   Seven shots, each ringed in the data green as it uploads, one after another, ending on a
   tick. Green means saved or in progress, nothing else. Reduced motion: all shown done. */
.files { display: flex; gap: 6px; }
.file { position: relative; width: 34px; height: 34px; flex: none; }
.file img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; display: block; }
.file .ring { position: absolute; inset: -3px; width: 40px; height: 40px; transform: rotate(-90deg); }
.file .ring circle {
  fill: none; stroke: #1fc168; stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 116.24; stroke-dashoffset: 116.24;
  animation: upload 7s var(--ease-out) infinite; animation-delay: calc(var(--i) * 0.45s);
}
.file .tick {
  position: absolute; right: -4px; bottom: -4px; width: 15px; height: 15px; border-radius: 50%;
  background: #1fc168; box-shadow: 0 0 0 2px var(--void);
  display: grid; place-items: center; opacity: 0; transform: scale(0.6);
  animation: done 7s var(--ease-out) infinite; animation-delay: calc(var(--i) * 0.45s);
}
.file .tick svg { width: 10px; height: 10px; fill: none; stroke: #04210f; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes upload { 0% { stroke-dashoffset: 116.24; opacity: 1; } 22% { stroke-dashoffset: 0; opacity: 1; } 80% { stroke-dashoffset: 0; opacity: 1; } 92%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes done { 0%, 21% { opacity: 0; transform: scale(0.6); } 26% { opacity: 1; transform: scale(1); } 80% { opacity: 1; transform: scale(1); } 92%, 100% { opacity: 0; transform: scale(0.8); } }
#backed-count { transition: opacity 240ms ease-out; }
#backed-count .n { font-variant-numeric: tabular-nums; color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .file .ring circle { animation: none; stroke-dashoffset: 0; }
  .file .tick { animation: none; opacity: 1; transform: none; }
}