/* Reset and base styles */
* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

body {
   font-family:
      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
      sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

/* Component styles */

/* Body component */
.body-container {
   display: flex;
   flex: 1;
   flex-direction: column;
   align-items: center;
   padding: 32px 16px;
}

.body-content {
   display: flex;
   width: 100%;
   max-width: 400px;
   flex: 1;
   flex-direction: column;
   gap: 48px;
}

/* Button component */
.button-container {
   display: flex;
   flex-direction: column;
   padding: 12px 16px;
}

.button {
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   white-space: nowrap;
   border-radius: 9999px;
   font-weight: 500;
   outline: none;
   transition: all 150ms;
   border: none;
   cursor: pointer;
   background-color: rgba(0, 0, 0, 0.05);
   color: black;
   height: 44px;
   min-width: 44px;
   padding: 0 12px;
   font-size: 16px;
}

.button:hover {
   background-color: rgba(0, 0, 0, 0.1);
}

.button:active {
   background-color: rgba(0, 0, 0, 0.2);
}

.button:focus-visible {
   outline: 2px solid #3b82f6;
   outline-offset: 2px;
}

.button-white {
   background-color: rgba(255, 255, 255, 0.2);
   color: white;
}

.button-white:hover {
   background-color: rgba(255, 255, 255, 0.3);
}

.button-white:active {
   background-color: rgba(255, 255, 255, 0.4);
}

.button-cta {
   background-color: #3b82f6;
   color: white;
   height: 56px;
   width: 100%;
}

.button-cta:hover {
   background-color: #60a5fa;
}

.button-cta:active {
   background-color: #1d4ed8;
}

/* Cell component */
.cell {
   display: flex;
   flex-direction: column;
   gap: 12px;
}

.cell-title {
   font-size: 20px;
   font-weight: 500;
   line-height: 28px;
   color: black;
}

.cell-content {
   display: flex;
   flex-direction: column;
   gap: 16px;
}

/* Footer component */
.footer {
   display: flex;
   width: 100%;
   cursor: pointer;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 12px;
   padding: 32px;
   margin-bottom: 96px;
}

.footer-logo {
   position: relative;
   height: 56px;
   width: 56px;
   overflow: hidden;
   border-radius: 10px;
   box-shadow:
      0 20px 25px -5px rgba(0, 0, 0, 0.1),
      0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.footer-logo img {
   height: 100%;
   width: 100%;
   object-fit: cover;
}

.footer-logo::after {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: 10px;
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.footer-text {
   font-size: 14px;
   font-weight: 500;
   line-height: 20px;
}

/* Hero component */
.hero-wrapper {
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 16px;
}

.hero {
   position: relative;
   min-height: 500px;
   width: 100%;
   max-width: 400px;
   overflow: hidden;
   border-radius: 20px;
}

.hero-image {
   position: absolute;
   inset: 0;
   height: 100%;
   width: 100%;
   object-fit: cover;
}

.hero-overlay-blur {
   position: absolute;
   inset: 0;
   border-radius: 20px;
   -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
   mask-image: linear-gradient(to bottom, transparent 40%, rgba(0, 0, 0, 0.9) 100%);
   -webkit-backdrop-filter: blur(16px);
   backdrop-filter: blur(16px);
}

.hero-overlay-gradient {
   position: absolute;
   inset: 0;
   background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 30%, rgba(60, 56, 52, 0.9) 100%);
}

.hero-content {
   position: absolute;
   inset: 0 0 0 0;
   display: flex;
   align-items: flex-end;
}

.hero-text {
   margin: 0 auto;
   display: flex;
   max-width: 280px;
   flex-direction: column;
   gap: 12px;
   padding: 48px 16px;
}

.hero-title {
   text-align: center;
   font-size: 30px;
   font-weight: 500;
   line-height: 36px;
   letter-spacing: -0.9px;
   color: white;
}

.hero-subtitle {
   text-align: center;
   font-size: 14px;
   line-height: 20px;
   color: rgba(255, 255, 255, 0.7);
}

/* Image item component */
.image-container {
   padding: 4px;
}

.image-item {
   border-radius: 12px;
   width: 100%;
   height: auto;
}

/* List item component */
.list-item {
   display: flex;
   align-items: flex-start;
   gap: 12px;
   padding: 12px 16px;
}

.list-item-icon {
   height: 24px;
   width: 24px;
   flex-shrink: 0;
}

.list-item-content {
   display: flex;
   flex-direction: column;
   gap: 2px;
}

.list-item-title {
   font-size: 16px;
   font-weight: 500;
   color: black;
}

.list-item-subtitle {
   font-size: 14px;
   color: rgba(0, 0, 0, 0.7);
}

/* Navigation component */
.nav-wrapper {
   margin-top: 24px;
   display: flex;
   width: 100%;
   flex-direction: column;
   align-items: center;
   padding: 16px;
}

.nav-trigger {
   display: flex;
   width: 100%;
   max-width: 400px;
   cursor: pointer;
   align-items: center;
   gap: 12px;
   transition: opacity 150ms;
}

.nav-trigger:hover {
   opacity: 0.7;
}

.nav-logo {
   height: 40px;
   width: 40px;
   overflow: hidden;
   border-radius: 10px;
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
   background-position: center;
   background-size: cover;
}

.nav-name {
   font-size: 20px;
   font-weight: 500;
}

.nav-chevron {
   height: 24px;
   width: 24px;
}

.nav-overlay {
   position: fixed;
   inset: 0;
   z-index: 999;
   display: flex;
   flex-direction: column;
   overflow-y: auto;
   background-color: rgba(101, 101, 101, 0.65);
   -webkit-backdrop-filter: blur(100px);
   backdrop-filter: blur(100px);
   transition: all 200ms;
}

.nav-overlay.closed {
   pointer-events: none;
   opacity: 0;
}

.nav-overlay.open {
   pointer-events: auto;
   opacity: 100;
}

body.nav-open {
   overflow: hidden;
}

.nav-content {
   display: flex;
   flex: 1;
   flex-direction: column;
   justify-content: space-between;
   gap: 64px;
}

.nav-main {
   display: flex;
   flex-direction: column;
   gap: 32px;
}

.nav-header {
   position: relative;
}

.nav-header-content {
   display: flex;
   flex-direction: column;
   gap: 16px;
}

.nav-header-logo {
   height: 64px;
   width: 64px;
   overflow: hidden;
   border-radius: 10px;
   box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.1);
   background-position: center;
   background-size: cover;
}

.nav-header-text {
   display: flex;
   max-width: 320px;
   flex-direction: column;
   gap: 4px;
}

.nav-header-name {
   font-size: 18px;
   font-weight: 500;
   color: white;
}

.nav-header-description {
   font-size: 14px;
   color: rgba(255, 255, 255, 0.5);
}

.nav-close {
   position: absolute;
   right: 0;
   top: 0;
   display: flex;
   width: 44px;
   height: 44px;
   align-items: center;
   justify-content: center;
   border-radius: 9999px;
   background-color: rgba(255, 255, 255, 0.2);
   transition: background-color 150ms;
   border: none;
   cursor: pointer;
}

.nav-close:hover {
   background-color: rgba(255, 255, 255, 0.3);
}

.nav-close-icon {
   height: 24px;
   width: 24px;
   stroke: white;
}

.nav-contacts {
   display: flex;
   flex-direction: column;
}

.nav-contact {
   padding: 8px 0;
   color: white;
   text-decoration: underline;
   transition: opacity 150ms;
}

.nav-contact:hover {
   opacity: 0.8;
}

.nav-features {
   display: flex;
   flex-direction: column;
   gap: 4px;
   border-radius: 16px;
   background-color: rgba(255, 255, 255, 0.1);
   padding: 4px;
}

.nav-feature {
   display: flex;
   align-items: flex-start;
   gap: 12px;
   padding: 12px;
}

.nav-feature-icon {
   height: 24px;
   width: 24px;
   flex-shrink: 0;
   color: white;
}

.nav-feature-content {
   display: flex;
   flex-direction: column;
   gap: 4px;
}

.nav-feature-title {
   font-size: 16px;
   font-weight: 500;
   color: white;
}

.nav-feature-subtitle {
   white-space: pre-line;
   font-size: 14px;
   color: rgba(255, 255, 255, 0.7);
}

.nav-footer {
   padding: 32px 0;
   text-align: center;
   font-size: 14px;
   color: rgba(255, 255, 255, 0.7);
   text-decoration: none;
}

.nav-footer:hover {
   text-decoration: underline;
}

.nav-links {
   display: flex;
   flex-direction: column;
   gap: 20px;
}

.nav-link {
   font-size: 16px;
   font-weight: 500;
   line-height: 24px;
   color: white;
   text-decoration: none;
}

.nav-link:hover {
   text-decoration: underline;
}

/* Special card component */
.special-card {
   position: relative;
   min-height: 500px;
   overflow: hidden;
   border-radius: 12px;
}

.special-card-image {
   position: absolute;
   inset: 0;
   height: 100%;
   width: 100%;
   object-fit: cover;
}

.special-card-content {
   position: absolute;
   inset: 0 0 0 0;
   display: flex;
   align-items: flex-end;
   padding: 64px 4px 20px 4px;
}

.special-card-overlay-blur {
   position: absolute;
   inset: 0;
   border-radius: 20px;
   -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
   mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.9) 90%);
   -webkit-backdrop-filter: blur(16px);
   backdrop-filter: blur(16px);
}

