/* ============================================================
   RitmoOS brand system — "Where performance connects."
   Palette: orange #FF7A00 / amber #FFB000 on near-black.
   Type: Sora. Signature: the faceted "R" logomark (gradient #FFB347 -> #FF5A00).
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&display=swap');

:root{
  --orange:#FF7A00;
  --amber:#FFB000;
  --ink:#FFFFFF;
  --sub:#9aa3b2;
  --gray:#1A1A1D;
  --bg:#0D1117;
  --bg2:#0a0e15;
  --line:rgba(255,255,255,.08);
  --glow:rgba(255,122,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,122,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,122,0,.32)}

/* ---------- the RitmoOS "R" mark ---------- */
.mark{ width:var(--mark-size,40px); height:var(--mark-size,40px); overflow:visible; display:block; flex:0 0 auto; object-fit:contain; }
/* the real R mark is a gradient SVG served as <img>; this rule covers any residual inline <svg.mark> */
.mark path{ fill:#FF7A00; filter:drop-shadow(0 0 7px var(--glow,rgba(255,122,0,.35))); }

/* intro: the mark scales + fades in, then settles */
.mark--intro{ animation:mk-rin .6s cubic-bezier(.2,1.25,.4,1) both; transform-origin:50% 50%; }
@keyframes mk-rin{ 0%{ transform:scale(.6); opacity:0 } 60%{ opacity:1 } 100%{ transform:scale(1); opacity:1 } }
@media (prefers-reduced-motion:reduce){ .mark--intro{ animation:none } }

/* ---------- 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,122,0,.32); transition:transform .15s, box-shadow .15s; }
.btn:hover{ transform:translateY(-2px); box-shadow:0 14px 34px rgba(255,122,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--intro{ animation:none !important; transform:none; opacity:1 }
}