:root {
    color-scheme: light;
    --aqua: #24f7e4;
    --teal: #0abdc6;
    --ink: #050607;
    --card: rgba(255, 255, 255, 0.055);
    --line: rgba(255, 255, 255, 0.12);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: auto;
}

body {
    margin: 0;
    overflow-x: hidden;
    background: radial-gradient(circle at 20% -10%, rgba(36, 247, 228, 0.16), transparent 30rem), radial-gradient(circle at 85% 12%, rgba(10, 189, 198, 0.12), transparent 34rem), linear-gradient(180deg, #050607 0%, #080b0d 42%, #050607 100%);
    color: #f7fbff;
    font-family: Inter, sans-serif;
}

    body::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -3;
        background-image: linear-gradient(rgba(36, 247, 228, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(36, 247, 228, 0.055) 1px, transparent 1px);
        background-size: 72px 72px;
        mask-image: linear-gradient(to bottom, black, transparent 82%);
        pointer-events: none;
    }

    body::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -2;
        opacity: 0.24;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
        pointer-events: none;
    }

::selection {
    background: rgba(36, 247, 228, 0.35);
}

a {
    color: inherit;
    text-decoration: none;
}

.font-display {
    font-family: Sora, Inter, sans-serif;
}

.font-tech {
    font-family: "Space Grotesk", Inter, sans-serif;
}

.glass {
    border: 1px solid var(--line);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035)), rgba(5, 6, 7, 0.56);
    box-shadow: 0 24px 90px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(22px);
}

.hairline {
    background: linear-gradient(90deg, transparent, rgba(36, 247, 228, 0.44), transparent);
    height: 1px;
}

.section-shell {
    position: relative;
    padding: clamp(76px, 9vw, 132px) 0;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    border: 1px solid rgba(36, 247, 228, 0.18);
    background: rgba(36, 247, 228, 0.055);
    color: #8cf7ff;
    border-radius: 999px;
    padding: 0.55rem 0.8rem;
    font: 700 0.72rem/1 "Space Grotesk", sans-serif;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

    .eyebrow::before {
        content: "";
        width: 0.45rem;
        height: 0.45rem;
        border-radius: 50%;
        background: var(--aqua);
        box-shadow: 0 0 18px var(--aqua);
    }

.gradient-text {
    background: linear-gradient(105deg, #ffffff 8%, #b8f8ff 42%, #24f7e4 68%, #dffcff 92%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.atpl-mark,
.atpl-wordmark {
    display: block;
    width: 100%;
    height: auto;
}

.logo-tile {
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 0 38px rgba(36, 247, 228, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.65);
}

.logo-wordmark-panel {
    border: 1px solid rgba(36, 247, 228, 0.18);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 54px rgba(0, 0, 0, 0.24), 0 0 42px rgba(36, 247, 228, 0.12);
}

.shine {
    position: relative;
    overflow: hidden;
}

    .shine::after {
        content: "";
        position: absolute;
        inset: -120% auto -120% -45%;
        width: 36%;
        transform: rotate(18deg);
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
        animation: shine 7s ease-in-out infinite;
    }

@keyframes shine {
    0%, 42% {
        transform: translateX(-160%) rotate(18deg);
    }

    68%, 100% {
        transform: translateX(520%) rotate(18deg);
    }
}

.ambient {
    position: absolute;
    pointer-events: none;
    filter: blur(48px);
    opacity: 0.52;
    transform: translateZ(0);
}

.ambient-a {
    width: 44rem;
    height: 18rem;
    background: linear-gradient(90deg, rgba(36, 247, 228, 0.18), rgba(112, 79, 255, 0.1), transparent);
    top: 8%;
    left: -18%;
    animation: driftA 14s ease-in-out infinite alternate;
}

.ambient-b {
    width: 38rem;
    height: 22rem;
    background: linear-gradient(90deg, transparent, rgba(10, 189, 198, 0.2), rgba(255, 184, 107, 0.08));
    right: -18%;
    bottom: 8%;
    animation: driftB 16s ease-in-out infinite alternate;
}

@keyframes driftA {
    from {
        transform: translate3d(0, 0, 0) rotate(-8deg);
    }

    to {
        transform: translate3d(10%, 12%, 0) rotate(6deg);
    }
}

@keyframes driftB {
    from {
        transform: translate3d(0, 0, 0) rotate(8deg);
    }

    to {
        transform: translate3d(-12%, -10%, 0) rotate(-4deg);
    }
}

.magnetic {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transition: transform 280ms ease, border-color 280ms ease, background 280ms ease;
}

    .magnetic::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        opacity: 0;
        background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.28), transparent 30%);
        transition: opacity 220ms ease;
    }

    .magnetic:hover {
        transform: translateY(-2px);
    }

        .magnetic:hover::before {
            opacity: 1;
        }

