/* ==========================================================================
   SecureFlow AI
   Modern SaaS Website
   Part 1/4
   ========================================================================== */

/* ==========================================================================
   GOOGLE FONT
   ========================================================================== */

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


/* ==========================================================================
   CSS VARIABLES
   ========================================================================== */

:root{

    --primary:#2563eb;
    --primary-dark:#1d4ed8;
    --secondary:#0f172a;
    --accent:#06b6d4;

    --success:#22c55e;
    --warning:#f59e0b;
    --danger:#ef4444;

    --white:#ffffff;
    --background:#f8fafc;
    --surface:#ffffff;

    --text:#1e293b;
    --text-light:#64748b;
    --border:#e2e8f0;

    --radius-sm:8px;
    --radius:14px;
    --radius-lg:24px;

    --shadow-sm:0 2px 8px rgba(0,0,0,.05);

    --shadow:
        0 8px 25px rgba(0,0,0,.08);

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

    --transition:.30s ease;

    --container:1200px;

}


/* ==========================================================================
   DARK MODE
   ========================================================================== */

body.dark{

    --background:#020617;
    --surface:#0f172a;

    --text:#f8fafc;
    --text-light:#cbd5e1;

    --border:#334155;

}


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

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

html{

    scroll-behavior:smooth;

}

body{

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

    background:var(--background);

    color:var(--text);

    line-height:1.6;

    overflow-x:hidden;

}

img{

    max-width:100%;
    display:block;

}

a{

    text-decoration:none;
    color:inherit;

}

ul{

    list-style:none;

}

button{

    border:none;
    cursor:pointer;

    font-family:inherit;

}

input,
textarea{

    font-family:inherit;

}

section{

    padding:90px 20px;

}

.container{

    max-width:var(--container);

    margin:auto;

}

.hidden{

    display:none;

}


/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

h1{

    font-size:clamp(2.8rem,5vw,4.5rem);

    line-height:1.05;

    font-weight:800;

}

h2{

    font-size:clamp(2rem,3vw,3rem);

    margin-bottom:20px;

}

h3{

    font-size:1.4rem;

    margin-bottom:10px;

}

h4{

    font-size:1.1rem;

}

p{

    color:var(--text-light);

    margin-bottom:18px;

}

.section-title{

    text-align:center;

    margin-bottom:18px;

}

.section-subtitle{

    text-align:center;

    max-width:760px;

    margin:auto auto 70px;

    color:var(--text-light);

}


/* ==========================================================================
   UTILITIES
   ========================================================================== */

.text-center{

    text-align:center;

}

.mb-1{margin-bottom:10px;}
.mb-2{margin-bottom:20px;}
.mb-3{margin-bottom:40px;}
.mb-4{margin-bottom:60px;}

.grid{

    display:grid;
    gap:30px;

}

.two-col{

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

}

.three-col{

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

}

.four-col{

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

}


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

header{

    position:fixed;

    width:100%;

    top:0;

    left:0;

    z-index:999;

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

    backdrop-filter:blur(18px);

    border-bottom:1px solid rgba(0,0,0,.04);

}

body.dark header{

    background:rgba(2,6,23,.92);

}

.navbar{

    height:80px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.logo{

    font-size:1.6rem;

    font-weight:800;

    color:var(--primary);

}

.logo span{

    color:var(--text);

}

nav ul{

    display:flex;

    gap:35px;

}

nav a{

    color:var(--text-light);

    transition:var(--transition);

    font-weight:500;

}

nav a:hover{

    color:var(--primary);

}

.mobile-toggle{

    display:none;

    font-size:2rem;

}


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

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 28px;

    border-radius:999px;

    transition:var(--transition);

    font-weight:600;

}

.btn-primary{

    background:var(--primary);

    color:#fff;

}

.btn-primary:hover{

    background:var(--primary-dark);

    transform:translateY(-3px);

    box-shadow:var(--shadow);

}

.btn-outline{

    border:2px solid var(--primary);

    color:var(--primary);

}

.btn-outline:hover{

    background:var(--primary);

    color:white;

}

.btn-white{

    background:white;

    color:var(--primary);

}


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

.hero{

    padding-top:170px;

    padding-bottom:120px;

}

.hero-grid{

    display:grid;

    gap:60px;

    align-items:center;

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

}

.hero h1{

    margin-bottom:25px;

}

.hero p{

    font-size:1.1rem;

    max-width:620px;

}

.hero-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

    margin-top:35px;

}

