/* Quota Giusta. Rebuilt from the Framer design; values copied from the live Framer site. */

@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url(/fonts/inter-400.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url(/fonts/inter-500.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url(/fonts/inter-600.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url(/fonts/inter-700.woff2) format("woff2"); }
@font-face { font-family: "Inter Display"; font-weight: 500; font-display: swap; src: url(/fonts/inter-display-500.woff2) format("woff2"); }
@font-face { font-family: "Open Sauce One"; font-weight: 500; font-display: swap; src: url(/fonts/open-sauce-one-500.woff2) format("woff2"); }
@font-face { font-family: "Open Sauce One"; font-weight: 600; font-display: swap; src: url(/fonts/open-sauce-one-600.woff2) format("woff2"); }

:root {
  --page: #0d1626;      /* page background */
  --panel: #14203a;     /* cards and big panels */
  --tile: #1c2840;      /* chips, avatars, logo tiles */
  --pill: #24345a;      /* nav button, bullets, step numbers */
  --line: #24324d;      /* borders and dividers */
  --ink: #e8eef5;       /* main text */
  --muted: #8c9ab0;     /* secondary text */
  --accent: #ff4f10;    /* orange */
  --inter: "Inter", system-ui, sans-serif;
  --display: "Inter Display", "Inter", system-ui, sans-serif;
  --sauce: "Open Sauce One", "Inter", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--page); color: var(--ink); font: 500 16px/1.5 var(--inter); letter-spacing: -0.02em;
       -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, h4, h5 { margin: 0; }
img { display: block; max-width: 100%; }

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.muted { color: var(--muted); }

/* ---------- nav ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 10; background: var(--page); padding: 18px 0; }
.nav .container { display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand svg { width: 44px; height: 32px; }
.brand span { font: 500 28px/1.2 var(--sauce); letter-spacing: -0.03em; color: var(--ink); white-space: nowrap; }
.nav-links { display: flex; gap: 24px; }
.nav-links a { opacity: .6; transition: opacity .2s; }
.nav-links .menu-only { display: none; }
.nav-links a:hover { opacity: 1; }
.menu-button { display: none; width: 28px; height: 28px; border: 0; background: none; padding: 0; cursor: pointer; position: relative; }
.menu-button i { position: absolute; left: 7px; width: 14px; height: 2px; border-radius: 999px; background: var(--ink); transition: transform .2s, top .2s; }
.menu-button i:first-child { top: 10px; } .menu-button i:last-child { top: 16px; }
.nav.open .menu-button i:first-child { top: 13px; transform: rotate(45deg); }
.nav.open .menu-button i:last-child { top: 13px; transform: rotate(-45deg); }

/* ---------- buttons ---------- */
.button { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 8px 18px; border-radius: 999px;
          background: var(--pill); color: #fff; overflow: hidden; border: 0; font: inherit; cursor: pointer; }
.button.orange { background: var(--accent); }
.button .roll { display: block; height: 24px; overflow: hidden; }
.button .roll span { display: block; transition: transform .35s cubic-bezier(.65, 0, .35, 1); }
.button:hover .roll span { transform: translateY(-100%); }

.text-link { display: inline-flex; flex-direction: column; gap: 4px; color: #fff; }
.text-link .label { display: flex; align-items: center; gap: 8px; }
.text-link svg { width: 16px; height: 16px; color: var(--muted); transition: transform .3s; }
.text-link .underline { height: 1px; background: rgba(255, 255, 255, .2); position: relative; }
.text-link .underline::after { content: ""; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; transition: transform .35s; }
.text-link:hover .underline::after { transform: scaleX(1); }
.text-link:hover svg { transform: translateX(3px); }

/* ---------- type ---------- */
.tag { color: var(--ink); }
.section-title { font: 500 48px/1.1 var(--display); letter-spacing: -0.04em; text-align: center; }
.page-title { font: 500 72px/1.1 var(--sauce); letter-spacing: -0.04em; }
.lead { font-size: 18px; line-height: 1.55; letter-spacing: -0.035em; color: var(--muted); }

/* ---------- sections ---------- */
main { padding-top: 0; }
.section { padding: 72px 0; }
.section-head { max-width: 550px; margin: 0 auto 80px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.section-head .text { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.section-head p.muted { max-width: 420px; }

/* home: hero */
.hero { padding: 100px 0 24px; }
.hero-card { height: 690px; padding: 48px; border-radius: 20px; background: var(--panel); border: 1px solid var(--line);
             display: flex; align-items: center; gap: 56px; overflow: hidden; }
.hero-logo { flex: 1; height: 100%; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.hero-logo svg { width: 100%; height: 100%; overflow: visible; }
.hero-copy { width: 380px; flex: none; display: flex; flex-direction: column; gap: 20px; }
.hero-copy h1 { font: 600 60px/1.02 var(--sauce); letter-spacing: -0.03em; }
.hero-copy .text { display: flex; flex-direction: column; gap: 21px; align-items: flex-start; }
.hero-copy .text p { font-size: 18px; line-height: 1.55; letter-spacing: -0.035em; color: #fff; opacity: .9; }

/* home: introduction */
.intro-top { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 80px; }
.intro-top p.statement { grid-column: 2 / 4; font: 500 32px/1.4 var(--sauce); letter-spacing: -0.04em; color: var(--muted); }
.intro-top p.statement b { font-weight: 500; color: var(--ink); }
.intro-bottom { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.intro-bottom > * { height: 400px; border-radius: 16px; overflow: hidden; }
.intro-bottom img { width: 100%; height: 100%; object-fit: cover; }
.orange-card { position: relative; background: var(--accent); padding: 24px; display: flex; flex-direction: column; justify-content: space-between; color: #fff; }
.orange-card .texture { position: absolute; inset: 0; opacity: .3; mix-blend-mode: screen; }
.orange-card > :not(.texture) { position: relative; }
.orange-card .top { display: flex; justify-content: space-between; align-items: flex-end; }
.orange-card .number { font: 500 48px/1.1 var(--display); letter-spacing: -0.04em; }
.orange-card .label { font: 500 14px/1.3 var(--sauce); letter-spacing: -0.05em; opacity: .8; }
.orange-card .bottom { max-width: 400px; opacity: .9; }

/* home: markets */
.markets { max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; }
.market { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.market + .market { border-top: 1px solid rgba(0, 0, 0, .1); padding-top: 24px; }
.market .name { display: flex; flex-direction: column; gap: 12px; }
.market .name p { color: var(--muted); }
.market h4 { font: 500 30px/1.3 var(--sauce); letter-spacing: -0.02em; }
.market ul { list-style: none; margin: 0; padding: 8px 0; display: flex; flex-direction: column; gap: 12px; color: var(--muted); }
.market li { display: flex; align-items: center; gap: 8px; }
.market li::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--pill); flex: none; }
.market img { width: 100%; height: 184px; object-fit: cover; border-radius: 12px; }

/* home: process */
.process { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; padding: 24px; border-radius: 18px; background: var(--panel); }
.process > img { width: 100%; height: 510px; object-fit: cover; border-radius: 12px; }
.process .content { grid-column: 2 / 4; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.steps { display: flex; flex-direction: column; gap: 18px; }
.step { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; padding-bottom: 18px; border-bottom: 1px solid rgba(0, 0, 0, .1); }
.step .num { width: 26px; height: 26px; margin-top: 4px; border-radius: 100px; background: var(--pill); display: grid; place-items: center;
             font: 500 12px/1.3 var(--sauce); letter-spacing: -0.05em; color: #fff; }
.step h5 { grid-column: 2 / 4; font-weight: 500; font-size: 18px; line-height: 1.55; letter-spacing: -0.035em; }
.step p { grid-column: 4 / 7; color: var(--muted); }
.ready { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ready p { max-width: 150px; font: 500 14px/1.3 var(--sauce); letter-spacing: -0.05em; }

/* inner pages: title row */
.page-header { padding: 100px 0 24px; }
.title-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; align-items: end; margin-bottom: 44px; }
.title-row .lead { justify-self: end; max-width: 450px; }

/* who we are: photo wall */
.wall { height: 690px; border-radius: 18px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.wall-inner { width: 120%; flex: none; display: flex; gap: 14px; transform: rotate(-10deg); }
.wall-col { flex: 1; overflow: hidden; height: 1100px; }
.wall-track { display: flex; flex-direction: column; gap: 14px; animation: wall-up 40s linear infinite; }
.wall-col:nth-child(2) .wall-track { animation-name: wall-down; }
.wall-track img { width: 100%; height: 290px; object-fit: cover; border-radius: 12px; flex: none; }
@keyframes wall-up { from { transform: translateY(0); } to { transform: translateY(calc(-50% - 7px)); } }
@keyframes wall-down { from { transform: translateY(calc(-50% - 7px)); } to { transform: translateY(0); } }

/* who we are: principles and team */
.principles { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.principle { padding: 28px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.principle .n { font: 500 14px/1.2 var(--inter); letter-spacing: 0; color: var(--muted); }
.principle h3 { font: 600 22px/1.25 var(--sauce); letter-spacing: -0.02em; }
.principle p { font-weight: 400; line-height: 1.55; letter-spacing: 0; color: var(--muted); }
.team { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.person { width: 324px; padding: 32px; border-radius: 14px; background: var(--panel); display: flex; flex-direction: column; align-items: center; gap: 24px;
          transition: background .2s; }
.person:hover { background: #182642; }
.avatar { width: 100px; height: 100px; border-radius: 999px; background: var(--tile); display: grid; place-items: center;
          font: 600 26px/1.2 var(--sauce); letter-spacing: 0.04em; }
.person .who { text-align: center; }
.person h5 { font: 500 22px/1.5 var(--sauce); letter-spacing: -0.035em; }
.person p { color: var(--muted); }

/* sports */
.sports { display: flex; flex-direction: column; gap: 14px; }
.sport { padding: 24px 32px; border-radius: 16px; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 20px; }
.sport.live { padding: 32px; background: var(--panel); }
.sport-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.sport-head .names { display: flex; flex-direction: column; gap: 4px; }
.sport h2 { font: 600 24px/1.2 var(--sauce); letter-spacing: -0.02em; color: var(--muted); }
.sport.live h2 { font-size: 34px; color: var(--ink); }
.league { font-size: 15px; line-height: 1.2; letter-spacing: 0; color: var(--muted); }
.pills { display: flex; gap: 8px; flex-wrap: wrap; }
.pill { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); font: 600 13px/1.2 var(--inter); letter-spacing: 0.02em; color: var(--muted); white-space: nowrap; }
.pill.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.divider { height: 1px; background: var(--line); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { padding: 8px 14px; border-radius: 999px; background: var(--tile); font-size: 14px; line-height: 1.2; letter-spacing: 0; }
.sport-text { font-size: 17px; line-height: 1.55; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.sport .button { align-self: flex-start; }

/* contact */
.contact-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 18px; border-radius: 18px; background: var(--panel); }
.contact-logo { border: 1px solid var(--line); border-radius: 18px; display: grid; place-items: center; min-height: 438px; cursor: pointer; }
.contact-logo svg { width: 384px; max-width: 80%; height: 263px; overflow: visible; }
form.contact { background: var(--page); border-radius: 18px; padding: 28px; display: flex; flex-direction: column; gap: 20px; }
form.contact label { display: flex; flex-direction: column; gap: 10px; }
form.contact input, form.contact textarea { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line); color: var(--ink);
  font: 500 16px/1.2 var(--inter); letter-spacing: -0.02em; padding: 8px 0; outline: none; }
form.contact input { height: 40px; }
form.contact textarea { height: 100px; resize: vertical; }
form.contact input:focus, form.contact textarea:focus { border-bottom-color: var(--muted); }
form.contact ::placeholder { color: var(--muted); opacity: .7; }
form.contact .button { width: 100%; }
form.contact .trap { position: absolute; left: -9999px; }
.form-status { min-height: 24px; color: var(--muted); }
.form-status.ok { color: var(--ink); }

/* team member page */
.member { padding: 140px 24px 120px; }
.member .inner { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 36px; }
.member .back { font: 500 14px/1.3 var(--sauce); letter-spacing: -0.05em; }
.member .head { display: flex; align-items: center; gap: 28px; margin-bottom: 36px; }
.member .avatar { width: 112px; height: 112px; font-size: 36px; }
.member h1 { font: 600 56px/1.05 var(--sauce); letter-spacing: -0.03em; }
.member .role { font-size: 18px; line-height: 1.55; letter-spacing: -0.035em; color: var(--muted); margin-top: 8px; }
.member .bio { color: var(--muted); font-weight: 400; line-height: 1.6; letter-spacing: 0; }

/* footer */
.footer { padding: 40px 0; }
.footer-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.footer-brand { grid-column: span 2; padding-right: 80px; display: flex; flex-direction: column; gap: 24px; }
.footer-brand p { color: var(--muted); }
.footer-col { display: flex; flex-direction: column; gap: 16px; }
.footer-col h6 { margin: 0; font-size: 18px; font-weight: 500; line-height: 1.55; letter-spacing: -0.035em; }
.footer-col nav { display: flex; flex-direction: column; gap: 8px; }
.footer-col a { opacity: .6; transition: opacity .2s; }
.footer-col a:hover { opacity: 1; }

/* 404 */
.not-found { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: 140px 24px 60px; }
.not-found h1 { font: 500 72px/1.1 var(--sauce); letter-spacing: -0.04em; margin-bottom: 12px; }
.not-found p { color: var(--muted); margin-bottom: 28px; }

/* ---------- tablet ---------- */
@media (max-width: 1199.98px) {
  .section-title { font-size: 44px; }
  .hero-card { gap: 32px; }
}

/* ---------- phone ---------- */
@media (max-width: 809.98px) {
  .container { padding: 0 20px; }
  .nav .container { gap: 8px; }
  .brand { margin-right: auto; }
  .menu-button { display: block; }
  .nav .container > .button { display: none; }
  .nav-links .menu-only { display: block; }
  .nav-links { display: none; position: absolute; top: 76px; left: 0; right: 0; background: var(--page); flex-direction: column; gap: 0;
               padding: 8px 20px 20px; border-bottom: 1px solid var(--line); }
  .nav.open .nav-links { display: flex; }
  .nav-links a { opacity: 1; padding: 12px 0; font-size: 18px; border-bottom: 1px solid var(--line); }

  .hero-card { height: 500px; padding: 24px; flex-direction: column; align-items: flex-start; gap: 28px; }
  .hero-logo { flex: none; width: 100%; height: 220px; }
  .hero-copy { width: 100%; gap: 14px; }
  .hero-copy h1 { font-size: 38px; }

  .section-title { font-size: 40px; }
  .page-title { font-size: 48px; }
  .intro-top, .intro-bottom, .market, .process, .principles, .title-row, .contact-panel { grid-template-columns: 1fr; }
  .intro-top { margin-bottom: 48px; }
  .intro-top p.statement { grid-column: auto; }
  .section-head { margin-bottom: 48px; }
  .market h4 { font-size: 28px; }
  .market img { height: 300px; }
  .process { padding: 14px 14px 24px; }
  .process > img { height: 360px; }
  .process .content { grid-column: auto; }
  .step { grid-template-columns: 1fr; gap: 12px; }
  .step h5, .step p { grid-column: auto; }
  .title-row .lead { justify-self: start; }
  .title-row .lead br { display: none; }
  .wall { height: 480px; }
  .wall-inner { width: 180%; }
  .sport, .sport.live { padding: 24px; }
  .sport-head { flex-direction: column; align-items: flex-start; }
  .contact-panel { padding: 10px; }
  .contact-logo { min-height: 260px; }
  .member .head { flex-direction: column; align-items: flex-start; }
  .member h1 { font-size: 40px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px 8px; }
  .footer-brand { grid-column: 1 / -1; padding-right: 0; }
  .footer-spacer { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wall-track { animation: none; }
  html { scroll-behavior: auto; }
}

/* flip-board logo */
.solari text.flap { transform-box: fill-box; transform-origin: 50% 50%; }
.solari text.flap.flip { animation: qgflap 70ms ease-in; }
@keyframes qgflap { 0% { transform: scaleY(1); } 50% { transform: scaleY(.12); } 100% { transform: scaleY(1); } }

/* fade in as sections scroll into view (only when JavaScript runs) */
.js [data-appear] { opacity: 0; transform: translateY(var(--rise, 0)); transition: opacity .6s ease .1s, transform .6s cubic-bezier(.2, .8, .2, 1) .1s; }
.js [data-appear].shown { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js [data-appear] { opacity: 1; transform: none; transition: none; } }