* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


:root {

    --blue: #2563eb;
    --blue-dark: #1e40af;
    --dark: #0f172a;
    --gray: #64748b;
    --light: #f8fafc;
    --white: #ffffff;

}


html {

    scroll-behavior: smooth;

}


body {

    font-family: "Inter", "Arial", sans-serif;
    color: var(--dark);
    background: #ffffff;
    line-height: 1.6;

}


a {

    text-decoration: none;
    color: inherit;

}


.container {

    width: min(1180px, 92%);
    margin: auto;

}



/* HEADER */


header {

    position: fixed;
    top:0;
    width:100%;
    z-index:1000;
    background:rgba(255,255,255,.85);
    backdrop-filter:blur(12px);
    border-bottom:1px solid #e5e7eb;

}


nav {

    height:80px;
    display:flex;
    align-items:center;
    justify-content:space-between;

}


.logo {

    font-size:26px;
    font-weight:800;
    color:var(--blue);

}



nav ul {

    display:flex;
    gap:30px;
    list-style:none;

}


nav ul a {

    color:#334155;
    font-weight:500;
    transition:.3s;

}


nav ul a:hover {

    color:var(--blue);

}



/* HERO */


.hero {

    padding-top:150px;
    padding-bottom:100px;
    background:
    linear-gradient(135deg,#eff6ff,#ffffff);

}


.hero-grid {

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

}



.badge {

    display:inline-block;
    padding:8px 18px;
    border-radius:50px;
    background:#dbeafe;
    color:#1d4ed8;
    font-size:14px;
    margin-bottom:20px;

}


.hero h1 {

    font-size:52px;
    line-height:1.15;
    margin-bottom:25px;

}



.hero p {

    color:#475569;
    font-size:18px;
    margin-bottom:35px;

}



.hero-buttons {

    display:flex;
    gap:20px;
    flex-wrap:wrap;

}



.btn {

    padding:15px 32px;
    border-radius:12px;
    font-weight:600;
    transition:.3s;
    display:inline-block;

}


.btn-primary {

    background:var(--blue);
    color:white;
    box-shadow:0 15px 30px rgba(37,99,235,.25);

}



.btn-primary:hover {

    background:var(--blue-dark);
    transform:translateY(-3px);

}



.btn-secondary {

    border:1px solid #cbd5e1;
    background:white;

}


.btn-secondary:hover {

    border-color:var(--blue);
    color:var(--blue);

}



/* HERO CARD */


.glass-card {

    background:rgba(255,255,255,.7);
    backdrop-filter:blur(15px);
    border-radius:30px;
    padding:45px;
    box-shadow:0 25px 70px rgba(15,23,42,.12);
    text-align:center;
    position:relative;
    overflow:hidden;

}



.shield {

    width:90px;
    height:90px;
    margin:auto;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:40px;
    border-radius:50%;
    background:#dbeafe;
    margin-bottom:25px;

}


.circle {

    position:absolute;
    border-radius:50%;
    opacity:.2;

}


.circle.one {

    width:200px;
    height:200px;
    background:#2563eb;
    top:-80px;
    right:-60px;

}


.circle.two {

    width:150px;
    height:150px;
    background:#60a5fa;
    bottom:-50px;
    left:-40px;

}



/* STATS */


.hero-stats {

    display:flex;
    gap:30px;
    margin-top:50px;

}


.hero-stats h3 {

    color:var(--blue);

}



/* SECTIONS */


.section {

    padding:100px 0;

}



.section-title {

    text-align:center;
    max-width:700px;
    margin:0 auto 60px;

}


.section-title span {

    color:var(--blue);
    font-weight:700;

}



.section-title h2 {

    font-size:40px;
    margin:10px 0;

}



.section-title p {

    color:var(--gray);

}



/* CARDS */


.cards {

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;

}



.card {

    padding:35px;
    border-radius:20px;
    background:white;
    box-shadow:0 15px 40px rgba(15,23,42,.08);
    transition:.3s;

}


.card:hover {

    transform:translateY(-8px);

}


.icon {

    font-size:35px;
    margin-bottom:20px;

}


.card p {

    color:var(--gray);

}




/* DARK BLOCK */


.dark-section {

    background:#0f172a;
    color:white;

}


.dark-section .section-title p {

    color:#cbd5e1;

}


.usage-grid {

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;

}


.usage-item {

    background:#1e293b;
    padding:30px;
    border-radius:20px;

}



.usage-item p {

    color:#cbd5e1;

}



/* STEPS */


.steps {

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;

}


.step {

    text-align:center;

}


.number {

    width:60px;
    height:60px;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--blue);
    color:white;
    border-radius:50%;
    font-size:24px;
    margin-bottom:20px;

}



/* PLATFORMS */