.hero-card{

    background:var(--surface);

    border-radius:28px;

    padding:40px;

    box-shadow:var(--shadow-lg);

    position:relative;

}

.hero-card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:28px;

    padding:2px;

    background:linear-gradient(135deg,#2563eb,#06b6d4);

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

}


/* ==========================================================================
   BADGES
   ========================================================================== */

.badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 16px;

    border-radius:999px;

    background:#dbeafe;

    color:#1d4ed8;

    font-size:.9rem;

    font-weight:600;

    margin-bottom:25px;

}


/* ==========================================================================
   STATS
   ========================================================================== */

.stats{

    margin-top:50px;

    display:grid;

    gap:30px;

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

}

.stat{

    text-align:center;

}

.stat h2{

    margin:0;

    color:var(--primary);

}

.stat p{

    margin:0;

}


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

.card{

    background:var(--surface);

    border-radius:20px;

    padding:35px;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

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

}

.card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-lg);

}

.card-icon{

    width:64px;

    height:64px;

    border-radius:18px;

    background:#dbeafe;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:30px;

    color:var(--primary);

    margin-bottom:25px;

}
/* ==========================================================================
   SERVICES
   ========================================================================== */

#services{
    background:var(--background);
}

#services .card{
    height:100%;
    display:flex;
    flex-direction:column;
}

#services ul{
    margin-top:20px;
}

#services li{
    padding:10px 0;
    color:var(--text-light);
    border-bottom:1px solid var(--border);
    font-size:.95rem;
}

#services li:last-child{
    border:none;
}

#services .btn{
    margin-top:40px;
}


/* ==========================================================================
   WHY CHOOSE US
   ========================================================================== */

#why{
    background:var(--surface);
}

#why .card{
    text-align:center;
}

#why .card-icon{
    margin:0 auto 25px;
}

#why h3{
    margin-bottom:15px;
}


/* ==========================================================================
   PROCESS
   ========================================================================== */

.process-step{

    position:relative;

}

.process-step::after{

    content:"";

    position:absolute;

    top:32px;

    right:-15px;

    width:30px;

    height:2px;

    background:var(--border);

}

.process-step:last-child::after{

    display:none;

}


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

.feature-list{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.feature{

    display:flex;

    align-items:flex-start;

    gap:15px;

}

.feature-icon{

    width:46px;

    height:46px;

    border-radius:14px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#dbeafe;

    color:var(--primary);

    font-size:20px;

    flex-shrink:0;

}

.feature-text h4{

    margin-bottom:5px;

}

.feature-text p{

    margin:0;

}


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

.pricing-card{

    position:relative;

    overflow:hidden;

    text-align:center;

}

.pricing-card h2{

    font-size:3rem;

    margin:20px 0;

}

.pricing-card h2 small{

    font-size:1rem;

    color:var(--text-light);

}

.pricing-card ul{

    margin:30px 0;

}

.pricing-card li{

    padding:12px 0;

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

    color:var(--text-light);

}

.pricing-card li:last-child{

    border:none;

}

.pricing-card .btn{

    width:100%;

}

.popular{

    border:2px solid var(--primary);

    transform:scale(1.04);

    box-shadow:var(--shadow-lg);

}

.popular::before{

    content:"Most Popular";

    position:absolute;

    top:18px;

    right:-38px;

    width:160px;

    text-align:center;

    background:var(--primary);

    color:white;

    padding:8px;

    transform:rotate(45deg);

    font-size:.75rem;

    font-weight:700;

}


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

.cta{

    background:linear-gradient(
        135deg,
        var(--primary),
        #4f46e5
    );

    color:white;

    text-align:center;

    border-radius:32px;

    padding:70px;

}

.cta h2{

    color:white;

}

.cta p{

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

    max-width:700px;

    margin:auto auto 35px;

}


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

.testimonial{

    position:relative;

}

.testimonial::before{

    content:"★★★★★";

    color:#f59e0b;

    letter-spacing:4px;

    display:block;

    margin-bottom:20px;

}

.testimonial-author{

    display:flex;

    align-items:center;

    gap:15px;

    margin-top:25px;

}

.avatar{

    width:60px;

    height:60px;

    border-radius:50%;

    background:#dbeafe;

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:700;

    color:var(--primary);

}

.author-info strong{

    display:block;

}

.author-info span{

    color:var(--text-light);

    font-size:.9rem;

}


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

.logo-strip{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:60px;

    flex-wrap:wrap;

    opacity:.65;

}

.logo-item{

    font-weight:700;

    font-size:1.15rem;

    color:var(--text-light);

}


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

footer{

    background:var(--secondary);

    color:white;

    padding:80px 20px 40px;

}

footer h3{

    color:white;

    margin-bottom:20px;

}

footer p{

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

}

footer ul{

    display:flex;

    flex-direction:column;

    gap:12px;

}

footer a{

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

    transition:var(--transition);

}

footer a:hover{

    color:white;

}

footer hr{

    border:none;

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

}

footer .copyright{

    text-align:center;

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

    margin-top:30px;

}


/* ==========================================================================
   SECTION BACKGROUNDS
   ========================================================================== */

.bg-light{

    background:var(--background);

}

.bg-white{

    background:var(--surface);

}

.bg-primary{

    background:var(--primary);

    color:white;

}

.bg-primary p{

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

}


/* ==========================================================================
   DIVIDERS
   ========================================================================== */

.divider{

    width:80px;

    height:5px;

    border-radius:999px;

    background:var(--primary);

    margin:20px auto 50px;

}

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

.faq{

    max-width:900px;

    margin:0 auto;

}

.faq-item{

    background:var(--surface);

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

    border-radius:18px;

    margin-bottom:20px;

    overflow:hidden;

    transition:var(--transition);

}

.faq-item:hover{

    box-shadow:var(--shadow);

}

.faq-question{

    display:flex;

    justify-content:space-between;

    align-items:center;

    cursor:pointer;

    padding:24px 30px;

    font-weight:600;

    font-size:1.05rem;

}

.faq-question span{

    font-size:1.6rem;

    transition:.3s;

}

.faq-answer{

    max-height:0;

    overflow:hidden;

    transition:max-height .4s ease;

    padding:0 30px;

}

.faq-item.active .faq-answer{

    max-height:400px;

    padding:0 30px 25px;

}

.faq-item.active .faq-question span{

    transform:rotate(45deg);

}


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

.contact-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:50px;

}

