/* ==========================================================================
   247SimManager Suite — public marketing site
   Dark, high-contrast, system-font only (CSP: font-src 'self'). The Sentry
   mark, orange accent and dark surfaces are the approved brand and are kept.
   Every decorative motion is gated on .js so the page reads fully without it.
   ========================================================================== */
:root {
  --ink: #080c0b; --surface: #0f1614; --surface-2: #16201d; --surface-3: #1d2926;
  --line: rgba(255,255,255,.10); --line-solid: #2d3f38;
  --text: #f3f7f5; --muted: #a9b7b0; --dim: #7f8e87;
  --accent: #f47b20; --accent-soft: #ffa45f; --accent-deep: #d8630f; --accent-ink: #1a0d02;
  --signal: #3fd68c;
  --logo-accent: var(--accent);
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --maxw: 1240px; --radius: 18px; --radius-sm: 12px;
  --glow: 0 0 0 1px rgba(244,123,32,.35), 0 24px 70px -30px rgba(244,123,32,.55);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 16px/1.6 var(--sans); color: var(--text); background: var(--ink); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { max-width: 100%; }
img { display: block; height: auto; }
[hidden] { display: none !important; }
a { color: inherit; text-underline-offset: .2em; }
h1, h2, h3 { line-height: 1.1; letter-spacing: -.03em; margin: 0 0 .6em; font-weight: 750; }
p { margin: 0 0 1em; }
figure, dl, dd { margin: 0; }
.wrap { width: 100%; max-width: var(--maxw); margin: auto; padding-inline: 24px; }
:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 4px; border-radius: 6px; }
.skip { position: fixed; top: 10px; left: -9999px; z-index: 200; padding: 12px 20px; background: var(--accent); color: var(--accent-ink); font-weight: 700; border-radius: 8px; }
.skip:focus { left: 10px; }

/* ---------- shared ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--accent-soft); font: 600 .7rem/1.6 var(--mono); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 20px; }
.eyebrow::before { content: ""; flex: 0 0 22px; height: 1px; background: currentColor; opacity: .7; }
.lede { color: var(--muted); font-size: clamp(1.02rem, 1.6vw, 1.15rem); max-width: 64ch; line-height: 1.7; }
.grad { font-style: normal; background: linear-gradient(92deg, var(--accent-soft) 0%, var(--accent) 55%, #ffc48a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

.btn { display: inline-flex; justify-content: center; align-items: center; gap: 9px; padding: 13px 20px; border: 1px solid transparent; border-radius: 11px; font-size: .94rem; font-weight: 650; text-decoration: none; text-align: center; white-space: nowrap; transition: transform .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease; }
.btn:hover { transform: translateY(-1px); }
.btn--lg { padding: 15px 24px; font-size: 1rem; }
.btn--primary { color: var(--accent-ink); background: linear-gradient(180deg, var(--accent-soft), var(--accent)); box-shadow: 0 10px 30px -14px rgba(244,123,32,.8); }
.btn--primary:hover { background: linear-gradient(180deg, #ffb676, var(--accent-soft)); }
.btn--ghost { border-color: var(--line-solid); color: var(--text); }
.btn--ghost:hover { background: var(--surface-2); border-color: var(--dim); }

.section { padding-block: clamp(72px, 8vw, 120px); border-top: 1px solid var(--line); }
.section--alt { background: var(--surface); }
.section, #top { scroll-margin-top: 102px; }
.section__head { max-width: 72ch; margin-bottom: clamp(38px, 5vw, 56px); }
.section__head h2 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); }

/* ---------- reveal (JS-gated so nothing is ever hidden without it) ---------- */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } .btn:hover { transform: none; } }

/* ---------- logo ---------- */
.logo { display: inline-flex; gap: 10px; align-items: center; text-decoration: none; }
.logo svg { flex-shrink: 0; }
.logo__name { font-weight: 750; font-size: 1.1rem; letter-spacing: -.03em; line-height: 1.1; }
.logo__name i { font-style: normal; color: var(--accent); }
.logo__name small { display: block; margin-top: 5px; font-size: .55rem; font-weight: 500; letter-spacing: .24em; color: var(--muted); }

