/* Club Cloud website: shared styles for the home, about and pricing pages */
:root { --bg: #03050a; --ink: #e9f6ff; --dim: #8aa0b4; --blue: #4cebff; --card: #0a1220; --line: #1a2b40; --font: 'Syncopate', 'Avenir Next', 'Helvetica Neue', sans-serif; --ui: 'Space Grotesk', 'Helvetica Neue', sans-serif; --head: 64px; color-scheme: dark; }
[hidden] { display: none !important; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--head) + 12px); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 var(--ui); -webkit-tap-highlight-color: transparent; }
a { color: var(--blue); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }

/* header */
.sh { position: sticky; top: 0; z-index: 40; height: var(--head); display: flex; align-items: center; gap: 22px; padding: 0 clamp(16px, 4vw, 40px); background: rgba(3,5,10,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(76,235,255,.12); }
.sh .brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font: 700 14px/1 var(--font); letter-spacing: .16em; white-space: nowrap; }
.sh .brand .mark { width: 28px; height: 28px; display: block; }
.sh nav { display: flex; gap: 6px; margin-left: 18px; flex: 1; }
.sh nav a { color: #c9d9e8; text-decoration: none; font: 700 11px/1 var(--font); letter-spacing: .18em; text-transform: uppercase; padding: 12px 12px; border-radius: 999px; }
.sh nav a:hover, .sh nav a[aria-current] { color: var(--blue); }
.sh nav a[aria-current] { background: rgba(76,235,255,.09); }
.sh .tools { display: flex; align-items: center; gap: 10px; margin-left: auto; position: relative; }
.sh .cta { color: #04121a; background: var(--blue); text-decoration: none; font: 700 11px/1 var(--font); letter-spacing: .14em; padding: 12px 16px; border-radius: 999px; white-space: nowrap; }
.sh .acct, .sh .burger { width: 40px; height: 40px; display: grid; place-items: center; color: #dfeaf5; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); border-radius: 50%; cursor: pointer; }
.sh .acct:hover, .sh .burger:hover { border-color: var(--blue); color: var(--blue); }
.sh .acct.on { background: var(--blue); color: #04121a; border-color: var(--blue); }
.sh .acct svg, .sh .burger svg { width: 20px; height: 20px; }
.sh .burger { display: none; }
.sh .menu { position: absolute; right: 0; top: 50px; width: 250px; background: #070d16; border: 1px solid var(--line); border-radius: 14px; padding: 8px; box-shadow: 0 24px 60px rgba(0,0,0,.65); }
.sh .menu .who { padding: 10px 12px; font: 600 13px/1.3 var(--ui); color: var(--dim); border-bottom: 1px solid var(--line); margin-bottom: 6px; word-break: break-all; }
.sh .menu a, .sh .menu button { display: block; width: 100%; text-align: left; color: #dbe7f2; background: none; border: 0; text-decoration: none; font: 600 14px/1 var(--ui); padding: 12px; border-radius: 9px; cursor: pointer; }
.sh .menu a:hover, .sh .menu button:hover { background: rgba(76,235,255,.09); color: var(--blue); }
@media (max-width: 760px) {
  .sh .burger { display: grid; }
  .sh .cta { display: none; }
  .sh nav { position: fixed; left: 0; right: 0; top: var(--head); flex-direction: column; gap: 0; margin: 0; padding: 10px clamp(16px, 4vw, 40px) 18px; background: rgba(3,5,10,.97); border-bottom: 1px solid var(--line); transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; }
  .sh nav.open { opacity: 1; transform: none; pointer-events: auto; }
  .sh nav a { font-size: 13px; padding: 17px 8px; border-radius: 0; border-bottom: 1px solid rgba(255,255,255,.07); }
  .sh nav a[aria-current] { background: none; }
  .sh .brand { font-size: 12px; }
}

/* sections and text pages */
.wrap { width: min(1080px, 100% - 32px); margin: 0 auto; }
.page { padding: clamp(36px, 7vw, 84px) 0 80px; }
.eyebrow { font: 700 11px/1 var(--font); letter-spacing: .24em; color: var(--blue); margin: 0 0 14px; }
h1.big { font: 700 clamp(26px, 5.2vw, 52px)/1.12 var(--font); letter-spacing: .06em; margin: 0 0 18px; }
h2.sec { font: 700 clamp(18px, 2.6vw, 26px)/1.2 var(--font); letter-spacing: .08em; margin: 56px 0 14px; }
.lead { font-size: clamp(16px, 2vw, 20px); color: #b9cadb; max-width: 60ch; }
.btn { display: inline-block; color: #04121a; background: var(--blue); text-decoration: none; font: 700 12px/1 var(--font); letter-spacing: .14em; padding: 15px 22px; border-radius: 999px; border: 0; cursor: pointer; }
.btn.ghost { color: var(--ink); background: transparent; border: 1px solid rgba(255,255,255,.28); }
.btn:hover { filter: brightness(1.08); }

/* footer */
.sf { border-top: 1px solid var(--line); padding: 34px 0 44px; color: var(--dim); font-size: 14px; }
.sf .wrap { display: flex; flex-wrap: wrap; gap: 14px 30px; justify-content: space-between; align-items: center; }
.sf a { color: #b9cadb; text-decoration: none; margin-right: 18px; } .sf a:hover { color: var(--blue); }

/* sign-in popup (same one the app uses) */
#signin { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: rgba(2,4,8,.78); backdrop-filter: blur(4px); }
#signin .sbox { position: relative; width: min(400px, 90%); background: #0b0f18; border: 1px solid #24304a; border-radius: 14px; padding: 22px; color: #e9eaec; font-family: var(--ui); }
#signin h3 { margin: 0 24px 8px 0; font: 700 15px var(--font); letter-spacing: .12em; } #signin p { font: 500 14px/1.5 var(--ui); color: #b8c6da; margin: 8px 0; }
#signin .sclose { position: absolute; right: 12px; top: 12px; width: 28px; height: 28px; color: #8a94a6; background: transparent; border: 0; cursor: pointer; }
#signin input { width: 100%; margin: 6px 0 10px; padding: 12px; font: 500 16px var(--ui); color: #e9eaec; background: rgba(255,255,255,.06); border: 1px solid rgba(120,150,200,.28); border-radius: 9px; }
#signin .ssend { width: 100%; padding: 13px; font: 700 12px var(--font); letter-spacing: .14em; color: #07121d; background: var(--blue); border: 0; border-radius: 9px; cursor: pointer; } #signin .ssend:disabled { opacity: .6; }
#signin .stabs { display: flex; gap: 6px; margin: 10px 0 4px; } #signin .stabs button { flex: 1; padding: 9px 6px; white-space: nowrap; font: 700 11px var(--font, sans-serif); letter-spacing: .02em; color: #9fb2c6; background: transparent; border: 1px solid rgba(120,150,200,.25); border-radius: 8px; cursor: pointer; } #signin .stabs button.on { color: #07121d; background: #8fe9ff; border-color: #8fe9ff; }
#signin .sfoot { margin: 6px 0 0; font-size: 13px; } #signin .sfoot a { color: #8fe9ff; }
#signin .smsg.err { color: #ff8a9b; } #signin [hidden] { display: none; }