@import "tailwindcss";

:root {
  --ink: #19181d;
  --charcoal: #333033;
  --muted: #686568;
  --paper: #f7f5f2;
  --white: #ffffff;
  --red: #bd252a;
  --red-dark: #742826;
  --red-warm: #b64035;
  --line: #ded9d3;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--white);
  color: var(--charcoal);
  font-family: "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, summary { font: inherit; }
.shell { width: min(1150px, calc(100% - 48px)); margin: 0 auto; }
.section-pad { padding: 110px 0; }

.hero {
  position: relative;
  min-height: 760px;
  overflow: hidden;
  color: var(--white);
  background:
    radial-gradient(circle at 75% 45%, rgba(189,37,42,.11), transparent 28%),
    linear-gradient(130deg, #111014 0%, #18171c 55%, #111014 100%);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(18,17,21,.95) 0%, rgba(18,17,21,.55) 52%, rgba(18,17,21,.12) 100%);
  pointer-events: none;
}
.network-field { position: absolute; inset: 0; opacity: .56; pointer-events: none; }
.network-field i {
  position: absolute;
  height: 1px;
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.45), rgba(189,37,42,.3));
}
.network-dot { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.62); box-shadow: 0 0 0 5px rgba(255,255,255,.03); }
.network-dot--1{left:9%;top:15%}.network-dot--2{left:26%;top:28%}.network-dot--3{left:43%;top:12%}.network-dot--4{left:59%;top:22%}.network-dot--5{left:77%;top:16%}.network-dot--6{left:92%;top:36%}.network-dot--7{left:12%;top:72%}.network-dot--8{left:29%;top:63%}.network-dot--9{left:42%;top:76%}.network-dot--10{left:58%;top:68%}.network-dot--11{left:72%;top:61%}.network-dot--12{left:88%;top:76%}.network-dot--13{left:35%;top:43%}.network-dot--14{left:52%;top:48%}.network-dot--15{left:68%;top:38%}.network-dot--16{left:21%;top:47%}.network-dot--17{left:81%;top:49%}.network-dot--18{left:50%;top:88%}

