@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');


/* ==========================================
        ROOT VARIABLES
========================================== */

:root {

    --bg-dark: #080c12;

    --bg-card: rgba(255,255,255,0.06);

    --primary: #4f8cff;

    --secondary: #37d5d6;

    --text-main: #f5f7fa;

    --text-muted: #aab4c3;

    --border: rgba(255,255,255,0.12);

    --shadow:
        0 20px 60px rgba(0,0,0,0.35);

    --radius: 22px;

}


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

* {

    margin:0;
    padding:0;
    box-sizing:border-box;

}


html {

    scroll-behavior:smooth;

}


body {

    font-family:'Inter', sans-serif;

    background:
    radial-gradient(
        circle at top right,
        rgba(79,140,255,0.15),
        transparent 35%
    ),
    var(--bg-dark);

    color:var(--text-main);

    overflow-x:hidden;

}


a {

    text-decoration:none;

}


img {

    max-width:100%;
    display:block;

}


.section-padding {

    padding:120px 0;

}


/* ==========================================
        NAVIGATION
========================================== */


.custom-navbar {

    padding:25px 0;

    transition:.4s;

    background:transparent;

}


.custom-navbar.scrolled {

    background:
    rgba(8,12,18,.85);

    backdrop-filter:blur(15px);

    box-shadow:
    0 10px 40px rgba(0,0,0,.25);

    padding:15px 0;

}



.logo {

    font-size:28px;

    font-weight:800;

    color:white;

    letter-spacing:-1px;

}



.nav-link {

    color:
    rgba(255,255,255,.75);

    margin:0 12px;

    font-weight:500;

    transition:.3s;

}


.nav-link:hover,
.nav-link.active {

    color:white;

}



.btn-nav {

    padding:12px 25px;

    border-radius:50px;

}



/* ==========================================
        BUTTONS
========================================== */


.btn-primary {

    background:
    linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    border:none;

    color:white;

    border-radius:50px;

    padding:15px 35px;

    font-weight:600;

    box-shadow:
    0 15px 35px rgba(79,140,255,.35);

    transition:.3s;

}



.btn-primary:hover {

    transform:translateY(-4px);

    box-shadow:
    0 20px 45px rgba(79,140,255,.5);

}



.btn-outline-light {

    border-radius:50px;

    padding:15px 35px;

    margin-left:15px;

}


/* ==========================================
        HERO SECTION
========================================== */


.hero-section {

    position:relative;

    min-height:100vh;

    overflow:hidden;

}



.hero-bg {


    position:absolute;

    width:700px;

    height:700px;

    right:-200px;

    top:100px;

    background:

    radial-gradient(
        circle,
        rgba(55,213,214,.25),
        transparent 65%
    );

    filter:blur(40px);

}



.hero-tag {


    display:inline-block;

    padding:10px 18px;

    border-radius:50px;

    background:

    rgba(255,255,255,.08);

    border:

    1px solid var(--border);

    color:

    var(--secondary);

    font-size:13px;

    letter-spacing:1.5px;

    margin-bottom:25px;

}



.hero-title {


    font-size:

    clamp(45px,6vw,80px);

    line-height:1.05;

    font-weight:800;

    letter-spacing:-3px;

}



.hero-title span {

    display:block;

    background:

    linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}



.hero-text {


    color:

    var(--text-muted);

    font-size:20px;

    line-height:1.7;

    max-width:600px;

    margin:30px 0;

}



.hero-stats {


    display:flex;

    gap:50px;

    margin-top:60px;

}



.hero-stats h3 {


    font-size:32px;

    margin-bottom:5px;

}


.hero-stats span {


    color:var(--text-muted);

    font-size:14px;

}



/* ==========================================
        HERO IMAGE
========================================== */


.hero-image {


    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}



.circle-glow {


    position:absolute;

    width:450px;

    height:450px;

    border-radius:50%;

    background:

    radial-gradient(
        circle,
        rgba(79,140,255,.35),
        transparent 70%
    );

    filter:blur(20px);

}



.floating-lock {

    animation:floating 6s ease-in-out infinite;

    filter:

    drop-shadow(
        0 35px 70px rgba(0,0,0,.7)
    );

}



@keyframes floatLock {


    0%,
    100% {

        transform:translateY(0);

    }


    50% {

        transform:translateY(-20px);

    }

}