/* ---------- header: split nav around a centered, larger logo ---------- */
.site-header { position: sticky; top: 0; z-index: 100; padding-top: env(safe-area-inset-top, 0px); background: rgba(8,12,11,.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s ease; }
.site-header.is-stuck { border-bottom-color: var(--line); }
.site-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 28px; min-height: 86px; }
.logo--header { grid-column: 2; grid-row: 1; justify-self: center; gap: 12px; }
.logo--header .logo__name { font-size: 1.45rem; }
.logo--header .logo__name small { font-size: .6rem; margin-top: 6px; }
/* display:contents lets the two link groups sit in the header grid on either side of the logo */
.nav { display: contents; }
.nav__group { display: flex; align-items: center; gap: 26px; grid-row: 1; }
.nav__group--left { grid-column: 1; justify-self: end; }
.nav__group--right { grid-column: 3; justify-self: start; }
.nav a { font-size: .89rem; font-weight: 550; text-decoration: none; color: var(--muted); white-space: nowrap; transition: color .15s ease; }
.nav a:hover { color: var(--text); }
.btn--sm { padding: 10px 16px; font-size: .86rem; border-radius: 9px; }
.nav .btn, .nav .btn:hover { color: var(--accent-ink); }
.nav-toggle { grid-column: 3; grid-row: 1; justify-self: end; color: var(--text); background: transparent; border: 1px solid var(--line-solid); border-radius: 9px; padding: 12px; cursor: pointer; }

/* ---------- hero ---------- */
.hero { position: relative; padding: clamp(60px, 8vw, 110px) 0 clamp(56px, 7vw, 90px); overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: -30% -10% auto -10%; height: 720px; pointer-events: none;
  background: radial-gradient(55% 50% at 20% 35%, rgba(244,123,32,.20), transparent 70%), radial-gradient(45% 45% at 82% 15%, rgba(63,214,140,.13), transparent 72%); }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .45;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(70% 65% at 50% 30%, #000, transparent 78%); mask-image: radial-gradient(70% 65% at 50% 30%, #000, transparent 78%); }
.hero__mark { position: absolute; right: -4%; top: -14%; width: clamp(340px, 46vw, 680px); height: auto; aspect-ratio: 1; color: var(--text); opacity: .055; pointer-events: none; z-index: 0; }
.hero > .wrap { position: relative; z-index: 1; }
.hero__grid { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: clamp(32px, 4.5vw, 60px); align-items: center; }
.hero h1 { font-size: clamp(2.9rem, 5.4vw, 4.9rem); letter-spacing: -.05em; line-height: 1.02; margin-bottom: 24px; }
.hero h1 em { font-style: normal; background: linear-gradient(92deg, var(--accent-soft), var(--accent) 60%, #ffc48a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__sub { color: var(--muted); font-size: clamp(1.05rem, 1.7vw, 1.22rem); line-height: 1.6; max-width: 46ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 34px; }
.hero__stats { display: flex; flex-wrap: wrap; gap: 8px 36px; padding-top: 26px; border-top: 1px solid var(--line); }
.hero__stats div { display: flex; flex-direction: column-reverse; }
.hero__stats dd { font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 750; letter-spacing: -.04em; line-height: 1; color: var(--text); }
.hero__stats dd span { color: var(--accent); }
.hero__stats dt { font: 500 .68rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin-top: 8px; }

.product-shot { overflow: hidden; min-width: 0; background: var(--surface); border: 1px solid var(--line-solid); border-radius: var(--radius); transition: transform .25s ease, border-color .25s ease; }
.product-shot:hover { border-color: var(--dim); }
.hero-shot { box-shadow: 0 40px 100px -30px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.04); }
.product-shot__bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; background: var(--surface-3); padding: 12px 18px; color: var(--muted); font: .7rem/1.5 var(--mono); letter-spacing: .04em; }
.product-shot > a { display: block; }
.product-shot > a:focus-visible { outline-offset: -4px; }
.product-shot img { width: 100%; object-fit: contain; }
.product-shot figcaption { padding: 16px 20px; color: var(--muted); font-size: .84rem; line-height: 1.6; }
.product-shot figcaption strong { color: var(--text); }

/* ---------- sports strip ---------- */
.strip { padding: 26px 0; border-top: 1px solid var(--line); background: var(--surface); }
.strip__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 28px; }
.strip__label { color: var(--dim); font: .68rem/1.6 var(--mono); letter-spacing: .13em; text-transform: uppercase; margin: 0; }
.strip__items { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; list-style: none; margin: 0; padding: 0; }
.strip__items li { padding: 7px 16px; border: 1px solid var(--line-solid); border-radius: 999px; font-size: .88rem; font-weight: 550; background: var(--surface-2); }
.strip__note { color: var(--dim); font-size: .8rem; margin: 0; flex-basis: 100%; text-align: center; }

