/* =========================================
   RESET
========================================= */

* {
               margin: 0;
               padding: 0;
               box-sizing: border-box;
           }
           
           html {
               scroll-behavior: smooth;
           }
           
           body {
               font-family:
                   -apple-system,
                   BlinkMacSystemFont,
                   "SF Pro Display",
                   "SF Pro Text",
                   "Helvetica Neue",
                   Arial,
                   sans-serif;
           
               background: #ffffff;
               color: #111111;
               overflow: hidden;
           }
           
           
           /* =========================================
              INTRO SCREEN
           ========================================= */
           
           .intro-screen {
               position: fixed;
               inset: 0;
           
               z-index: 9999;
           
               display: flex;
               align-items: center;
               justify-content: center;
           
               background: #ffffff;
           
               transition:
                   opacity 1s ease,
                   visibility 1s ease;
           }
           
           .intro-screen.hide {
               opacity: 0;
               visibility: hidden;
               pointer-events: none;
           }
           
           
           .intro-content {
               text-align: center;
           
               animation: introAppear 1.5s cubic-bezier(.22, 1, .36, 1)
                   forwards;
           }
           
           
           /* Intro Icon */
           
           .intro-icon {
               width: 64px;
               height: 64px;
           
               margin: 0 auto 28px;
           
               border-radius: 18px;
           
               display: flex;
               align-items: center;
               justify-content: center;
           
               background: #111111;
               color: #ffffff;
           
               font-size: 34px;
               font-weight: 500;
           
               box-shadow:
                   0 20px 50px rgba(0, 0, 0, 0.12);
           
               animation:
                   iconAppear 1s ease forwards,
                   iconFloat 3s ease-in-out 1s infinite;
           }
           
           
           .intro-title {
               font-size: clamp(42px, 7vw, 92px);
           
               font-weight: 600;
           
               letter-spacing: -0.055em;
           
               color: #111111;
           
               animation:
                   titleAppear 1.2s
                   cubic-bezier(.22, 1, .36, 1)
                   0.2s forwards;
           
               opacity: 0;
           }
           
           
           .intro-subtitle {
               margin-top: 14px;
           
               font-size: 15px;
           
               letter-spacing: 0.15em;
           
               text-transform: uppercase;
           
               color: #777777;
           
               opacity: 0;
           
               animation:
                   subtitleAppear 1s ease
                   0.7s forwards;
           }
           
           
           /* Loading */
           
           .loading-line {
               width: 130px;
               height: 2px;
           
               margin: 35px auto 0;
           
               background: #eeeeee;
           
               overflow: hidden;
           
               opacity: 0;
           
               animation:
                   loadingAppear .6s ease
                   1s forwards;
           }
           
           .loading-line span {
               display: block;
           
               height: 100%;
               width: 0;
           
               background: #111111;
           
               animation:
                   loading 2.3s
                   1.1s
                   cubic-bezier(.65, 0, .35, 1)
                   forwards;
           }
           
           
           /* =========================================
              MAIN PAGE
           ========================================= */
           
           .main-page {
               min-height: 100vh;
           
               display: flex;
               flex-direction: column;
           
               opacity: 0;
           
               transform: scale(1.02);
           
               transition:
                   opacity 1.2s ease,
                   transform 1.2s cubic-bezier(.22, 1, .36, 1);
           }
           
           .main-page.show {
               opacity: 1;
               transform: scale(1);
           }
           
           
           /* =========================================
              NAVBAR
           ========================================= */
           
           .navbar {
               position: relative;
               z-index: 20;
           
               width: 100%;
           
               padding: 30px 5vw;
           
               display: flex;
               align-items: center;
               justify-content: space-between;
           }
           
           
           .brand {
               display: flex;
               align-items: center;
               gap: 12px;
           
               font-size: 16px;
               font-weight: 600;
           
               letter-spacing: -0.02em;
           }
           
           
           .brand-icon {
               width: 32px;
               height: 32px;
           
               border-radius: 9px;
           
               display: flex;
               align-items: center;
               justify-content: center;
           
               background: #111111;
               color: #ffffff;
           
               font-size: 17px;
               font-weight: 500;
           }
           
           
           .nav-status {
               font-size: 11px;
           
               text-transform: uppercase;
           
               letter-spacing: 0.14em;
           
               color: #888888;
           }
           
           
           /* =========================================
              MARQUEE
           ========================================= */
           
           .marquee-wrapper {
               position: absolute;
           
               top: 145px;
               left: -5%;
           
               width: 110%;
           
               z-index: 5;
           
               pointer-events: none;
           
               transform: rotate(-7deg);
           }
           
           
           .marquee {
               width: 100%;
           
               overflow: hidden;
           
               background: #111111;
           
               padding: 17px 0;
           
               box-shadow:
                   0 15px 40px rgba(0, 0, 0, 0.08);
           }
           
           
           .marquee-track {
               display: flex;
           
               width: max-content;
           
               animation:
                   marqueeMove 18s
                   linear
                   infinite;
           }
           
           
           .marquee-content {
               display: flex;
               align-items: center;
           
               flex-shrink: 0;
           
               white-space: nowrap;
           }
           
           
           .marquee-content span {
               font-size: clamp(22px, 3vw, 40px);
           
               font-weight: 600;
           
               letter-spacing: -0.03em;
           
               color: #ffffff;
           
               padding: 0 25px;
           }
           
           
           .marquee-content .dot {
               font-size: 18px;
           
               color: #888888;
           
               padding: 0 5px;
           }
           
           
           /* =========================================
              HERO
           ========================================= */
           
           .hero {
               position: relative;
           
               flex: 1;
           
               min-height: calc(100vh - 95px);
           
               display: flex;
               align-items: center;
           
               padding:
                   120px
                   8vw
                   70px;
           
               overflow: hidden;
           }
           
           
           /* =========================================
              HERO CONTENT
           ========================================= */
           
           .hero-content {
               position: relative;
           
               z-index: 10;
           
               width: 55%;
           
               max-width: 720px;
           
               animation:
                   heroContentAppear 1.2s
                   .5s
                   cubic-bezier(.22, 1, .36, 1)
                   both;
           }
           
           
           .eyebrow {
               display: flex;
               align-items: center;
               gap: 10px;
           
               margin-bottom: 25px;
           
               font-size: 11px;
           
               font-weight: 600;
           
               letter-spacing: 0.16em;
           
               color: #777777;
           }
           
           
           .status-dot {
               width: 7px;
               height: 7px;
           
               border-radius: 50%;
           
               background: #111111;
           
               animation: pulse 2s infinite;
           }
           
           
           .hero h2 {
               font-size: clamp(40px, 7vw, 85px);
           
               line-height: .86;
           
               letter-spacing: -0.07em;
           
               font-weight: 600;
           
               color: #111111;
           }
           
           
           .hero h2 span {
               display: block;
           
               color: #999999;
           }
           
           
           .hero-description {
               max-width: 490px;
           
               margin-top: 35px;
           
               font-size: clamp(16px, 1.5vw, 20px);
           
               line-height: 1.7;
           
               color: #555555;
           }
           
           
           .hero-line {
               width: 70px;
               height: 1px;
           
               margin-top: 35px;
           
               background: #111111;
           }
           
           
           .launch-text {
               margin-top: 18px;
           
               font-size: 12px;
           
               text-transform: uppercase;
           
               letter-spacing: .18em;
           
               color: #999999;
           }
           
           
           /* =========================================
              HERO VISUAL
           ========================================= */
           
           .hero-visual {
               position: absolute;
           
               right: 7vw;
           
               bottom: 11%;
           
               width: 360px;
               height: 360px;
           
               display: flex;
               align-items: center;
               justify-content: center;
           
               animation:
                   visualAppear 1.3s
                   .8s
                   cubic-bezier(.22, 1, .36, 1)
                   both;
           }
           
           
           /* Device */
           
           .device {
               position: relative;
           
               width: 180px;
               height: 290px;
           
               border-radius: 32px;
           
               padding: 8px;
           
               background:
                   linear-gradient(
                       145deg,
                       #eeeeee,
                       #ffffff,
                       #dddddd
                   );
           
               box-shadow:
                   25px 30px 70px rgba(0, 0, 0, .12);
           
               transform:
                   rotate(10deg)
                   perspective(700px)
                   rotateY(-8deg);
           
               animation:
                   deviceFloat 5s
                   ease-in-out
                   infinite;
           }
           
           
           .device::before {
               content: "";
           
               position: absolute;
           
               top: 9px;
               left: 50%;
           
               transform: translateX(-50%);
           
               width: 60px;
               height: 18px;
           
               border-radius: 20px;
           
               background: #111111;
           
               z-index: 3;
           }
           
           
           .device-screen {
               width: 100%;
               height: 100%;
           
               border-radius: 25px;
           
               overflow: hidden;
           
               background:
                   radial-gradient(
                       circle at 30% 20%,
                       #ffffff 0%,
                       #eeeeee 35%,
                       #d5d5d5 100%
                   );
           
               display: flex;
               align-items: center;
               justify-content: center;
           }
           
           
           .screen-content {
               text-align: center;
           
               transform: rotate(-2deg);
           }
           
           
           .screen-small {
               display: block;
           
               font-size: 11px;
           
               letter-spacing: .18em;
           
               text-transform: uppercase;
           
               color: #777777;
           }
           
           
           .screen-content strong {
               display: block;
           
               margin-top: 8px;
           
               font-size: 34px;
           
               letter-spacing: -.06em;
           
               color: #111111;
           }
           
           
           .screen-dot {
               display: block;
           
               width: 5px;
               height: 5px;
           
               margin: 18px auto 0;
           
               border-radius: 50%;
           
               background: #111111;
           }
           
           
           /* =========================================
              ORBITS
           ========================================= */
           
           .product-orbit {
               position: absolute;
           
               border: 1px solid #e4e4e4;
           
               border-radius: 50%;
           
               animation:
                   orbitRotate
                   12s
                   linear
                   infinite;
           }
           
           
           .orbit-one {
               width: 290px;
               height: 290px;
           }
           
           
           .orbit-two {
               width: 390px;
               height: 180px;
           
               transform: rotate(35deg);
           
               animation-duration: 17s;
               animation-direction: reverse;
           }
           
           
           /* =========================================
              FLOATING ELEMENTS
           ========================================= */
           
           .floating-element {
               position: absolute;
           
               z-index: 3;
           
               width: 48px;
               height: 48px;
           
               border-radius: 50%;
           
               display: flex;
               align-items: center;
               justify-content: center;
           
               background: rgba(245, 245, 245, .8);
           
               border: 1px solid #eeeeee;
           
               color: #777777;
           
               font-size: 18px;
           
               backdrop-filter: blur(10px);
           
               animation:
                   floating 5s
                   ease-in-out
                   infinite;
           }
           
           
           .element-one {
               top: 20%;
               left: 42%;
           }
           
           
           .element-two {
               top: 32%;
               left: 62%;
           
               animation-delay: 1s;
           }
           
           
           .element-three {
               bottom: 20%;
               left: 48%;
           
               animation-delay: 2s;
           }
           
           
           .element-four {
               top: 30%;
               right: 8%;
           
               animation-delay: 1.5s;
           }
           
           
           /* =========================================
              FOOTER
           ========================================= */
           
           .footer {
               position: relative;
           
               z-index: 20;
           
               padding: 20px 5vw;
           
               display: flex;
               align-items: center;
               justify-content: space-between;
           
               font-size: 10px;
           
               text-transform: uppercase;
           
               letter-spacing: .14em;
           
               color: #999999;
           }
           
           
           /* =========================================
              ANIMATIONS
           ========================================= */
           
           @keyframes introAppear {
           
               from {
                   opacity: 0;
                   transform: translateY(30px);
               }
           
               to {
                   opacity: 1;
                   transform: translateY(0);
               }
           
           }
           
           
           @keyframes iconAppear {
           
               from {
                   opacity: 0;
                   transform: scale(.5) rotate(-15deg);
               }
           
               to {
                   opacity: 1;
                   transform: scale(1) rotate(0);
               }
           
           }
           
           
           @keyframes iconFloat {
           
               0%,
               100% {
                   transform: translateY(0);
               }
           
               50% {
                   transform: translateY(-8px);
               }
           
           }
           
           
           @keyframes titleAppear {
           
               from {
                   opacity: 0;
                   filter: blur(12px);
                   transform: translateY(25px);
               }
           
               to {
                   opacity: 1;
                   filter: blur(0);
                   transform: translateY(0);
               }
           
           }
           
           
           @keyframes subtitleAppear {
           
               from {
                   opacity: 0;
                   transform: translateY(10px);
               }
           
               to {
                   opacity: 1;
                   transform: translateY(0);
               }
           
           }
           
           
           @keyframes loadingAppear {
           
               to {
                   opacity: 1;
               }
           
           }
           
           
           @keyframes loading {
           
               from {
                   width: 0;
               }
           
               to {
                   width: 100%;
               }
           
           }
           
           
           @keyframes marqueeMove {
           
               from {
                   transform: translateX(-25%);
               }
           
               to {
                   transform: translateX(0%);
               }
           
           }
           
           
           @keyframes heroContentAppear {
           
               from {
                   opacity: 0;
                   transform: translateY(40px);
               }
           
               to {
                   opacity: 1;
                   transform: translateY(0);
               }
           
           }
           
           
           @keyframes visualAppear {
           
               from {
                   opacity: 0;
                   transform: scale(.8) translateY(40px);
               }
           
               to {
                   opacity: 1;
                   transform: scale(1) translateY(0);
               }
           
           }
           
           
           @keyframes deviceFloat {
           
               0%,
               100% {
                   transform:
                       rotate(10deg)
                       perspective(700px)
                       rotateY(-8deg)
                       translateY(0);
               }
           
               50% {
                   transform:
                       rotate(7deg)
                       perspective(700px)
                       rotateY(-8deg)
                       translateY(-15px);
               }
           
           }
           
           
           @keyframes orbitRotate {
           
               from {
                   transform: rotate(0deg);
               }
           
               to {
                   transform: rotate(360deg);
               }
           
           }
           
           
           @keyframes floating {
           
               0%,
               100% {
                   transform: translateY(0);
               }
           
               50% {
                   transform: translateY(-18px);
               }
           
           }
           
           
           @keyframes pulse {
           
               0% {
                   box-shadow: 0 0 0 0 rgba(0, 0, 0, .25);
               }
           
               70% {
                   box-shadow: 0 0 0 8px rgba(0, 0, 0, 0);
               }
           
               100% {
                   box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
               }
           
           }
           
           
           /* =========================================
              MOBILE RESPONSIVE
           ========================================= */
           
           @media (max-width: 900px) {
           
               .navbar {
                   padding: 22px 6vw;
               }
           
               .hero {
                   padding:
                       130px
                       6vw
                       50px;
           
                   align-items: flex-start;
               }
           
               .hero-content {
                   width: 100%;
                   max-width: 650px;
               }
           
               .hero h2 {
                   font-size: clamp(58px, 15vw, 100px);
               }
           
               .hero-description {
                   max-width: 430px;
               }
           
               .hero-visual {
                   opacity: .3;
           
                   right: -100px;
                   bottom: 10%;
               }
           
               .floating-element {
                   opacity: .5;
               }
           
               .marquee-wrapper {
                   top: 125px;
               }
           
           }
           
           
           @media (max-width: 600px) {
           
               body {
                   overflow: hidden;
               }
           
               .intro-icon {
                   width: 54px;
                   height: 54px;
           
                   font-size: 28px;
               }
           
               .intro-title {
                   font-size: 42px;
               }
           
               .intro-subtitle {
                   font-size: 10px;
           
                   padding: 0 20px;
           
                   line-height: 1.6;
               }
           
               .navbar {
                   padding: 20px 5vw;
               }
           
               .brand {
                   font-size: 14px;
               }
           
               .brand-icon {
                   width: 29px;
                   height: 29px;
               }
           
               .nav-status {
                   font-size: 8px;
               }
           
               .marquee-wrapper {
                   top: 115px;
           
                   left: -20%;
           
                   width: 140%;
           
                   transform: rotate(-9deg);
               }
           
               .marquee {
                   padding: 13px 0;
               }
           
               .marquee-content span {
                   font-size: 21px;
           
                   padding: 0 15px;
               }
           
               .hero {
                   min-height: calc(100vh - 75px);
           
                   padding:
                       150px
                       6vw
                       40px;
               }
           
               .eyebrow {
                   font-size: 8px;
               }
           
               .hero h2 {
                   font-size: clamp(55px, 17vw, 85px);
               }
           
               .hero-description {
                   margin-top: 25px;
           
                   font-size: 15px;
           
                   line-height: 1.6;
               }
           
               .hero-visual {
                   width: 260px;
                   height: 260px;
           
                   right: -80px;
                   bottom: 12%;
           
                   opacity: .22;
               }
           
               .device {
                   width: 130px;
                   height: 210px;
               }
           
               .orbit-one {
                   width: 220px;
                   height: 220px;
               }
           
               .orbit-two {
                   width: 280px;
                   height: 130px;
               }
           
               .floating-element {
                   width: 38px;
                   height: 38px;
           
                   font-size: 14px;
               }
           
               .element-one {
                   top: 30%;
                   left: 75%;
               }
           
               .element-two {
                   top: 45%;
                   left: 20%;
               }
           
               .element-three {
                   bottom: 25%;
                   left: 70%;
               }
           
               .element-four {
                   top: 25%;
                   right: 8%;
               }
           
               .footer {
                   padding: 15px 5vw;
           
                   font-size: 8px;
               }
           
           }
           
           
           /* =========================================
              REDUCED MOTION
           ========================================= */
           
           @media (prefers-reduced-motion: reduce) {
           
               *,
               *::before,
               *::after {
                   animation-duration: 0.01ms !important;
                   animation-iteration-count: 1 !important;
                   transition-duration: 0.01ms !important;
               }
           
           }