/* ==========================================
        SCROLL INDICATOR
========================================== */


.scroll-indicator {


    position:absolute;

    bottom:40px;

    left:50%;

}



.scroll-indicator span {


    display:block;

    width:25px;

    height:40px;

    border:

    2px solid white;

    border-radius:20px;

    position:relative;

}



.scroll-indicator span::before {


    content:"";

    position:absolute;

    width:5px;

    height:8px;

    background:white;

    border-radius:10px;

    left:50%;

    top:8px;

    transform:translateX(-50%);

    animation:scrollDown 2s infinite;

}



@keyframes scrollDown {


    0% {

        opacity:0;

        transform:
        translate(-50%,0);

    }


    50% {

        opacity:1;

    }


    100% {

        opacity:0;

        transform:
        translate(-50%,15px);

    }

}

 
/* ==========================================
        SECTION TITLES
========================================== */


.section-title {

    max-width:750px;

    margin-left:auto;

    margin-right:auto;

}


.section-tag {

    display:inline-block;

    color:var(--secondary);

    font-size:13px;

    letter-spacing:2px;

    font-weight:600;

    margin-bottom:20px;

}



.section-title h2 {

    font-size:

    clamp(35px,4vw,55px);

    font-weight:800;

    letter-spacing:-2px;

    line-height:1.15;

}



.section-title p {

    color:var(--text-muted);

    font-size:18px;

    margin-top:20px;

}



/* ==========================================
        FEATURE CARDS
========================================== */


.feature-card {


    height:100%;


    padding:35px 30px;


    background:

    rgba(255,255,255,.05);


    border:

    1px solid var(--border);


    border-radius:

    var(--radius);


    transition:.35s ease;


}



.feature-card:hover {


    transform:

    translateY(-10px);


    border-color:

    rgba(55,213,214,.5);


    background:

    rgba(255,255,255,.08);


}



.feature-card i {


    width:60px;

    height:60px;


    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:20px;


    background:

    rgba(55,213,214,.12);


    color:

    var(--secondary);


    font-size:26px;


    margin-bottom:25px;


}



.feature-card h3 {


    font-size:24px;

    margin-bottom:15px;


}



.feature-card p {


    color:

    var(--text-muted);


    line-height:1.7;


}

/* ==========================================
        HOW IT WORKS
========================================== */


.how {


    position:relative;

}



.step-card {


    position:relative;

    padding:40px 25px;

    background:

    rgba(255,255,255,.03);

    border:

    1px solid var(--border);

    border-radius:

    var(--radius);

    text-align:center;

    transition:.4s;


}



.step-card:hover {


    transform:

    translateY(-10px);


    background:

    rgba(255,255,255,.07);

}



.step-number {


    width:70px;

    height:70px;


    margin:

    0 auto 25px;


    border-radius:50%;


    display:flex;

    align-items:center;

    justify-content:center;


    font-size:24px;

    font-weight:800;


    background:

    linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );


}



.step-card h4 {


    font-size:24px;

    margin-bottom:15px;

}



.step-card p {


    color:

    var(--text-muted);

}



/* ==========================================
        SHOWCASE
========================================== */


.showcase {


    position:relative;

}



.showcase-image {


    position:relative;

    padding:40px;


}



.showcase-image img {


    filter:

    drop-shadow(
        0 30px 50px rgba(0,0,0,.5)
    );


}



.showcase h2 {


    font-size:

    clamp(35px,4vw,55px);

    font-weight:800;

    letter-spacing:-2px;

    margin-bottom:25px;


}



.showcase p {


    color:

    var(--text-muted);

    font-size:18px;

    line-height:1.8;

}



/* ==========================================
        FEATURE LIST
========================================== */


.feature-list {


    list-style:none;

    padding:0;

}



.feature-list li {


    margin-bottom:15px;

    color:

    #dce3ec;

    position:relative;

    padding-left:30px;


}



.feature-list li::before {


    content:"?";

    position:absolute;

    left:0;

    color:

    var(--secondary);

    font-weight:700;

}

 
/* ==========================================
        MOBILE APP SECTION
========================================== */


.app-section {

    position:relative;

}



.phone-wrapper {


    display:flex;

    justify-content:center;

    position:relative;


}