.tilt-card {
    transform-style: preserve-3d;
    transition: transform 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
}

    .tilt-card:hover {
        border-color: rgba(36, 247, 228, 0.4);
        box-shadow: 0 24px 90px rgba(36, 247, 228, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.14);
    }

.icon-box {
    display: grid;
    place-items: center;
    width: 3.35rem;
    height: 3.35rem;
    border: 1px solid rgba(36, 247, 228, 0.2);
    border-radius: 18px;
    color: var(--aqua);
    background: linear-gradient(135deg, rgba(36, 247, 228, 0.16), rgba(255, 255, 255, 0.04));
    box-shadow: inset 0 0 24px rgba(36, 247, 228, 0.08);
}

.nav-scrolled {
    border-color: rgba(255, 255, 255, 0.11) !important;
    background: rgba(5, 6, 7, 0.72) !important;
    box-shadow: 0 18px 54px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(18px);
}

#scroll-progress {
    transform-origin: 0 50%;
}

#cursor-glow {
    position: fixed;
    left: 0;
    top: 0;
    width: 18rem;
    height: 18rem;
    z-index: 70;
    pointer-events: none;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(36, 247, 228, 0.16), rgba(36, 247, 228, 0.04) 42%, transparent 70%);
    mix-blend-mode: screen;
    transform: translate3d(-50%, -50%, 0);
    opacity: 0;
    transition: opacity 300ms ease;
}

.loader-hide {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
}

.hero-visual {
    min-height: clamp(420px, 54vw, 650px);
}

.orbital {
    position: absolute;
    inset: 8%;
    border: 1px solid rgba(36, 247, 228, 0.16);
    border-radius: 999px;
    animation: rotate 20s linear infinite;
}

    .orbital:nth-child(2) {
        inset: 18% 2%;
        animation-duration: 26s;
        animation-direction: reverse;
    }

    .orbital:nth-child(3) {
        inset: 3% 22%;
        animation-duration: 32s;
    }

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

.scan-line {
    position: absolute;
    left: 12%;
    right: 12%;
    height: 1px;
    top: 36%;
    background: linear-gradient(90deg, transparent, rgba(36, 247, 228, 0.82), transparent);
    box-shadow: 0 0 28px rgba(36, 247, 228, 0.5);
    animation: scan 4.8s ease-in-out infinite;
}

@keyframes scan {
    0%, 100% {
        transform: translateY(-110px);
        opacity: 0;
    }

    25%, 70% {
        opacity: 1;
    }

    50% {
        transform: translateY(190px);
    }
}

.product-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(280px, 440px);
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

    .product-track::-webkit-scrollbar {
        display: none;
    }

.product-card {
    scroll-snap-align: center;
}

.device {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 330px;
}

