/* ==========================================
   STAYPOLO GLOBAL CSS
   PARTE 1/4
========================================== */


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

:root{

    --stay-navy:#06182c;
    --stay-turquoise:#00c7d9;
    --stay-light:#f8fafc;
    --stay-text:#475569;
    --stay-white:#ffffff;
    --stay-border:#e2e8f0;

}



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


*{

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

}



html{

    scroll-behavior:smooth;

}



body{

    font-family:'Inter',sans-serif;
    color:var(--stay-text);
    background:#ffffff;

}



a{

    text-decoration:none;

}



img{

    max-width:100%;
    display:block;

}



ul{

    list-style:none;

}



h1,
h2,
h3{

    color:var(--stay-navy);

}



p{

    line-height:1.7;

}



.container{

    width:90%;
    max-width:1200px;
    margin:auto;

}



.section{

    padding:100px 0;

}



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


.btn-primary{

    background:var(--stay-turquoise);

    color:white!important;

    padding:15px 35px;

    border-radius:50px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    font-weight:700;

    border:none;

    cursor:pointer;

    transition:.3s;

}



.btn-primary:hover{

    transform:translateY(-3px);

}



.btn-secondary{

    background:transparent;

    color:white;

    border:2px solid white;

    padding:15px 35px;

    border-radius:50px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    font-weight:600;

    transition:.3s;

}



.btn-secondary:hover{

    background:white;

    color:var(--stay-navy);

}



/* ==========================
HEADER
========================== */


.header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:90px;

    background:white;

    z-index:999;

    box-shadow:
    0 5px 20px rgba(0,0,0,.05);

}



.nav-container{

    height:90px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}



.logo img{

    width:160px;

}





.navbar ul{

    display:flex;

    align-items:center;

    gap:30px;

}



.navbar a{

    color:var(--stay-navy);

    font-weight:600;

}





.mobile-menu{

    display:none;

    font-size:30px;

    color:var(--stay-navy);

    cursor:pointer;

}





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


.hero{

    min-height:800px;

    padding-top:160px;

    display:flex;

    align-items:center;

    background:

    linear-gradient(
    rgba(6,24,44,.85),
    rgba(6,24,44,.85)
    ),

    url('../images/hero.jpg');

    background-size:cover;

    background-position:center;

}



.hero-text{

    max-width:750px;

}



.subtitle{

    color:var(--stay-turquoise);

    font-size:14px;

    font-weight:800;

    letter-spacing:2px;

}



.hero h1{

    color:white;

    font-size:60px;

    line-height:1.1;

    font-weight:800;

    letter-spacing:-1px;

    margin:25px 0;

}



.hero p{

    color:white;

    font-size:20px;

    max-width:650px;

}



.hero-buttons{

    display:flex;

    gap:20px;

    margin-top:40px;

}






/* ==========================
SECTION HEADER
========================== */


.section-header{

    text-align:center;

    max-width:800px;

    margin:0 auto 60px;

}



.section-header span{

    color:var(--stay-turquoise);

    font-weight:800;

    letter-spacing:1px;

}



.section-header h2{

    font-size:42px;

    margin:20px 0;

    font-weight:800;

}



.section-header p{

    color:#64748b;

    font-size:18px;

}

/* ==========================================
   STAYPOLO COMPONENTS
   PARTE 2/4
========================================== */


/* ==========================
DASHBOARD PREVIEW
========================== */


.dashboard-preview{

    background:var(--stay-light);

    padding:80px 0;

}



.dashboard-image{

    max-width:1100px;

    margin:auto;

}



.dashboard-image img{

    width:100%;

    border-radius:25px;

    box-shadow:
    0 30px 80px rgba(6,24,44,.18);

}





/* ==========================
TRUST CARDS
========================== */


.trust{

    background:white;

}



.trust-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}



.trust-card{

    background:white;

    padding:40px 30px;

    border-radius:20px;

    text-align:center;

    box-shadow:

    0 10px 30px rgba(6,24,44,.08);

    transition:.3s;

}



.trust-card:hover{

    transform:translateY(-8px);

}



.trust-card i{

    font-size:40px;

    color:var(--stay-turquoise);

    margin-bottom:20px;

}



.trust-card h3{

    font-size:24px;

    margin-bottom:15px;

}





/* ==========================
ABOUT / PROBLEM / STORY
========================== */


.about-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

}



