/* =====================================================
   FALYS WEBSITE - MAIN STYLES
   ===================================================== */


:root {

    --bg: #050816;
    --bg-secondary: #080d1f;

    --card: rgba(15, 23, 42, 0.65);

    --cyan: #00eaff;
    --blue: #2563eb;
    --purple: #a855f7;

    --text: #f8fafc;
    --muted: #94a3b8;

    --border: rgba(148,163,184,0.15);

    --radius: 18px;

}





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


* {

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

}



html {

    scroll-behavior:smooth;

}



body {

    background:
    radial-gradient(
        circle at top,
        rgba(0,234,255,0.12),
        transparent 35%
    ),
    var(--bg);


    color:var(--text);

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

    line-height:1.6;

    overflow-x:hidden;

}



a {

    color:inherit;

    text-decoration:none;

}



h1,h2,h3 {

    font-family:"Space Grotesk", sans-serif;

}



p {

    color:var(--muted);

}






/* =====================
 NAVBAR
===================== */


header {

    position:relative;

    z-index:100;

}



.navbar {

    width:90%;

    max-width:1200px;

    margin:auto;

    padding:25px 0;

    display:flex;

    justify-content:space-between;

    align-items:center;

}




.logo {

    display:flex;

    align-items:center;

    gap:12px;

    font-size:1.3rem;

    font-weight:700;

}




.logo-box {


    width:42px;

    height:42px;

    border-radius:12px;


    display:flex;

    justify-content:center;

    align-items:center;


    background:
    linear-gradient(
        135deg,
        var(--cyan),
        var(--purple)
    );


    color:#020617;

    font-size:1.5rem;

    font-weight:900;


    box-shadow:
    0 0 25px rgba(0,234,255,.4);

}





.nav-links {

    display:flex;

    gap:35px;

}



.nav-links a {


    color:var(--muted);

    transition:.3s;

}



.nav-links a:hover {

    color:var(--cyan);

}







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


.hero {


    min-height:90vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    position:relative;


    padding:80px 20px;


}




.hero-grid {


    position:absolute;

    inset:0;


    background-image:

    linear-gradient(
        rgba(255,255,255,.03) 1px,
        transparent 1px
    ),

    linear-gradient(
        90deg,
        rgba(255,255,255,.03) 1px,
        transparent 1px
    );


    background-size:50px 50px;

    mask-image:linear-gradient(
        to bottom,
        black,
        transparent
    );


}





.hero-content {


    max-width:900px;

    position:relative;

    z-index:2;


}




.tag {


    color:var(--cyan);

    font-size:.8rem;

    letter-spacing:3px;

    font-weight:700;

    margin-bottom:25px;


}




.hero h1 {


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


    line-height:1.05;

    margin-bottom:30px;


}



.hero h1 span {


    background:

    linear-gradient(
        90deg,
        var(--cyan),
        var(--purple)
    );


    -webkit-background-clip:text;

    color:transparent;


}





.hero-description {


    max-width:720px;

    margin:auto;

    font-size:1.15rem;


}






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


.hero-buttons {


    margin-top:40px;

    display:flex;

    justify-content:center;

    gap:20px;


}




.btn {


    padding:14px 28px;

    border-radius:12px;

    font-weight:600;

    transition:.3s;


}




.primary {


    background:

    linear-gradient(
        135deg,
        var(--cyan),
        var(--blue)
    );


    color:#020617;


}



.secondary {


    border:

    1px solid var(--border);


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


}





.btn:hover {


    transform:translateY(-3px);

    box-shadow:
    0 10px 30px rgba(0,234,255,.2);


}







/* =====================
 DASHBOARD MOCKUP
===================== */


.dashboard-preview {


    margin-top:80px;


    width:min(
        850px,
        90%
    );


    background:

    rgba(15,23,42,.8);


    border:

    1px solid var(--border);


    border-radius:20px;


    backdrop-filter:blur(20px);


    box-shadow:

    0 0 80px rgba(0,234,255,.12);


}





.window-header {


    height:40px;


    border-bottom:

    1px solid var(--border);


    display:flex;

    gap:8px;

    align-items:center;

    padding-left:20px;


}




.window-header span {


    width:10px;

    height:10px;

    border-radius:50%;


    background:#64748b;


}




.dashboard-body {


    padding:30px;

    display:grid;

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

    gap:20px;


}




.stat-card {


    padding:25px;

    border-radius:15px;


    background:

    rgba(255,255,255,.04);


    border:

    1px solid var(--border);


}




.stat-card h3 {


    font-size:2rem;

    color:var(--cyan);

}



.stat-card p {


    font-size:.9rem;

}



.stat-card.danger h3 {


    color:#f87171;

}







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


.section {


    width:90%;

    max-width:1200px;

    margin:120px auto;


}



.section-title {


    text-align:center;

    max-width:700px;

    margin:auto;

}



.section-title h2 {


    font-size:3rem;

    margin-bottom:20px;

}







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


.feature-grid {


    margin-top:60px;


    display:grid;


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


    gap:25px;


}



.feature-card {


    padding:35px;


    background:var(--card);


    border:

    1px solid var(--border);


    border-radius:var(--radius);


    transition:.3s;


}




.feature-card:hover {


    transform:translateY(-8px);


    border-color:

    rgba(0,234,255,.4);


}





.feature-card h3 {


    margin-bottom:15px;

    color:white;

}







/* =====================
 ARCHITECTURE
===================== */


.flow {


    margin-top:60px;


    display:flex;

    flex-direction:column;

    align-items:center;

    gap:15px;


}



.flow-box {


    width:280px;

    text-align:center;


    padding:20px;


    border-radius:14px;


    background:var(--card);


    border:

    1px solid var(--border);


}




.flow-box.highlight {


    border-color:var(--cyan);


    box-shadow:

    0 0 30px rgba(0,234,255,.25);


}



.arrow {


    color:var(--cyan);

    font-size:2rem;


}







/* =====================
 DETECTION PIPELINE
===================== */


.detection-box {


    padding:60px;

    border-radius:25px;


    background:

    linear-gradient(
        135deg,
        rgba(37,99,235,.15),
        rgba(168,85,247,.15)
    );


    text-align:center;

}




.pipeline {


    margin-top:40px;


    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:15px;


}



.pipeline div {


    padding:15px 25px;

    border-radius:30px;


    background:

    rgba(0,0,0,.25);


    border:

    1px solid var(--border);


}







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


.cta {


    text-align:center;

    padding:80px 20px;

}





.cta h2 {


    font-size:3rem;

}


/* =====================
   BROCHURE PREVIEW
===================== */


.brochure-preview {


    width:90%;

    max-width:900px;

    margin:60px auto;


    border-radius:20px;


    border:

    1px solid var(--border);


    overflow:hidden;


    background:

    rgba(255,255,255,.03);


    box-shadow:

    0 0 50px rgba(0,234,255,.15);


}



.brochure-preview img {


    width:100%;

    display:block;


}







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


footer {


    border-top:

    1px solid var(--border);


    padding:50px 8%;


    display:flex;

    justify-content:space-between;

    flex-wrap:wrap;


}





footer h3 {


    color:var(--cyan);

}