/* ==========================
   GLOBAL
   ========================== */

body{

    margin:0;

    background:#121212;

    color:white;

    font-family:Arial, sans-serif;

    line-height:1.6;

}

h1,h2,h3{

    margin-top:0;

}

a{

    color:#008cff;

    text-decoration:none;

}

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

.hero-section{

    text-align:center;

    padding:100px 30px;

    background:
        linear-gradient(
            180deg,
            #1a1a1a,
            #121212
        );

}

.hero-section h1{

    font-size:60px;

    margin-bottom:20px;

    color:white;

}

.hero-text{

    max-width:900px;

    margin:0 auto 40px auto;

    font-size:22px;

    color:#cccccc;

}

.hero-button{

    background:#008cff;

    color:white;

    border:none;

    border-radius:10px;

    padding:16px 32px;

    font-size:18px;

    font-weight:bold;

    cursor:pointer;

    transition:.2s;

}

.hero-button:hover{

    background:#006fd1;

    transform:translateY(-2px);

}

.hero-small{

    margin-top:20px;

    color:#999999;

}

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

.content-section{

    max-width:1400px;

    margin:60px auto;

    padding:0 30px;

}

.content-section h2{

    text-align:center;

    margin-bottom:35px;

    font-size:38px;

    color:#ffffff;

}

.content-section p{

    max-width:900px;

    margin:auto;

    text-align:center;

    color:#cccccc;

    font-size:18px;

}

/* ==========================
   FEATURE GRID
   ========================== */

.feature-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(280px,1fr));

    gap:25px;

    margin-top:40px;

}

.feature-card{

    background:#1f1f1f;

    border:1px solid #2f2f2f;

    border-radius:16px;

    padding:30px;

    transition:.2s;

}

.feature-card:hover{

    transform:translateY(-6px);

    border-color:#008cff;

}

.feature-card h3{

    color:#008cff;

    margin-bottom:15px;

}

.feature-card p{

    text-align:left;

    margin:0;

    color:#cccccc;

    font-size:15px;

}

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

.cta-section{

    text-align:center;

    padding:80px 30px;

    background:#1b1b1b;

    margin-top:60px;

}

.cta-section h2{

    font-size:42px;

    margin-bottom:15px;

}

.cta-section p{

    color:#cccccc;

    margin-bottom:30px;

}

/* ==========================
   LISTS
   ========================== */

.content-section ul{

    max-width:800px;

    margin:30px auto;

    list-style:none;

    padding:0;

}

.content-section li{

    background:#1f1f1f;

    padding:15px;

    margin-bottom:10px;

    border-radius:10px;

    border:1px solid #2f2f2f;

}

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

.footer{

    text-align:center;

    padding:30px;

    color:#888888;

    border-top:1px solid #222222;

}

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

@media(max-width:768px){

    .hero-section h1{

        font-size:40px;

    }

    .hero-text{

        font-size:18px;

    }

    .content-section h2{

        font-size:30px;

    }

}