.about-text h2{

    font-size:42px;

    margin:20px 0;

}



.about-text p{

    margin-bottom:20px;

}



.about-image img{

    width:100%;

    border-radius:25px;

    box-shadow:

    0 20px 60px rgba(6,24,44,.12);

}





/* ==========================
FEATURES
========================== */


.features-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

}



.feature-item{

    background:white;

    padding:35px 25px;

    border-radius:20px;

    box-shadow:

    0 10px 30px rgba(6,24,44,.08);

    transition:.3s;

}



.feature-item:hover{

    transform:translateY(-8px);

}



.feature-item i{

    color:var(--stay-turquoise);

    font-size:40px;

    margin-bottom:20px;

}



.feature-item h3{

    margin-bottom:15px;

}





/* ==========================
PLATFORM
========================== */


.platform{

    background:white;

}



.platform-image{

    margin-bottom:60px;

}



.platform-image img{

    width:100%;

    border-radius:25px;

    box-shadow:

    0 25px 70px rgba(6,24,44,.15);

}



.platform-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

}



.platform-card{

    background:white;

    padding:35px 25px;

    text-align:center;

    border-radius:20px;

    box-shadow:

    0 10px 30px rgba(6,24,44,.08);

    transition:.3s;

}



.platform-card:hover{

    transform:translateY(-8px);

}



.platform-card i{

    font-size:35px;

    color:var(--stay-turquoise);

    margin-bottom:20px;

}



.platform-card h3{

    margin-bottom:15px;

}





/* ==========================
SOLUTIONS
========================== */


.solutions{

    background:var(--stay-light);

}



.services-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

}



.service-card{

    background:white;

    padding:35px 25px;

    border-radius:20px;

    text-align:center;

    box-shadow:

    0 10px 30px rgba(6,24,44,.08);

    transition:.3s;

}



.service-card:hover{

    transform:translateY(-8px);

}



.service-card i{

    font-size:40px;

    color:var(--stay-turquoise);

    margin-bottom:20px;

}





/* ==========================
INTEGRATIONS
========================== */


.integrations{

    background:#fff;

}



.integration-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}



.integration-card{

    background:white;

    padding:40px 30px;

    text-align:center;

    border-radius:20px;

    box-shadow:

    0 10px 30px rgba(6,24,44,.08);

}



.integration-card i{

    font-size:40px;

    color:var(--stay-turquoise);

    margin-bottom:20px;

}



.integration-card h3{

    margin-bottom:15px;

}

/* ==========================================
   STAYPOLO PRICING + FOOTER
   PARTE 3/4
========================================== */


/* ==========================
DIFFERENTIAL
========================== */


.differential{

    background:var(--stay-light);

}



.differential-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}



.differential-card{

    background:white;

    padding:40px 30px;

    text-align:center;

    border-radius:20px;

    box-shadow:

    0 10px 30px rgba(6,24,44,.08);

}



.differential-card i{

    color:var(--stay-turquoise);

    font-size:40px;

    margin-bottom:20px;

}



.differential-card h3{

    margin-bottom:15px;

}





/* ==========================
PRICING
========================== */


.pricing{

    background:#f8fafc;

    padding:100px 0;

}



.pricing-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

    align-items:stretch;

}





.price-card{

    background:white;

    padding:40px 35px;

    border-radius:25px;

    border:1px solid #e2e8f0;

    display:flex;

    flex-direction:column;

    position:relative;

    transition:.3s;

}



.price-card:hover{

    transform:translateY(-8px);

    box-shadow:

    0 20px 50px rgba(6,24,44,.10);

}





.price-card.featured{

    border:3px solid var(--stay-turquoise);

    transform:translateY(-12px);

}





.price-card.featured:hover{

    transform:translateY(-18px);

}





.popular{

    position:absolute;

    top:-18px;

    left:50%;

    transform:translateX(-50%);

    background:var(--stay-turquoise);

    color:white;

    padding:8px 25px;

    border-radius:30px;

    font-size:13px;

    font-weight:800;

}





.price-header h3{

    font-size:30px;

    margin-bottom:15px;

}



.price-header p{

    color:#64748b;

    min-height:55px;

}





.price{

    margin:30px 0;

}



.price span{

    font-size:34px;

    font-weight:800;

    color:var(--stay-navy);

}





.price-card ul{

    margin-bottom:35px;

}



