/* strappa — public brand & design system.
   Dark "quant desk" aesthetic: deep navy base, electric-green edge accent
   (carried over from the +edge colour in the app), generous spacing, cards. */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@700;800&display=swap');

:root {
  /* surfaces */
  --bg:        #0A0D14;
  --bg-soft:   #0F1420;
  --surface:   #141B2A;
  --surface-2: #1A2233;
  --border:    #242E42;
  --border-soft: #1C2536;

  /* text */
  --text:      #EAEEF6;
  --text-dim:  #A4AEC4;
  --text-faint:#6B768F;

  /* brand */
  --edge:      #2BE39A;   /* value / positive / primary CTA */
  --edge-deep: #16B97C;
  --edge-glow: rgba(43, 227, 154, .16);
  --accent:    #5B8DEF;   /* secondary (links, AFL) */
  --gold:      #F5C24B;   /* MLB / highlight */
  --neg:       #F8746A;

  /* vibrant accent palette (razzle dazzle) */
  --cyan:      #2BD9E3;
  --violet:    #8B6CF6;
  --pink:      #F45D9C;
  --orange:    #FF9A4D;
  --grad-brand: linear-gradient(120deg, #2BE39A 0%, #2BD9E3 38%, #8B6CF6 72%, #F45D9C 100%);
  --grad-cool:  linear-gradient(135deg, #2BE39A, #2BD9E3 55%, #8B6CF6);

  --radius:    14px;
  --radius-sm: 9px;
  --maxw:      1120px;
  --shadow:    0 10px 40px rgba(0,0,0,.45);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font); color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3 { line-height: 1.1; letter-spacing: -.02em; margin: 0; font-weight: 700; }
.muted { color: var(--text-dim); }

/* ---- layout ---- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section { padding: 96px 0; }
@media (max-width: 700px) { .section { padding: 60px 0; } }

/* ---- nav ---- */
.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(12px);
  background: rgba(10,13,20,.72);
  border-bottom: 1px solid var(--border-soft);
}
.nav .wrap { display: flex; align-items: center; gap: 28px; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: .4em; font-family: "Sora", var(--font);
  font-weight: 800; font-size: 21px; letter-spacing: -.035em; line-height: 1; }
/* monogram: gradient tile holding a two-tone "torn" S */
.brand .dot {
  position: relative; width: 1.28em; height: 1.28em; border-radius: .3em; flex: none; overflow: hidden;
  background: linear-gradient(135deg, #2BE39A 0%, #2BD9E3 45%, #8B6CF6 100%);
  box-shadow: 0 6px 18px rgba(43,227,154,.25), 0 5px 18px rgba(139,108,246,.22);
  transition: transform .25s ease;
}
.brand .dot::before, .brand .dot::after {
  content: "S"; position: absolute; inset: 0; display: grid; place-items: center; font: 800 .96em/1 "Sora", var(--font);
}
.brand .dot::before { color: #0B0E13; clip-path: polygon(0 0,100% 0,100% 52%,72% 62%,40% 46%,12% 62%,0 52%); }
.brand .dot::after  { color: #fff;     clip-path: polygon(0 52%,12% 62%,40% 46%,72% 62%,100% 52%,100% 100%,0 100%); transform: translateX(7%); }
.brand:hover .dot { transform: translateY(-1px) scale(1.04); }
/* nav wordmark — clean solid white Sora for legibility at small size (the colour
   lives in the tile; the full torn two-tone is .wm-torn, for display sizes). */
.brand .wm { font-family: "Sora", var(--font); font-weight: 800; color: #fff; line-height: 1; }
/* display wordmark — the full jagged two-tone tear, for large brand moments */
.wm-torn { position: relative; display: inline-block; font-family: "Sora", var(--font); font-weight: 800;
  letter-spacing: -.04em; line-height: 1; color: #fff;
  clip-path: polygon(0 0,100% 0,100% 50%,92% 63%,80% 50%,68% 63%,56% 50%,44% 63%,32% 50%,20% 63%,8% 50%,0 60%); }
.wm-torn::after { content: attr(data-wm); position: absolute; left: 0; top: 0;
  background-image: linear-gradient(100deg, #2BE39A 0%, #2BD9E3 42%, #8B6CF6 80%, #F45D9C 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  clip-path: polygon(0 60%,8% 50%,20% 63%,32% 50%,44% 63%,56% 50%,68% 63%,80% 50%,92% 63%,100% 50%,100% 100%,0 100%);
  transform: translate(.11em,.06em); }
/* gradient text utility */
.gradient-text { background: var(--grad-brand); -webkit-background-clip: text;
  background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.nav-links { display: flex; gap: 26px; margin-left: 8px; }
.nav-links a { color: var(--text-dim); font-size: 14.5px; font-weight: 500; transition: color .15s; }
.nav-links a:hover { color: var(--text); }
.nav-cta { margin-left: auto; display: flex; gap: 12px; align-items: center; }
@media (max-width: 760px) { .nav-links { display: none; } }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font); font-weight: 600; font-size: 14.5px; cursor: pointer;
  padding: 11px 20px; border-radius: 10px; border: 1px solid transparent;
  transition: transform .12s, background .15s, border-color .15s; white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--edge); color: #04140D; box-shadow: 0 6px 22px var(--edge-glow); }
.btn-primary:hover { background: var(--edge-deep); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--text-faint); background: var(--surface); }
.btn-grad { background: var(--grad-cool); color: #04140D; border: none; box-shadow: 0 8px 26px rgba(43,227,154,.28); }
.btn-grad:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn-lg { padding: 15px 28px; font-size: 16px; border-radius: 12px; }
.btn-block { width: 100%; }

/* ---- pills / badges ---- */
.pill {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600;
  padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-dim);
}
.pill .dot { width: 7px; height: 7px; border-radius: 50%; }
.pill-edge { color: var(--edge); border-color: rgba(43,227,154,.32); background: rgba(43,227,154,.08); }

/* ---- cards ---- */
.card {
  background: linear-gradient(180deg, var(--surface), var(--bg-soft));
  border: 1px solid var(--border); border-radius: var(--radius); padding: 26px;
}
.card-glow { box-shadow: var(--shadow); }

/* ---- footer ---- */
.footer { border-top: 1px solid var(--border-soft); padding: 40px 0; color: var(--text-faint); font-size: 13.5px; }
.footer a { color: var(--text-dim); }
.rg { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.rg .badge18 { font-weight: 800; border: 1.5px solid var(--text-faint); border-radius: 6px; padding: 1px 6px; font-size: 12px; }