@font-face {
  font-family: "SuperIntuitive Sans";
  src: url("/media/fonts/roboto/Roboto-Regular.ttf") format("truetype");
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --night: #101827;
  --blue: #1479f2;
  --violet: #5a38e8;
  --cyan: #22c7d9;
  --cloud: #f4f7fb;
  --ink: #202838;
  --paper: #f4f7fb;
  --surface: #ffffff;
  --soft: #e7edf7;
  --text: #202838;
  --muted: #5e6b7d;
  --line: rgba(32, 40, 56, 0.15);
  --display: "Trebuchet MS", "Gill Sans", sans-serif;
  --body: "SuperIntuitive Sans", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #101827;
    --surface: #172337;
    --soft: #1b2941;
    --text: #f4f7fb;
    --muted: #b5c0d2;
    --line: rgba(244, 247, 251, 0.14);
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; color: var(--text); background: var(--paper); font-family: var(--body); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { max-width: 100%; }

.skip-link { position: fixed; top: -5rem; left: 1rem; z-index: 50; padding: 0.8rem 1rem; color: var(--cloud); background: var(--violet); font-size: 0.78rem; font-weight: 800; text-decoration: none; }
.skip-link:focus { top: 1rem; }

h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 900; letter-spacing: -0.075em; }
h1 { font-size: clamp(3.35rem, 7.2vw, 7.6rem); line-height: 0.88; }
h2 { font-size: clamp(2.35rem, 4.7vw, 5rem); line-height: 0.94; }
h3 { font-size: clamp(1.5rem, 2.3vw, 2.5rem); line-height: 1; }
em { color: var(--cyan); font-style: normal; }

.button, .game-button { display: inline-flex; align-items: center; justify-content: center; gap: 0.85rem; min-height: 3.15rem; padding: 0.82rem 1.1rem; border: 1px solid transparent; font-size: 0.7rem; font-weight: 900; letter-spacing: 0.09em; text-decoration: none; text-transform: uppercase; transition: box-shadow 180ms ease, transform 180ms ease, border-color 180ms ease; }
.button:hover, .button:focus-visible, .game-button:hover, .game-button:focus-visible { transform: translate(-0.15rem, -0.15rem); }
.button--brand { color: var(--cloud); background: linear-gradient(135deg, var(--blue), var(--violet)); }
.button--brand:hover, .button--brand:focus-visible { box-shadow: 0.35rem 0.35rem 0 var(--cyan); }
.quiet-link { display: inline-flex; align-items: center; gap: 0.6rem; padding-bottom: 0.35rem; border-bottom: 2px solid var(--blue); color: var(--text); font-size: 0.7rem; font-weight: 900; letter-spacing: 0.08em; text-decoration: none; text-transform: uppercase; transition: gap 180ms ease, border-color 180ms ease; }
.quiet-link:hover, .quiet-link:focus-visible { gap: 0.9rem; border-color: var(--cyan); }.quiet-link--light { color: var(--cloud); border-color: var(--cyan); }