.price-card li{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:15px;

}



.price-card li i{

    color:var(--stay-turquoise);

}





.price-card .btn-primary{

    width:100%;

    margin-top:auto;

}





/* OFERTA LANÇAMENTO */


.launch-offer{

    margin-top:60px;

    background:white;

    padding:45px;

    border-radius:25px;

    text-align:center;

    box-shadow:

    0 15px 40px rgba(6,24,44,.08);

}



.launch-offer h2{

    font-size:36px;

    margin-bottom:15px;

}



.launch-offer p{

    color:#64748b;

    font-size:18px;

}





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


.testimonials{

    background:white;

}



.testimonial-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}



.testimonial-card{

    background:white;

    padding:35px;

    border-radius:20px;

    border:1px solid #e2e8f0;

    box-shadow:

    0 10px 30px rgba(6,24,44,.06);

}



.testimonial-card p{

    font-style:italic;

    margin-bottom:25px;

}





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


.faq{

    background:#f8fafc;

}



.faq-list{

    max-width:900px;

    margin:auto;

}



.faq-item{

    background:white;

    padding:30px;

    border-radius:18px;

    margin-bottom:20px;

    box-shadow:

    0 10px 30px rgba(6,24,44,.06);

}



.faq-item h3{

    margin-bottom:12px;

    font-size:22px;

}





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


.cta{

    background:var(--stay-navy);

    padding:90px 20px;

    text-align:center;

}



.cta h2{

    color:white;

    font-size:42px;

    margin-bottom:20px;

}



.cta p{

    color:white;

    max-width:700px;

    margin:0 auto 35px;

}





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


.footer{

    background:#06182c;

    color:white;

    padding:70px 0 20px;

}



.footer-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:40px;

}



.footer-brand img{

    width:160px;

    margin-bottom:20px;

}



.footer p,

.footer a{

    color:white;

}



.footer-links{

    display:flex;

    flex-direction:column;

    gap:15px;

}



.footer-links h3{

    color:white;

    margin-bottom:15px;

}



.copyright{

    text-align:center;

    margin-top:40px;

    border-top:1px solid rgba(255,255,255,.1);

    padding-top:20px;

}

/* ==========================================
   STAYPOLO LOGIN + RESPONSIVE + ANIMATIONS
   PARTE 4/4
========================================== */


/* ==========================
LOGIN PAGE
========================== */


.owner-login{

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#f8fafc;

    padding:40px 20px;

}



.login-box{

    width:100%;

    max-width:450px;

    background:white;

    padding:45px;

    border-radius:25px;

    text-align:center;

    box-shadow:

    0 20px 60px rgba(6,24,44,.12);

}



.login-box img{

    width:180px;

    margin:0 auto 25px;

}



.login-subtitle{

    display:block;

    color:var(--stay-turquoise);

    font-size:13px;

    font-weight:800;

    letter-spacing:2px;

    margin-bottom:15px;

}



.login-box h1{

    font-size:34px;

    margin-bottom:15px;

}



.login-box p{

    color:#64748b;

    margin-bottom:30px;

}





.login-input{

    display:flex;

    align-items:center;

    gap:12px;

    background:#f8fafc;

    border:1px solid #e2e8f0;

    border-radius:12px;

    padding:15px;

    margin-bottom:18px;

}



.login-input i{

    color:#64748b;

}



.login-input input{

    width:100%;

    border:none;

    outline:none;

    background:transparent;

    font-size:15px;

}



.login-box .btn-primary{

    width:100%;

}





.login-links{

    margin-top:25px;

}



.login-links a{

    color:#2563eb;

    font-size:14px;

}





/* ==========================
WHATSAPP FLOAT
========================== */


.whatsapp-float{

    position:fixed;

    right:25px;

    bottom:25px;

    width:60px;

    height:60px;

    background:#25d366;

    color:white;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    z-index:999;

}





/* ==========================
ANIMATIONS
========================== */


.trust-card,
.feature-item,
.service-card,
.platform-card,
.testimonial-card{

    opacity:0;

    transform:translateY(30px);

    transition:.6s ease;

}


.show{

    opacity:1;

    transform:translateY(0);

}





/* ==========================
TABLET
========================== */