.special-card-overlay-gradient {
   position: absolute;
   inset: 0;
   background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(60, 56, 52, 0.9) 100%);
}

.special-card-inner {
   position: relative;
   display: flex;
   flex-direction: column;
   gap: 4px;
   width: 100%;
}

.special-card-text {
   display: flex;
   flex-direction: column;
   gap: 12px;
   padding: 12px 16px;
}

.special-card-header {
   display: flex;
   flex-direction: column;
   gap: 2px;
}

.special-card-title {
   font-size: 20px;
   font-weight: 500;
   line-height: 28px;
   color: white;
}

.special-card-subtitle {
   font-size: 14px;
   line-height: 20px;
   color: rgba(255, 255, 255, 0.7);
}

.special-card-description {
   font-size: 16px;
   line-height: 24px;
   color: white;
}

/* Stack component */
.stack {
   display: flex;
   flex-direction: column;
   gap: 4px;
   border-radius: 16px;
   background-color: white;
   padding: 4px;
}

/* Sticky CTA component */
.sticky-cta {
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
   z-index: 50;
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 16px;
}

.sticky-cta-container {
   display: flex;
   width: 100%;
   max-width: 400px;
}

.sticky-cta-button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   white-space: nowrap;
   border-radius: 9999px;
   font-weight: 500;
   outline: none;
   transition: all 150ms;
   border: none;
   cursor: pointer;
   background-color: #3b82f6;
   color: white;
   height: 44px;
   min-width: 44px;
   padding: 0 12px;
   font-size: 16px;
   width: 100%;
}

