@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
    font-family: 'Poppins', sans-serif;
}

body {
    background-color: #0a0a0a;
    color: #ffffff;
}

.hero-bg {
    background-color: #0a0a0a;
    background-image: 
        linear-gradient(to right, #1a1a1a 1px, transparent 1px),
        linear-gradient(to bottom, #1a1a1a 1px, transparent 1px);
    background-size: 50px 50px;
    background-position: center center;
}

/* Animated word loader */
.card {
    --bg-color: transparent;
    background-color: var(--bg-color);
    padding: 0;
    border-radius: 1.25rem;
}
.loader {
    color: rgb(124, 124, 124);
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 5rem;
    box-sizing: content-box;
    height: 100px;
    padding: 10px;
    display: flex;
    border-radius: 8px;
}

@media (max-width: 768px) {
    .loader {
        font-size: 2.5rem;
        height: 60px;
    }
}

.words {
    overflow: hidden;
    position: relative;
    height: 100%;
}
.words::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        transparent 0%,
        transparent 20%,
        transparent 80%,
        transparent 100%
    );
    z-index: 20;
}
.word {
    display: block;
    height: 100%;
    line-height: 100px;
    color: #A9FB05;
    animation: spin_4991 6s infinite;
}

@media (max-width: 768px) {
    .word {
        line-height: 60px;
    }
}
@keyframes spin_4991 {
    10% { transform: translateY(-105%); }
    33% { transform: translateY(-100%); }
    43% { transform: translateY(-205%); }
    66% { transform: translateY(-200%); }
    76% { transform: translateY(-305%); }
    100% { transform: translateY(-300%); }
}

/* Animated border button effect - Green theme */
.btn-container {
    position: relative;
    display: inline-block;
}

.get-started-btn {
    position: relative;
    z-index: 2;
    background: linear-gradient(180deg, #0a1f0a, #000000, #0f1f0f);
    color: white;
    padding: 12px 32px;
    border-radius: 9999px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
    text-align: center;
}

.get-started-btn:hover {
    transform: scale(1.02);
}

.white-border,
.border-layer,
.darkBorderBg,
.glow-layer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 9999px;
    overflow: hidden;
    pointer-events: none;
}

.white-border {
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    filter: blur(2px);
    z-index: 0;
}

.white-border::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(83deg);
    width: 400px;
    height: 400px;
    background-repeat: no-repeat;
    background-position: 0 0;
    filter: brightness(1.4);
    background-image: conic-gradient(
        rgba(0, 0, 0, 0) 0%,
        #A9FB05,
        rgba(0, 0, 0, 0) 8%,
        rgba(0, 0, 0, 0) 50%,
        #C5FC4A,
        rgba(0, 0, 0, 0) 58%
    );
    transition: all 2s;
}

.border-layer {
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    filter: blur(0.5px);
    z-index: 0;
}

.border-layer::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(70deg);
    width: 400px;
    height: 400px;
    filter: brightness(1.3);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-image: conic-gradient(
        #1c191c,
        #A9FB05 5%,
        #1c191c 14%,
        #1c191c 50%,
        #A9FB05 60%,
        #1c191c 64%
    );
    transition: all 2s;
}

.darkBorderBg {
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    z-index: -1;
}

.darkBorderBg::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(82deg);
    width: 400px;
    height: 400px;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-image: conic-gradient(
        rgba(0, 0, 0, 0),
        #7FB804,
        rgba(0, 0, 0, 0) 10%,
        rgba(0, 0, 0, 0) 50%,
        #8BC906,
        rgba(0, 0, 0, 0) 60%
    );
    transition: all 2s;
}

.glow-layer {
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    filter: blur(30px);
    opacity: 0.4;
    z-index: -2;
}

.glow-layer::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(60deg);
    width: 600px;
    height: 600px;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-image: conic-gradient(
        #000,
        #A9FB05 5%,
        #000 38%,
        #000 50%,
        #C5FC4A 60%,
        #000 87%
    );
    transition: all 2s;
}

.btn-container:hover .darkBorderBg::before {
    transform: translate(-50%, -50%) rotate(-98deg);
}

.btn-container:hover .glow-layer::before {
    transform: translate(-50%, -50%) rotate(-120deg);
}

.btn-container:hover .white-border::before {
    transform: translate(-50%, -50%) rotate(-97deg);
}