.platform-list {

    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:20px;

}


.platform-list div {

    padding:25px;
    background:#f1f5f9;
    text-align:center;
    border-radius:15px;
    font-weight:600;

}



/* FAQ */


.faq-item {

    border-bottom:1px solid #e2e8f0;

}


.faq-question {

    width:100%;
    padding:25px 0;
    background:none;
    border:none;
    display:flex;
    justify-content:space-between;
    font-size:18px;
    cursor:pointer;

}


.faq-answer {

    display:none;
    padding-bottom:20px;
    color:#64748b;

}



/* REVIEWS */


.review-grid {

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;

}


.review {

    padding:30px;
    border-radius:20px;
    background:#f8fafc;

}



.review h4 {

    margin-top:20px;

}



/* FORM */


.contact-box {

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;

}


form {

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

}



input,
textarea {

    padding:15px;
    border-radius:12px;
    border:1px solid #cbd5e1;
    font-size:16px;

}


textarea {

    min-height:130px;

}



/* FOOTER */


footer {

    background:#020617;
    color:white;
    padding:60px 0 20px;

}


.footer-grid {

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:40px;

}


footer a {

    display:block;
    color:#cbd5e1;
    margin:10px 0;

}


.copyright {

    text-align:center;
    margin-top:40px;
    color:#94a3b8;

}



/* COOKIE */


#cookie-banner {

    position:fixed;
    bottom:20px;
    left:20px;
    right:20px;
    background:white;
    padding:20px;
    box-shadow:0 10px 40px #0002;
    border-radius:15px;
    display:flex;
    justify-content:space-between;
    gap:20px;
    z-index:2000;

}



/* MOBILE ADAPTATION */


.mobile-menu {

    display:none;
    width:35px;
    cursor:pointer;

}


.mobile-menu span {

    display:block;
    height:3px;
    width:100%;
    background:#0f172a;
    margin:6px 0;
    border-radius:5px;

}



@media(max-width:900px){


.container {

    width:90%;

}


/* HEADER */


header {

    height:auto;

}


nav {

    height:70px;

}


.logo {

    font-size:22px;

}


nav ul {

    display:none;

}


.mobile-menu {

    display:block;

}



/* HERO */


.hero {

    padding-top:110px;
    padding-bottom:60px;

}



.hero-grid {

    grid-template-columns:1fr;
    gap:35px;

}


.hero-content {

    text-align:center;

}


.badge {

    font-size:12px;

}


.hero h1 {

    font-size:34px;
    line-height:1.2;

}


.hero p {

    font-size:16px;

}



.hero-buttons {

    justify-content:center;

}


.btn {

    width:100%;
    text-align:center;
    padding:14px 20px;

}



.glass-card {

    padding:30px 20px;
    border-radius:20px;

}


.glass-card h2 {

    font-size:22px;

}



.shield {

    width:70px;
    height:70px;
    font-size:32px;

}



/* STATS */


.hero-stats {

    display:grid;
    grid-template-columns:1fr;
    gap:20px;
    margin-top:35px;

}


.hero-stats div {

    background:#ffffff;
    padding:15px;
    border-radius:15px;
    box-shadow:0 10px 25px #00000010;

}


/* SECTIONS */


.section {

    padding:60px 0;

}


.section-title {

    margin-bottom:35px;

}


.section-title h2 {

    font-size:30px;

}



/* CARDS */


.cards,
.usage-grid,
.review-grid {

    grid-template-columns:1fr;

}



.card {

    padding:25px;

}



/* DARK BLOCK */


.usage-item {

    padding:25px;

}



/* STEPS */


.steps {

    grid-template-columns:1fr;

}


.step {

    margin-bottom:25px;

}



/* PLATFORMS */


.platform-list {

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

}


.platform-list div {

    padding:18px 10px;
    font-size:14px;

}



/* FAQ */


.faq-question {

    font-size:16px;
    text-align:left;

}



/* CONTACT */


.contact-box {

    grid-template-columns:1fr;
    gap:30px;

}



input,
textarea {

    font-size:15px;

}


/* FOOTER */


.footer-grid {

    grid-template-columns:1fr;
    text-align:center;

}


footer {

    padding:40px 0 20px;

}



/* COOKIE */


#cookie-banner {

    left:10px;
    right:10px;
    bottom:10px;

    flex-direction:column;
    text-align:center;

    padding:15px;
    font-size:14px;

}


#cookie-banner button {

    width:100%;

}



}



@media(max-width:500px){


.hero h1 {

    font-size:28px;

}


.section-title h2 {

    font-size:26px;

}


.platform-list {

    grid-template-columns:1fr;

}


.card h3,
.usage-item h3 {

    font-size:19px;

}


.review {

    padding:20px;

}


}