/* ============================================================
   RitmoOS brand system — "Where performance connects."
   Palette: orange #FF6A00 / amber #FFB000 on near-black.
   Type: Sora. Signature: the radial node-hub mark.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&display=swap');

:root{
  --orange:#FF6A00;
  --amber:#FFB000;
  --ink:#FFFFFF;
  --sub:#9aa3b2;
  --gray:#1A1A1D;
  --bg:#0D1117;
  --bg2:#0a0e15;
  --line:rgba(255,255,255,.08);
  --glow:rgba(255,106,0,.55);
  /* tenant pages override --brand/--accent/--bg with their own theme */
  --brand:var(--orange);
  --accent:var(--amber);
  --sans:'Sora',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --mono:'Courier New',ui-monospace,monospace;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:var(--sans); color:var(--ink); min-height:100%;
  background:
    radial-gradient(820px 480px at 50% -10%, rgba(255,106,0,.13) 0%, transparent 60%),
    linear-gradient(180deg, var(--gray) 0%, var(--bg) 24%, var(--bg2) 70%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
::selection{background:rgba(255,106,0,.32)}

/* ---------- the node-hub mark ---------- */
.mark{ width:var(--mark-size,40px); height:var(--mark-size,40px); overflow:visible; display:block; flex:0 0 auto; }
.mark line{ stroke:var(--brand); stroke-width:1.4; opacity:.5; }
.mark .node{ fill:var(--bg); stroke:var(--brand); stroke-width:2; }
.mark-spokes{ transform-origin:50px 50px; animation:mk-spin 22s linear infinite; }
.mark-ring{ fill:none; stroke:var(--brand); stroke-width:3; transform-origin:50px 50px;
  filter:drop-shadow(0 0 8px var(--glow)); animation:mk-pulse 2.6s ease-in-out infinite; }
.mark-core{ fill:var(--brand); transform-origin:50px 50px;
  filter:drop-shadow(0 0 12px var(--glow)); animation:mk-core 2.6s ease-in-out infinite; }
.mark .node:nth-of-type(1){ animation:mk-tw 3s ease-in-out infinite .0s }
.mark .node:nth-of-type(2){ animation:mk-tw 3s ease-in-out infinite .5s }
.mark .node:nth-of-type(3){ animation:mk-tw 3s ease-in-out infinite 1s }
.mark .node:nth-of-type(4){ animation:mk-tw 3s ease-in-out infinite 1.5s }
.mark .node:nth-of-type(5){ animation:mk-tw 3s ease-in-out infinite 2s }
.mark .node:nth-of-type(6){ animation:mk-tw 3s ease-in-out infinite 2.5s }
@keyframes mk-spin{ to{ transform:rotate(360deg) } }
@keyframes mk-pulse{ 0%,100%{ transform:scale(1); opacity:.85 } 50%{ transform:scale(1.07); opacity:1 } }
@keyframes mk-core{ 0%,100%{ opacity:.85 } 50%{ opacity:1 } }
@keyframes mk-tw{ 0%,100%{ filter:drop-shadow(0 0 1px var(--glow)) } 50%{ filter:drop-shadow(0 0 6px var(--glow)) } }

/* intro: lines draw in, nodes pop, then it breathes */
.mark--intro line{ stroke-dasharray:42; stroke-dashoffset:42; animation:mk-draw .8s ease forwards; }
.mark--intro line:nth-of-type(2){ animation-delay:.08s } .mark--intro line:nth-of-type(3){ animation-delay:.16s }
.mark--intro line:nth-of-type(4){ animation-delay:.24s } .mark--intro line:nth-of-type(5){ animation-delay:.32s }
.mark--intro line:nth-of-type(6){ animation-delay:.40s }
.mark--intro .node{ transform:scale(0); transform-box:fill-box; transform-origin:center; animation:mk-pop .5s cubic-bezier(.2,1.4,.4,1) forwards; }
.mark--intro .node:nth-of-type(1){ animation-delay:.5s } .mark--intro .node:nth-of-type(2){ animation-delay:.58s }
.mark--intro .node:nth-of-type(3){ animation-delay:.66s } .mark--intro .node:nth-of-type(4){ animation-delay:.74s }
.mark--intro .node:nth-of-type(5){ animation-delay:.82s } .mark--intro .node:nth-of-type(6){ animation-delay:.9s }
@keyframes mk-draw{ to{ stroke-dashoffset:0 } }
@keyframes mk-pop{ to{ transform:scale(1) } }

/* ---------- wordmark ---------- */
.wm{ font-weight:800; letter-spacing:-.01em; line-height:1; display:inline-flex; align-items:baseline; }
.wm .b{ color:var(--ink) } .wm .o{ color:var(--brand) }
.wm sup{ font-size:.4em; color:var(--brand); font-weight:700; margin-left:.1em; top:-.1em }

/* ---------- shared chrome ---------- */
.glass{ border:1px solid var(--line); border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  backdrop-filter:blur(8px); }
.pill{ font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--brand);
  border:1px solid color-mix(in srgb, var(--brand) 55%, transparent); border-radius:30px; padding:6px 13px; }
.eyebrow{ font-size:11px; letter-spacing:.32em; text-transform:uppercase; color:var(--brand) }

.btn{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; border:0; border-radius:30px;
  font-family:var(--sans); font-weight:700; font-size:13px; letter-spacing:.04em; padding:13px 22px;
  color:#1a0d00; background:linear-gradient(90deg, var(--brand), var(--accent));
  box-shadow:0 8px 26px rgba(255,106,0,.32); transition:transform .15s, box-shadow .15s; }
.btn:hover{ transform:translateY(-2px); box-shadow:0 14px 34px rgba(255,106,0,.42); }

/* glowing divider */
.glow-rule{ height:1px; border:0; background:linear-gradient(90deg, transparent, var(--brand), transparent); opacity:.5; }

@media (prefers-reduced-motion: reduce){
  .mark-spokes,.mark-ring,.mark-core,.mark .node,.mark--intro line,.mark--intro .node{ animation:none !important }
  .mark--intro line{ stroke-dashoffset:0 } .mark--intro .node{ transform:none }
}