.display-panel {
    position: relative;
    width: min(80%, 280px);
    aspect-ratio: 9 / 16;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: linear-gradient(145deg, rgba(36, 247, 228, 0.18), rgba(255, 255, 255, 0.04) 32%, rgba(5, 6, 7, 0.9)), linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent);
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.55), 0 0 70px rgba(36, 247, 228, 0.15);
    overflow: hidden;
}

    .display-panel::before {
        content: "";
        position: absolute;
        inset: 7%;
        border-radius: 18px;
        border: 1px solid rgba(36, 247, 228, 0.14);
        background: linear-gradient(rgba(36, 247, 228, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(36, 247, 228, 0.1) 1px, transparent 1px), radial-gradient(circle at 50% 18%, rgba(36, 247, 228, 0.3), transparent 32%), rgba(0, 0, 0, 0.26);
        background-size: 24px 24px, 24px 24px, auto, auto;
    }

    .display-panel::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 58%;
        aspect-ratio: 2.45 / 1;
        border-radius: 18px;
        background-color: rgba(255, 255, 255, 0.92);
        background-image: url("../images/ATPLSHORT.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 88% auto;
        box-shadow: 0 0 28px rgba(36, 247, 228, 0.28);
    }

    .display-panel.wide {
        width: min(88%, 360px);
        aspect-ratio: 16 / 9;
        border-radius: 18px;
    }

    .display-panel.frame {
        width: min(86%, 330px);
        aspect-ratio: 1 / 1.22;
        clip-path: polygon(12% 0, 88% 0, 100% 100%, 0 100%);
    }

.marquee {
    display: flex;
    width: max-content;
    animation: marquee 28s linear infinite;
}

    .marquee:hover {
        animation-play-state: paused;
    }

@keyframes marquee {
    to {
        transform: translateX(-50%);
    }
}

.timeline-dot {
    position: relative;
}

    .timeline-dot::before {
        content: "";
        position: absolute;
        left: 1.05rem;
        top: 3.2rem;
        bottom: -2rem;
        width: 1px;
        background: linear-gradient(rgba(36, 247, 228, 0.42), transparent);
    }

    .timeline-dot:last-child::before {
        display: none;
    }

.reveal {
    opacity: 0;
    transform: translateY(36px);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-36px);
}

.reveal-right {
    opacity: 0;
    transform: translateX(36px);
}

@media (max-width: 767px) {
    #cursor-glow {
        display: none;
    }

    .section-shell {
        padding: 72px 0;
    }

    .hero-visual {
        min-height: 380px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }

    .reveal,
    .reveal-left,
    .reveal-right {
        opacity: 1;
        transform: none;
    }
}

