:root {
     --color-bg: #020517;
     --color-surface: #14172F;
     --color-text: #FFFFFF;
     --color-text-muted: #81828B;
     --color-text-subtle: #646770;
     --color-primary: #2065EE;
     --color-primary-strong: #397BFF;
     --color-danger: #FF383C;
     --interactive-duration: 220ms;
     --interactive-easing: cubic-bezier(0.22, 1, 0.36, 1);
     --interactive-lift: translateY(-2px);
     --interactive-shadow: 0 10px 24px rgba(21, 41, 92, 0.28);
 }

 :where(a, button, [role="tab"]) {
     transition:
         transform var(--interactive-duration) var(--interactive-easing),
         background-color var(--interactive-duration) var(--interactive-easing),
         border-color var(--interactive-duration) var(--interactive-easing),
         color var(--interactive-duration) var(--interactive-easing),
         opacity var(--interactive-duration) var(--interactive-easing),
         filter var(--interactive-duration) var(--interactive-easing);
 }

 @media (hover: hover) and (pointer: fine) {
     :where(a, button, [role="tab"]):not(.mobile-tab-dot):not(.logo-group):not(.footer-brand):hover {
         transform: var(--interactive-lift);
         filter: brightness(1.06);
     }

     :where(a, button, [role="tab"]):not(.mobile-tab-dot):not(.logo-group):not(.footer-brand):active {
         transform: translateY(0);
         filter: none;
     }
 }

 @media (hover: hover) and (pointer: fine) {

     .login-link:hover,
     .cta-free-trial-button:hover,
     .plan-card-cta:hover,
     #view-full-btn:hover,
     #get-started-cta-bg button:hover {
         box-shadow: var(--interactive-shadow);
     }

     .mobile-tab-dot:hover {
         transform: scale(1.22);
     }

     .header-link:hover,
     .footer-link:hover,
     .tab-item:hover {
         color: var(--color-primary-strong);
     }

     .login-link:hover,
     #get-started-cta-bg button:hover,
     #view-full-btn:hover {
         border-color: var(--color-primary-strong);
         background-color: rgba(57, 123, 255, 0.16);
     }

     .cta-free-trial-button:hover,
     .plan-card-cta:hover {
         background-color: var(--color-primary-strong);
     }
 }

 .highlight-primary {
     color: var(--color-primary-strong);
 }

 .text-danger {
     color: var(--color-danger);
 }

 .cta-logo-image {
     top: 4px;
     position: relative;
 }

 /* MOBILE */
 @media (max-width: 951px) {

     .desktop-view {
         display: none;
     }

     .mobile-view {
         display: block;
     }

     #slider {
         padding: 0 !important;
         margin-top: 0px !important;
     }
 }

 /* DESKTOP */
 @media (min-width: 952px) {
     .desktop-view {
         display: block;
     }

     .mobile-view {
         display: none;
     }
 }

 @media (max-width: 1815px) {
     .background-os-item {
         display: none;
     }
 }

 .header-content {
     flex: 1;
     max-width: 1512px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 32px;
     border: 2px solid #FFFFFF14;
     border-radius: 40px;
     padding: 18px 20px;
     background-color: #090E26;
 }

 .logo-group {
     text-decoration: none;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 16px;
     margin-right: 24px;
 }

 .logo-text {
     font-family: inherit;
     font-weight: 600;
     font-size: 24px;
     line-height: 124%;
     color: #FFFFFF;
 }

 .login-link {
     display: flex;
     align-items: center;
     justify-content: center;
     border: 1.5px solid #2065EE;
     border-radius: 999px;
     padding: 11px 24px;
     font-weight: 600;
     line-height: 150%;
     font-size: 16px;
     color: #2065EE;
 }

 .hero-section {
     display: flex;
     flex-direction: column;
     align-items: center;
     max-width: 980px;
     margin: 80px auto 0px;
 }

 .main-heading {
     text-align: center;
     font-weight: 600;
     font-size: 56px;
     line-height: 150%;
     color: #FFFFFF;
     margin: 0;
 }


 .sub-heading {
     margin: 12px 0 0 0;
     font-weight: 600;
     font-size: 20px;
     color: #80828B;
     text-align: center;
 }

 .cta-free-trial-button {
     margin-top: 40px;
     width: fit-content;
     background-color: #2065EE;
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 12px;
     font-weight: 600;
     font-size: 24px;
     line-height: 150%;
     color: #FFFFFF;
     border-radius: 999px;
     padding: 8px 24px 8px 8px;
 }

 .cta-btn-logo-wrapper {
     display: flex;
     justify-content: center;
     align-items: center;
     border-radius: 100%;
     background-color: #FFFFFF;
     width: 48px;
     height: 48px;
 }

 .cta-free-trial-subtext {
     margin-top: 16px;
     font-size: 16px;
     line-height: 140%;
     color: #646770;
 }

 .desktop-tab-panel {
     width: 100%;
     display: flex;
     justify-content: center;
     overflow: hidden;
 }

 .desktop-tab-slide {
     width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     will-change: transform, opacity;
 }

 #how-it-works {
     width: 100%;
     max-width: none;
     margin: 0 auto;
     padding: 84px 24px 96px;
     background-color: #020517;
     box-sizing: border-box;
 }

 #statistics-intro-desktop,
 #statistics-chart-desktop,
 #statistics,
 #slider,
 #how-it-works,
 #plans-section {
     background-color: #020517;
 }

 .how-it-works-heading {
     width: min(880px, 100%);
     margin: 0 auto;
     text-align: center;
 }

 .how-it-works-heading h3 {
     margin: 0;
     color: #FFFFFF;
     font-size: 48px;
     font-weight: 510;
     line-height: 150%;
 }

 .how-it-works-heading p {
     margin: 12px 0 0 0;
     color: #FFFFFF;
     opacity: 0.5;
     font-size: 20px;
     font-weight: 400;
     line-height: 150%;
 }

 .how-it-works-grid {
     max-width: 1872px;
     margin: 100px auto 0;
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 24px;
 }

 .how-step-card {
     background-color: #14172F;
     border-radius: 40px;
     overflow: hidden;
     display: flex;
     flex-direction: column;
     width: 100%;
     aspect-ratio: 608 / 752;
     container-type: inline-size;
     cursor: pointer;
     transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 260ms ease, border-color 260ms ease;
 }

 @media (hover: hover) and (pointer: fine) {
     .how-it-works-grid {
         perspective: 1200px;
     }

     .how-step-card:hover,
     .how-step-card:focus-within {
         transform: translateY(-16px) scale(1.02);
         box-shadow: 0 26px 64px rgba(12, 37, 100, 0.45);
         border-color: rgba(32, 101, 238, 0.45);
         z-index: 2;
     }
 }

 .how-step-media {
     position: relative;
     flex: 0 0 63.0319%;
     overflow: hidden;
     --overlay-cut-x: 53%;
     --overlay-cut-y: 50%;
     z-index: 1;
 }

 #view-full-btn {
     top: 69%;
     left: 45%;
     font-size: 16px;
     color: white;
     gap: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     background-color: #565C68;
     position: absolute;
     border-radius: 999px;
     padding: 15px 24px;
     border: none;
     z-index: 1;
     cursor: pointer;
     opacity: 1;
     transition:
         opacity 420ms ease,
         transform var(--interactive-duration) var(--interactive-easing),
         box-shadow var(--interactive-duration) var(--interactive-easing),
         background-color var(--interactive-duration) var(--interactive-easing),
         border-color var(--interactive-duration) var(--interactive-easing),
         filter var(--interactive-duration) var(--interactive-easing);
 }

 #view-full-btn.is-fading-out,
 #screenshot-image-blur.is-fading-out {
     opacity: 0;
     pointer-events: none;
 }

 #screenshot-image-blur {
     opacity: 1;
     transition: opacity 420ms ease;
 }

 .how-step-media-cut-angle {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     border-bottom-right-radius: 36.184cqw;
     z-index: 0;
     background-size: 100% 100%;
     background-repeat: no-repeat;
     background-position: center;
 }

 .how-step-media-cut-angle-1 {
     background-image: url("../assets/screenshot-1.png");
 }

 .how-step-media-cut-angle-2 {
     background-image: url("../assets/screenshot-2.png");
 }

 .how-step-media-cut-angle-3 {
     background-image: url("../assets/screenshot-3.png");
 }

 .how-step-media-overlay {
     inset: 0;
     background-color: #020517;
     position: absolute;
     clip-path: polygon(0 0, var(--overlay-cut-x) 0, 0 var(--overlay-cut-y));
     z-index: 1;
 }

 .how-step-index {
     position: absolute;
     font-size: 13.158cqw;
     line-height: 150%;
     color: #2065EE;
     top: 0%;
     left: 14%;
     font-weight: 30;
     z-index: 2;
 }

 .how-step-name {
     position: absolute;
     font-size: 5.263cqw;
     line-height: 150%;
     color: #88A9EA;
     top: 8.6%;
     left: 66%;
     font-weight: 274;
     z-index: 2;
 }

 .how-step-time {
     position: absolute;
     right: 3.289cqw;
     bottom: 3.289cqw;
     color: #3D5179;
     font-size: 3.289cqw;
     font-weight: 274;
     line-height: 150%;
     z-index: 2;
 }

 .how-step-upload-icons {
     margin-top: 44px;
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 16px;
 }

 .how-step-upload-icons span {
     width: 52px;
     height: 52px;
     border-radius: 12px;
     border: 2px solid rgba(255, 255, 255, 0.2);
     background: rgba(255, 255, 255, 0.28);
     box-shadow: 0 4px 24px rgba(0, 0, 0, 0.26);
 }

 .how-step-log-list {
     list-style: none;
     padding: 0;
     margin: 32px 0 0 0;
     display: flex;
     flex-direction: column;
     gap: 10px;
 }

 .how-step-log-list li {
     display: flex;
     align-items: center;
     gap: 8px;
     min-width: 0;
     color: rgba(255, 255, 255, 0.85);
     font-size: 12px;
     line-height: 1.4;
 }

 .how-step-log-list li span {
     color: #6EE7B7;
     font-weight: 600;
 }

 .how-step-bars {
     margin-top: 36px;
     display: flex;
     flex-direction: column;
     gap: 10px;
 }

 .how-step-bars div {
     display: flex;
     justify-content: space-between;
     align-items: center;
     background: rgba(10, 12, 35, 0.84);
     border-radius: 12px;
     padding: 10px 12px;
     color: #FFFFFF;
     font-size: 13px;
 }

 .how-step-bars strong {
     color: #FFB5B5;
     font-size: 16px;
 }

 .how-step-body {
     position: relative;
     flex: 1 1 auto;
     padding: 6.579cqw;
     display: flex;
     flex-direction: column;
     gap: 3.289cqw;
 }

 .how-step-body h4 {
     margin: 0;
     color: #FFFFFF;
     font-weight: 510;
     font-size: 5.263cqw;
     line-height: 150%;

 }

 .how-step-body p {
     margin: 0;
     font-weight: 400;
     font-size: 3.289cqw;
     line-height: 150%;
     letter-spacing: 0%;
     color: #898B97;

 }

 #plans-section {
     width: 100%;
     max-width: none;
     margin: 0 auto;
     padding: 84px 24px 96px;
     box-sizing: border-box;
 }

 .plans-heading {
     width: min(980px, 100%);
     margin: 0 auto;
     text-align: center;
 }

 .plans-heading h3 {
     margin: 0;
     color: #FFFFFF;
     font-size: 48px;
     font-weight: 510;
     line-height: 150%;
 }

 .plans-heading p {
     margin: 12px 0 0;
     color: #FFFFFF;
     opacity: 0.5;
     font-size: 20px;
     font-weight: 400;
     line-height: 150%;
 }

 .plans-grid {
     max-width: 1120px;
     margin: 100px auto 0;
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 40px;
 }

 .plan-card {
     background: #14172F;
     border: 2px solid rgba(255, 255, 255, 0.1);
     border-radius: 40px;
     max-width: 516px;
     aspect-ratio: 516 / 682;
 }

 .plan-card-content {
     display: flex;
     flex-direction: column;
     gap: 40px;
     padding: 40px;
 }

 .plan-card-header {
     display: flex;
     flex-direction: column;
     gap: 12px;
 }

 .plan-card-header h4 {
     margin: 0;
     color: #FFFFFF;
     font-size: 44px;
     font-weight: 510;
     line-height: 150%;
 }

 .plan-card-header p {
     margin: 0;
     color: rgba(255, 255, 255, 0.5);
     font-size: 20px;
     font-weight: 400;
     line-height: 150%;
 }

 .plan-card-cta {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 20px;
     border-radius: 24px;
     background: #2065EE;
     color: #FFFFFF;
     font-size: 16px;
     font-weight: 500;
     line-height: 100%;
 }

 .plan-feature-list {
     list-style: none;
     padding: 0;
     margin: 0;
     display: flex;
     flex-direction: column;
     gap: 24px;
 }

 .plan-feature-list li {
     display: flex;
     align-items: center;
     gap: 20px;
     color: #FFFFFF;
     font-size: 16px;
     font-weight: 400;
     line-height: 124%;
 }

 .plan-feature-icon {
     width: 20px;
     height: 20px;
     flex: 0 0 20px;
     border-radius: 50%;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     font-size: 12px;
     line-height: 1;
     font-weight: 700;
 }

 @media (max-width: 1400px) {
     .how-it-works-grid {
         grid-template-columns: repeat(2, minmax(0, 1fr));
     }

     .plans-grid {
         gap: 24px;
     }

 }

 #get-started-cta-bg {
     width: 100%;
     aspect-ratio: 1920/772;
     background:
         url("../assets/get-started-bg.svg"), #2065EE;

     background-position: center bottom;
     background-repeat: no-repeat;
     background-size: contain;
     display: flex;
     flex-direction: column;
     align-items: center;
 }

 #get-started-cta-bg h2 {
     margin: 7% 0 12px 0;
     color: #FFFFFF;
     font-weight: 510;
     font-size: 48px;
     line-height: 150%;
     text-align: center;
 }

 #get-started-cta-bg p {
     margin: 0 0 40px 0;
     font-weight: 400;
     font-size: 20px;
     line-height: 150%;
     color: #90B2F7;
     text-align: center;
 }

 #get-started-cta-bg button {
     background-color: transparent;
     padding: 12px 24px;
     border-radius: 999px;
     border: 1.5px solid #FFFFFF;
     color: #FFFFFF;
     font-weight: 590;
     font-size: 16px;
     line-height: 150%;
     text-align: center;
     cursor: pointer;
 }

 #site-footer {
     width: 100%;
     background-color: #020517;
 }

 .footer-main-content {
     display: flex;
     align-items: center;
     gap: 100px;
     padding: 120px 240px;
     box-sizing: border-box;
 }

 .footer-brand {
     display: inline-flex;
     align-items: center;
     gap: 16px;
     text-decoration: none;
 }

 .footer-brand-text {
     color: #FFFFFF;
     font-size: 24px;
     font-weight: 600;
     line-height: 124%;
 }

 .footer-links {
     display: inline-flex;
     align-items: center;
     gap: 40px;
 }

 .footer-link {
     color: #FFFFFF;
     opacity: 0.5;
     font-size: 20px;
     font-weight: 400;
     line-height: 150%;
     transition:
         opacity var(--interactive-duration) var(--interactive-easing),
         transform var(--interactive-duration) var(--interactive-easing),
         color var(--interactive-duration) var(--interactive-easing),
         filter var(--interactive-duration) var(--interactive-easing);
 }

 .footer-link:hover,
 .footer-link:focus-visible {
     opacity: 1;
 }

 @media (max-width: 1700px) {
     #get-started-cta-bg {
         aspect-ratio: 1920/800;
     }
 }

 @media (max-width: 1400px) {
     #get-started-cta-bg {
         aspect-ratio: 1920/900;
     }

     .footer-main-content {
         padding: 96px 72px;
         gap: 56px;
     }

     .footer-link {
         font-size: 18px;
     }
 }

 @media (max-width: 1150px) {
     #get-started-cta-bg {
         aspect-ratio: 1920/1000;
     }
 }

 @media (max-width: 650px) {
     #get-started-cta-bg {
         aspect-ratio: 1920/1200 !important;
     }
 }

 @media (max-width: 550px) {
     #get-started-cta-bg {
         aspect-ratio: 1920/1400 !important;
     }
 }

 @media (max-width: 500px) {
     #get-started-cta-bg {
         aspect-ratio: 1920/1600 !important;
     }
 }

 @media (max-width: 951px) {
     #get-started-cta-bg {
         aspect-ratio: 1920/1100;
     }

     #get-started-cta-bg h2 {
         font-size: 32px;
         line-height: 130%;
     }

     #get-started-cta-bg p {
         font-size: 14px;
         line-height: 130%;
     }

     #how-it-works {
         padding: 48px 16px 56px;
     }

     .how-it-works-heading h3 {
         font-size: 28px;
     }

     .how-it-works-heading p {
         font-size: 15px;
         line-height: 150%;
     }

     .how-it-works-grid {
         margin-top: 28px;
         grid-template-columns: 1fr;
         gap: 14px;
     }

     .how-step-card {
         border-radius: 24px;
     }

     .how-step-media {
         --overlay-cut-x: 58%;
         --overlay-cut-y: 52%;
     }

     .how-step-time {
         font-size: clamp(13px, 4.2cqw, 18px);
     }

     .how-step-upload-icons {
         margin-top: 24px;
         gap: 10px;
     }

     .how-step-upload-icons span {
         width: 44px;
         height: 44px;
     }

     .how-step-log-list {
         margin-top: 18px;
         gap: 8px;
     }

     .how-step-log-list li {
         font-size: 11px;
         line-height: 1.35;
         overflow-wrap: anywhere;
     }

     .how-step-bars {
         margin-top: 18px;
     }

     .how-step-body {
         padding: clamp(16px, 6.579cqw, 24px);
     }

     .how-step-body h4 {
         font-size: clamp(20px, 5.263cqw, 30px);
         line-height: 130%;
     }

     .how-step-body p {
         font-size: clamp(14px, 3.289cqw, 19px);
     }

     #plans-section {
         padding: 48px 16px 56px;
     }

     .plans-heading h3 {
         font-size: 28px;
         line-height: 140%;
     }

     .plans-heading p {
         font-size: 15px;
     }

     .plans-grid {
         margin-top: 28px;
         grid-template-columns: 1fr;
         gap: 14px;
     }

     .plan-card {
         max-width: 400px;
         border-radius: 24px;
     }

     .plan-card-content {
         gap: 24px;
         padding: 20px;
     }

     .plan-card-header h4 {
         font-size: 28px;
         line-height: 130%;
     }

     .plan-card-header p {
         font-size: 15px;
     }

     .plan-card-cta {
         min-height: 48px;
         padding: 14px 16px;
         border-radius: 16px;
     }

     .plan-feature-list {
         gap: 14px;
     }

     .plan-feature-list li {
         gap: 12px;
         font-size: 14px;
         line-height: 1.35;
     }

     .footer-main-content {
         flex-direction: column;
         align-items: center;
         justify-content: center;
         gap: 28px;
         padding: 56px 24px;
     }

     .footer-brand {
         gap: 12px;
     }

     .footer-brand-text {
         font-size: 22px;
     }

     .footer-links {
         justify-content: center;
         gap: 16px 24px;
         flex-wrap: wrap;
     }

     .footer-link {
         font-size: 16px;
     }
 }

 /* ANIMATION */

 #image0_475_2336 {
     transform-origin: center;
     transform-box: fill-box;

     animation: spin 10s linear infinite;
 }

 @keyframes spin {
     from {
         transform: rotate(0deg);
     }

     to {
         transform: rotate(360deg);
     }
 }