@charset "utf-8";

body { background: rgb(17, 17, 17); color: rgb(255, 255, 255); }

header { background: rgb(17, 17, 17); border-color: rgb(44, 44, 44); backdrop-filter: none; }

.logo small { color: rgb(188, 188, 188); border-color: rgb(85, 85, 85); }

.logo img { filter: brightness(0) invert(1); }

nav a { color: rgb(228, 228, 228); }

nav a.is-current, nav a:hover { color: rgb(255, 118, 173); }

.menu-toggle { color: white; border-color: rgb(85, 85, 85); }

.hero { background: rgb(17, 17, 17); padding: 54px 0px 60px; overflow: hidden; }

.hero-grid { grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }

.hero h1 { font-family: Eesti, Arial, sans-serif; font-size: 66px; line-height: 1.06; letter-spacing: -0.025em; font-weight: 500; max-width: 650px; }

.hero h1 span { color: rgb(255, 0, 103); }

.hero-subtitle { font-family: Unbounded, sans-serif; font-size: 25px; line-height: 1.35; letter-spacing: -0.025em; max-width: 540px; margin-top: 28px; }

.event-meta { margin-bottom: 28px; font-size: 20px; gap: 20px; }

.event-meta span:first-child { border: 0px; color: rgb(255, 79, 150); padding: 0px; font-size: 22px; }

.event-meta time, .event-meta > span:last-child { font-weight: 400; border: 1px solid white; border-radius: 99px; padding: 4px 20px; }

.event-meta .dot { display: none; }

.hero-action { flex-direction: column; align-items: start; gap: 16px; margin-top: 38px; }

.hero-action .btn { width: min(100%, 460px); font-size: 22px; background: rgb(255, 0, 103); min-height: 62px; }

.hero-action p { font-size: 18px; color: rgb(170, 170, 170); }

.hero-action p br { display: none; }

.hero-action .arrow { display: none; }

.hero-art { position: relative; min-height: 470px; display: block; width: 100%; max-width: none; margin: 0px; }

.art-layer { position: absolute; pointer-events: none; will-change: transform; }

.art-layer img { width: 100%; height: auto; object-fit: contain; }

.calculator-layer { width: 89%; top: -15%; left: -8%; z-index: 1; }

.spreadsheet-layer { width: 76%; bottom: -5%; right: -10%; z-index: 2; }

.percent-orbit { position: absolute; top: 3%; right: 4%; font: 50px / 1 Unbounded, sans-serif; color: rgb(255, 255, 255); border: 1px solid rgb(255, 0, 103); border-radius: 50%; width: 96px; height: 96px; display: grid; place-items: center; transform: rotate(15deg); background: rgb(17, 17, 17); z-index: 0; }

.motion-toggle { position: absolute; bottom: -25px; right: 0px; background: none; border: 0px; color: rgb(170, 170, 170); font-size: 18px; padding: 10px; z-index: 4; text-decoration: underline; text-underline-offset: 4px; }

.motion-toggle:hover { color: white; }

.reference-case { grid-template-columns: 150px 1fr; border: 0px; padding: 0px; margin-top: 60px; gap: 24px; align-items: stretch; }

.case-badge { background: rgb(255, 0, 103); border-radius: 26px; display: grid; place-items: center; font-size: 36px; font-weight: 500; min-height: 138px; }

.case-story { background: white; border-radius: 26px; color: rgb(17, 17, 17); display: flex; align-items: center; gap: 22px; padding: 28px 38px; }

.case-story .icon { width: 36px; height: 36px; color: rgb(255, 118, 173); }

.case-story p { font-size: 23px; line-height: 1.4; max-width: 840px; }

.case-story strong { font-weight: 500; color: rgb(189, 0, 76); }

main > .section { background: white; color: rgb(17, 17, 17); border-radius: 38px; width: min(1300px, 100% - 48px); margin: 0px auto 32px; padding: 65px 0px; border: 0px; }

main > .section > .wrap { width: min(1160px, 100% - 80px); }

.topics-grid { gap: 32px 60px; }

.section-lead { color: rgb(98, 98, 107); }

.tracker-inset { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 60px; align-items: center; margin: 46px 0px; }

.tracker-caption h3 { font: 30px / 1.3 Unbounded, sans-serif; letter-spacing: -0.03em; }

.tracker-caption p { font-size: 18px; color: rgb(98, 98, 107); margin-top: 20px; max-width: 350px; }

.tracker-inset .tracker-demo { border: 1px solid rgb(255, 240, 246); box-shadow: none; }

.tracker-inset .tracker-demo { color: rgb(17, 17, 17); }

.materials { background: rgb(17, 17, 17); border-radius: 24px; }

.materials h2 { color: white; }

.document-sheet { box-shadow: rgba(0, 0, 0, 0.2) 12px 20px 40px; }

.materials .btn.light { color: rgb(17, 17, 17); }