.phone-wrapper::before {


    content:"";

    position:absolute;

    width:350px;

    height:350px;

    background:

    radial-gradient(
        circle,
        rgba(79,140,255,.35),
        transparent 70%
    );

    filter:blur(40px);

}



.phone-wrapper img {


    position:relative;

    max-height:650px;

    filter:

    drop-shadow(
        0 40px 60px rgba(0,0,0,.5)
    );


}



.app-feature {


    display:flex;

    gap:20px;

    padding:20px;

    border-radius:20px;

    background:

    rgba(255,255,255,.04);

    border:

    1px solid var(--border);

    transition:.3s;


}



.app-feature:hover {


    background:

    rgba(255,255,255,.08);

    transform:

    translateX(8px);


}



.app-feature i {


    font-size:28px;

    color:

    var(--secondary);

    margin-top:5px;

}



.app-feature h5 {


    font-size:18px;

    margin-bottom:8px;


}



.app-feature p {


    color:

    var(--text-muted);

    margin:0;

    font-size:14px;

}



/* ==========================================
        SPECIFICATIONS
========================================== */


.spec-table {


    max-width:900px;

    margin:60px auto 0;

    background:

    rgba(255,255,255,.04);

    border:

    1px solid var(--border);

    border-radius:

    var(--radius);

    overflow:hidden;

    backdrop-filter:

    blur(15px);


}



.spec-row {


    display:flex;

    justify-content:space-between;

    padding:25px 35px;

    border-bottom:

    1px solid var(--border);

}



.spec-row:last-child {


    border-bottom:none;

}



.spec-row span {


    color:

    var(--text-muted);


}



.spec-row strong {


    color:white;

    font-weight:600;

}



/* ==========================================
        TESTIMONIALS
========================================== */


.testimonial-card {


    height:100%;

    padding:35px;


    background:

    rgba(255,255,255,.05);


    border:

    1px solid var(--border);


    border-radius:

    var(--radius);


    transition:.3s;


}



.testimonial-card:hover {


    transform:

    translateY(-10px);


}



.testimonial-card p {


    color:#e5eaf2;

    font-size:17px;

    line-height:1.8;

    margin-bottom:25px;


}



.testimonial-card h5 {


    margin-bottom:5px;

}



.testimonial-card span {


    color:

    var(--secondary);

    font-size:14px;


}



/* ==========================================
        FAQ
========================================== */


.faq {


    position:relative;

}



.accordion {


    max-width:900px;

    margin:auto;

}



.accordion-item {


    background:

    rgba(255,255,255,.05);

    border:

    1px solid var(--border);

    margin-bottom:15px;

    border-radius:15px!important;

    overflow:hidden;


}



.accordion-button {


    background:

    transparent;

    color:white;

    font-size:18px;

    padding:25px;

}



.accordion-button:not(.collapsed) {


    background:

    rgba(79,140,255,.15);

    color:white;


}



.accordion-button:focus {


    box-shadow:none;


}



.accordion-body {


    color:

    var(--text-muted);

    line-height:1.7;

    padding:0 25px 25px;


}



/* ==========================================
        CTA
========================================== */


.cta {


    margin:

    80px auto;

    padding:

    100px 30px;


    border-radius:

    40px;


    background:


    linear-gradient(
        135deg,
        rgba(79,140,255,.25),
        rgba(55,213,214,.2)
    );


    border:

    1px solid var(--border);


}



.cta h2 {


    font-size:

    clamp(35px,5vw,60px);


    font-weight:800;

    letter-spacing:-2px;

}



.cta p {


    color:

    #d0d8e5;

    font-size:20px;

    max-width:650px;

    margin:

    25px auto 40px;


}



/* ==========================================
        FOOTER
========================================== */


.footer {


    padding:50px 0;

    border-top:

    1px solid var(--border);


}



.footer h3 {


    font-weight:800;


}



.footer p {


    color:

    var(--text-muted);

}

 
/* ==========================================
        RESPONSIVE DESIGN
========================================== */


/* Large tablets and small laptops */

@media (max-width: 1200px) {


    .hero-title {

        font-size:60px;

    }


    .hero-stats {

        gap:30px;

    }


    .feature-card {

        padding:30px 25px;

    }


}



/* Tablets */