.sticky-cta-button:hover {
   background-color: #60a5fa;
}

.sticky-cta-button:active {
   background-color: #1d4ed8;
}

.sticky-cta-button:focus-visible {
   outline: 2px solid #3b82f6;
   outline-offset: 2px;
}

/* Text item component */
.text-item {
   display: flex;
   flex-direction: column;
   gap: 12px;
   padding: 12px 16px;
}

.text-item-header {
   display: flex;
   flex-direction: column;
   gap: 2px;
}

.text-item-title {
   font-size: 20px;
   font-weight: 500;
   line-height: 28px;
}

.text-item-subtitle {
   font-size: 14px;
   line-height: 20px;
   color: rgba(0, 0, 0, 0.5);
}

.text-item-text {
   font-size: 16px;
   line-height: 24px;
}

/* Text input component */
.text-input-container {
   display: flex;
   flex-direction: column;
   border-radius: 16px;
   background-color: rgba(0, 0, 0, 0.05);
   padding: 12px 16px;
   cursor: text;
}

.text-input-label {
   font-size: 14px;
   line-height: 20px;
   color: rgba(0, 0, 0, 0.5);
   pointer-events: none;
}

.text-input {
   border: none;
   background-color: transparent;
   outline: none;
   font-size: 16px;
   line-height: 24px;
   color: black;
   font-family: inherit;
}

/* Text area component */
.text-area-container {
   display: flex;
   flex-direction: column;
   border-radius: 16px;
   background-color: rgba(0, 0, 0, 0.05);
   padding: 12px 16px;
   cursor: text;
}

.text-area-label {
   font-size: 14px;
   line-height: 20px;
   color: rgba(0, 0, 0, 0.5);
   pointer-events: none;
}

.text-area {
   resize: none;
   border: none;
   background-color: transparent;
   outline: none;
   font-size: 16px;
   line-height: 24px;
   color: black;
   font-family: inherit;
}

/* Contact form component */
.contact-form {
   display: flex;
   flex-direction: column;
   gap: 12px;
   padding: 12px;
}