/* ---------- beyond: two tiers ---------- */
.section--beyond .section__head { max-width: 96ch; }
.section--beyond { background: radial-gradient(60% 55% at 78% 18%, rgba(244,123,32,.10), transparent 70%), var(--ink); }
.tiers { display: grid; grid-template-columns: minmax(0,.78fr) minmax(0,1.22fr); gap: 22px; align-items: stretch; }
.tier { border-radius: var(--radius); padding: clamp(26px, 3vw, 38px); border: 1px solid var(--line); background: var(--surface); }
.tier__label { display: inline-flex; align-items: center; gap: 8px; font: 600 .68rem/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin: 0 0 16px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); }
.tier__label span { color: var(--dim); font-weight: 500; letter-spacing: .06em; text-transform: none; }
.tier h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); margin-bottom: 20px; }
.tier__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.tier__list li { display: flex; gap: 12px; align-items: flex-start; color: var(--muted); font-size: .95rem; line-height: 1.55; }
.tier__list svg { flex: 0 0 18px; margin-top: 3px; }
.tier__list--2col { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px 22px; }
.tier__list--2col li { color: var(--text); }
.tier__list--2col strong { display: block; margin-bottom: 2px; font-weight: 700; }
.tier__list--2col span { color: var(--muted); font-size: .93rem; }
.tier__list--2col li > span { display: block; }
.tier__list--2col li > span strong { color: var(--text); }

.tier--basics svg { color: var(--dim); }
.tier--beyond { position: relative; border-color: rgba(244,123,32,.45); background: linear-gradient(160deg, rgba(244,123,32,.10), var(--surface) 42%, var(--surface) 100%); box-shadow: var(--glow); }
.tier--beyond .tier__label { color: var(--accent-soft); border-color: rgba(244,123,32,.4); background: rgba(244,123,32,.08); }
.tier--beyond .tier__label span { color: var(--accent-soft); }
.tier__label--mark { padding-left: 9px; }
.tier__label--mark svg { flex: none; color: var(--text); margin-right: 2px; }
.tier--beyond svg { color: var(--signal); }
.tier__foot { margin: 26px 0 0; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; }
.tier__foot strong { color: var(--text); }

/* ---------- cards ---------- */
.grid { display: grid; gap: 20px; }
.grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 30px 28px; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.card:hover { transform: translateY(-3px); border-color: var(--line-solid); box-shadow: 0 30px 60px -40px rgba(0,0,0,.9); }
.card__icon { display: grid; place-items: center; width: 44px; height: 44px; background: rgba(244,123,32,.11); color: var(--accent); border: 1px solid rgba(244,123,32,.28); border-radius: 12px; margin-bottom: 22px; }
.card h3 { font-size: 1.2rem; line-height: 1.2; }
.card p { font-size: .94rem; color: var(--muted); margin-bottom: 0; line-height: 1.6; }
.card__kicker { color: var(--accent-soft); font: .68rem/1.5 var(--mono); letter-spacing: .08em; margin-bottom: 12px; }
.card--featured { border-color: rgba(244,123,32,.5); background: linear-gradient(150deg, rgba(244,123,32,.12), var(--surface) 55%); box-shadow: var(--glow); }
.card--slim h3 { font-size: 1.1rem; }
.section--alt .card { background: var(--surface-2); }