@media(max-width:1100px){


.navbar{

    position:fixed;

    top:0;

    right:-100%;

    width:280px;

    height:100vh;

    background:var(--stay-navy);

    padding:100px 30px;

    transition:.4s;

}



.navbar.active{

    right:0;

}



.navbar ul{

    flex-direction:column;

    align-items:flex-start;

}



.navbar a{

    color:white;

}



.mobile-menu{

    display:block;

}



.hero h1{

    font-size:45px;

}



.features-grid{

    grid-template-columns:repeat(2,1fr);

}



.platform-grid{

    grid-template-columns:repeat(2,1fr);

}



.services-grid{

    grid-template-columns:repeat(2,1fr);

}



.pricing-grid{

    grid-template-columns:1fr;

}



.price-card.featured{

    transform:none;

}



.trust-grid{

    grid-template-columns:1fr;

}



.integration-grid{

    grid-template-columns:1fr;

}



.testimonial-grid{

    grid-template-columns:1fr;

}



.footer-grid{

    grid-template-columns:1fr 1fr;

}


}




/* ==========================
MOBILE
========================== */


@media(max-width:768px){



.section{

    padding:70px 0;

}



.hero{

    min-height:700px;

    padding-top:130px;

}



.hero h1{

    font-size:36px;

}



.hero p{

    font-size:16px;

}



.hero-buttons{

    flex-direction:column;

}



.hero-buttons a{

    width:100%;

}



.about-grid{

    grid-template-columns:1fr;

}



.features-grid{

    grid-template-columns:1fr;

}



.platform-grid{

    grid-template-columns:1fr;

}



.services-grid{

    grid-template-columns:1fr;

}



.differential-grid{

    grid-template-columns:1fr;

}



.footer-grid{

    grid-template-columns:1fr;

}



.section-header h2{

    font-size:32px;

}



.cta h2{

    font-size:32px;

}



.login-box{

    padding:30px 25px;

}



.login-box h1{

    font-size:28px;

}


}
/* ==========================================
   STAYPOLO LOGIN + RESPONSIVE + ANIMATIONS
   PARTE 4/4
========================================== */


/* ==========================
LOGIN PAGE
========================== */


.owner-login{

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#f8fafc;

    padding:40px 20px;

}



.login-box{

    width:100%;

    max-width:450px;

    background:white;

    padding:45px;

    border-radius:25px;

    text-align:center;

    box-shadow:

    0 20px 60px rgba(6,24,44,.12);

}



.login-box img{

    width:180px;

    margin:0 auto 25px;

}



.login-subtitle{

    display:block;

    color:var(--stay-turquoise);

    font-size:13px;

    font-weight:800;

    letter-spacing:2px;

    margin-bottom:15px;

}



.login-box h1{

    font-size:34px;

    margin-bottom:15px;

}



.login-box p{

    color:#64748b;

    margin-bottom:30px;

}





.login-input{

    display:flex;

    align-items:center;

    gap:12px;

    background:#f8fafc;

    border:1px solid #e2e8f0;

    border-radius:12px;

    padding:15px;

    margin-bottom:18px;

}



.login-input i{

    color:#64748b;

}



.login-input input{

    width:100%;

    border:none;

    outline:none;

    background:transparent;

    font-size:15px;

}



.login-box .btn-primary{

    width:100%;

}





.login-links{

    margin-top:25px;

}



.login-links a{

    color:#2563eb;

    font-size:14px;

}





/* ==========================
WHATSAPP FLOAT
========================== */


.whatsapp-float{

    position:fixed;

    right:25px;

    bottom:25px;

    width:60px;

    height:60px;

    background:#25d366;

    color:white;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    z-index:999;

}





/* ==========================
ANIMATIONS
========================== */


.trust-card,
.feature-item,
.service-card,
.platform-card,
.testimonial-card,
.price-card{

    opacity:0;

    transform:translateY(30px);

    transition:.6s ease;

}



.show{

    opacity:1;

    transform:translateY(0);

}





/* ==========================
TABLET
========================== */


