@font-face {
  font-family:Roboto Flex;
  src:url('assets/roboto-flex.ttf') format('truetype');
  font-weight:100 1000;
  font-display:swap;
}

@font-face {
  font-family:Roboto Mono;
  src:url('assets/roboto-mono.ttf') format('truetype');
  font-weight:400;
  font-display:swap;
}

:root {
  color-scheme:dark;
  --bg:#0e0e0e;
  --surface:#191919;
  --border:#363636;
  --text:#f7f7f7;
  --muted:#b8b8b8;
  --blue:#3d82f2;
  --green:#1fa653;
  --red:#e43d39;
  --yellow:#e0b400;
}

* {
  box-sizing:border-box;
}

#bg-animation {
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  z-index:-1;
  pointer-events:none;
}

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Roboto Flex',Arial,sans-serif;
  font-optical-sizing:auto;
  font-weight:300;
  font-size:18px;
  line-height:1.4;
}

h1,h2,h3,p,figure,dl,dd {
  margin:0;
}

h1,h2 {
  font-weight:300;
}

h2 {
  font-size:40px;
  line-height:1.1;
}

h3 {
  font-size:24px;
  line-height:1.4;
  font-weight:300;
}

a {
  color:var(--blue);
  text-underline-offset:2px;
}

a:focus-visible {
  outline:3px solid #f7f7f7;
  outline-offset:5px;
}

img {
  display:block;
  max-width:100%;
}

.container {
  width:calc(100% - 192px);
  max-width:1248px;
  margin-inline:auto;
}

.brand {
  width:64px;
  height:64px;
}

.hero {
  padding:96px 0;
  border-bottom:1px solid #525252;
}

.hero-grid {
  display:grid;
  grid-template-columns:644px 506px;
  justify-content:space-between;
  gap:40px;
}

.hero-copy h1 {
  font-size:48px;
  line-height:1.2;
  margin-top:24px;
}

.lead {
  font-size:24px;
  line-height:1.4;
  color:var(--muted);
  margin-top:24px;
}

.event-details {
  display:flex;
  gap:64px;
  margin:64px 0;
}

.event-details dt {
  font-family:'Roboto Mono',monospace;
  font-size:16px;
  line-height:1.5;
  color:#808080;
  margin-bottom:8px;
}

.event-details dd {
  font-size:18px;
  line-height:1.4;
  white-space:nowrap;
}

.button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  min-height:60px;
  padding:16px 24px;
  border-radius:16px;
  border:1px solid transparent;
  color:#080808;
  font-size:18px;
  line-height:1.4;
  text-decoration:none;
  transition:background-color .2s,color .2s,border-color .2s,filter .15s;
}

.button-blue {
  background:var(--blue);
}

.button-blue:hover {
  background:#0e0e0e;
  color:#3d82f2;
  border-color:#3d82f2;
}

.button-green {
  background:var(--green);
}

.button-green:hover {
  background:#0e0e0e;
  color:#25a854;
  border-color:#25a854;
}

.chart {
  align-self:start;
  padding:40px;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--surface);
  font-family:'Roboto Mono',monospace;
  font-size:16px;
  line-height:1.5;
  color:var(--muted);
}

.chart-labels,.chart-years {
  display:flex;
  justify-content:space-between;
}