@media (max-width: 992px) {


    .section-padding {

        padding:90px 0;

    }



    .custom-navbar {

        background:

        rgba(8,12,18,.9);

        backdrop-filter:

        blur(15px);

    }



    .navbar-collapse {

        margin-top:20px;

        padding:20px;

        background:

        rgba(255,255,255,.05);

        border-radius:20px;

    }



    .nav-link {

        padding:12px 0;

    }



    .hero-section {

        padding-top:100px;

    }



    .hero-title {

        font-size:52px;

    }



    .hero-image {

        margin-top:60px;

    }



    .hero-stats {

        margin-top:40px;

    }



    .showcase-image {

        margin-bottom:50px;

    }



    .phone-wrapper {

        margin-bottom:60px;

    }



}



/* Mobile */

@media (max-width: 768px) {

.spec-bottom {

    grid-template-columns:1fr;

}

    .section-padding {

        padding:70px 0;

    }



    .hero-title {

        font-size:42px;

        letter-spacing:-1px;

    }



    .hero-text {

        font-size:17px;

    }



    .hero-buttons {


        display:flex;

        flex-direction:column;

        gap:15px;


    }



    .btn-outline-light {


        margin-left:0;

    }



    .hero-stats {


        flex-direction:column;

        gap:25px;


    }



    .circle-glow {


        width:300px;

        height:300px;


    }



    .feature-card {


        text-align:center;

    }



    .feature-icon {


        margin-left:auto;

        margin-right:auto;


    }



    .section-title h2,

    .showcase h2 {


        font-size:36px;

    }



    .spec-row {


        flex-direction:column;

        gap:10px;

        padding:20px;

    }



    .cta {


        padding:70px 20px;

        border-radius:25px;

    }



    .cta h2 {


        font-size:38px;

    }



    .footer {


        text-align:center;

    }



}



/* Small phones */

@media (max-width: 480px) {



    .hero-title {

        font-size:36px;

    }



    .hero-tag {


        font-size:11px;

    }



    .hero-stats h3 {

        font-size:28px;

    }



    .feature-card {


        padding:25px 20px;

    }



    .app-feature {


        flex-direction:column;

    }


}

 
/* ==========================================
        BIOMETRIC SECTION
========================================== */


.biometric-section {


    position:relative;

}



.bio-card {


    height:100%;

    padding:45px 35px;


    background:

    rgba(255,255,255,.05);


    border:

    1px solid var(--border);


    border-radius:

    var(--radius);


    text-align:center;


    transition:.4s;


}



.bio-card:hover {


    transform:

    translateY(-12px);


    background:

    rgba(255,255,255,.08);


    box-shadow:

    0 25px 60px rgba(0,0,0,.35);


}



.bio-icon {


    width:80px;

    height:80px;


    margin:

    0 auto 25px;


    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:25px;


    background:

    linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );


    font-size:35px;


}



.bio-card h3 {


    font-size:28px;

    margin-bottom:15px;


}



.bio-card p {


    color:

    var(--text-muted);


    line-height:1.7;


}

/* ==========================================
        TECHNOLOGY SECTION
========================================== */


.technology-image img {

    filter:
    drop-shadow(
        0 40px 70px rgba(0,0,0,.5)
    );

}



.tech-list {

    margin-top:40px;

}



.tech-item {

    display:flex;

    gap:20px;

    padding:20px 0;

    border-bottom:

    1px solid var(--border);

}



.tech-item:last-child {

    border-bottom:none;

}



.tech-item i {

    width:55px;

    height:55px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    background:

    rgba(79,140,255,.15);

    color:

    var(--secondary);

    font-size:22px;

}



.tech-item h5 {

    margin-bottom:5px;

}



.tech-item p {

    margin:0;

    color:

    var(--text-muted);

}

/* ==========================================
        INSTALLATION
========================================== */


.installation {

    position:relative;

}



.install-card {


    height:100%;

    padding:40px 30px;


    background:

    rgba(255,255,255,.05);


    border:

    1px solid var(--border);


    border-radius:

    var(--radius);


    transition:.4s;


}



.install-card:hover {


    transform:

    translateY(-10px);


    background:

    rgba(255,255,255,.08);


}



.install-number {


    width:65px;

    height:65px;


    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:50%;


    margin-bottom:25px;


    font-size:24px;

    font-weight:800;


    background:

    linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );


}



.install-card h4 {


    font-size:24px;

    margin-bottom:15px;


}