.section.about { background: rgb(17, 17, 17); color: white; padding: 30px 0px; }

.about p { color: rgb(187, 187, 187); }

.about a { color: rgb(255, 118, 173); }

.closing { border-color: rgb(68, 68, 68); }

.closing small { color: rgb(170, 170, 170); }

footer { border-color: rgb(51, 51, 51); color: rgb(170, 170, 170); }

.form-meta, .demo-note { color: rgb(98, 98, 107); }

.icon-sprite { color: rgb(17, 17, 17); }

@media (min-width: 1500px) {
  .hero { padding-top: 72px; }
}

@media (max-width: 1100px) {
  .hero h1 { font-size: 54px; }
  .hero-grid { gap: 25px; }
  .hero-art { min-height: 400px; }
  .hero-subtitle { font-size: 23px; }
  .event-meta { font-size: 18px; }
  .case-story p { font-size: 21px; }
  .tracker-inset { gap: 30px; }
  .hero .wrap { width: calc(100% - 64px); }
}

@media (max-width: 760px) {
  header nav { background: rgb(17, 17, 17); border-color: rgb(51, 51, 51); }
  .hero { padding: 30px 0px 38px; }
  .hero .wrap { width: calc(100% - 36px); }
  .event-meta { font-size: 18px; gap: 12px; margin-bottom: 25px; }
  .event-meta span:first-child { font-size: 18px; }
  .event-meta time, .event-meta > span:last-child { padding: 4px 11px; }
  .hero-grid { grid-template-columns: minmax(0px, 1fr); gap: 20px; }
  .hero h1 { font-size: clamp(39px, 10.3vw, 60px); max-width: 600px; }
  .hero-subtitle { font-size: 21px; margin-top: 22px; }
  .hero-action { margin-top: 28px; gap: 12px; }
  .hero-action .btn { width: 100%; min-height: 57px; font-size: 20px; }
  .hero-action p { font-size: 18px; }
  .hero-art { min-height: 340px; width: 100%; max-width: 450px; margin: auto; }
  .calculator-layer { width: 84%; top: -8%; left: -3%; }
  .spreadsheet-layer { width: 71%; right: -2%; bottom: -2%; }
  .percent-orbit { font-size: 35px; width: 70px; height: 70px; right: 7%; top: 0px; }
  .motion-toggle { bottom: -17px; font-size: 18px; }
  .reference-case { grid-template-columns: 1fr; gap: 10px; margin-top: 42px; }
  .case-badge { min-height: 0px; font-size: 19px; padding: 10px 20px; justify-self: start; border-radius: 40px; }
  .case-story { border-radius: 20px; padding: 23px 21px; gap: 15px; }
  .case-story p { font-size: 18px; }
  .case-story .icon { width: 28px; height: 28px; }
  main > .section { width: calc(100% - 24px); border-radius: 26px; margin-bottom: 22px; padding: 38px 0px; }
  main > .section > .wrap { width: calc(100% - 40px); }
  .tracker-inset { grid-template-columns: 1fr; gap: 25px; margin: 32px 0px; }
  .tracker-caption h3 { font-size: 26px; }
  .tracker-caption p { font-size: 18px; margin-top: 14px; }
  .tracker-inset .tracker-tabs button { font-size: 18px; padding: 9px 8px; }
  .tracker-inset .tracker-toolbar { padding: 13px; }
  .tracker-inset .tracker-brand { font-size: 18px; }
  .tracker-inset .tracker-row { font-size: 18px; }
  .tracker-inset .tracker-bottom { font-size: 18px; }
  .tracker-inset .demo-tag { display: none; }
  .section.about { padding: 18px 0px; }
  .materials { padding: 28px 20px; }
  .about-grid h2 { font-size: 27px; }
}

@media (max-width: 360px) {
  .hero-art { min-height: 285px; }
  .hero h1 { font-size: 38px; }
  .event-meta { gap: 8px; }
  .event-meta time, .event-meta > span:last-child { padding: 4px 9px; }
  .case-story p { font-size: 18px; }
  .hero-subtitle { font-size: 19px; }
  .tracker-table { padding: 10px; }
  .tracker-tabs { padding: 10px 10px 0px; }
  .tracker-columns, .tracker-row { grid-template-columns: 1fr 75px; }
  .tracker-inset .tracker-brand { font-size: 18px; }
  .tracker-toolbar .icon { width: 18px; height: 18px; }
  .topic h3 { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .art-layer { will-change: auto; }
  .motion-toggle { display: none; }
}

@media (max-width: 760px) {
  .materials .btn { max-width: 100%; width: 100%; padding: 15px 12px; gap: 8px; font-size: 18px; }
  .materials .btn .arrow { font-size: 22px; }
}

.skip { color: rgb(17, 17, 17); }

.logo img { width: 110px; height: 34px; object-fit: contain; }

@media (max-width: 760px) {
  .logo img { width: 95px; height: 29px; }
}