body.light-theme {
    color-scheme: light;
    --aqua: #18bac5;
    --teal: #119aa4;
    --ink: #f6fbfc;
    --card: rgba(255, 255, 255, 0.74);
    --line: rgba(10, 48, 56, 0.13);
    background: radial-gradient(circle at 18% -10%, rgba(36, 247, 228, 0.22), transparent 30rem), radial-gradient(circle at 86% 12%, rgba(255, 184, 107, 0.13), transparent 32rem), radial-gradient(circle at 50% 74%, rgba(36, 247, 228, 0.11), transparent 42rem), linear-gradient(180deg, #fbfeff 0%, #eef8fa 46%, #ffffff 100%);
    color: #11252c;
}

    body.light-theme::before {
        background-image: linear-gradient(rgba(17, 154, 164, 0.085) 1px, transparent 1px), linear-gradient(90deg, rgba(17, 154, 164, 0.085) 1px, transparent 1px);
        mask-image: linear-gradient(to bottom, black, transparent 86%);
    }

    body.light-theme::after {
        opacity: 0.085;
        mix-blend-mode: multiply;
    }

.light-theme .glass {
    border-color: rgba(8, 56, 66, 0.13);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(240, 252, 254, 0.56)), rgba(255, 255, 255, 0.72);
    box-shadow: 0 24px 82px rgba(16, 50, 60, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.light-theme .gradient-text {
    background: linear-gradient(105deg, #11252c 4%, #176a72 42%, #18bac5 70%, #0b3d46 94%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}

.light-theme .eyebrow {
    border-color: rgba(17, 154, 164, 0.22);
    background: rgba(24, 186, 197, 0.08);
    color: #087985;
}

.light-theme .hairline {
    background: linear-gradient(90deg, transparent, rgba(17, 154, 164, 0.36), transparent);
}

.light-theme .ambient-a {
    background: linear-gradient(90deg, rgba(36, 247, 228, 0.22), rgba(112, 79, 255, 0.08), transparent);
}

.light-theme .ambient-b {
    background: linear-gradient(90deg, transparent, rgba(10, 189, 198, 0.18), rgba(255, 184, 107, 0.16));
}

.light-theme .icon-box {
    border-color: rgba(17, 154, 164, 0.22);
    color: #109aa4;
    background: linear-gradient(135deg, rgba(24, 186, 197, 0.13), rgba(255, 255, 255, 0.8));
    box-shadow: inset 0 0 24px rgba(24, 186, 197, 0.08);
}

.light-theme .logo-tile,
.light-theme .logo-wordmark-panel {
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 48px rgba(16, 50, 60, 0.12), 0 0 34px rgba(24, 186, 197, 0.13);
}

.light-theme .nav-scrolled {
    border-color: rgba(8, 56, 66, 0.12) !important;
    background: rgba(255, 255, 255, 0.78) !important;
    box-shadow: 0 18px 54px rgba(16, 50, 60, 0.12);
}

.light-theme .tilt-card:hover {
    border-color: rgba(24, 186, 197, 0.44);
    box-shadow: 0 24px 76px rgba(24, 186, 197, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.light-theme .display-panel {
    border-color: rgba(8, 56, 66, 0.14);
    background: linear-gradient(145deg, rgba(24, 186, 197, 0.16), rgba(255, 255, 255, 0.72) 34%, rgba(231, 247, 250, 0.96)), linear-gradient(180deg, rgba(255, 255, 255, 0.88), transparent);
    box-shadow: 0 28px 86px rgba(16, 50, 60, 0.16), 0 0 58px rgba(24, 186, 197, 0.12);
}

    .light-theme .display-panel::before {
        border-color: rgba(24, 186, 197, 0.16);
        background: linear-gradient(rgba(24, 186, 197, 0.11) 1px, transparent 1px), linear-gradient(90deg, rgba(24, 186, 197, 0.11) 1px, transparent 1px), radial-gradient(circle at 50% 18%, rgba(24, 186, 197, 0.22), transparent 32%), rgba(255, 255, 255, 0.42);
        background-size: 24px 24px, 24px 24px, auto, auto;
    }

.light-theme .orbital {
    border-color: rgba(17, 154, 164, 0.18);
}

.light-theme .scan-line {
    background: linear-gradient(90deg, transparent, rgba(17, 154, 164, 0.7), transparent);
    box-shadow: 0 0 28px rgba(17, 154, 164, 0.38);
}

.light-theme #loader {
    background: #f6fbfc !important;
}

.light-theme #cursor-glow {
    background: radial-gradient(circle, rgba(24, 186, 197, 0.2), rgba(24, 186, 197, 0.06) 42%, transparent 70%);
    mix-blend-mode: multiply;
}

.light-theme [class*="text-white"] {
    color: rgba(17, 37, 44, 0.84) !important;
}

.light-theme .text-aqua,
.light-theme [class*="text-aqua"] {
    color: #07949f !important;
}

.light-theme .text-frost,
.light-theme [class*="text-frost"] {
    color: #087985 !important;
}

.light-theme [class*="border-white"] {
    border-color: rgba(8, 56, 66, 0.12) !important;
}

.light-theme [class*="bg-white"] {
    background-color: rgba(255, 255, 255, 0.62) !important;
}

.light-theme [class*="bg-black"] {
    background-color: rgba(255, 255, 255, 0.68) !important;
}

.light-theme .bg-ink,
.light-theme [class*="bg-ink"] {
    background-color: rgba(255, 255, 255, 0.9) !important;
}

.light-theme .bg-aqua {
    background-color: #18bac5 !important;
}

.light-theme .text-ink {
    color: #ffffff !important;
}

.light-theme footer {
    border-color: rgba(8, 56, 66, 0.12) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(234, 249, 251, 0.92)) !important;
}

@keyframes loaderBar {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(220%);
    }
}
/*.reveal,
.reveal-left,
.reveal-right {
    opacity: 1 !important;
    transform: none !important;
}*/