.site-header { height: 108px; position: relative; z-index: 5; background:#fff; border-bottom:1px solid #ece8e4; }
.site-header__inner { height:100%; display:flex; align-items:center; justify-content:space-between; }
.logo-link { display: inline-flex; }
.header-brand { display:inline-flex; align-items:center; gap:15px; }
.header-brand__mark { display:block; width:88px; height:62px; object-fit:contain; }
.header-brand__words { display:grid; gap:3px; text-align:left; }
.header-brand__words strong { color:var(--red-dark); font-size:20px; line-height:1.05; letter-spacing:-.035em; }
.header-brand__words small { color:var(--ink); font-size:10px; line-height:1.2; letter-spacing:.04em; }
.desktop-nav { display: flex; align-items: center; gap: 32px; font-size: 14px; }
.desktop-nav a:not(.nav-cta) { color:var(--ink); transition: color .2s ease; }
.desktop-nav a:hover { color:var(--red); }
.nav-cta { border:1px solid var(--red); padding:13px 18px; color:#fff; background:var(--red); }
.mobile-menu { display: none; position: relative; }

.hero__content { position: relative; z-index: 2; padding: 120px 0; }
.eyebrow, .kicker { margin: 0 0 18px; color: var(--red); text-transform: uppercase; font-size: 13px; font-weight: 700; letter-spacing: .15em; }
.hero h1 { max-width: 760px; margin: 0; font-size: clamp(48px, 6vw, 78px); line-height: 1.02; letter-spacing: -.045em; }
.hero h1 span { color: #d94a48; }
.hero__dek { max-width: 710px; margin: 28px 0 0; color: rgba(255,255,255,.82); font-size: 20px; line-height: 1.55; }
.hero__actions { display: flex; gap: 15px; margin-top: 38px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 58px; padding: 0 28px; text-transform: uppercase; font-size: 13px; font-weight: 700; letter-spacing: .06em; transition: transform .2s ease, background .2s ease, color .2s ease; }
.button:hover { transform: translateY(-2px); }
.button--light { color: var(--red-dark); background: #fff; }
.button--red { color: #fff; background: var(--red); }
.hero__note { margin: 32px 0 0; font-size: 13px; color: rgba(255,255,255,.5); letter-spacing: .08em; }
.hero__kx { position: absolute; right: -2vw; bottom: -5vw; z-index: 1; color: rgba(255,255,255,.025); font-size: min(39vw, 520px); font-weight: 900; line-height: .8; letter-spacing: -.13em; }
.scroll-cue { position: absolute; right: 46px; bottom: 34px; z-index: 3; display: flex; gap: 12px; align-items: center; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.62); }

.story { background: var(--white); }
.story__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 110px; align-items: start; }
h2 { margin: 0; color: var(--ink); font-size: clamp(36px, 4.3vw, 58px); line-height: 1.08; letter-spacing: -.045em; }
.story__copy { padding-top: 25px; }
.story__copy > p { margin: 0 0 22px; color: var(--muted); font-size: 18px; line-height: 1.75; }
blockquote { margin: 36px 0 0; padding: 24px 0 24px 28px; border-left: 5px solid var(--red); color: var(--red-dark); font-size: 22px; font-weight: 700; line-height: 1.45; }

.vision { color: var(--white); background: linear-gradient(125deg, var(--red-warm), #a32c2d 70%, #7c2526); }
.vision__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 90px; align-items: center; }
.kicker--light { color: rgba(255,255,255,.72); }
.vision h2, .flywheel h2, .cta h2 { color: var(--white); }
.vision__copy > p:not(.kicker) { margin: 26px 0 0; font-size: 18px; line-height: 1.7; color: rgba(255,255,255,.82); }
.vision__statement { padding-top: 20px; border-top: 1px solid rgba(255,255,255,.3); font-weight: 700; color: #fff !important; }
.constellation { position: relative; min-height: 460px; }
.constellation::before { content:""; position:absolute; inset:9%; border:1px solid rgba(255,255,255,.18); border-radius:50%; }
.constellation__core { position:absolute; left:50%; top:50%; width:190px; height:190px; transform:translate(-50%,-50%); display:grid; place-items:center; border:1px solid rgba(255,255,255,.7); border-radius:50%; background:#fff; box-shadow:0 24px 65px rgba(72,10,14,.28); }
.constellation__core img { display:block; width:138px; height:auto; }
.constellation__node { position:absolute; display:grid; place-content:center; width:130px; height:130px; text-align:center; border-radius:50%; border:1px solid rgba(255,255,255,.52); background:rgba(122,18,20,.18); font-size:14px; font-weight:700; }
.constellation__node--knowledge{left:2%;top:9%}.constellation__node--community{left:5%;bottom:5%}.constellation__node--ai{right:2%;top:34%}
.constellation__line { position:absolute; height:1px; background:rgba(255,255,255,.5); transform-origin:left center; }
.constellation__line--a{left:25%;top:30%;width:27%;transform:rotate(27deg)}.constellation__line--b{left:27%;top:70%;width:25%;transform:rotate(-30deg)}.constellation__line--c{left:64%;top:50%;width:13%;}

.ecosystem { background: var(--paper); }
.section-heading { display: grid; grid-template-columns: 1.1fr .9fr; gap: 100px; align-items: end; margin-bottom: 62px; }
.section-heading > p { margin: 0 0 5px; color: var(--muted); font-size: 18px; line-height: 1.65; }
.ecosystem__list { border-top: 1px solid var(--line); }
.ecosystem-card { position:relative; display:grid; grid-template-columns:54px 92px 1fr 1.2fr; gap:26px; align-items:center; min-height:168px; padding:30px 0; border-bottom:1px solid var(--line); }
.ecosystem-card::before { content:""; position:absolute; z-index:0; top:0; bottom:0; left:calc(50% - 50vw); right:calc(50% - 50vw); background:transparent; pointer-events:none; transition:background .2s ease; }
.ecosystem-card:hover::before,.ecosystem-card:focus-within::before { background:#fff; }
.ecosystem-card > * { position:relative; z-index:1; }
.ecosystem-card__number { color: var(--red); font-size: 12px; font-weight: 700; }
.ecosystem-card h3 { margin: 5px 0 0; color: var(--red-dark); font-size: 25px; letter-spacing: -.03em; }
.ecosystem-card p { margin: 0; }
.ecosystem-card > div:nth-child(3) > p { color: var(--red); text-transform: uppercase; font-size: 10px; font-weight: 700; letter-spacing: .1em; }
.ecosystem-card__copy > p { color:var(--muted); line-height:1.6; }
.ecosystem-card__copy details { margin-top:13px; }
.ecosystem-card__copy summary { width:max-content; cursor:pointer; list-style:none; color:var(--red); text-transform:uppercase; font-size:11px; font-weight:700; letter-spacing:.1em; }
.ecosystem-card__copy summary::-webkit-details-marker { display:none; }
.ecosystem-card__copy summary::after { content:" +"; }
.ecosystem-card__copy details[open] summary::after { content:" -"; }
.ecosystem-card__copy details > p { margin-top:16px; padding-top:16px; border-top:1px solid var(--line); color:var(--charcoal); line-height:1.65; }
.system-icon { display:grid; place-items:center; width:76px; height:76px; }
.system-icon img { display:block; width:76px; height:76px; object-fit:contain; }

.flywheel { color:var(--charcoal); background:#fff; border-top:1px solid var(--line); }
.flywheel__heading { max-width:680px; margin-bottom:30px; }
.flywheel__heading .kicker { margin-bottom:16px; }
.flywheel__heading h2 { color:var(--red-dark); }
.flywheel__content { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr); gap:56px; align-items:start; }
.flywheel__copy { min-width:0; }
.flywheel__copy p { margin:0 0 26px; color:var(--muted); font-size:18px; line-height:1.75; }
.flywheel__copy p:last-child { margin-bottom:0; }
.flywheel__figure { margin:0; display:grid; place-items:center; }
.flywheel__figure figcaption { display:grid; justify-items:center; gap:5px; margin-bottom:18px; text-align:center; }
.flywheel__figure figcaption strong { color:var(--red-dark); font-size:28px; line-height:1; letter-spacing:-.035em; }
.flywheel__figure figcaption span { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.flywheel__diagram { position:relative; width:min(100%,585px); }
.flywheel__diagram > img { display:block; width:100%; height:auto; }
.flywheel-hotspot { position:absolute; z-index:2; display:block; border:0; padding:0; color:var(--charcoal); background:transparent; cursor:help; }
.flywheel-hotspot > span { position:absolute; z-index:3; left:50%; bottom:calc(100% + 8px); width:max-content; max-width:230px; transform:translateX(-50%) translateY(4px); padding:9px 12px; border:1px solid rgba(189,37,42,.65); color:var(--red-dark); background:#fff; box-shadow:0 8px 24px rgba(64,38,35,.16); font-size:11px; font-weight:700; line-height:1.25; letter-spacing:.03em; opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease; }
.flywheel-hotspot > span::after { content:""; position:absolute; left:50%; bottom:-5px; width:8px; height:8px; border-right:1px solid rgba(189,37,42,.65); border-bottom:1px solid rgba(189,37,42,.65); background:#fff; transform:translateX(-50%) rotate(45deg); }
.flywheel-hotspot:hover > span,.flywheel-hotspot:focus-visible > span { opacity:1; transform:translateX(-50%) translateY(0); }
.flywheel-hotspot:focus-visible { outline:1px dashed rgba(189,37,42,.7); outline-offset:2px; }
.flywheel-hotspot--knowledge { left:39%; top:4%; width:23%; height:18%; }
.flywheel-hotspot--lens { right:2%; top:31%; width:27%; height:20%; }
.flywheel-hotspot--lattice { left:39%; top:61%; width:26%; height:19%; }
.flywheel-hotspot--stack { left:39%; top:28%; width:24%; height:22%; }
.flywheel-hotspot--engine { left:0; top:30%; width:28%; height:21%; }
.flywheel-hotspot--engine > span { left:0; transform:translateY(4px); }
.flywheel-hotspot--engine:hover > span,.flywheel-hotspot--engine:focus-visible > span { transform:translateY(0); }
.flywheel-hotspot--lens > span { right:0; left:auto; transform:translateY(4px); }
.flywheel-hotspot--lens:hover > span,.flywheel-hotspot--lens:focus-visible > span { transform:translateY(0); }

.cta { position:relative; overflow:hidden; color:#fff; background:linear-gradient(125deg,#b74137,#9f292b); }
.cta .network-field { opacity:.25; }
.cta__inner { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,.85fr) minmax(440px,1.15fr); gap:90px; align-items:start; }
.cta__copy { padding-top:8px; }
.cta h2 { max-width:560px; font-size:clamp(42px,5.4vw,68px); }
.cta__copy > p:last-child { max-width:540px; margin:28px 0 0; color:rgba(255,255,255,.82); font-size:18px; line-height:1.7; }
.contact-form { display:grid; gap:20px; }
.contact-form__row { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.contact-form label { display:grid; gap:8px; }
.contact-form label > span { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.82); }
.contact-form input,.contact-form textarea { width:100%; border:1px solid rgba(255,255,255,.75); border-radius:0; padding:15px 16px; color:var(--ink); background:#fff; font:inherit; outline:none; transition:border-color .2s ease, box-shadow .2s ease; }
.contact-form input { min-height:54px; }
.contact-form textarea { min-height:164px; resize:vertical; }
.contact-form input:focus,.contact-form textarea:focus { border-color:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.2); }
.contact-form .button { justify-self:start; margin-top:4px; border:0; cursor:pointer; }
.cta .button span { margin-left:15px; font-size:20px; }

footer { padding:38px 0; background:#fff; }
.footer__inner { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:30px; }
.official-logo { display:block; width:245px; height:auto; }
.footer__inner p { margin:0; color:var(--muted); font-size:12px; }
.footer__inner > a { justify-self:end; color:var(--red-dark); font-size:12px; font-weight:700; }

@media (max-width: 900px) {
  .desktop-nav { display:none; }
  .mobile-menu { display:block; }
  .mobile-menu summary { cursor:pointer; list-style:none; padding:11px 15px; border:1px solid var(--red); color:var(--red); font-size:12px; text-transform:uppercase; letter-spacing:.1em; }
  .mobile-menu nav { position:absolute; right:0; top:50px; display:grid; width:220px; padding:10px; color:var(--ink); background:#fff; box-shadow:0 15px 50px rgba(0,0,0,.25); }
  .mobile-menu nav a { padding:12px; }
  .story__grid,.vision__grid,.section-heading,.flywheel__content,.cta__inner { grid-template-columns:1fr; gap:55px; }
  .ecosystem-card { grid-template-columns:42px 78px 1fr; padding:28px 0; }
  .ecosystem-card__copy { grid-column:3; }
  .constellation { min-height:430px; }
  .footer__inner { grid-template-columns:1fr 1fr; }
  .footer__inner p { grid-column:1/-1; grid-row:2; }
}

@media (max-width: 620px) {
  .shell { width:min(100% - 32px,1150px); }
  .section-pad { padding:78px 0; }
  .site-header { height:92px; }
  .header-brand { gap:10px; }
  .header-brand__mark { width:70px; height:50px; }
  .header-brand__words strong { font-size:16px; }
  .header-brand__words small { font-size:8px; }
  .hero { min-height:760px; }
  .hero__content { padding:120px 0 100px; }
  .hero h1 { font-size:48px; }
  .hero__dek { font-size:17px; }
  .hero__actions { flex-direction:column; align-items:stretch; }
  .scroll-cue { right:18px; }
  .story__grid { gap:22px; }
  .story__copy { padding-top:0; }
  .vision__grid { gap:32px; }
  .constellation { justify-self:center; width:100%; max-width:360px; min-height:330px; margin:0; transform:none; }
  .constellation::before { inset:11% 8%; }
  .constellation__core { width:128px; height:128px; }
  .constellation__core img { width:92px; }
  .constellation__node { width:88px; height:88px; padding:8px; font-size:11px; line-height:1.2; }
  .constellation__node--knowledge { left:0; top:7%; }
  .constellation__node--community { left:7%; bottom:4%; }
  .constellation__node--ai { right:0; top:35%; }
  .constellation__line--a { left:24%; top:28%; width:29%; transform:rotate(25deg); }
  .constellation__line--b { left:27%; top:71%; width:27%; transform:rotate(-30deg); }
  .constellation__line--c { left:67%; top:50%; width:10%; }
  .ecosystem-card { grid-template-columns:34px 65px 1fr; gap:16px; }
  .ecosystem-card__copy { grid-column:1/-1; padding-left:0; }
  .system-icon,.system-icon img { width:58px; height:58px; }
  .ecosystem-card h3 { font-size:22px; }
  .flywheel__heading { margin-bottom:28px; }
  .flywheel__content { gap:40px; }
  .flywheel__figure figcaption strong { font-size:25px; }
  .flywheel__figure figcaption span { font-size:10px; }
  .flywheel-hotspot > span { max-width:180px; font-size:10px; }
  .contact-form__row { grid-template-columns:1fr; gap:20px; }
  .contact-form .button { width:100%; }
  .footer__inner { grid-template-columns:1fr; }
  .footer__inner > a { justify-self:start; }
  .footer__inner p { grid-row:auto; }
}

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