/* ---------- gallery / split ---------- */
.gallery, .split { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 28px; align-items: start; }
.gallery .product-shot { height: 100%; }
.product-shot--wide { max-width: 1040px; margin: 28px auto 0; }
.pillrow { display: flex; flex-wrap: wrap; gap: 9px; list-style: none; margin: 30px 0 0; padding: 0; }
.pillrow li { font: 500 .78rem/1.4 var(--mono); color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; }
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.checklist li { display: flex; gap: 12px; color: var(--muted); line-height: 1.6; }
.checklist li strong { color: var(--text); }
.checklist svg { color: var(--signal); flex: 0 0 17px; margin-top: 5px; }

/* ---------- team ---------- */
.section--team { background: radial-gradient(50% 60% at 15% 90%, rgba(23,79,42,.35), transparent 70%), radial-gradient(45% 55% at 90% 10%, rgba(29,94,118,.22), transparent 70%), var(--ink); }
.section--team .section__head { max-width: 80ch; }
.team { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.team__card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 30px 28px; transition: transform .22s ease, border-color .22s ease; }
.team__card:hover { transform: translateY(-3px); border-color: var(--line-solid); }
.team__card--partner { border-color: rgba(244,123,32,.45); background: linear-gradient(160deg, rgba(244,123,32,.10), var(--surface) 50%); box-shadow: var(--glow); }
.team__role { font: 600 .68rem/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-soft); margin: 0 0 18px; }
.team__logo { height: 44px; width: auto; align-self: flex-start; object-fit: contain; margin: 0 0 14px; }
.team__logo--247 { height: 68px; width: 68px; border-radius: 50%; filter: invert(1); opacity: .95; }
.team__tag { color: var(--text); font-weight: 650; font-size: 1.02rem; margin: 0 0 18px; letter-spacing: -.01em; }
.team__stats { display: flex; flex-wrap: wrap; gap: 18px 28px; margin: 0 0 20px; }
.team__stats div { display: flex; flex-direction: column; min-width: 0; }
.team__stats dd { font-size: clamp(2rem, 3vw, 2.6rem); font-weight: 780; letter-spacing: -.05em; line-height: 1; color: var(--text); }
.team__stats dd span { color: var(--accent); }
.team__stats dt { color: var(--muted); font-size: .84rem; line-height: 1.45; margin-top: 8px; max-width: 24ch; }
.team__card > p:not(.team__role):not(.team__tag) { color: var(--muted); font-size: .93rem; line-height: 1.6; margin: 0; }
.team__link { display: inline-flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 20px; color: var(--accent-soft); text-decoration: none; font: 600 .82rem/1 var(--mono); letter-spacing: .03em; }
.team__link:hover { color: #ffc48a; text-decoration: underline; }

/* ---------- faq ---------- */
.faq { max-width: 78ch; }
.faq details { border-bottom: 1px solid var(--line-solid); padding: 0 0 18px; margin: 0 0 18px; }
.faq summary { cursor: pointer; font-weight: 650; padding-block: 7px; font-size: 1.02rem; list-style: none; display: flex; justify-content: space-between; gap: 14px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-weight: 400; flex: none; }
.faq details[open] summary::after { content: "−"; }
.faq p { color: var(--muted); font-size: .94rem; margin: 14px 0 0; line-height: 1.65; }

/* ---------- cta ---------- */
.cta { background: radial-gradient(60% 80% at 50% 100%, rgba(23,79,42,.45), transparent 70%), var(--ink); }
.cta__box { max-width: 880px; padding: clamp(28px, 5vw, 64px); margin: auto; border: 1px solid rgba(244,123,32,.35); border-radius: 24px; background: radial-gradient(70% 90% at 50% 0%, rgba(244,123,32,.14), transparent 70%), var(--surface-2); text-align: center; box-shadow: var(--glow); }
.cta__mark { display: block; margin: 0 auto 20px; color: var(--text); filter: drop-shadow(0 10px 30px rgba(244,123,32,.35)); }
.cta h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); }
.cta .lede { margin: 0 auto 28px; }
.demo-inquiry summary { cursor: pointer; list-style: none; }
.demo-inquiry summary::-webkit-details-marker { display: none; }
.demo-inquiry summary::after { content: "+"; margin-left: 12px; }
.demo-inquiry[open] summary::after { content: "−"; }
.demo-inquiry__frame { margin-top: 28px; overflow: hidden; border: 1px solid var(--line-solid); border-radius: 12px; background: #1f1f1f; }
.demo-inquiry iframe { display: block; width: 100%; border: 0; }

/* ---------- footer ---------- */
.site-footer { padding: 60px 0 34px; border-top: 1px solid var(--line); background: var(--ink); }
.footer__top { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 44px; }
.logo--footer .logo__name { font-size: 1.3rem; }
.footer__about p { color: var(--muted); font-size: .9rem; max-width: 46ch; margin: 22px 0 0; line-height: 1.6; }
.footer__col h3 { font: 600 .7rem/1.5 var(--mono); text-transform: uppercase; letter-spacing: .13em; color: var(--dim); }
.footer__col ul { list-style: none; margin: 16px 0 0; padding: 0; }
.footer__col li { margin: 10px 0; font-size: .9rem; color: var(--muted); }
.footer__col a { text-decoration: none; }
.footer__col a:hover { color: var(--text); text-decoration: underline; }
.footer__bottom { display: flex; justify-content: space-between; gap: 30px; margin-top: 44px; padding-top: 25px; border-top: 1px solid var(--line); color: var(--dim); font-size: .8rem; }
.footer__legal { max-width: 68ch; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .site-header__inner { min-height: 74px; column-gap: 12px; }
  .logo--header svg { width: 38px; height: 38px; }
  .logo--header .logo__name { font-size: 1.2rem; }
  /* Without JavaScript the nav simply flows beneath the logo row and stays usable. */
  .nav { display: flex; flex-direction: column; grid-column: 1 / -1; grid-row: 2; padding: 4px 0 14px; gap: 0; }
  .nav__group { flex-direction: column; align-items: stretch; gap: 0; grid-row: auto; justify-self: stretch; }
  .nav a { padding: 12px; }
  .nav .btn { margin: 8px 12px 0; justify-content: center; }
  .js .nav { position: absolute; inset: 100% 0 auto; padding: 12px 24px 18px; background: var(--surface); border-bottom: 1px solid var(--line-solid); max-height: calc(100dvh - 74px); overflow-y: auto; }
  .hero__mark { right: -18%; top: -6%; width: 78vw; }
  .hero__grid { gap: 28px; }
  .hero h1 { font-size: 3.3rem; }
  .tiers { grid-template-columns: 1fr; }
  .team { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  .hero__grid, .gallery, .split { grid-template-columns: 1fr; }
  .hero__sub { max-width: 60ch; }
  .grid--3 { grid-template-columns: 1fr; }
  .tier__list--2col { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__about { grid-column: 1 / -1; }
  .footer__bottom { display: block; }
}
@media (max-width: 420px) {
  .wrap { padding-inline: 18px; }
  .cta__box { padding-inline: 14px; }
  .site-header__inner { column-gap: 8px; }
  .logo--header { gap: 8px; }
  .logo--header svg { width: 32px; height: 32px; }
  .logo--header .logo__name { font-size: 1.02rem; }
  .nav-toggle { padding: 10px; }
  .hero h1 { font-size: 2.7rem; }
  .hero__actions .btn { width: 100%; }
  .hero__stats { gap: 14px 24px; }
  .card, .tier, .team__card { padding: 24px 20px; }
}