@media(max-width:1100px){


.navbar{

    position:fixed;

    top:0;

    right:-100%;

    width:280px;

    height:100vh;

    background:var(--stay-navy);

    padding:100px 30px;

    transition:.4s;

}



.navbar.active{

    right:0;

}



.navbar ul{

    flex-direction:column;

    align-items:flex-start;

}



.navbar a{

    color:white;

}



.mobile-menu{

    display:block;

}



.hero h1{

    font-size:45px;

}



.features-grid{

    grid-template-columns:repeat(2,1fr);

}



.platform-grid{

    grid-template-columns:repeat(2,1fr);

}



.services-grid{

    grid-template-columns:repeat(2,1fr);

}



.pricing-grid{

    grid-template-columns:1fr;

}



.price-card.featured{

    transform:none;

}



.trust-grid{

    grid-template-columns:1fr;

}



.integration-grid{

    grid-template-columns:1fr;

}



.testimonial-grid{

    grid-template-columns:1fr;

}



.footer-grid{

    grid-template-columns:1fr 1fr;

}


}




/* ==========================
MOBILE
========================== */


@media(max-width:768px){



.section{

    padding:70px 0;

}



.hero{

    min-height:700px;

    padding-top:130px;

}



.hero h1{

    font-size:36px;

}



.hero p{

    font-size:16px;

}



.hero-buttons{

    flex-direction:column;

}



.hero-buttons a{

    width:100%;

}



.about-grid{

    grid-template-columns:1fr;

}



.features-grid{

    grid-template-columns:1fr;

}



.platform-grid{

    grid-template-columns:1fr;

}



.services-grid{

    grid-template-columns:1fr;

}



.differential-grid{

    grid-template-columns:1fr;

}



.footer-grid{

    grid-template-columns:1fr;

}



.section-header h2{

    font-size:32px;

}



.cta h2{

    font-size:32px;

}



.login-box{

    padding:30px 25px;

}



.login-box h1{

    font-size:28px;

}


}

/* ==========================
PRICING FIX
========================== */

.price-card{

    opacity:1 !important;

    transform:none;

}


.price-card:hover{

    transform:translateY(-8px);

}


.price-card.featured{

    transform:translateY(-10px);

}


.price-card.featured:hover{

    transform:translateY(-15px);

}

/* ==========================
REDES SOCIAIS FOOTER
========================== */


.social-links{

    display:flex;

    flex-direction:column;

    gap:15px;

}



.social-links a{

    display:flex;

    align-items:center;

    gap:10px;

    color:white;

    transition:.3s;

}



.social-links a:hover{

    color:var(--stay-turquoise);

    transform:translateX(5px);

}



.social-links i{

    font-size:20px;

    color:var(--stay-turquoise);

}

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


.social-title{

    margin-top:30px;

    color:white;

}



.footer-links a{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:12px;

}



.footer-links a i{

    color:var(--stay-turquoise);

    font-size:18px;

}

/* ==========================
FOOTER 4 COLUNAS
========================== */


.footer-grid{

    display:grid;
    grid-template-columns:1.5fr 1fr 1fr 1fr;
    gap:40px;
    align-items:start;

}



.footer-brand img{

    width:160px;
    margin-bottom:20px;

}



.footer-links h3{

    color:white;
    margin-bottom:20px;
    font-size:18px;

}



.footer-links a{

    display:flex;
    align-items:center;
    gap:10px;
    color:white;
    margin-bottom:12px;
    transition:.3s;

}



.footer-links a:hover{

    color:var(--stay-turquoise);

}



.footer-links i{

    color:var(--stay-turquoise);
    font-size:18px;

}





@media(max-width:900px){


.footer-grid{

    grid-template-columns:1fr 1fr;

}


}





@media(max-width:600px){


.footer-grid{

    grid-template-columns:1fr;

}


}

/* ==========================================
DEMO PAGE PREMIUM
========================================== */


.demo-hero{

    min-height:100vh;
    padding-top:160px;
    padding-bottom:100px;
    background:#f8fafc;

}



.demo-grid{

    display:grid;
    grid-template-columns:1fr 500px;
    gap:80px;
    align-items:center;

}



.demo-content{

    max-width:650px;

}



.demo-content .subtitle{

    color:var(--stay-turquoise);
    font-weight:800;
    letter-spacing:2px;

}



.demo-content h1{

    font-size:52px;
    line-height:1.15;
    font-weight:800;
    color:var(--stay-navy);
    margin:25px 0;

}



.demo-content p{

    font-size:19px;
    color:#64748b;
    margin-bottom:40px;

}



/* BENEFÍCIOS */


.demo-benefits{

    display:flex;
    flex-direction:column;
    gap:18px;

}



.demo-benefits div{

    display:flex;
    align-items:center;
    gap:15px;
    font-weight:600;
    color:var(--stay-navy);

}