.btn-container:hover .border-layer::before {
    transform: translate(-50%, -50%) rotate(-110deg);
}

body {
    background-color: #0a0a0a;
    color: #ffffff;
    min-height: 100vh;
}

.hero-bg {
    background-color: #0a0a0a;
    background-image: 
        linear-gradient(to right, #1a1a1a 1px, transparent 1px),
        linear-gradient(to bottom, #1a1a1a 1px, transparent 1px);
    background-size: 50px 50px;
    background-position: center center;
}

.contact-card {
    width: 100%;
    max-width: 450px;
    background: #171717;
    transition: 1s ease-in-out;
    clip-path: polygon(30px 0%, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%, 0% 30px);
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    display: flex;
    flex-direction: column;
    border: 2px solid #2a2a2a;
    padding: 2em;
}

.contact-card:hover {
    border-color: #A9FB05;
    transform: translateY(-5px);
}

.contact-card h2 {
    font-weight: bold;
    color: white;
    text-align: center;
    font-size: 1.5em;
    margin-bottom: 1em;
}

.contact-card .info {
    font-weight: 400;
    color: #a0a0a0;
    text-align: center;
    font-size: 0.9em;
    margin-bottom: 2em;
}

.contact-options {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.contact-option {
    display: flex;
    align-items: center;
    gap: 1em;
    padding: 1em;
    background: #1f1f1f;
    border-radius: 12px;
    border: 1px solid #2a2a2a;
    transition: all 0.3s;
    cursor: pointer;
    text-decoration: none;
    color: white;
}

.contact-option:hover {
    border-color: #A9FB05;
    background: #252525;
    transform: translateX(5px);
}

.contact-option .icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    background: linear-gradient(135deg, #A9FB05, #7FB804);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-option .icon svg {
    width: 24px;
    height: 24px;
}

.contact-option .text {
    flex: 1;
}

.contact-option .text h3 {
    font-weight: 600;
    font-size: 1em;
    margin-bottom: 0.2em;
}

.contact-option .text p {
    font-size: 0.75em;
    color: #a0a0a0;
}

.form-container {
    width: 100%;
    max-width: 500px;
    background: linear-gradient(#171717, #171717) padding-box,
                linear-gradient(145deg, transparent 35%, #A9FB05, #7FB804) border-box;
    border: 2px solid transparent;
    padding: 32px 24px;
    font-size: 14px;
    color: white;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-sizing: border-box;
    border-radius: 16px;
    background-size: 200% 100%;
    animation: gradient 5s ease infinite;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.form-container button:active {
    scale: 0.95;
}

.form-container .form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-container .form-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.form-container .form-group label {
    display: block;
    margin-bottom: 5px;
    color: #a0a0a0;
    font-weight: 600;
    font-size: 12px;
}

.form-container .form-group input {
    width: 100%;
    padding: 12px 16px;
    border-radius: 8px;
    color: #fff;
    background-color: transparent;
    border: 1px solid #414141;
}

.form-container .form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border-radius: 8px;
    resize: none;
    color: #fff;
    height: 96px;
    border: 1px solid #414141;
    background-color: transparent;
}

.form-container .form-group input::placeholder,
.form-container .form-group textarea::placeholder {
    opacity: 0.5;
}

.form-container .form-group input:focus,
.form-container .form-group textarea:focus {
    outline: none;
    border-color: #A9FB05;
}

.form-container .form-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    color: #000;
    font-weight: 600;
    width: 40%;
    background: #A9FB05;
    border: 1px solid #A9FB05;
    padding: 12px 16px;
    font-size: inherit;
    gap: 8px;
    margin-top: 8px;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.3s;
}

.form-container .form-submit-btn:hover {
    background-color: #C5FC4A;
    border-color: #C5FC4A;
    transform: translateY(-2px);
}

/* ============================================================
   NEW: visible keyboard focus (accessibility floor)
   ============================================================ */
a:focus-visible,
button:focus-visible {
    outline: 2px solid #A9FB05;
    outline-offset: 3px;
    border-radius: 4px;
}

/* ============================================================
   NEW: sticky nav that gains a hairline + darker backdrop
   once the page is scrolled, so it stays readable over content
   without fighting the hero for attention while at the top.
   ============================================================ */
.main-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(10, 10, 10, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    border-bottom: 1px solid transparent;
    transition: background 0.35s ease, border-color 0.35s ease, backdrop-filter 0.35s ease;
}

.main-nav.scrolled {
    background: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom-color: #1f1f1f;
}

/* ============================================================
   NEW: quiet radial glow behind the hero headline for depth,
   and a single staggered entrance for the hero content.
   ============================================================ */
.hero-bg {
    position: relative;
    overflow: hidden;
}

.hero-bg::before {
    content: "";
    position: absolute;
    top: -260px;
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    height: 900px;
    background: radial-gradient(circle, rgba(169, 251, 5, 0.09) 0%, rgba(169, 251, 5, 0) 65%);
    pointer-events: none;
    z-index: 0;
}

.hero-bg > * {
    position: relative;
    z-index: 1;
}

.hero-enter {
    opacity: 0;
    transform: translateY(18px);
    animation: hero-rise 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-enter.delay-1 { animation-delay: 0.1s; }
.hero-enter.delay-2 { animation-delay: 0.25s; }
.hero-enter.delay-3 { animation-delay: 0.4s; }

@keyframes hero-rise {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================
   NEW: FEATURES SECTION
   Grid of feature-card blocks — each one holds an image and a
   short description of what that feature does. See index.html
   for the duplicable markup.
   ============================================================ */
.features-section {
    padding: 100px 24px 120px;
    max-width: 1180px;
    margin: 0 auto;
}

.features-header {
    text-align: center;
    max-width: 620px;
    margin: 0 auto 60px;
}

.features-header h2 {
    font-size: clamp(1.8rem, 3.5vw, 2.75rem);
    font-weight: 500;
    color: #ffffff;
    line-height: 1.25;
}

.features-header p {
    color: #a0a0a0;
    font-size: 1rem;
    margin-top: 14px;
    line-height: 1.6;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

@media (max-width: 900px) {
    .feature-grid {
        grid-template-columns: 1fr;
        max-width: 460px;
        margin: 0 auto;
    }
}

.feature-card {
    background: #141414;
    border: 1px solid #262626;
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.4s ease,
                box-shadow 0.4s ease;
    opacity: 0;
    transform: translateY(24px);
}

.feature-card.is-visible {
    animation: feature-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes feature-rise {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.feature-card:hover {
    border-color: #A9FB05;
    transform: translateY(-6px);
    box-shadow: 0 20px 40px -20px rgba(169, 251, 5, 0.25);
}

.feature-media {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #0d0d0d;
    border-bottom: 1px solid #262626;
}

.feature-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.feature-card:hover .feature-media img {
    transform: scale(1.06);
}

.feature-body {
    padding: 24px 22px 28px;
}

.feature-body h3 {
    font-size: 1.15rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 8px;
}

.feature-body p {
    font-size: 0.9rem;
    color: #a0a0a0;
    line-height: 1.6;
}

/* ============================================================
   NEW: APP UI SHOWCASE
   A phone-frame mockup that holds a real screenshot of the app,
   placed right under the hero. The grid pattern behind it echoes
   the hero background but fades out toward the bottom, so it
   blends into the plain-black features section that follows.
   ============================================================ */
.app-showcase {
    position: relative;
    overflow: hidden;
    padding: 40px 24px 120px;
    display: flex;
    justify-content: center;
}

.app-showcase::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, #141414 1px, transparent 1px),
        linear-gradient(to bottom, #141414 1px, transparent 1px);
    background-size: 50px 50px;
    background-position: center center;
    -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 85%);
    mask-image: linear-gradient(to bottom, black 0%, transparent 85%);
    z-index: 0;
}

.phone-mockup {
    position: relative;
    z-index: 1;
    width: clamp(220px, 70vw, 300px);
    aspect-ratio: 9 / 19.5;
    background: #050505;
    border: 10px solid #050505;
    border-radius: 44px;
    overflow: hidden;
    box-shadow:
        0 0 90px rgba(169, 251, 5, 0.16),
        0 40px 70px -30px rgba(0, 0, 0, 0.8);
    opacity: 0;
    transform: translateY(24px);
}

.phone-mockup.is-visible {
    animation: feature-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.phone-mockup img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    .hero-enter,
    .feature-card,
    .feature-card.is-visible,
    .phone-mockup,
    .phone-mockup.is-visible {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}