:root {

    --primary:#146EF5;
    --primary-dark:#0d55c7;

    --dark:#111827;
    --text:#374151;
    --muted:#6b7280;

    --light:#f8fafc;
    --white:#ffffff;

    --border:#e5e7eb;

    --radius:18px;

    --shadow:
    0 20px 50px rgba(0,0,0,.08);

}


* {

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

}


html {

    scroll-behavior:smooth;

}


body {

    font-family:
    "Inter",
    Arial,
    sans-serif;

    background:var(--light);

    color:var(--text);

    line-height:1.6;

}



.container {

    width:90%;

    max-width:1200px;

    margin:auto;

}



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


.site-header {

    background:white;

    border-bottom:1px solid var(--border);

    position:sticky;

    top:0;

    z-index:100;

}


.nav-container {

    display:flex;

    justify-content:space-between;

    align-items:center;

    min-height:80px;

}


.logo {

    font-size:26px;

    font-weight:800;

    color:var(--primary);

}



.main-nav {

    display:flex;

    align-items:center;

    gap:25px;

}



.main-nav a {

    text-decoration:none;

    color:var(--text);

    font-weight:600;

}



.nav-button {

    background:var(--primary);

    color:white!important;

    padding:12px 24px;

    border-radius:10px;

}






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


.btn {

    display:inline-block;

    padding:15px 32px;

    border-radius:12px;

    text-decoration:none;

    font-weight:700;

    transition:.25s;

}



.btn-primary {

    background:var(--primary);

    color:white;

}


.btn-primary:hover {

    background:var(--primary-dark);

    transform:translateY(-2px);

}



.btn-outline {

    border:2px solid white;

    color:white;

}



.btn-light {

    background:white;

    color:var(--primary);

}






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


.hero {

    background:

    linear-gradient(
    135deg,
    #146EF5,
    #0b5ed7
    );

    color:white;

    padding:100px 0;

}



.hero-grid {

    display:grid;

    grid-template-columns:

    1fr 1fr;

    gap:70px;

    align-items:center;

}



.badge {

    display:inline-block;

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

    padding:8px 16px;

    border-radius:50px;

    margin-bottom:25px;

    font-size:14px;

}



.hero h1 {

    font-size:55px;

    line-height:1.1;

    margin-bottom:25px;

}



.hero p {

    font-size:20px;

    max-width:600px;

    opacity:.95;

}



.hero-buttons {

    margin-top:35px;

    display:flex;

    gap:15px;

}



.hero-points {

    margin-top:35px;

    display:flex;

    flex-wrap:wrap;

    gap:20px;

    font-weight:600;

}



.hero-image img {

    width:100%;

    border-radius:15px;

}



.image-card {

    background:white;

    padding:15px;

    border-radius:20px;

    box-shadow:
    0 30px 70px rgba(0,0,0,.25);

}






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


.trust {

    background:white;

    padding:40px 0;

}



.trust-grid {

    display:grid;

    grid-template-columns:

    repeat(4,1fr);

    text-align:center;

    gap:20px;

}



.trust strong {

    display:block;

    font-size:38px;

    color:var(--primary);

}



.trust span {

    color:var(--muted);

}





/* =========================
SECTIONS
========================= */


section {

    padding:90px 0;

}


.section-heading {

    text-align:center;

    max-width:750px;

    margin:0 auto 60px;

}


.section-heading h2 {

    font-size:40px;

    color:var(--dark);

    margin-bottom:15px;

}



.section-heading p {

    font-size:18px;

    color:var(--muted);

}





/* EXPERIENCE */


.experience-box {

    background:white;

    padding:45px;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    max-width:900px;

    margin:auto;

}





/* FEATURES */


.feature-row {

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

    margin-bottom:90px;

}


.feature-row.reverse .feature-text {

    order:2;

}


.feature-image img {

    width:100%;

    border-radius:18px;

    box-shadow:var(--shadow);

}



.feature-text h3 {

    font-size:32px;

    color:var(--dark);

    margin-bottom:20px;

}



.feature-text ul {

    margin-top:20px;

    list-style:none;

}



.feature-text li {

    margin-bottom:10px;

}







/* DEVICES */


.devices {

    background:white;

}


.device-grid {

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

}



.device-image img {

    width:100%;

}



.device-cards > div {

    background:var(--light);

    padding:20px;

    border-radius:15px;

    margin-bottom:15px;

}



.device-cards strong {

    display:block;

}






/* HOW */


.steps {

    display:grid;

    grid-template-columns:

    repeat(4,1fr);

    gap:30px;

}



.step {

    background:white;

    padding:35px;

    border-radius:18px;

    text-align:center;

    box-shadow:var(--shadow);

}


.step-number {

    width:50px;

    height:50px;

    background:var(--primary);

    color:white;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:0 auto 20px;

    font-size:22px;

    font-weight:bold;

}






/* PRICING */


.pricing-card {

    background:white;

    max-width:600px;

    margin:auto;

    padding:50px;

    text-align:center;

    border-radius:20px;

    box-shadow:var(--shadow);

}


.pricing-card li {

    list-style:none;

    margin:15px;

}





/* FAQ */


.faq {

    background:white;

}



.faq-list {

    max-width:800px;

    margin:auto;

}



.faq-list div {

    padding:25px;

    border-bottom:1px solid var(--border);

}



.faq-list h3 {

    color:var(--dark);

}






/* CTA */


.cta {

    background:var(--primary);

    color:white;

    text-align:center;

}


.cta h2 {

    font-size:42px;

    margin-bottom:20px;

}





/* FOOTER */


.footer {

    background:#111827;

    color:white;

    text-align:center;

    padding:35px;

}







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


@media(max-width:900px){


.hero-grid,

.feature-row,

.device-grid {

    grid-template-columns:1fr;

}



.feature-row.reverse .feature-text {

    order:initial;

}



.hero h1 {

    font-size:38px;

}



.trust-grid {

    grid-template-columns:

    repeat(2,1fr);

}



.steps {

    grid-template-columns:1fr;

}



.main-nav {

    display:none;

}



.hero-buttons {

    flex-direction:column;

}



.btn {

    text-align:center;

}



}



@media(max-width:500px){


.container {

    width:92%;

}


.trust-grid {

    grid-template-columns:1fr;

}


.section-heading h2 {

    font-size:32px;

}



.hero {

    padding:70px 0;

}



}