.contact-card{

    background:var(--surface);

    padding:40px;

    border-radius:24px;

    box-shadow:var(--shadow);

}

.contact-info{

    display:flex;

    align-items:flex-start;

    gap:18px;

    margin-bottom:25px;

}

.contact-icon{

    width:52px;

    height:52px;

    border-radius:16px;

    background:#dbeafe;

    display:flex;

    justify-content:center;

    align-items:center;

    color:var(--primary);

    font-size:22px;

    flex-shrink:0;

}


/* ==========================================================================
   FORMS
   ========================================================================== */

form{

    display:flex;

    flex-direction:column;

    gap:20px;

}

label{

    font-weight:600;

    margin-bottom:8px;

    display:block;

}

input,
textarea,
select{

    width:100%;

    padding:15px 18px;

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

    border-radius:12px;

    background:var(--surface);

    color:var(--text);

    transition:var(--transition);

    font-size:1rem;

}

textarea{

    resize:vertical;

    min-height:160px;

}

input:focus,
textarea:focus,
select:focus{

    border-color:var(--primary);

    outline:none;

    box-shadow:0 0 0 4px rgba(37,99,235,.12);

}

.form-group{

    display:flex;

    flex-direction:column;

}

.form-row{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

}


/* ==========================================================================
   TABLES
   ========================================================================== */

.table{

    width:100%;

    border-collapse:collapse;

    margin-top:30px;

}

.table th{

    background:var(--primary);

    color:white;

    padding:16px;

    text-align:left;

}

.table td{

    padding:16px;

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

}

.table tr:hover{

    background:rgba(37,99,235,.04);

}


/* ==========================================================================
   BLOG
   ========================================================================== */

.blog-card{

    overflow:hidden;

    border-radius:20px;

    background:var(--surface);

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.blog-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-lg);

}

.blog-image{

    height:220px;

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

}

.blog-content{

    padding:30px;

}

.blog-meta{

    font-size:.9rem;

    color:var(--text-light);

    margin-bottom:10px;

}


/* ==========================================================================
   METRICS
   ========================================================================== */

.metric-grid{

    display:grid;

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

    gap:25px;

}

.metric{

    background:var(--surface);

    text-align:center;

    padding:40px;

    border-radius:20px;

    box-shadow:var(--shadow-sm);

}

.metric h2{

    color:var(--primary);

    margin-bottom:10px;

}

.metric p{

    margin:0;

}


/* ==========================================================================
   SCROLL TO TOP
   ========================================================================== */