.install-card p {


    color:

    var(--text-muted);

    line-height:1.7;


}



.installation-note {


    margin-top:50px;


    padding:25px 30px;


    border-radius:20px;


    background:

    rgba(55,213,214,.08);


    border:

    1px solid rgba(55,213,214,.25);


    text-align:center;


    color:#dce7ef;


}



.installation-note i {


    color:

    var(--secondary);

    margin-right:10px;


}

/* ==========================================
        APP DEVICE MOCKUP
========================================== */


.app-device {

    display:flex;

    justify-content:center;

}



.phone-frame {


    width:320px;

    padding:12px;


    border-radius:45px;


    background:

    linear-gradient(
        145deg,
        #222,
        #050505
    );


    box-shadow:

    0 40px 80px rgba(0,0,0,.6);


}



.phone-top {


    width:90px;

    height:25px;


    background:#000;


    border-radius:0 0 20px 20px;


    margin:auto;


}



.app-screen {


    padding:25px;


    min-height:620px;


    border-radius:35px;


    background:

    linear-gradient(
        180deg,
        #121a25,
        #080c12
    );


}



.app-header {


    display:flex;

    justify-content:space-between;


    color:white;

    margin-bottom:35px;


}



.door-status {


    text-align:center;


    padding:30px 10px;


    background:

    rgba(255,255,255,.05);


    border-radius:25px;


}



.status-icon {


    width:90px;

    height:90px;


    margin:0 auto 20px;


    display:flex;

    justify-content:center;

    align-items:center;


    border-radius:50%;


    background:

    rgba(55,213,214,.15);


    color:

    var(--secondary);


    font-size:35px;


}



.door-status p {


    color:

    var(--text-muted);


}



.app-card {


    margin-top:20px;


    padding:20px;


    border-radius:20px;


    background:

    rgba(255,255,255,.05);


}



.app-card span,

.app-card small {


    display:block;


    color:

    var(--text-muted);


}



.app-card strong {


    display:block;

    font-size:22px;

    margin:8px 0;


}



.unlock-button {


    width:100%;


    margin-top:25px;


    padding:15px;


    border:none;


    border-radius:50px;


    background:

    linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );


    color:white;


    font-weight:700;


}

/* ==========================================
        SPECIFICATION CARDS
========================================== */


.spec-card {


    height:100%;


    padding:35px 25px;


    text-align:center;


    background:

    rgba(255,255,255,.05);


    border:

    1px solid var(--border);


    border-radius:

    var(--radius);


    transition:.4s;


}



.spec-card:hover {


    transform:

    translateY(-10px);


    border-color:

    rgba(55,213,214,.4);


}



.spec-card i {


    width:70px;

    height:70px;


    display:flex;

    align-items:center;

    justify-content:center;


    margin:

    0 auto 25px;


    border-radius:22px;


    background:

    rgba(79,140,255,.15);


    color:

    var(--secondary);


    font-size:30px;


}



.spec-card h4 {


    font-size:22px;

    margin-bottom:15px;


}



.spec-card strong {


    display:block;


    font-size:18px;

    margin-bottom:15px;


}



.spec-card p {


    color:

    var(--text-muted);


    line-height:1.6;


}



.spec-bottom {


    margin-top:60px;


    display:grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:20px;


}



.spec-bottom div {


    padding:25px;


    text-align:center;


    border-radius:20px;


    background:

    rgba(255,255,255,.04);


    border:

    1px solid var(--border);


}



.spec-bottom span {


    display:block;


    color:

    var(--text-muted);


    margin-bottom:10px;


}



.spec-bottom strong {


    font-size:18px;


}

/* ==========================================
        TESTIMONIAL STARS
========================================== */


.stars {

    color:

    #ffd166;


    font-size:22px;


    margin-bottom:20px;


    letter-spacing:3px;

}

.navbar .nav-link,
.navbar .nav-link:visited {

    color: rgba(255,255,255,0.75) !important;

}


.navbar .nav-link:hover,
.navbar .nav-link.active {

    color: #ffffff !important;

}


.navbar .navbar-brand,
.navbar .navbar-brand:visited {

    color:#ffffff !important;

}
/* ==========================================
        FINAL CTA
========================================== */


.cta-section {

    position:relative;

}



.cta-buttons {

    display:flex;

    justify-content:center;

    gap:20px;

}