.google-gradient {
  background:linear-gradient(90deg,#e43d39,#3d82f2,#1fa653,#e0b400);
  color:transparent;
  background-clip:text;
}

.chart-lines {
  width:100%;
  height:275px;
  display:block;
  margin-top:24px;
  overflow:visible;
}

.chart-line {
  --len:600;
  stroke-dasharray:var(--len);
  stroke-dashoffset:var(--len);
  animation:chart-line-draw 2.5s cubic-bezier(0.16,1,0.3,1) 1 both;
}

.chart-marker {
  offset-distance:0%;
  offset-rotate:0deg;
  animation:chart-marker-move 2.5s cubic-bezier(0.16,1,0.3,1) 1 both;
}

.chart-marker-search {
  offset-path:path("M0,7 C90.6,28.8 151,83.2 211.6,137.9 C272.1,192.5 332.9,247.3 424,269.6");
}

.chart-marker-discover {
  offset-path:path("M0,269.6 C91.6,247.3 152.4,192.5 212.9,137.9 C273.5,83.2 333.9,28.8 424,7");
}

@keyframes chart-line-draw {
  0% {
    stroke-dashoffset:var(--len);
  }
  100% {
    stroke-dashoffset:0;
  }
}

@keyframes chart-marker-move {
  0% {
    offset-distance:0%;
  }
  100% {
    offset-distance:100%;
  }
}

.chart-years {
  border-top:1px solid #525252;
  padding-top:8px;
  margin-top:16px;
  color:#808080;
}

.chart figcaption {
  margin-top:40px;
}

@media(max-width:1439px) {
  .container {
    width:calc(100% - 96px);
  }
  .hero-grid {
    grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  }
  .hero-copy h1 {
    font-size:40px;
  }
  .desktop-break {
    display:none;
  }
  .event-details {
    gap:24px;
    flex-wrap:wrap;
  }
  .chart {
    padding:28px;
  }
}

@media(max-width:760px) {
  .container {
    width:calc(100% - 40px);
  }
  .hero {
    padding:48px 0;
  }
  .hero-grid {
    grid-template-columns:1fr;
    gap:40px;
  }
  .hero-copy h1 {
    font-size:36px;
  }
  .lead {
    font-size:20px;
  }
  .event-details {
    margin:32px 0;
    gap:24px 32px;
  }
  .chart {
    width:100%;
  }
  h2 {
    font-size:30px;
  }
  .brand {
    width:56px;
    height:56px;
  }
}

.story {
  padding:96px 0;
}

.story-list {
  display:grid;
  gap:80px;
}

.story-row {
  display:grid;
  grid-template-columns:644px 508px;
  justify-content:space-between;
  gap:40px;
}

.story-copy {
  font-size:24px;
  line-height:1.4;
  color:var(--muted);
}

.story-copy>p+p {
  margin-top:40px;
}

.story-copy strong {
  font-weight:300;
  color:var(--text);
}

.story-art {
  width:508px;
  height:auto;
  align-self:start;
}

.story-art-group {
  display:flex;
  flex-direction:column;
  gap:24px;
  align-self:start;
}

.demo-cursor {
  position:relative;
  display:block;
  max-width:100%;
}

.demo-cursor__bg {
  display:block;
  width:100%;
  height:auto;
}

.demo-cursor__fx {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}

.demo-cursor__rect-fill {
  opacity:1;
  animation:demo-rect-fill 1.5s ease-in-out infinite alternate;
}

.demo-cursor__finger-lines {
  opacity:1;
}

.demo-cursor__icon {
  opacity:1;
}

.demo-cursor__icon-bg {
  animation:demo-icon-bg-color 1.5s ease-in-out infinite alternate;
}

.demo-cursor__icon-glyph--link {
  animation:demo-icon-link 1.5s ease-in-out infinite alternate;
}

.demo-cursor__icon-glyph--check {
  opacity:0;
  animation:demo-icon-check 1.5s ease-in-out infinite alternate;
}

.demo-cursor__hand {
  transform:translateY(-45px);
  animation:demo-hand-glow 1.5s ease-in-out infinite alternate;
}

@keyframes demo-rect-fill {
  0% {
    fill:#181818;
    filter:drop-shadow(0 0 8px rgba(61,130,242,0.9));
  }
  100% {
    fill:#3D82F2;
    filter:drop-shadow(0 0 0 rgba(61,130,242,0));
  }
}

@keyframes demo-icon-bg-color {
  0% {
    fill:#3D82F2;
  }
  100% {
    fill:#0E0E0E;
  }
}

@keyframes demo-icon-link {
  0% {
    opacity:1;
  }
  50%,100% {
    opacity:0;
  }
}

@keyframes demo-icon-check {
  0%,50% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@keyframes demo-hand-glow {
  0% {
    filter:drop-shadow(0 0 8px rgba(61,130,242,0.9));
  }
  100% {
    filter:drop-shadow(0 0 0 rgba(61,130,242,0));
  }
}

.demo-cursor2 {
  position:relative;
  display:block;
  max-width:100%;
}

.demo-cursor2__bg {
  display:block;
  width:100%;
  height:auto;
}

.demo-cursor2__fx {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}

.demo-cursor2__circle {
  animation:demo2-circle-fill 1.5s ease-in-out infinite alternate;
}

.demo-cursor2__icon-glyph--link {
  animation:demo2-icon-link 1.5s ease-in-out infinite alternate;
}

.demo-cursor2__icon-glyph--cross {
  opacity:0;
  animation:demo2-icon-cross 1.5s ease-in-out infinite alternate;
}

.demo-cursor2__hand {
  animation:demo2-hand-glow 1.5s ease-in-out infinite alternate;
}

.demo-cursor2__finger-lines {
  opacity:1;
}

@keyframes demo2-circle-fill {
  0% {
    fill:#DB3C37;
  }
  100% {
    fill:#181818;
  }
}

@keyframes demo2-icon-link {
  0% {
    opacity:1;
  }
  50%,100% {
    opacity:0;
  }
}

@keyframes demo2-icon-cross {
  0%,50% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@keyframes demo2-hand-glow {
  0% {
    filter:drop-shadow(0 0 8px rgba(219,60,55,0.9));
  }
  100% {
    filter:drop-shadow(0 0 0 rgba(219,60,55,0));
  }
}

.demo-cursor3 {
  position:relative;
  display:block;
  max-width:100%;
  overflow:hidden;
  border-radius:16px;
}

.demo-cursor3__bg {
  display:block;
  width:100%;
  height:auto;
}

.demo-cursor3__cards {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:auto;
  pointer-events:none;
  animation:demo3-cards 3s ease-in-out infinite;
}

.demo-cursor3__fx {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}

.demo-cursor3__trail {
  y:452px;
  height:0px;
  animation:demo3-trail 3s ease-in-out infinite;
}

.demo-cursor3__circle {
  animation:demo3-circle 3s ease-in-out infinite;
}

.demo-cursor3__hand {
  animation:demo3-hand 3s ease-in-out infinite;
}

@keyframes demo3-cards {
  0%,15% {
    transform:translateY(0);
  }
  40%,100% {
    transform:translateY(-33.347161%);
  }
}

@keyframes demo3-trail {
  0%,15% {
    y:452px;
    height:0px;
  }
  40% {
    y:154px;
    height:298px;
  }
  55% {
    y:154px;
    height:0px;
  }
  100% {
    y:452px;
    height:0px;
  }
}

@keyframes demo3-circle {
  0% {
    y:428.5px;
    fill-opacity:0.4;
    opacity:0;
  }
  15% {
    y:428.5px;
    fill-opacity:1;
    opacity:1;
  }
  40%,55% {
    y:129.5px;
    fill-opacity:1;
    opacity:1;
  }
  70% {
    y:129.5px;
    fill-opacity:0.4;
    opacity:0;
  }
  71%,100% {
    y:428.5px;
    fill-opacity:0.4;
    opacity:0;
  }
}

@keyframes demo3-hand {
  0% {
    transform:translateY(0);
    filter:drop-shadow(0 0 0 rgba(219,168,0,0));
  }
  15% {
    transform:translateY(0);
    filter:drop-shadow(0 0 8px rgba(219,168,0,0.9));
  }
  40%,55% {
    transform:translateY(-299px);
    filter:drop-shadow(0 0 8px rgba(219,168,0,0.9));
  }
  100% {
    transform:translateY(0);
    filter:drop-shadow(0 0 0 rgba(219,168,0,0));
  }
}

.demo-cursor4 {
  position:relative;
  display:block;
  max-width:100%;
}

.demo-cursor4__bg {
  display:block;
  width:100%;
  height:auto;
}

.demo-cursor4__fx {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}

.demo-cursor4__glow {
  animation:demo4-glow 1.5s ease-in-out infinite alternate;
}

.demo-cursor4__cloud--outline {
  animation:demo4-fade-out 1.5s ease-in-out infinite alternate;
}

.demo-cursor4__cloud--filled {
  opacity:0;
  animation:demo4-fade-in 1.5s ease-in-out infinite alternate;
}

.demo-cursor4__bars--outline {
  animation:demo4-fade-out 1.5s ease-in-out infinite alternate;
}

.demo-cursor4__bars--filled {
  opacity:0;
  animation:demo4-fade-in 1.5s ease-in-out infinite alternate;
}

.demo-cursor4__button-ring {
  animation:demo4-button-ring-fill 1.5s ease-in-out infinite alternate;
}

.demo-cursor4__button-icon--idle {
  animation:demo4-button-idle 1.5s ease-in-out infinite alternate;
}

.demo-cursor4__button-icon--done {
  opacity:0;
  animation:demo4-button-done 1.5s ease-in-out infinite alternate;
}

.demo-cursor4__hand {
  animation:demo4-hand 1.5s ease-in-out infinite alternate;
}

@keyframes demo4-glow {
  0% {
    filter:drop-shadow(0 0 8px rgba(37,168,84,0.9));
  }
  100% {
    filter:drop-shadow(0 0 0 rgba(37,168,84,0));
  }
}

@keyframes demo4-fade-out {
  0% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}

@keyframes demo4-button-ring-fill {
  0% {
    fill:#25A854;
  }
  100% {
    fill:#181818;
  }
}

@keyframes demo4-button-idle {
  0% {
    opacity:1;
  }
  50%,100% {
    opacity:0;
  }
}

@keyframes demo4-button-done {
  0%,50% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@keyframes demo4-fade-in {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@keyframes demo4-hand {
  0% {
    filter:drop-shadow(0 0 8px rgba(37,168,84,0.9));
  }
  100% {
    filter:drop-shadow(0 0 0 rgba(37,168,84,0));
  }
}

.callout {
  margin-top:40px;
}

.callout h3 {
  display:flex;
  align-items:center;
  gap:10px;
}

.callout h3 span {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  background:currentColor;
}

.callout p {
  font-size:18px;
  line-height:1.4;
  margin-top:16px;
}

.red {
  color:#e43d39;
}

.red p {
  color:#ff8984;
}

.yellow {
  color:#e0b400;
}

.yellow p {
  color:#f2d34f;
}

.green {
  color:#1fa653;
}

.green p {
  color:#88d8a6;
}

.section {
  padding:96px 0;
  border-top:1px solid #525252;
}

.section-lead {
  font-size:24px;
  line-height:1.4;
  color:var(--muted);
  margin-top:24px;
}

.program {
  background:#181818;
}

.talks {
  list-style:none;
  margin:96px 0 0;
  padding:0;
}

.talks li {
  display:flex;
  gap:24px;
  padding:64px 0;
  border-bottom:1px solid #292929;
}

.talks li:first-child {
  padding-top:0;
}

.talks li:last-child {
  padding-bottom:0;
  border-bottom:0;
}

.talks h3 {
  margin-bottom:16px;
}

.talks p {
  font-size:18px;
  line-height:1.4;
  color:var(--muted);
}

.number {
  flex:none;
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  font-family:'Roboto Mono',monospace;
  font-size:16px;
  color:#0e0e0e;
  margin-top:1px;
}

.red-number {
  background:#e43d39;
}

.blue-number {
  background:#3d82f2;
}

.green-number {
  background:#1fa653;
}

.speaker-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  margin-top:64px;
}

.speaker-card {
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--surface);
  overflow:hidden;
}

.speaker-card>img {
  width:100%;
  height:auto;
  aspect-ratio:1;
  object-fit:cover;
  border-radius:15px;
  box-shadow:0 0 0 1px #313131;
}

.speaker-info {
  padding:24px;
}

.speaker-role {
  font-family:'Roboto Mono',monospace;
  font-size:14px;
  line-height:1.5;
  color:var(--blue);
  margin-top:8px;
  white-space:nowrap;
}

.speaker-bio {
  font-size:18px;
  line-height:1.4;
  color:var(--muted);
  margin-top:24px;
}

.service-link {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  font-size:16px;
  line-height:1.5;
  margin-top:24px;
  transition:color .15s;
}

.service-link svg {
  flex:none;
}

.service-link svg path {
  transition:stroke .15s;
}

.service-link:hover {
  color:#8cb5f7;
}

.service-link:hover svg path {
  stroke:#8cb5f7;
}

.benefit-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
  list-style:none;
  margin:64px 0 0;
  padding:0;
}

.benefit-grid li {
  display:flex;
  align-items:flex-start;
  gap:24px;
  padding:24px;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--surface);
  min-height:150px;
}

.check {
  display:grid;
  place-items:center;
  width:21px;
  height:21px;
  flex:none;
  margin-top:7px;
}

.benefit-grid p {
  font-size:18px;
  line-height:1.4;
  color:var(--muted);
  margin-top:16px;
}

.registration {
  background:#181818;
}

.registration h2 {
  margin-top:24px;
}

.registration-action {
  display:flex;
  align-items:center;
  gap:24px;
  margin-top:64px;
}

.registration-action p {
  color:#1fa653;
  font-family:'Roboto Mono',monospace;
  font-size:14px;
  line-height:1.5;
}

.registration-note {
  font-family:'Roboto Mono',monospace;
  font-size:14px;
  line-height:1.5;
  color:var(--muted);
  margin-top:96px;
}

@media(max-width:1439px) {
  .story-row {
    grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  }
  .speaker-role {
    white-space:normal;
  }
  .speaker-info {
    padding:20px;
  }
  .speaker-grid {
    gap:20px;
  }
  .story-copy {
    font-size:22px;
  }
}

@media(max-width:760px) {
  .section,.story {
    padding:56px 0;
  }
  .story-row {
    grid-template-columns:1fr;
    gap:32px;
  }
  .story-list {
    gap:96px;
  }
  .story-copy {
    font-size:20px;
  }
  .story-copy>p+p {
    margin-top:24px;
  }
  .callout {
    margin-top:28px;
  }
  .callout h3 {
    font-size:22px;
    gap:10px;
  }
  .callout h3 span {
    flex-shrink:0;
  }
  .story-art {
    max-width:508px;
    width:100%;
    margin-inline:auto;
  }
  .section-lead {
    font-size:20px;
    margin-top:20px;
  }
  .talks li {
    flex-direction:column;
    gap:16px;
  }
  .talks h3 {
    font-size:22px;
    line-height:1.35;
  }
  .number {
    width:28px;
    height:28px;
    font-size:14px;
  }
  .speaker-grid {
    grid-template-columns:1fr;
    margin-top:40px;
    gap:24px;
  }
  .speaker-card {
    max-width:460px;
    width:100%;
    margin-inline:auto;
  }
  .speaker-info {
    padding:24px;
  }
  .benefit-grid {
    grid-template-columns:1fr;
    margin-top:40px;
    gap:16px;
  }
  .benefit-grid li {
    gap:16px;
    min-height:0;
    padding:24px;
  }
  .benefit-grid h3 {
    font-size:22px;
  }
  .registration-action {
    margin-top:40px;
    align-items:flex-start;
    flex-direction:column;
    gap:16px;
  }
  .registration-note {
    margin-top:48px;
  }
  .registration .brand {
    background:#0e0e0e;
  }
  .service-link {
    font-size:16px;
  }
}

@media(prefers-reduced-motion:reduce) {
  * {
    transition:none!important;
    scroll-behavior:auto!important;
  }
  .chart-line,.chart-marker {
    animation:none!important;
  }
  .chart-line {
    stroke-dashoffset:0;
  }
  .chart-marker {
    offset-distance:100%;
  }
  .chart-marker-discover {
    fill:#DBA800;
  }
  .demo-cursor__rect-fill,.demo-cursor__finger-lines,.demo-cursor__icon,.demo-cursor__icon-bg,.demo-cursor__icon-glyph--link,.demo-cursor__icon-glyph--check,.demo-cursor__hand,.demo-cursor2__circle,.demo-cursor2__icon-glyph--link,.demo-cursor2__icon-glyph--cross,.demo-cursor2__hand,.demo-cursor3__cards,.demo-cursor3__trail,.demo-cursor3__circle,.demo-cursor3__hand,.demo-cursor4__glow,.demo-cursor4__cloud--outline,.demo-cursor4__cloud--filled,.demo-cursor4__bars--outline,.demo-cursor4__bars--filled,.demo-cursor4__button-ring,.demo-cursor4__button-icon--idle,.demo-cursor4__button-icon--done,.demo-cursor4__hand {
    animation:none!important;
  }
  .demo-cursor3__trail {
    height:0px!important;
  }
}

/* Exact Roboto Flex axes from the Figma text styles. */
body {
  font-variation-settings:'GRAD' 0,'wdth' 100,'slnt' 0,'XOPQ' 96,'YOPQ' 79,'XTRA' 468,'YTUC' 660,'YTLC' 514,'YTAS' 690,'YTDE' -180,'YTFI' 700;
}

@media(min-width:1440px) {
  .hero-copy h1 {
    font-size:52px;
    line-height:1.1;
  }
  .hero {
    padding-bottom:94px;
  }
  .program {
    padding-bottom:110px;
  }
  .registration-note {
    margin-top:64px;
  }
  .event-details {
    gap:64px;
  }
  .button {
    min-width:242px;
  }
}

.speakers {
  position:relative;
}

:root {
  --surface:#181818;
}

@media(min-width:1440px) {
  .hero {
    height:787px;
    padding-bottom:0;
  }
  .program {
    min-height:834px;
  }
  .speakers {
    min-height:1014px;
  }
  .speaker-card {
    height:656px;
  }
  .benefits {
    height:624px;
  }
  .registration {
    min-height:590px;
  }
  .section-lead {
    line-height:34px;
  }
  .speaker-info {
    padding:24px;
  }
  .speaker-bio {
    line-height:25px;
  }
  .registration .brand {
    width:64px;
    height:64px;
  }
  .registration-note {
    margin-top:64px;
  }
}

@media(max-width:760px) {
  .registration .brand {
    background:none;
  }
}

.chart-lines {
  width:430px;
  max-width:calc(100% + 6px);
  object-fit:contain;
  object-position:left top;
}

@media(min-width:1440px) {
  .story-row {
    grid-template-columns:612px 508px;
  }
  .program {
    padding-bottom:109px;
  }
  .speakers {
    padding-bottom:95px;
  }
  .registration {
    padding-bottom:94px;
  }
}

@media(max-width:1439px) {
  .chart-lines {
    height:auto;
    aspect-ratio:430/275;
  }
}


@media(min-width:761px) and (max-width:900px) {
  .speaker-grid {
    grid-template-columns:1fr;
  }
  .speaker-card {
    width:100%;
    max-width:460px;
    margin-inline:auto;
  }
}

@media(max-width:760px) {
  .chart-lines {
    width:100%;
    height:220px;
    max-width:none;
    object-fit:fill;
  }
}

@media(max-width:393px) {
  .talks li {
    padding:40px 0;
  }
}