.scroll-top{

    position:fixed;

    bottom:30px;

    right:30px;

    width:54px;

    height:54px;

    border-radius:50%;

    background:var(--primary);

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    transition:var(--transition);

    z-index:999;

}

.scroll-top.show{

    opacity:1;

    visibility:visible;

}

.scroll-top:hover{

    background:var(--primary-dark);

}


/* ==========================================================================
   LOADER
   ========================================================================== */

.loader{

    width:48px;

    height:48px;

    border:5px solid #e5e7eb;

    border-top:5px solid var(--primary);

    border-radius:50%;

    animation:spin 1s linear infinite;

    margin:auto;

}


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

.fade-up{

    opacity:0;

    transform:translateY(30px);

    transition:all .8s ease;

}

.fade-up.show{

    opacity:1;

    transform:translateY(0);

}

.fade-in{

    opacity:0;

    transition:all .8s ease;

}

.fade-in.show{

    opacity:1;

}

.zoom{

    transform:scale(.95);

    opacity:0;

    transition:.8s;

}

.zoom.show{

    opacity:1;

    transform:scale(1);

}

@keyframes spin{

    from{

        transform:rotate(0);

    }

    to{

        transform:rotate(360deg);

    }

}

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}

.float{

    animation:float 3s ease-in-out infinite;

}


/* ==========================================================================
   BADGES
   ========================================================================== */

.tag{

    display:inline-block;

    padding:6px 14px;

    border-radius:999px;

    background:#dbeafe;

    color:var(--primary);

    font-size:.85rem;

    font-weight:600;

}


/* ==========================================================================
   ALERTS
   ========================================================================== */

.alert{

    padding:18px 22px;

    border-radius:14px;

    margin:20px 0;

}

.alert-success{

    background:#dcfce7;

    color:#166534;

}

.alert-warning{

    background:#fef3c7;

    color:#92400e;

}

.alert-danger{

    background:#fee2e2;

    color:#991b1b;

}


/* ==========================================================================
   UTILITIES
   ========================================================================== */

.w-100{

    width:100%;

}

.rounded{

    border-radius:20px;

}

.shadow{

    box-shadow:var(--shadow);

}

.shadow-lg{

    box-shadow:var(--shadow-lg);

}

.text-primary{

    color:var(--primary);

}

.text-light{

    color:var(--text-light);

}

.bg-gradient{

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

    color:white;

}

.mt-1{margin-top:10px;}
.mt-2{margin-top:20px;}
.mt-3{margin-top:40px;}
.mt-4{margin-top:60px;}

.pt-1{padding-top:20px;}
.pt-2{padding-top:40px;}
.pt-3{padding-top:80px;}

.pb-1{padding-bottom:20px;}
.pb-2{padding-bottom:40px;}
.pb-3{padding-bottom:80px;}

.d-flex{

    display:flex;

}

.align-center{

    align-items:center;

}

.justify-between{

    justify-content:space-between;

}

.justify-center{

    justify-content:center;

}

.flex-column{

    flex-direction:column;

}

.gap-1{

    gap:10px;

}

.gap-2{

    gap:20px;

}

.gap-3{

    gap:30px;

}
/* ==========================================================================
   RESPONSIVE DESIGN
   Part 4 (Final)
   ========================================================================== */

/* Large Desktop */

@media (min-width:1400px){

    .container{
        max-width:1320px;
    }

}


/* Tablet */

@media (max-width:1024px){

    h1{

        font-size:3rem;

    }

    h2{

        font-size:2.3rem;

    }

    .hero-grid,
    .contact-grid{

        grid-template-columns:1fr;

    }

    .stats{

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

    }

    .two-col{

        grid-template-columns:1fr;

    }

}


/* Mobile */

