/* The look follows xnoise.au: black and white, #ff9800 accent, Outfit, and the
   slowly turning wireframe dodecahedrons in the dark sections. */

:root {
  --accent: #ff9800;
  --ease: cubic-bezier(0, 0, .3642, 1);
  --muted: hsla(0, 0%, 100%, .9);
  --soft: hsla(0, 0%, 100%, .4);
  --line: hsla(0, 0%, 100%, .1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: Outfit, sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 150%;
  color: rgba(0, 0, 0, .5);
  background: #fff;
}

h1, h2, h5, h6 { margin: 0; font-weight: 500; line-height: 120%; color: #000; }
h1 { font-size: 86px; }
h2 { font-size: 68px; }
h5 { font-size: 22px; }
h6 { font-size: 18px; line-height: 150%; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }

.thin { font-weight: 100; }
.muted { color: var(--muted); }
.light-soft { color: var(--soft); }
.no-wrap { white-space: nowrap; }

.container { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 30px; }

.dark { position: relative; background: #000; overflow: hidden; }

/* Header bar */
.frame {
  position: fixed; inset: 0 0 auto; z-index: 10;
  height: 90px; padding: 0 60px;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(0, 0, 0, .95);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(8px);
}
.logo { font-size: 36px; font-weight: 500; line-height: 100%; color: #fff; }
.frame .link { color: var(--muted); }

/* Links and buttons */
.link {
  display: inline-flex; align-items: center;
  font-weight: 500; font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
}
.link svg {
  margin-left: 15px; width: 40px; height: 40px; padding: 10px;
  border-radius: 50%; background: var(--line); fill: #fff;
  transition: .4s var(--ease);
}
.link:hover svg { transform: scale(1.15); }

.button {
  display: inline-flex; align-items: center; justify-content: center;
  height: 70px; padding: 0 15px 0 50px; border-radius: 70px;
  background: var(--accent); color: #000;
  font-weight: 500; font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
  transition: .4s var(--ease);
}
.button span { white-space: nowrap; }
.button svg {
  margin-left: 30px; width: 40px; height: 40px; padding: 10px;
  border-radius: 50%; background: #000; fill: var(--accent);
  transition: .4s var(--ease);
}
.button:hover { transform: scale(1.015); filter: brightness(110%); }
.button:hover svg { transform: scale(1.15); }
.button svg.down { transform: rotate(90deg); }
.button:hover svg.down { transform: scale(1.15) rotate(90deg); }
.button.icon-sm { height: 40px; padding: 0; }
.button.icon-sm svg { margin: 0; background: var(--accent); fill: #000; }

/* Banner */
.banner { height: 100vh; min-height: 640px; max-height: 1100px; display: flex; align-items: flex-end; }
.gradient {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 120%, rgba(255, 152, 0, .12), transparent 60%);
}
.banner-content { position: relative; z-index: 1; padding-bottom: 120px; }
.banner h1 { margin-bottom: 60px; }
.banner .lead { max-width: 520px; margin-bottom: 60px; }
.banner .button { margin-right: 50px; }

/* Wireframe dodecahedrons. shapes.js builds the 12 pentagons inside each one. */
.shapes { position: absolute; inset: 0; pointer-events: none; }
.shape { position: absolute; width: 300px; height: 300px; opacity: .2; }
.pos-1 { top: 100px; right: 100px; }
.pos-2 { top: -60px; left: 15%; }
.pos-3 { bottom: -100px; right: 35%; }
.dodecahedron {
  position: relative; left: 100px; top: 40px; width: 100px; height: 223px;
  transform-style: preserve-3d;
  animation: rotate 100s linear infinite;
}
.pos-2 .dodecahedron { animation-delay: -.5s; }
.pos-3 .dodecahedron { animation-delay: -1s; }
.pentagon { position: absolute; width: 100px; }
.pentagon div { position: absolute; width: 100px; height: 69px; transform-origin: bottom; border-top: 1px solid #fff; }
.pos-1 .pentagon div { border-top-width: .1px; }
.pentagon div:nth-child(1) { transform: rotate(72deg); }
.pentagon div:nth-child(2) { transform: rotate(.4turn); }
.pentagon div:nth-child(3) { transform: rotate(.6turn); }
.pentagon div:nth-child(4) { transform: rotate(.8turn); }
.pentagon div:nth-child(5) { transform: rotate(1turn); }
.pentagon:nth-child(1)  { transform: rotateY(72deg) translateZ(69px) rotateX(26.5deg); }
.pentagon:nth-child(2)  { transform: rotateY(.4turn) translateZ(69px) rotateX(26.5deg); }
.pentagon:nth-child(3)  { transform: rotateY(.6turn) translateZ(69px) rotateX(26.5deg); }
.pentagon:nth-child(4)  { transform: rotateY(.8turn) translateZ(69px) rotateX(26.5deg); }
.pentagon:nth-child(5)  { transform: rotateY(1turn) translateZ(69px) rotateX(26.5deg); }
.pentagon:nth-child(6)  { bottom: 0; transform: rotateY(72deg) translateZ(-69px) rotateX(206.5deg); }
.pentagon:nth-child(7)  { bottom: 0; transform: rotateY(.4turn) translateZ(-69px) rotateX(206.5deg); }
.pentagon:nth-child(8)  { bottom: 0; transform: rotateY(.6turn) translateZ(-69px) rotateX(206.5deg); }
.pentagon:nth-child(9)  { bottom: 0; transform: rotateY(.8turn) translateZ(-69px) rotateX(206.5deg); }
.pentagon:nth-child(10) { bottom: 0; transform: rotateY(1turn) translateZ(-69px) rotateX(206.5deg); }
.pentagon:nth-child(11) { transform: translateZ(69px) rotateX(-90deg); }
.pentagon:nth-child(12) { bottom: 0; transform: translateZ(-69px) rotateX(90deg); }

@keyframes rotate {
  from { transform: rotateX(0deg) rotateY(1turn) rotate(1turn); }
  to   { transform: rotateX(1turn) rotateY(0deg) rotate(-1turn); }
}

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

/* App cards */
.apps-head { padding-top: 120px; padding-bottom: 60px; }
.suptitle { position: relative; display: block; margin-bottom: 60px; text-align: right; }
.apps-head h2 { text-align: center; }

.apps-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
  margin-bottom: 120px;
}
.app-card {
  position: relative; display: flex; flex-direction: column;
  padding: 60px 30px;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.app-card:before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 0; height: 4px; background: var(--accent);
  transition: .6s var(--ease);
}
.app-card:hover:before, .app-card:focus-visible:before { width: 100%; }
.app-card h5 { margin-bottom: 30px; }
.app-card p { margin-bottom: 30px; flex: 1; }
.app-card .button { align-self: flex-start; transform: scale(.6); transform-origin: left; filter: grayscale(100%); opacity: .4; }
.app-card:hover .button, .app-card:focus-visible .button { transform: scale(1); filter: none; opacity: 1; }
.label {
  margin-bottom: 30px;
  font-weight: 500; font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--accent);
}

/* Light section */
.light .split {
  display: flex; justify-content: space-between; align-items: center; gap: 60px;
  padding-top: 120px; padding-bottom: 120px;
}
.light .text { max-width: 460px; }
.light .text p { margin-bottom: 30px; }

/* Footer */
footer .footer-top, footer .footer-bottom {
  display: flex; justify-content: space-between; gap: 60px;
}
footer .footer-top { padding-top: 120px; padding-bottom: 60px; }
footer .footer-bottom { align-items: flex-end; padding-bottom: 60px; }
footer .logo { margin-bottom: 30px; }
footer h6 { margin-bottom: 30px; }
.footer-menu { display: flex; flex-direction: column; gap: 15px; }
.footer-menu a { font-size: 22px; font-weight: 500; color: var(--muted); transition: .4s var(--ease); }
.footer-menu a:hover { color: var(--accent); transform: translateX(10px); }

@media (max-width: 1200px) {
  h1 { font-size: 72px; }
  h2 { font-size: 56px; }
  .apps-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 992px) {
  h1 { font-size: 58px; }
  h2 { font-size: 44px; }
  .frame { padding: 0 30px; }
  .pos-2, .pos-3 { display: none; }
  .light .split { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 768px) {
  h1 { font-size: 42px; }
  h1 br { display: none; }
  h2 { font-size: 36px; }
  .logo { font-size: 28px; }
  .frame .link span { display: none; }
  .banner-content { padding-bottom: 90px; }
  .banner .button { margin: 0 0 30px; display: flex; width: fit-content; }
  .suptitle { text-align: center; }
  .apps-grid { grid-template-columns: 1fr; margin-bottom: 90px; }
  .app-card .button { transform: none; filter: none; opacity: 1; }
  footer .footer-top, footer .footer-bottom { flex-direction: column; }
}

/* ---------------------------------------------------------------- app intro pages */

.banner.inner { height: auto; min-height: 0; max-height: none; padding-top: 200px; }
.banner.inner .banner-content { padding-bottom: 120px; }
.banner .label { display: block; margin-bottom: 30px; }
.banner.inner h1 { margin-bottom: 40px; }
.banner.inner .lead { max-width: 640px; }

.section-head { padding-top: 120px; padding-bottom: 60px; }
.section-head h2 { max-width: 900px; }

.features {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
  margin-bottom: 120px;
}
.feature {
  position: relative; padding: 60px 30px;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.feature:before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 0; height: 4px; background: var(--accent);
  transition: .6s var(--ease);
}
.feature:hover:before { width: 100%; }
.feature h5 { margin-bottom: 20px; }

.workflow {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 60px 30px;
  padding-bottom: 120px;
}
.workflow .label { display: block; margin-bottom: 20px; }
.workflow h5 { margin-bottom: 15px; }

.access { display: flex; justify-content: space-between; gap: 60px; padding-top: 120px; padding-bottom: 120px; }
.access .text { max-width: 620px; }
.access .text p { margin-bottom: 30px; }
.access ol { margin: 0 0 60px; padding: 0; list-style: none; counter-reset: step; }
.access li {
  position: relative; padding: 20px 0 20px 60px;
  border-bottom: 1px solid var(--line); counter-increment: step;
}
.access li:first-child { border-top: 1px solid var(--line); }
.access li:before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 20px;
  font-weight: 500; font-size: 12px; letter-spacing: 2px; color: var(--accent);
}
.access li strong { color: var(--muted); font-weight: 500; }
.access .button { margin: 0 40px 20px 0; }
.note { padding: 20px 30px; border-left: 4px solid var(--accent); background: hsla(0, 0%, 100%, .04); }

@media (max-width: 1200px) {
  .features { grid-template-columns: repeat(2, 1fr); }
  .workflow { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 992px) {
  .access { flex-direction: column; }
}

@media (max-width: 768px) {
  .banner.inner { padding-top: 150px; }
  .banner.inner .banner-content { padding-bottom: 90px; }
  .features, .workflow { grid-template-columns: 1fr; }
  .features { margin-bottom: 90px; }
  .section-head { padding-top: 90px; }
  .access { padding-top: 90px; padding-bottom: 90px; }
}
.text-link { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* On phones the shapes cross the banner text, so they go. */
@media (max-width: 768px) {
  .shapes { display: none; }
}