@media(max-width:768px){


    .cta-buttons {

        flex-direction:column;

    }


}
.footer h3 {

    font-size:32px;

    background:

    linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

/* ==========================================
        CONTACT PAGE
========================================== */


.contact-hero {

    padding-top:180px;

    padding-bottom:80px;

}



.contact-hero h1 {


    font-size:

    clamp(42px,5vw,70px);


    font-weight:800;

    letter-spacing:-2px;


}




.contact-section {

    position:relative;

    padding-bottom:120px;

}




.contact-info {


    padding:45px;


    background:

    rgba(255,255,255,.05);


    border:

    1px solid var(--border);


    border-radius:

    var(--radius);


    backdrop-filter:

    blur(15px);


}



.contact-info h2 {


    font-size:38px;

    margin-bottom:20px;


}



.contact-info > p {


    color:

    var(--text-muted);


    line-height:1.8;

    margin-bottom:40px;


}



/* Contact items */


.contact-item {


    display:flex;

    align-items:flex-start;


    gap:20px;


    padding:20px 0;


    border-bottom:

    1px solid var(--border);


}



.contact-item:last-child {


    border-bottom:none;


}



.contact-item i {


    width:55px;

    height:55px;


    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:18px;


    background:

    rgba(79,140,255,.15);


    color:

    var(--secondary);


    font-size:22px;


}



.contact-item h5 {


    margin-bottom:5px;


}



.contact-item p {


    margin:0;


    color:

    var(--text-muted);


}




/* Contact Form */


.contact-form {


    padding:45px;


    background:

    rgba(255,255,255,.05);


    border:

    1px solid var(--border);


    border-radius:

    var(--radius);


    backdrop-filter:

    blur(15px);


}



.contact-form .form-control {


    min-height:55px;


    padding:15px 20px;


    background:

    rgba(255,255,255,.06);


    border:

    1px solid var(--border);


    border-radius:15px;


    color:white;


}



.contact-form textarea.form-control {


    min-height:150px;


}



.contact-form .form-control::placeholder {


    color:

    rgba(255,255,255,.45);


}



.contact-form .form-control:focus {


    background:

    rgba(255,255,255,.08);


    border-color:

    var(--primary);


    box-shadow:

    0 0 0 4px rgba(79,140,255,.15);


    color:white;


}



.contact-form select option {


    background:

    #080c12;


    color:white;


}



.contact-form button {


    width:100%;


    margin-top:10px;


}

/* ==========================================
        THANK YOU PAGE
========================================== */


.thank-section {

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;


    padding-top:100px;

}



.thank-card {


    max-width:600px;

    text-align:center;


    padding:60px 40px;


    background:

    rgba(255,255,255,.05);


    border:

    1px solid var(--border);


    border-radius:

    var(--radius);


}



.thank-icon {


    width:100px;

    height:100px;


    margin:0 auto 30px;


    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:50%;


    background:

    linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );


    font-size:45px;

    color:white;


}



.thank-card h1 {


    font-size:60px;

    margin-bottom:20px;


}



.thank-card p {


    color:

    var(--text-muted);


    font-size:20px;

    line-height:1.7;


    margin-bottom:35px;


}

/* ==========================================
        GDPR CHECKBOX
========================================== */


.form-check {


    margin-top:10px;

}



.form-check-input {


    background-color:

    rgba(255,255,255,.1);


    border-color:

    var(--border);


}



.form-check-input:checked {


    background-color:

    var(--secondary);


    border-color:

    var(--secondary);


}



.form-check-label {


    color:

    var(--text-muted);


    font-size:14px;


}

/* ==========================================
        VIDEO MODAL
========================================== */


.video-modal {

    background:#000;

    border:none;

    border-radius:25px;

    overflow:hidden;

}



.hero-video {

    width:100%;

    max-height:80vh;

    display:block;

    object-fit:contain;

}



.video-modal .btn-close {

    position:absolute;

    top:20px;

    right:20px;

    z-index:10;

    opacity:.9;

}



/* ==========================================
        WATCH VIDEO BUTTON
========================================== */


.hero-buttons .btn-outline-light {

    display:inline-flex;

    align-items:center;

    gap:10px;

}



.hero-buttons .btn-outline-light i {

    font-size:14px;

}