@media (max-width:768px){

    section{

        padding:70px 20px;

    }

    .navbar{

        height:70px;

    }

    nav{

        position:fixed;

        top:70px;

        left:0;

        width:100%;

        background:var(--surface);

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

        display:none;

        box-shadow:var(--shadow);

    }

    nav.active{

        display:block;

    }

    nav ul{

        flex-direction:column;

        gap:0;

        padding:20px;

    }

    nav li{

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

    }

    nav li:last-child{

        border-bottom:none;

    }

    nav a{

        display:block;

        padding:18px 0;

    }

    .mobile-toggle{

        display:block;

        cursor:pointer;

        color:var(--text);

    }

    .hero{

        padding-top:130px;

    }

    .hero-grid{

        grid-template-columns:1fr;

        gap:40px;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .hero-buttons .btn{

        width:100%;

    }

    .stats{

        grid-template-columns:1fr;

        gap:20px;

    }

    .three-col,
    .four-col{

        grid-template-columns:1fr;

    }

    .pricing-card.popular{

        transform:none;

    }

    .popular::before{

        display:none;

    }

    .form-row{

        grid-template-columns:1fr;

    }

    .contact-grid{

        grid-template-columns:1fr;

    }

    footer{

        text-align:center;

    }

}


/* Small Phones */

@media (max-width:480px){

    h1{

        font-size:2.3rem;

    }

    h2{

        font-size:1.8rem;

    }

    .hero-card{

        padding:25px;

    }

    .card{

        padding:25px;

    }

    .btn{

        padding:14px 20px;

    }

}


/* ==========================================================================
   DARK MODE IMPROVEMENTS
   ========================================================================== */

body.dark .card,
body.dark .contact-card,
body.dark .pricing-card,
body.dark .faq-item,
body.dark .hero-card{

    background:var(--surface);

    border-color:#334155;

}

body.dark footer{

    background:#020617;

}

body.dark .badge{

    background:#1e3a8a;

    color:#dbeafe;

}

body.dark .feature-icon,
body.dark .card-icon,
body.dark .contact-icon{

    background:#1e3a8a;

    color:white;

}

body.dark input,
body.dark textarea,
body.dark select{

    background:#0f172a;

    border-color:#334155;

    color:white;

}

body.dark nav{

    background:#0f172a;

}


/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

:focus-visible{

    outline:3px solid var(--primary);

    outline-offset:3px;

}

::selection{

    background:var(--primary);

    color:white;

}

html{

    scroll-padding-top:100px;

}


/* Reduce Motion */

@media (prefers-reduced-motion:reduce){

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}


/* ==========================================================================
   PRINT
   ========================================================================== */

@media print{

    header,
    footer,
    .hero-buttons,
    .scroll-top{

        display:none;

    }

    body{

        background:white;

        color:black;

    }

    .card{

        box-shadow:none;

        border:1px solid #ccc;

    }

}


/* ==========================================================================
   HELPER CLASSES
   ========================================================================== */

.hide{

    display:none !important;

}

.show{

    display:block !important;

}

.text-white{

    color:white;

}

.text-dark{

    color:var(--text);

}

.border{

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

}

.border-top{

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

}

.border-bottom{

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

}

.radius{

    border-radius:var(--radius);

}

.radius-lg{

    border-radius:var(--radius-lg);

}

.p-1{padding:10px;}
.p-2{padding:20px;}
.p-3{padding:30px;}
.p-4{padding:40px;}

.m-1{margin:10px;}
.m-2{margin:20px;}
.m-3{margin:30px;}
.m-4{margin:40px;}

.opacity-50{

    opacity:.5;

}

.opacity-75{

    opacity:.75;

}

.opacity-100{

    opacity:1;

}

.pointer{

    cursor:pointer;

}

.transition{

    transition:var(--transition);

}


/* ==========================================================================
   IMAGE STYLES
   ========================================================================== */

img{

    border-radius:12px;

}

.hero-image{

    max-width:100%;

    animation:float 5s ease-in-out infinite;

}

.logo-image{

    height:42px;

    width:auto;

}


/* ==========================================================================
   CODE BLOCKS
   ========================================================================== */

pre{

    background:#0f172a;

    color:#e2e8f0;

    padding:20px;

    border-radius:16px;

    overflow:auto;

}

code{

    font-family:
        Consolas,
        Monaco,
        monospace;

}


/* ==========================================================================
   LINKS
   ========================================================================== */

a{

    transition:var(--transition);

}

a:hover{

    color:var(--primary);

}


/* ==========================================================================
   FINAL POLISH
   ========================================================================== */

.card,
.hero-card,
.pricing-card,
.contact-card,
.blog-card,
.metric{

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}

.card:hover,
.hero-card:hover,
.blog-card:hover,
.metric:hover{

    transform:translateY(-6px);

}

.hero{

    position:relative;

    overflow:hidden;

}

.hero::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    background:radial-gradient(
        rgba(37,99,235,.12),
        transparent 70%
    );

    top:-150px;

    right:-150px;

    pointer-events:none;

}

.hero::after{

    content:"";

    position:absolute;

    width:400px;

    height:400px;

    background:radial-gradient(
        rgba(6,182,212,.10),
        transparent 70%
    );

    bottom:-150px;

    left:-150px;

    pointer-events:none;

}


/* ==========================================================================
   END OF FILE
   ========================================================================== */