.product-overline, .section-number, .game-overline, .game-section-label { margin: 0; font-size: 0.68rem; font-weight: 900; letter-spacing: 0.13em; line-height: 1.35; text-transform: uppercase; }
.product-overline, .game-overline { display: flex; align-items: center; gap: 0.62rem; color: var(--cyan); }.product-overline span, .game-overline span { width: 0.58rem; height: 0.58rem; background: linear-gradient(135deg, var(--blue), var(--violet)); transform: rotate(45deg); }.section-number { color: var(--blue); }.game-section-label { color: #80f3d8; }

/* SuperIntuitive */
.super-bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; min-height: 5.5rem; padding: 0.7rem clamp(1.25rem, 5vw, 5rem); border-bottom: 1px solid rgba(244, 247, 251, 0.11); background: rgba(16, 24, 39, 0.94); backdrop-filter: blur(16px); }.super-logo { display: inline-flex; line-height: 0; }.super-logo img { display: block; width: min(12rem, 44vw); height: auto; }.super-nav { display: flex; align-items: center; gap: clamp(1rem, 2.6vw, 2.4rem); margin-left: auto; }.super-nav a { color: rgba(244, 247, 251, 0.72); font-size: 0.69rem; font-weight: 900; letter-spacing: 0.08em; text-decoration: none; text-transform: uppercase; }.super-nav a:hover, .super-nav a:focus-visible { color: var(--cloud); }.super-nav .super-nav-action { padding: 0.75rem 0.9rem; color: var(--cloud); border: 1px solid rgba(34, 199, 217, 0.52); }
.super-hero { position: relative; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(22rem, 1.05fr); gap: clamp(2.5rem, 7vw, 7rem); align-items: center; min-height: min(46rem, calc(100vh - 5.5rem)); padding: clamp(5rem, 9vw, 8.5rem) clamp(1.25rem, 7vw, 7rem); overflow: hidden; color: var(--cloud); background: var(--night); }.super-hero::before { position: absolute; inset: 0; background-image: linear-gradient(rgba(244, 247, 251, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(244, 247, 251, 0.045) 1px, transparent 1px); background-size: 4rem 4rem; content: ""; mask-image: linear-gradient(to bottom, black, transparent); }.super-hero::after { position: absolute; top: -21rem; right: -14rem; width: 47rem; height: 47rem; border: 1px solid rgba(34, 199, 217, 0.28); border-radius: 50%; content: ""; }.super-hero-copy, .super-hero-shot { position: relative; z-index: 1; }.super-hero-copy h1 { max-width: 43rem; margin: 1rem 0 1.45rem; }.super-hero-copy > p:not(.product-overline) { max-width: 35rem; margin-bottom: 2rem; color: rgba(244, 247, 251, 0.75); font-size: clamp(1rem, 1.45vw, 1.18rem); line-height: 1.62; }.super-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; }.super-hero-shot { width: min(100%, 42rem); margin: 1rem auto 0; padding: 0.75rem; border: 1px solid rgba(244, 247, 251, 0.28); background: rgba(20, 38, 65, 0.9); box-shadow: 1.15rem 1.15rem 0 rgba(20, 121, 242, 0.32); transform: rotate(2.5deg); }.super-hero-shot img { display: block; width: 100%; aspect-ratio: 1.61; object-fit: cover; }.super-hero-shot figcaption { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 0.1rem 0; color: rgba(244, 247, 251, 0.7); font-size: 0.55rem; font-weight: 900; letter-spacing: 0.09em; }.super-hero-shot figcaption span:first-child { color: var(--cyan); }.super-hero-mark { position: absolute; right: -0.1em; bottom: -0.2em; z-index: 0; color: rgba(20, 121, 242, 0.13); font-family: var(--display); font-size: clamp(13rem, 25vw, 27rem); font-weight: 900; letter-spacing: -0.14em; line-height: 0.7; }
.proof-line { display: flex; align-items: center; justify-content: center; gap: clamp(0.75rem, 3vw, 2.7rem); min-height: 4rem; padding: 0.65rem 1rem; overflow: hidden; color: var(--cloud); background: linear-gradient(90deg, var(--blue), var(--violet)); white-space: nowrap; }.proof-line span { font-size: 0.69rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }.proof-line i { flex: 0 0 0.42rem; width: 0.42rem; height: 0.42rem; background: var(--cyan); transform: rotate(45deg); }
.super-intro { display: grid; grid-template-columns: 0.38fr 1fr; gap: clamp(2rem, 6vw, 6rem); padding: clamp(5rem, 10vw, 9rem) clamp(1.25rem, 8vw, 8rem) 3rem; }.super-intro h2 { max-width: 57rem; margin: 0 0 1.3rem; }.super-intro div > p { max-width: 38rem; margin: 0; color: var(--muted); font-size: 1.06rem; line-height: 1.62; }
.super-feature { display: grid; grid-template-columns: minmax(18rem, 0.95fr) minmax(18rem, 0.75fr); gap: clamp(2.5rem, 9vw, 9rem); align-items: center; padding: clamp(4.5rem, 8vw, 8rem) clamp(1.25rem, 8vw, 8rem); }.super-feature--reverse { grid-template-columns: minmax(18rem, 0.75fr) minmax(18rem, 0.95fr); background: var(--surface); }.super-feature--dark { color: var(--cloud); background: var(--night); }.screen-frame { margin: 0; padding: 0.7rem; border: 1px solid var(--line); background: var(--surface); box-shadow: 0.9rem 0.9rem 0 rgba(90, 56, 232, 0.16); }.screen-frame img { display: block; width: 100%; }.screen-frame--tilt { transform: rotate(-2deg); }.screen-frame--aqua { box-shadow: 0.9rem 0.9rem 0 rgba(34, 199, 217, 0.48); transform: rotate(2deg); }.screen-frame--dark { border-color: rgba(244, 247, 251, 0.23); background: #1b2a43; box-shadow: 0.9rem 0.9rem 0 rgba(20, 121, 242, 0.34); }.feature-copy { max-width: 38rem; }.feature-copy h2 { margin: 1rem 0 1.2rem; }.feature-copy > p:not(.section-number) { margin-bottom: 1.7rem; color: var(--muted); font-size: 1.03rem; line-height: 1.62; }.super-feature--dark .feature-copy > p:not(.section-number) { color: rgba(244, 247, 251, 0.7); }.feature-points { display: grid; gap: 0.65rem; margin: 0; padding: 0; list-style: none; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }.feature-points li::before { margin-right: 0.65rem; color: var(--blue); content: "+"; }.signal-list { display: flex; flex-wrap: wrap; gap: 0.55rem; }.signal-list span { padding: 0.58rem 0.65rem; border: 1px solid rgba(244, 247, 251, 0.26); color: var(--cyan); font-size: 0.63rem; font-weight: 900; letter-spacing: 0.07em; text-transform: uppercase; }
.super-workflow { padding: clamp(5rem, 9vw, 8rem) clamp(1.25rem, 8vw, 8rem); background: var(--soft); }.workflow-heading { display: grid; grid-template-columns: 0.38fr 1fr; gap: 2rem; }.workflow-heading h2 { margin: 0; }.workflow-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: clamp(3rem, 6vw, 5.5rem) 0 0; padding: 0; list-style: none; }.workflow-list li { position: relative; min-height: 15rem; padding: 4.25rem clamp(1.1rem, 2.6vw, 2.5rem) 1.5rem; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }.workflow-list li::before { position: absolute; top: 1.5rem; left: clamp(1.1rem, 2.6vw, 2.5rem); width: 2.2rem; height: 2px; background: linear-gradient(90deg, var(--blue), var(--violet)); content: ""; }.workflow-list li:first-child { border-left: 0; }.workflow-list b { display: block; margin-bottom: 0.65rem; font-family: var(--display); font-size: 1.45rem; letter-spacing: -0.05em; }.workflow-list p { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.55; }
.super-why { display: grid; grid-template-columns: minmax(18rem, 0.7fr) 1fr; gap: clamp(3rem, 9vw, 9rem); align-items: center; padding: clamp(5rem, 10vw, 9rem) clamp(1.25rem, 8vw, 8rem); }.why-symbol { position: relative; width: min(100%, 25rem); aspect-ratio: 1; margin: 0 auto; border: 1px solid var(--blue); border-radius: 50%; }.why-symbol::before, .why-symbol::after { position: absolute; border: 1px solid var(--violet); border-radius: 50%; content: ""; }.why-symbol::before { inset: 14% -10%; }.why-symbol::after { inset: -12% 20%; border-color: var(--cyan); }.why-symbol span { position: absolute; top: 50%; left: 50%; display: grid; width: 9rem; aspect-ratio: 1; place-items: center; color: var(--cloud); background: linear-gradient(135deg, var(--blue), var(--violet)); font-family: var(--display); font-size: 1.35rem; font-weight: 900; letter-spacing: -0.07em; line-height: 0.8; text-align: center; transform: translate(-50%, -50%) rotate(-11deg); }.why-copy { max-width: 42rem; }.why-copy h2 { margin: 1rem 0 1.25rem; }.why-copy p:last-child { margin: 0; color: var(--muted); font-size: 1.05rem; line-height: 1.62; }
.super-close { padding: clamp(5rem, 10vw, 9rem) clamp(1.25rem, 8vw, 8rem); color: var(--cloud); background: var(--night); }.super-close h2 { margin: 1rem 0 2rem; }.super-close h2 em { color: var(--cyan); }.super-close .quiet-link { color: var(--cloud); border-color: var(--cyan); }.super-footer { display: grid; grid-template-columns: 1fr auto auto; gap: 2rem; align-items: center; padding: 2.1rem clamp(1.25rem, 5vw, 5rem); color: var(--cloud); background: #0a101d; }.super-footer p { margin: 0; color: rgba(244, 247, 251, 0.64); font-size: 0.76rem; }.super-footer p:last-child { color: var(--cyan); font-size: 0.66rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }

/* Gameatude */
.game-page { --game-ink: #dce8e9; --game-muted: #97a9ad; --game-panel: #10191d; --game-panel-soft: #18262a; --game-line: rgba(220, 232, 233, 0.18); --game-cyan: #43e7e0; --game-green: #b6ee63; --game-orange: #f68a4c; background: #0c1316; color: var(--game-ink); }.game-bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; min-height: 4.8rem; padding: 0.7rem clamp(1.25rem, 4vw, 4.5rem); border-bottom: 1px solid rgba(220, 232, 233, 0.14); background: rgba(12, 19, 22, 0.88); backdrop-filter: blur(16px); }.game-wordmark { color: #f2fbfa; font-family: var(--display); font-size: 1.25rem; font-weight: 900; letter-spacing: -0.07em; text-decoration: none; }.game-wordmark span { color: var(--game-cyan); }.game-nav { display: flex; gap: clamp(1rem, 2.4vw, 2.2rem); margin: 0 auto; }.game-nav a, .game-text-action { color: rgba(220, 232, 233, 0.7); font-size: 0.67rem; font-weight: 900; letter-spacing: 0.08em; text-decoration: none; text-transform: uppercase; }.game-nav a:hover, .game-nav a:focus-visible, .game-text-action:hover, .game-text-action:focus-visible { color: var(--game-cyan); }.game-bar-actions { display: flex; align-items: center; gap: 1.2rem; }.game-main-action { padding: 0.72rem 0.85rem; color: #091417; background: var(--game-green); font-size: 0.67rem; font-weight: 900; letter-spacing: 0.08em; text-decoration: none; text-transform: uppercase; }.game-main-action:hover, .game-main-action:focus-visible { box-shadow: 0.25rem 0.25rem 0 var(--game-cyan); }
.game-hero { position: relative; min-height: min(51rem, calc(100vh - 4.8rem)); overflow: hidden; background: #0d141b; }.game-hero-image, .game-final > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }.game-hero-image { object-position: center; }.game-hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7, 13, 20, 0.97) 0%, rgba(7, 13, 20, 0.78) 32%, rgba(7, 13, 20, 0.12) 73%), linear-gradient(0deg, rgba(7, 13, 20, 0.72), transparent 45%); }.game-hero-copy { position: relative; z-index: 2; width: min(90%, 43rem); padding: clamp(7rem, 13vw, 11rem) 0 10rem clamp(1.25rem, 9vw, 10rem); }.game-hero h1 { margin: 1rem 0 1.5rem; color: #f3f9f7; }.game-hero h1 em { color: var(--game-cyan); }.game-hero-copy > p:not(.game-overline) { max-width: 32rem; margin-bottom: 2rem; color: rgba(220, 232, 233, 0.82); font-size: clamp(1rem, 1.4vw, 1.18rem); line-height: 1.62; }.game-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }.game-button--bright { color: #0c1518; background: var(--game-green); }.game-button--bright:hover, .game-button--bright:focus-visible { box-shadow: 0.36rem 0.36rem 0 var(--game-cyan); }.game-button--line { color: #eef9f6; border-color: rgba(220, 232, 233, 0.54); background: rgba(12, 19, 22, 0.2); }.game-button--line:hover, .game-button--line:focus-visible { border-color: var(--game-cyan); box-shadow: 0.28rem 0.28rem 0 rgba(67, 231, 224, 0.45); }.game-proof { position: absolute; right: clamp(1.25rem, 5vw, 5rem); bottom: 2.2rem; left: clamp(1.25rem, 5vw, 5rem); z-index: 2; display: flex; gap: 0.8rem; }.game-proof span { padding: 0.6rem 0.7rem; border: 1px solid rgba(220, 232, 233, 0.32); color: #e8f4f0; background: rgba(12, 19, 22, 0.46); font-size: 0.63rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.game-purpose { display: grid; grid-template-columns: 0.34fr 1fr; gap: clamp(2rem, 7vw, 7rem); padding: clamp(5rem, 10vw, 9rem) clamp(1.25rem, 9vw, 10rem) 3rem; background: #e9f0ec; color: #10191d; }.game-purpose h2 { max-width: 55rem; margin: 0 0 1.3rem; }.game-purpose p { max-width: 38rem; margin: 0; color: #465458; font-size: 1.05rem; line-height: 1.65; }.game-purpose .game-section-label { color: #1b7773; }
.game-path { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0; padding: 0 clamp(1.25rem, 5vw, 5rem) clamp(5rem, 9vw, 8rem); color: #10191d; background: #e9f0ec; }.game-path > div { position: relative; min-height: 15.5rem; padding: 4rem clamp(0.85rem, 2vw, 2rem) 1.3rem; border-top: 1px solid rgba(16, 25, 29, 0.2); border-left: 1px solid rgba(16, 25, 29, 0.2); }.game-path > div::before { position: absolute; top: 1.35rem; left: clamp(0.85rem, 2vw, 2rem); width: 1.8rem; height: 1.8rem; border: 1px solid #1b7773; border-radius: 50%; content: ""; }.game-path > div:first-child { border-left: 0; }.game-path b { display: block; margin-bottom: 0.6rem; font-family: var(--display); font-size: 1.35rem; letter-spacing: -0.05em; }.game-path p { margin: 0; color: #526063; font-size: 0.9rem; line-height: 1.56; }
.game-editor-section { display: grid; grid-template-columns: minmax(18rem, 0.75fr) minmax(26rem, 1.15fr); gap: clamp(2.5rem, 7vw, 7rem); align-items: center; padding: clamp(5rem, 10vw, 9rem) clamp(1.25rem, 8vw, 8rem); background: var(--game-panel); }.game-editor-copy { max-width: 36rem; }.game-editor-copy h2 { margin: 1rem 0 1.2rem; color: #f1f8f6; }.game-editor-copy p:not(.game-section-label) { color: var(--game-muted); font-size: 1.03rem; line-height: 1.62; }.game-detail-list { display: grid; gap: 0.6rem; margin: 1.7rem 0 0; padding: 0; list-style: none; color: #dce8e9; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase; }.game-detail-list li::before { margin-right: 0.62rem; color: var(--game-green); content: "+"; }.game-editor-image { margin: 0; overflow: hidden; border: 1px solid rgba(220, 232, 233, 0.28); background: #090d10; box-shadow: 0.95rem 0.95rem 0 rgba(67, 231, 224, 0.2); }.game-editor-image img { display: block; width: 100%; aspect-ratio: 1.56; object-fit: cover; }.game-editor-image figcaption { padding: 0.7rem 0.85rem; color: var(--game-green); background: #0b1114; font-size: 0.58rem; font-weight: 900; letter-spacing: 0.1em; }
.game-play-section { display: grid; grid-template-columns: minmax(20rem, 1fr) minmax(18rem, 0.72fr); gap: clamp(3rem, 9vw, 9rem); align-items: center; padding: clamp(5rem, 10vw, 9rem) clamp(1.25rem, 8vw, 8rem); background: #143038; }.game-play-visual { position: relative; min-height: 28rem; overflow: hidden; border: 1px solid rgba(220, 232, 233, 0.26); }.game-play-visual::after { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5, 13, 16, 0.66), transparent 55%); content: ""; }.game-play-visual img { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }.game-play-visual span { position: absolute; right: 1.2rem; bottom: 1rem; z-index: 1; color: var(--game-green); font-size: 0.65rem; font-weight: 900; letter-spacing: 0.1em; line-height: 1.1; text-align: right; }.game-play-copy { max-width: 36rem; }.game-play-copy h2 { margin: 1rem 0 1.2rem; color: #f3faf8; }.game-play-copy p:not(.game-section-label) { color: rgba(220, 232, 233, 0.78); font-size: 1.03rem; line-height: 1.62; }.game-tags { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.7rem; }.game-tags span { padding: 0.55rem 0.62rem; border: 1px solid rgba(220, 232, 233, 0.28); color: #dce8e9; font-size: 0.64rem; font-weight: 900; letter-spacing: 0.07em; text-transform: uppercase; }
.game-difference { padding: clamp(5rem, 10vw, 9rem) clamp(1.25rem, 8vw, 8rem); background: #eef3ef; color: #10191d; }.game-difference-heading { display: grid; grid-template-columns: 0.34fr 1fr; gap: 2rem; }.game-difference-heading h2 { margin: 0; }.game-difference-heading h2 em { color: #16857f; }.game-difference-heading .game-section-label { color: #1b7773; }.game-difference-lines { margin-top: clamp(3.5rem, 7vw, 6.5rem); }.game-difference-lines article { display: grid; grid-template-columns: 0.25fr 1fr 0.8fr; gap: 2rem; align-items: baseline; padding: 1.65rem 0; border-top: 1px solid rgba(16, 25, 29, 0.2); }.game-difference-lines article:last-child { border-bottom: 1px solid rgba(16, 25, 29, 0.2); }.game-difference-lines span { color: #1b7773; font-size: 0.68rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }.game-difference-lines b { font-family: var(--display); font-size: clamp(1.35rem, 2.2vw, 2.2rem); letter-spacing: -0.06em; line-height: 1; }.game-difference-lines p { margin: 0; color: #536164; font-size: 0.94rem; line-height: 1.55; }.game-difference-lines .difference-emphasis { color: #0c1518; background: var(--game-green); box-shadow: 0.8rem 0 0 var(--game-green), -0.8rem 0 0 var(--game-green); }.difference-emphasis span { color: #0c1518; }
.game-community { display: grid; grid-template-columns: minmax(18rem, 0.72fr) 1fr; gap: clamp(3rem, 9vw, 9rem); align-items: center; padding: clamp(5rem, 10vw, 9rem) clamp(1.25rem, 8vw, 8rem); background: #0c1316; }.community-orbit { position: relative; width: min(100%, 26rem); aspect-ratio: 1; margin: 0 auto; border: 1px solid var(--game-cyan); border-radius: 50%; }.community-orbit::before, .community-orbit::after { position: absolute; border: 1px solid var(--game-green); border-radius: 50%; content: ""; }.community-orbit::before { inset: 13% -12%; }.community-orbit::after { inset: -12% 17%; border-color: var(--game-orange); }.community-orbit span { position: absolute; top: 50%; left: 50%; display: grid; width: 9rem; aspect-ratio: 1; place-items: center; color: #0d1517; background: var(--game-green); font-family: var(--display); font-size: 1.25rem; font-weight: 900; letter-spacing: -0.06em; line-height: 0.8; text-align: center; transform: translate(-50%, -50%) rotate(-12deg); }.community-orbit i { position: absolute; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--game-cyan); box-shadow: 0 0 1.1rem var(--game-cyan); }.community-orbit i:nth-of-type(1) { top: 16%; left: 20%; }.community-orbit i:nth-of-type(2) { right: 16%; bottom: 24%; background: var(--game-orange); box-shadow: 0 0 1.1rem var(--game-orange); }.community-orbit i:nth-of-type(3) { right: 20%; top: 20%; background: var(--game-green); box-shadow: 0 0 1.1rem var(--game-green); }.community-copy { max-width: 42rem; }.community-copy h2 { margin: 1rem 0 1.3rem; color: #f2f9f6; }.community-copy p:not(.game-section-label) { margin-bottom: 1.8rem; color: var(--game-muted); font-size: 1.04rem; line-height: 1.62; }.game-text-link { display: inline-flex; gap: 0.6rem; padding-bottom: 0.35rem; border-bottom: 2px solid var(--game-cyan); color: #e7f4ef; font-size: 0.71rem; font-weight: 900; letter-spacing: 0.08em; text-decoration: none; text-transform: uppercase; }.game-text-link:hover, .game-text-link:focus-visible { gap: 0.9rem; border-color: var(--game-green); }
.game-final { position: relative; min-height: 36rem; overflow: hidden; }.game-final > img { object-position: 65% center; }.game-final-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7, 13, 20, 0.94), rgba(7, 13, 20, 0.52) 47%, rgba(7, 13, 20, 0.1)); }.game-final-copy { position: relative; z-index: 1; padding: clamp(6rem, 11vw, 9rem) clamp(1.25rem, 9vw, 10rem); }.game-final h2 { margin: 1rem 0 2rem; color: #f3faf8; }.game-final h2 em { color: var(--game-green); }.game-footer { display: grid; grid-template-columns: 1fr auto auto auto; gap: 2rem; align-items: center; padding: 2rem clamp(1.25rem, 5vw, 5rem); color: #dce8e9; background: #080d0f; }.game-footer p, .game-footer > a:not(.game-wordmark) { margin: 0; color: rgba(220, 232, 233, 0.62); font-size: 0.72rem; text-decoration: none; }.game-footer > a:not(.game-wordmark):hover, .game-footer > a:not(.game-wordmark):focus-visible { color: var(--game-cyan); }.game-footer p:last-child { color: var(--game-cyan); font-size: 0.64rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }

html.motion-ready [data-reveal] { opacity: 0; transform: translateY(1.6rem); transition: opacity 680ms ease, transform 680ms cubic-bezier(0.2, 0.75, 0.2, 1); transition-delay: var(--reveal-delay, 0ms); }html.motion-ready [data-reveal].is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: no-preference) { .why-symbol span, .community-orbit span { animation: slow-float 5s ease-in-out infinite; }.community-orbit::before { animation: slow-spin 18s linear infinite; }.community-orbit::after { animation: slow-spin 22s linear infinite reverse; } }@keyframes slow-float { 50% { margin-top: -0.65rem; } }@keyframes slow-spin { to { transform: rotate(360deg); } }

@media (max-width: 980px) {
  .super-hero, .super-feature, .super-feature--reverse, .super-why, .game-editor-section, .game-play-section, .game-community { grid-template-columns: 1fr; }.super-hero { min-height: auto; }.super-hero-copy { max-width: 44rem; }.super-hero-shot { max-width: 42rem; }.super-intro, .game-purpose, .game-difference-heading { grid-template-columns: 1fr; }.super-intro { gap: 1.5rem; }.game-purpose { gap: 1.5rem; }.super-workflow .workflow-heading { grid-template-columns: 1fr; }.workflow-list { grid-template-columns: 1fr; }.workflow-list li, .workflow-list li:first-child { min-height: 0; border-left: 0; }.game-path { grid-template-columns: 1fr; }.game-path > div, .game-path > div:first-child { min-height: 0; border-left: 0; }.game-editor-section { gap: 3rem; }.game-play-visual { max-width: 43rem; width: 100%; min-height: 25rem; }.game-play-copy { max-width: 42rem; }.game-difference-lines article { grid-template-columns: 0.23fr 1fr; }.game-difference-lines article p { grid-column: 2; max-width: 37rem; }.game-footer { grid-template-columns: 1fr auto; }.game-footer p:first-of-type { grid-column: 1 / span 2; }
}

@media (max-width: 660px) {
  h1 { font-size: clamp(3rem, 16.5vw, 4.6rem); }h2 { font-size: clamp(2.25rem, 12vw, 3.6rem); }.super-bar { min-height: 4.8rem; padding: 0.65rem 1.25rem; }.super-logo img { width: 10.2rem; }.super-nav { gap: 0.75rem; }.super-nav a { font-size: 0.58rem; }.super-nav a:first-child { display: none; }.super-nav .super-nav-action { padding: 0.62rem; }.super-hero { padding: 4.8rem 1.3rem; }.super-hero-copy > p:not(.product-overline) { font-size: 1rem; }.super-actions { align-items: flex-start; flex-direction: column; gap: 1rem; }.super-hero-shot { padding: 0.45rem; box-shadow: 0.65rem 0.65rem 0 rgba(20, 121, 242, 0.32); }.super-hero-shot figcaption { font-size: 0.46rem; }.super-hero-mark { font-size: 12rem; }.proof-line { justify-content: flex-start; }.proof-line span { font-size: 0.58rem; }.proof-line span:last-child, .proof-line i:last-of-type { display: none; }.super-intro, .super-feature, .super-workflow, .super-why, .super-close { padding-right: 1.3rem; padding-left: 1.3rem; }.super-intro div > p, .feature-copy > p:not(.section-number), .why-copy p:last-child { font-size: 1rem; }.screen-frame { padding: 0.4rem; box-shadow: 0.55rem 0.55rem 0 rgba(90, 56, 232, 0.16); }.super-feature--reverse { padding-right: 1.3rem; padding-left: 1.3rem; }.super-feature--dark { padding-right: 1.3rem; padding-left: 1.3rem; }.super-why { gap: 2.8rem; }.why-symbol { width: min(78vw, 20rem); }.super-footer { grid-template-columns: 1fr; gap: 0.7rem; padding: 2.1rem 1.3rem; }.super-footer p { font-size: 0.7rem; }
  .game-bar { min-height: 4.5rem; padding: 0.7rem 1.25rem; }.game-nav, .game-text-action { display: none; }.game-bar-actions { margin-left: auto; }.game-main-action { padding: 0.65rem 0.7rem; font-size: 0.58rem; }.game-hero { min-height: 42rem; }.game-hero-image { object-position: 62% center; }.game-hero-shade { background: linear-gradient(90deg, rgba(7, 13, 20, 0.93), rgba(7, 13, 20, 0.6) 60%, rgba(7, 13, 20, 0.12)), linear-gradient(0deg, rgba(7, 13, 20, 0.86), transparent 58%); }.game-hero-copy { width: 100%; padding: 6.4rem 1.3rem 10.5rem; }.game-hero-copy > p:not(.game-overline) { font-size: 1rem; }.game-proof { right: 1.3rem; bottom: 1.3rem; left: 1.3rem; flex-wrap: wrap; }.game-proof span { font-size: 0.55rem; }.game-purpose, .game-editor-section, .game-play-section, .game-difference, .game-community { padding-right: 1.3rem; padding-left: 1.3rem; }.game-purpose p, .game-editor-copy p:not(.game-section-label), .game-play-copy p:not(.game-section-label), .community-copy p:not(.game-section-label) { font-size: 1rem; }.game-path { padding-right: 1.3rem; padding-left: 1.3rem; }.game-editor-image { box-shadow: 0.55rem 0.55rem 0 rgba(67, 231, 224, 0.2); }.game-play-visual { min-height: 20rem; }.game-difference-lines { margin-top: 3.4rem; }.game-difference-lines article { grid-template-columns: 1fr; gap: 0.8rem; }.game-difference-lines article p { grid-column: auto; }.game-difference-lines .difference-emphasis { box-shadow: 0.45rem 0 0 var(--game-green), -0.45rem 0 0 var(--game-green); }.game-community { gap: 2.8rem; }.community-orbit { width: min(78vw, 20rem); }.game-final { min-height: 31rem; }.game-final > img { object-position: 63% center; }.game-final-copy { padding: 5rem 1.3rem; }.game-footer { grid-template-columns: 1fr; gap: 0.7rem; padding: 2rem 1.3rem; }.game-footer p:first-of-type { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }html.motion-ready [data-reveal] { opacity: 1; transform: none; transition: none; }.why-symbol span, .community-orbit span, .community-orbit::before, .community-orbit::after { animation: none; }.button, .game-button, .quiet-link { transition: none; } }

/* Product directory */
.directory-page { min-height: 100vh; background: var(--paper); }.directory-bar { display: flex; align-items: center; justify-content: space-between; min-height: 4.2rem; padding: 0.7rem clamp(1.25rem, 5vw, 5rem); border-bottom: 1px solid var(--line); }.directory-bar p { margin: 0; color: var(--muted); font-size: 0.64rem; font-weight: 900; letter-spacing: 0.11em; text-transform: uppercase; }.directory-bar nav { display: flex; gap: clamp(1rem, 2.5vw, 2.4rem); }.directory-bar a { color: var(--text); font-size: 0.66rem; font-weight: 900; letter-spacing: 0.08em; text-decoration: none; text-transform: uppercase; }.directory-bar a:hover, .directory-bar a:focus-visible { color: var(--blue); }
.directory-hero { display: grid; min-height: min(37rem, 66vh); align-items: end; padding: clamp(5rem, 10vw, 9rem) clamp(1.25rem, 9vw, 10rem); background: var(--paper); }.directory-hero > div { max-width: 54rem; }.directory-overline { display: flex; align-items: center; gap: 0.6rem; margin: 0; color: var(--blue); font-size: 0.69rem; font-weight: 900; letter-spacing: 0.13em; text-transform: uppercase; }.directory-overline span { width: 0.6rem; height: 0.6rem; background: linear-gradient(135deg, var(--blue), var(--violet)); transform: rotate(45deg); }.directory-hero h1 { margin: 1rem 0 1.35rem; color: var(--text); }.directory-hero h1 em { color: var(--violet); }.directory-hero p:last-child { max-width: 35rem; margin: 0; color: var(--muted); font-size: 1.05rem; line-height: 1.62; }
.directory-products { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; padding: 0 clamp(1.25rem, 5vw, 5rem) clamp(5rem, 10vw, 9rem); background: var(--night); }.directory-product { position: relative; min-height: 43rem; padding: clamp(1.6rem, 4vw, 3.7rem); overflow: hidden; }.directory-product--super { color: var(--night); background: #dfe9f7; }.directory-product--game { color: #edf8f5; background: #0c1316; }.directory-product-top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding-bottom: 0.85rem; border-bottom: 1px solid currentColor; font-size: 0.6rem; font-weight: 900; letter-spacing: 0.1em; }.directory-product-top a { display: grid; width: 2rem; aspect-ratio: 1; place-items: center; border: 1px solid currentColor; color: inherit; font-size: 0.95rem; text-decoration: none; }.directory-product-top a:hover, .directory-product-top a:focus-visible { color: var(--blue); background: var(--cloud); }.directory-super-logo { position: relative; z-index: 2; width: min(13rem, 70%); margin-top: 4.5rem; padding: 0.25rem; background: var(--night); line-height: 0; }.directory-super-logo img { display: block; width: 100%; height: auto; }.directory-game-logo { position: relative; z-index: 2; margin-top: 5rem; color: #f3faf8; font-family: var(--display); font-size: clamp(2.7rem, 5.3vw, 5rem); font-weight: 900; letter-spacing: -0.09em; }.directory-game-logo span { color: var(--game-cyan); }.directory-product h2 { position: relative; z-index: 2; max-width: 29rem; margin: 1.5rem 0 1rem; font-size: clamp(2.2rem, 4vw, 4.2rem); }.directory-product p { position: relative; z-index: 2; max-width: 26rem; margin-bottom: 1.6rem; color: #526178; font-size: 1rem; line-height: 1.58; }.directory-product--game p { color: rgba(220, 232, 233, 0.72); }.directory-link { position: relative; z-index: 2; display: inline-flex; gap: 0.6rem; padding-bottom: 0.35rem; border-bottom: 2px solid var(--blue); color: var(--night); font-size: 0.7rem; font-weight: 900; letter-spacing: 0.08em; text-decoration: none; text-transform: uppercase; }.directory-link:hover, .directory-link:focus-visible { gap: 0.95rem; border-color: var(--cyan); }.directory-link--game { border-color: var(--game-cyan); color: #f1faf7; }.directory-super-image { position: absolute; right: -3%; bottom: -3%; width: 82%; border: 0.55rem solid var(--cloud); box-shadow: 0.75rem 0.75rem 0 rgba(90, 56, 232, 0.32); transform: rotate(-4deg); }.directory-game-image { position: absolute; right: 0; bottom: 0; left: 0; width: 100%; height: 45%; object-fit: cover; object-position: 70% center; mask-image: linear-gradient(to bottom, transparent, black 24%); }.directory-closing { display: grid; grid-template-columns: 1fr minmax(16rem, 2fr) 1fr; align-items: center; gap: 1rem; padding: clamp(4rem, 8vw, 7rem) clamp(1.25rem, 8vw, 8rem); color: var(--cloud); background: var(--night); }.directory-closing span { display: block; height: 1px; background: rgba(244, 247, 251, 0.26); }.directory-closing p { margin: 0; font-family: var(--display); font-size: clamp(1.6rem, 3vw, 3rem); font-weight: 900; letter-spacing: -0.06em; line-height: 1.05; text-align: center; }.directory-footer { display: flex; justify-content: space-between; gap: 1rem; padding: 1.8rem clamp(1.25rem, 5vw, 5rem); color: rgba(244, 247, 251, 0.6); background: #0a101d; }.directory-footer p { margin: 0; font-size: 0.68rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }

@media (prefers-color-scheme: dark) { .directory-product--super { color: var(--cloud); background: #172744; }.directory-product--super p { color: #c3d0e5; }.directory-super-image { border-color: #eff5fc; } }

@media (max-width: 800px) { .directory-products { grid-template-columns: 1fr; padding-right: 1.3rem; padding-left: 1.3rem; }.directory-product { min-height: 36rem; }.directory-hero { min-height: 29rem; }.directory-closing { grid-template-columns: 1fr; }.directory-closing span, .directory-closing span:last-child { display: none; }.directory-closing p { text-align: left; } }

@media (max-width: 660px) { .directory-bar { padding: 0.9rem 1.3rem; }.directory-bar p { display: none; }.directory-bar nav { width: 100%; justify-content: space-between; }.directory-hero { min-height: 27rem; padding: 4.6rem 1.3rem; }.directory-hero p:last-child { font-size: 1rem; }.directory-product { min-height: 34rem; padding: 1.5rem; }.directory-super-logo { margin-top: 3.5rem; }.directory-game-logo { margin-top: 4rem; }.directory-product h2 { margin-top: 1.2rem; }.directory-super-image { width: 85%; }.directory-closing { padding: 4rem 1.3rem; }.directory-footer { padding: 1.6rem 1.3rem; } }

/* Gameatude signature treatment */
.game-wordmark { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 1.45rem; letter-spacing: -0.075em; }.game-wordmark span { color: #f2fbfa; }.game-wordmark i, .directory-game-logo i { position: relative; display: inline-block; width: 1.12rem; height: 1.12rem; border: 2px solid var(--game-cyan); border-radius: 50%; box-shadow: 0 0 1rem rgba(67, 231, 224, 0.4); }.game-wordmark i::before, .directory-game-logo i::before { position: absolute; top: 50%; left: 50%; width: 0.36rem; height: 0.36rem; border-radius: 50%; background: var(--game-green); content: ""; transform: translate(-50%, -50%); }.game-wordmark i::after, .directory-game-logo i::after { position: absolute; top: -0.32rem; right: -0.32rem; width: 0.38rem; height: 0.38rem; border-radius: 50%; background: var(--game-orange); content: ""; }
.directory-product--game { isolation: isolate; background: #091317; }.directory-product--game::before { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(7, 14, 17, 0.96) 0%, rgba(7, 14, 17, 0.76) 47%, rgba(7, 14, 17, 0.12) 100%), linear-gradient(0deg, rgba(7, 14, 17, 0.72), transparent 53%); content: ""; }.directory-product--game::after { position: absolute; top: -9rem; left: -9rem; z-index: 1; width: 23rem; height: 23rem; border: 1px solid rgba(67, 231, 224, 0.25); border-radius: 50%; content: ""; }.directory-product-top--game, .directory-product--game .directory-game-logo, .directory-product--game h2, .directory-product--game p, .directory-product--game .directory-link { z-index: 2; }.directory-product-top--game { border-color: rgba(220, 232, 233, 0.36); color: rgba(220, 232, 233, 0.72); }.directory-game-logo { display: inline-flex; align-items: center; gap: 0.8rem; margin-top: 4.4rem; color: #f3faf8; font-family: var(--display); font-size: clamp(2.45rem, 4.6vw, 4.5rem); font-weight: 900; letter-spacing: -0.095em; }.directory-game-logo span { color: #f3faf8; }.directory-game-logo i { width: 1.6rem; height: 1.6rem; }.directory-game-logo i::before { width: 0.5rem; height: 0.5rem; }.directory-game-logo i::after { width: 0.48rem; height: 0.48rem; }.directory-product--game h2 { max-width: 23rem; margin-top: 1.35rem; }.directory-product--game p { max-width: 23rem; }.directory-game-image { z-index: 0; width: 100%; height: 100%; object-position: 64% center; mask-image: none; opacity: 0.87; }

@media (max-width: 660px) { .directory-game-logo { margin-top: 3.5rem; }.directory-product--game::after { top: -12rem; left: -13rem; }.game-wordmark { font-size: 1.25rem; } }

/* A quieter, image-led Gameatude entrance. */
.game-hero-name { position: absolute; top: clamp(1.6rem, 4vw, 4rem); right: clamp(1.25rem, 5vw, 5rem); z-index: 1; margin: 0; color: rgba(220, 232, 233, 0.16); font-family: var(--display); font-size: clamp(3rem, 8vw, 9rem); font-weight: 900; letter-spacing: -0.1em; line-height: 0.8; }.game-proof { gap: clamp(1rem, 3vw, 3rem); }.game-proof span { position: relative; padding: 0 0 0 0.95rem; border: 0; color: rgba(232, 244, 240, 0.84); background: transparent; }.game-proof span::before { position: absolute; top: 50%; left: 0; width: 0.34rem; height: 0.34rem; border-radius: 50%; background: var(--game-green); box-shadow: 0 0 0.7rem var(--game-green); content: ""; transform: translateY(-50%); }.directory-product-top--game > span { display: block; width: 3rem; height: 1px; background: var(--game-cyan); box-shadow: 1rem 0 0 rgba(182, 238, 99, 0.55); }

@media (max-width: 660px) { .game-hero-name { top: 1.6rem; right: 1.3rem; font-size: 3.4rem; }.game-proof span { padding-left: 0.8rem; } }