.hero-buttons .btn-outline-light:hover {

    background:

    rgba(255,255,255,.15);


    border-color:

    rgba(255,255,255,.6);


    transform:

    translateY(-2px);


}
/* ==========================================
        VIDEO HEADER
========================================== */


.video-header {

    padding:35px 40px 25px;

    text-align:center;

    background:

    linear-gradient(
        180deg,
        #111923,
        #000
    );

}



.video-header h3 {

    margin-bottom:10px;

    font-size:32px;

    font-weight:700;

    color:white;

}



.video-header p {

    margin:0;

    color:

    rgba(255,255,255,.65);

    font-size:17px;

}


/* HERO TITLE COLORS */


.hero-title span {

    display:block;

}


/* Your Palm */

.hero-title .palm-line {

    color:white;

}


/* Your Face */

.hero-title .face-line {

    background:

    linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );


    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}


/* Your Key */

.hero-title .key-line {

    color:white;

    font-weight:800;

}

/* FINAL HERO TITLE OVERRIDE */


.hero-title span {

    display:block;

    background:none;

    -webkit-background-clip:initial;

    -webkit-text-fill-color:initial;

}



/* Your Palm */

.hero-title .palm-line {

    color:#ffffff !important;

}



/* Your Face */

.hero-title .face-line {

    background:

    linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );


    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}



/* Your Key */

.hero-title .key-line {

    color:#ffffff !important;

}

/* ==========================================
        PRODUCT BADGE
========================================== */


.hero-image {

    position:relative;

}



.product-badge {

    position:absolute;

    right:40px;

    bottom:80px;


    display:flex;

    align-items:center;

    gap:10px;


    padding:12px 20px;


    border-radius:50px;


    background:

    rgba(10,15,25,.75);


    border:

    1px solid rgba(255,255,255,.15);


    backdrop-filter:blur(15px);


    color:white;


    font-size:13px;


    font-weight:700;


    letter-spacing:1px;


    z-index:5;


}



.product-badge i {

    color:var(--secondary);

}

/* ==========================================
        TECHNOLOGY STRIP
========================================== */


.tech-strip {

    padding:35px 0;


    border-top:

    1px solid var(--border);


    border-bottom:

    1px solid var(--border);


    background:

    rgba(255,255,255,.025);


}



.tech-items {


    display:flex;


    justify-content:space-between;


    align-items:center;


    gap:25px;


    flex-wrap:wrap;


}



.tech-item {


    display:flex;


    align-items:center;


    gap:12px;


    color:

    rgba(255,255,255,.75);


    font-size:15px;


}



.tech-item i {


    color:

    var(--secondary);


    font-size:22px;


}



@media(max-width:768px){


    .tech-items {


        justify-content:center;

    }


}

/* ==========================================
        APP SECTION
========================================== */


.app-features {

    margin-top:40px;

}



.app-feature {


    display:flex;


    gap:20px;


    margin-bottom:25px;


}



.app-feature i {


    width:55px;

    height:55px;


    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:18px;


    background:

    rgba(55,213,214,.12);


    color:

    var(--secondary);


    font-size:22px;


}



.app-feature h4 {


    margin-bottom:5px;


}



.app-feature p {


    margin:0;


    color:

    var(--text-muted);


}





/* PHONE */


.app-device {


    display:flex;

    justify-content:center;


}



.phone-frame {


    position:relative;


    padding:15px;


    border-radius:45px;


    background:

    linear-gradient(
        145deg,
        #222,
        #050505
    );


    box-shadow:

    0 40px 100px rgba(0,0,0,.6);


}



.phone-frame img,
.phone-frame .app-video {


    width:280px;


    height:560px;


    object-fit:cover;


    border-radius:35px;


    display:block;


}

.app-live {


    position:absolute;


    top:25px;

    left:25px;


    z-index:3;


    display:flex;

    align-items:center;


    gap:8px;


    padding:8px 14px;


    border-radius:50px;


    background:

    rgba(0,0,0,.65);


    color:white;


    font-size:11px;


    font-weight:700;


}



.app-live span {


    width:8px;

    height:8px;


    border-radius:50%;


    background:#37d5d6;


}

/* ==========================================
        LOGO
========================================== */

.navbar-logo{

    height:48px;

    width:auto;

    transition:.3s;

}

.navbar-brand:hover .navbar-logo{

    transform:scale(1.05);

}