/* Copyright (c) 2026 TRHII, Inc. All rights reserved. Proprietary and confidential. Ryderz is a brand of TRHII, Inc. */
  :root {
    color-scheme: dark;
    --bg: #070b18; --bg2: #0d1430; --fg: #f1f5ff; --muted: #a9b4d6; --line: #23305e;
    --a1: #4f8cff; --a2: #9b5cff; --a3: #22d3ee; --ok: #34d399; --bad: #f87171;
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--fg); background: var(--bg);
         line-height: 1.6; overflow-x: hidden; }
  .wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
  a { color: inherit; }

  /* ---------- nav ---------- */
  nav { position: sticky; top: 0; z-index: 10; backdrop-filter: blur(10px); background: rgba(7, 11, 24, .72);
        border-bottom: 1px solid rgba(35, 48, 94, .6); }
  nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 60px; gap: 12px; }
  .logo { display: inline-flex; align-items: center; gap: 12px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase;
          font-size: 1.35rem; text-decoration: none; }
  .logo img { width: 44px; height: 44px; filter: drop-shadow(0 0 10px rgba(155, 92, 255, .45)); }
  nav .wrap { height: 72px; }
  .hero-mark { width: clamp(96px, 16vw, 150px); height: auto; display: block; margin: 0 0 22px;
               filter: drop-shadow(0 0 28px rgba(79, 140, 255, .45)); }
  .logo span { background: linear-gradient(90deg, var(--a1), var(--a2), var(--a3)); -webkit-background-clip: text;
               background-clip: text; color: transparent; }
  nav .links { display: flex; gap: 18px; font-size: .92rem; color: var(--muted); }
  nav .links a { text-decoration: none; }
  nav .links a:hover { color: var(--fg); }
  @media (max-width: 640px) { nav .links { display: none; } }

  /* ---------- hero ---------- */
  .hero { position: relative; padding: 110px 0 120px; overflow: hidden; isolation: isolate; }
  .orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; z-index: -1; }
  .orb.o1 { width: 460px; height: 460px; background: var(--a1); top: -120px; left: -120px; animation: drift 16s ease-in-out infinite; }
  .orb.o2 { width: 380px; height: 380px; background: var(--a2); top: 60px; right: -140px; animation: drift 19s ease-in-out infinite reverse; }
  .orb.o3 { width: 300px; height: 300px; background: var(--a3); bottom: -160px; left: 35%; animation: drift 22s ease-in-out infinite; }
  .grid-bg { position: absolute; inset: 0; z-index: -1; opacity: .18;
             background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
             background-size: 48px 48px; mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); }
  @keyframes drift { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(40px,30px) scale(1.08); } }
  .tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border: 1px solid var(--line);
         border-radius: 999px; font-size: .85rem; color: var(--muted); background: rgba(13, 20, 48, .6); margin-bottom: 26px; }
  .tag i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); animation: pulse 2s infinite; }
  .tag .join { margin-left: 6px; padding: 3px 12px; border-radius: 999px; font-weight: 800; font-size: .78rem; letter-spacing: .1em;
               text-decoration: none; color: #fff; background: linear-gradient(90deg, var(--a1), var(--a2)); box-shadow: 0 0 16px rgba(155, 92, 255, .45);
               transition: box-shadow .2s, transform .2s; }
  .tag .join:hover, .tag .join:focus-visible { transform: translateY(-1px); box-shadow: 0 0 24px rgba(155, 92, 255, .75); outline: none; }
  nav .links a.navjoin { color: #fff; font-weight: 700; }
  nav .links a.signin { color: #fff; font-weight: 700; padding: 6px 14px; margin: -6px 0; border-radius: 9px;
                        border: 1px solid var(--line); background: rgba(79, 140, 255, .15); }
  nav .links a.signin:hover { border-color: var(--a1); }
  /* join the fleet */
  .fleet { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
  .gpus { display: grid; gap: 12px; }
  .gpu { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--line);
         background: rgba(13, 20, 48, .7); }
  .gpu .chip { flex: none; width: 46px; height: 46px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; font-size: .8rem;
               background: linear-gradient(135deg, rgba(79, 140, 255, .3), rgba(155, 92, 255, .3)); border: 1px solid var(--line); }
  .gpu b { display: block; }
  .gpu span { color: var(--muted); font-size: .92rem; }
  .steps3 { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 12px; counter-reset: j; }
  .steps3 li { position: relative; padding: 14px 16px 14px 56px; border-radius: 12px; border: 1px dashed var(--line); background: rgba(13, 20, 48, .45); }
  .steps3 li::before { counter-increment: j; content: counter(j); position: absolute; left: 16px; top: 14px; width: 26px; height: 26px; border-radius: 50%;
                       display: grid; place-items: center; font-weight: 800; font-size: .85rem; background: linear-gradient(90deg, var(--a1), var(--a2)); }
  @keyframes pulse { 50% { opacity: .35; } }
  h1 { font-size: clamp(2.5rem, 7.5vw, 4.8rem); line-height: 1.04; margin: 0 0 22px; letter-spacing: -.02em; }
  h1 .grad { background: linear-gradient(90deg, var(--a1), var(--a2), var(--a3), var(--a1)); background-size: 300% 100%;
             -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 8s linear infinite; }
  @keyframes shine { to { background-position: 300% 0; } }
  .lede { font-size: clamp(1.08rem, 2.4vw, 1.35rem); color: var(--muted); max-width: 44rem; margin: 0 0 36px; }
  .ctas { display: flex; flex-wrap: wrap; gap: 14px; }
  .btn { display: inline-block; padding: 14px 26px; border-radius: 10px; font-weight: 700; text-decoration: none; transition: transform .2s, box-shadow .2s; }
  .btn.primary { background: linear-gradient(90deg, var(--a1), var(--a2)); color: #fff; box-shadow: 0 10px 30px rgba(79, 140, 255, .35); }
  .btn.ghost { border: 1px solid var(--line); background: rgba(13, 20, 48, .6); }
  .btn:hover, .btn:focus-visible { transform: translateY(-2px); box-shadow: 0 14px 38px rgba(155, 92, 255, .4); outline: none; }

  /* ---------- sections ---------- */
  section { padding: 88px 0; position: relative; }
  .kicker { color: var(--a3); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .8rem; margin: 0 0 10px; }
  h2 { font-size: clamp(1.8rem, 4.4vw, 2.7rem); line-height: 1.15; margin: 0 0 16px; letter-spacing: -.01em; }
  .sub { color: var(--muted); max-width: 42rem; margin: 0 0 42px; font-size: 1.08rem; }

  /* comparison */
  .compare { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: 16px;
             overflow: hidden; background: rgba(13, 20, 48, .55); }
  .compare th, .compare td { padding: 16px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
  .compare tr:last-child td { border-bottom: 0; }
  .compare thead th { font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); background: rgba(7, 11, 24, .6); }
  .compare thead th.us { color: #fff; background: linear-gradient(90deg, rgba(79, 140, 255, .35), rgba(155, 92, 255, .35)); }
  .compare td:first-child { font-weight: 700; width: 22%; }
  .compare td.them { color: var(--muted); }
  .compare td.them::before { content: "\2715  "; color: var(--bad); font-weight: 700; }
  .compare td.us { background: rgba(79, 140, 255, .07); }
  .compare td.us::before { content: "\2713  "; color: var(--ok); font-weight: 700; }
  @media (max-width: 720px) {
    .compare thead { display: none; }
    .compare, .compare tbody, .compare tr, .compare td { display: block; width: 100%; }
    .compare tr { border-bottom: 1px solid var(--line); padding: 8px 0; }
    .compare td { border: 0; padding: 6px 16px; }
    .compare td:first-child { width: 100%; padding-top: 14px; }
  }

  /* feature cards */
  .cards { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
  .card { position: relative; padding: 26px; border-radius: 16px; background: rgba(13, 20, 48, .7); border: 1px solid var(--line);
          transition: transform .25s, border-color .25s, box-shadow .25s; }
  .card:hover { transform: translateY(-4px); border-color: var(--a1); box-shadow: 0 18px 40px rgba(79, 140, 255, .18); }
  .ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 16px;
         background: linear-gradient(135deg, rgba(79, 140, 255, .25), rgba(155, 92, 255, .25)); border: 1px solid var(--line); }
  .ico svg { width: 22px; height: 22px; stroke: #c7d6ff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .card h3 { margin: 0 0 8px; font-size: 1.12rem; }
  .card p { margin: 0; color: var(--muted); }

  /* proof */
  .stats { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .stat { padding: 28px; border-radius: 16px; text-align: left; border: 1px solid var(--line);
          background: radial-gradient(circle at top left, rgba(34, 211, 238, .14), transparent 60%), rgba(13, 20, 48, .7); }
  .stat b { display: block; font-size: clamp(2rem, 5vw, 2.8rem); line-height: 1.1; margin-bottom: 8px;
            background: linear-gradient(90deg, #fff, #c7d6ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .stat span { color: var(--muted); }

  /* steps */
  .steps { counter-reset: s; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .step { padding: 22px; border-radius: 14px; border: 1px dashed var(--line); background: rgba(13, 20, 48, .45); }
  .step::before { counter-increment: s; content: "0" counter(s); display: block; font-weight: 800; color: var(--a2); margin-bottom: 6px; letter-spacing: .08em; }
  .step h3 { margin: 0 0 6px; font-size: 1.05rem; }
  .step p { margin: 0; color: var(--muted); font-size: .96rem; }

  /* pricing */
  .plans { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: stretch; }
  .plan { position: relative; display: flex; flex-direction: column; padding: 28px 24px; border-radius: 18px;
          border: 1px solid var(--line); background: rgba(13, 20, 48, .7); }
  .plan.featured { border-color: var(--a2); box-shadow: 0 20px 50px rgba(155, 92, 255, .25);
                   background: linear-gradient(180deg, rgba(155, 92, 255, .16), rgba(13, 20, 48, .75) 45%); }
  .plan .pop { position: absolute; top: -12px; left: 24px; padding: 3px 12px; border-radius: 999px; font-size: .75rem; font-weight: 800;
               letter-spacing: .08em; background: linear-gradient(90deg, var(--a1), var(--a2)); color: #fff; }
  .plan h3 { margin: 0 0 4px; font-size: 1.25rem; }
  .plan .for { color: var(--muted); margin: 0 0 18px; font-size: .95rem; }
  .price { font-size: 2.6rem; font-weight: 800; line-height: 1; margin-bottom: 4px; }
  .price small { font-size: 1rem; font-weight: 600; color: var(--muted); }
  .plan ul { list-style: none; padding: 0; margin: 20px 0 24px; display: grid; gap: 9px; flex: 1; }
  .plan li { padding-left: 26px; position: relative; color: #dbe3ff; font-size: .96rem; }
  .plan li::before { content: "\2713"; position: absolute; left: 0; color: var(--ok); font-weight: 800; }
  .plan .btn { text-align: center; }
  .fine { color: var(--muted); font-size: .9rem; margin-top: 22px; }

  /* cta */
  .cta { text-align: center; border-radius: 22px; padding: 64px 22px; border: 1px solid var(--line); position: relative; overflow: hidden; isolation: isolate;
         background: linear-gradient(135deg, rgba(79, 140, 255, .22), rgba(155, 92, 255, .22)); }
  .cta h2 { margin-bottom: 12px; }
  .cta p { color: var(--muted); max-width: 36rem; margin: 0 auto 28px; }
  footer { padding: 34px 0 44px; color: var(--muted); font-size: .9rem; border-top: 1px solid var(--line); margin-top: 40px; }
  footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
  footer .wrap.legal { display: block; margin-top: 18px; font-size: .78rem; line-height: 1.55; opacity: .8; }
  footer .wrap.legal p { margin: 0 0 10px; }

  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }

  /* multi-page additions (2026-10-26) */
  nav .links a.active { color: #fff; border-bottom: 2px solid var(--a2); padding-bottom: 4px; }
  .page main section:first-child { padding-top: 64px; }
  .tour { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .tour a { display: block; padding: 22px; border-radius: 16px; border: 1px solid var(--line); background: rgba(13, 20, 48, .7);
            text-decoration: none; transition: transform .25s, border-color .25s, box-shadow .25s; }
  .tour a:hover, .tour a:focus-visible { transform: translateY(-4px); border-color: var(--a1); box-shadow: 0 18px 40px rgba(79, 140, 255, .18); outline: none; }
  .tour b { display: block; font-size: 1.08rem; margin-bottom: 6px; }
  .tour span { color: var(--muted); font-size: .95rem; }
  .tour i { font-style: normal; color: var(--a3); font-weight: 700; display: block; margin-top: 10px; font-size: .9rem; }
  @media (max-width: 640px) {
    nav .wrap { height: auto; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
    nav .links { display: flex; width: 100%; overflow-x: auto; gap: 16px; padding-bottom: 4px; white-space: nowrap; }
  }