.demo-benefits i{

    width:35px;
    height:35px;
    border-radius:50%;
    background:var(--stay-turquoise);
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;

}





/* FORM */

.demo-form-wrapper{

    background:white;
    padding:45px;
    border-radius:30px;

    box-shadow:
    0 25px 70px rgba(6,24,44,.15);

}



.demo-form h2{

    font-size:32px;
    color:var(--stay-navy);
    margin-bottom:10px;

}



.demo-form p{

    color:#64748b;
    margin-bottom:30px;

}



.demo-form label{

    display:block;
    font-size:14px;
    font-weight:700;
    color:var(--stay-navy);
    margin-bottom:8px;

}



.demo-form input,
.demo-form select,
.demo-form textarea{


    width:100%;
    padding:15px;

    border:1px solid #e2e8f0;

    border-radius:12px;

    margin-bottom:18px;

    outline:none;

    font-size:15px;

}



.demo-form input:focus,
.demo-form select:focus,
.demo-form textarea:focus{


    border-color:var(--stay-turquoise);

}





.demo-form button{

    width:100%;
    justify-content:center;
    margin-top:10px;

}





/* RESPONSIVO */


@media(max-width:1100px){


.demo-grid{

    grid-template-columns:1fr;

}



.demo-content h1{

    font-size:40px;

}



.demo-form-wrapper{

    max-width:600px;
    margin:auto;

}


}

<!DOCTYPE html>
<html lang="pt-BR">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>
Obrigado | StayPolo
</title>

<meta name="description" content="Solicitação recebida pela StayPolo.">

<link rel="stylesheet" href="css/style.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

</head>


<body>


<header class="header">

<div class="container nav-container">

<div class="logo">

<a href="index.html">

<img src="images/logo.png" alt="StayPolo">

</a>

</div>


<nav class="navbar">

<ul>

<li>
<a href="index.html">
Plataforma
</a>
</li>


<li>
<a href="funcionalidades.html">
Funcionalidades
</a>
</li>


<li>
<a href="solucoes.html">
Soluções
</a>
</li>


<li>
<a href="precos.html">
Preços
</a>
</li>


<li>
<a href="demo.html" class="btn-primary">
Agendar Demonstração
</a>
</li>


</ul>

</nav>


</div>

</header>



<section class="cta section">


<div class="container">


<h1>

Obrigado!

</h1>


<p>

Recebemos sua solicitação de demonstração da StayPolo.

</p>


<p>

Nossa equipe entrará em contato para apresentar como a plataforma pode ajudar sua operação a crescer.

</p>



<h2>

Próximos passos:

</h2>



<div class="trust-grid">


<div class="trust-card">

<i class="fa-solid fa-chart-line"></i>

<h3>

Analisaremos sua operação

</h3>

</div>



<div class="trust-card">

<i class="fa-solid fa-phone"></i>

<h3>

Entraremos em contato

</h3>

</div>



<div class="trust-card">

<i class="fa-solid fa-laptop"></i>

<h3>

Demonstraremos a plataforma

</h3>

</div>


</div>



<br>


<a href="index.html" class="btn-primary">

Voltar para o site

</a>



</div>


</section>



<footer class="footer">


<div class="copyright">


<p>

© 2026 StayPolo. Todos os direitos reservados.

</p>


</div>


</footer>



</body>

</html>

/* Página de obrigado */

.thank-section {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}


.thank-box {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}


.thank-box > i {
    font-size: 60px;
    margin-bottom: 25px;
}


.thank-box h1 {
    margin-bottom: 20px;
}


.thank-box p {
    margin-bottom: 15px;
    line-height: 1.7;
}


.next-steps {
    margin: 35px auto;
    max-width: 500px;
    text-align: left;
}


.next-steps div {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}


.next-steps i {
    min-width: 35px;
}

/* Ajuste página de obrigado */

.thank-section {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}


.thank-box {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}


.thank-box > i {
    font-size: 60px;
    margin-bottom: 25px;
}


.thank-box h1 {
    margin-bottom: 25px;
}


.thank-box p {
    margin-bottom: 20px;
    line-height: 1.7;
}


.next-steps {
    margin: 55px auto 40px;
    max-width: 500px;
    text-align: left;
}


.next-steps h3 {
    margin-bottom: 30px;
    text-align: center;
}


.next-steps div {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}


.next-steps i {
    min-width: 35px;
}