:root {

    --bg:#030712;

    --panel:#0b1220;

    --panel2:#111827;

    --cyan:#06b6d4;

    --blue:#2563eb;

    --violet:#7c3aed;

    --green:#10b981;

    --orange:#f59e0b;

    --red:#ef4444;

    --text:#f8fafc;

    --muted:#94a3b8;

    --line:
    rgba(255,255,255,.08);

}



* {

    margin:0;

    padding:0;

    box-sizing:border-box;

    font-family:

    "Inter",
    "Segoe UI",
    sans-serif;

}



body {


    background:

    radial-gradient(
        circle at 20% 0%,
        rgba(6,182,212,.18),
        transparent 35%
    ),

    radial-gradient(
        circle at 80% 20%,
        rgba(124,58,237,.18),
        transparent 35%
    ),

    var(--bg);



    color:var(--text);

}



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


.navbar {


    position:sticky;

    top:0;

    z-index:100;


    display:flex;

    justify-content:space-between;

    align-items:center;


    padding:

    18px 50px;


    background:

    rgba(3,7,18,.75);


    backdrop-filter:

    blur(25px);


    border-bottom:

    1px solid var(--line);

}



.logo {


    font-size:

    30px;


    font-weight:

    900;


    letter-spacing:

    1px;


    color:white;


}



.logo::before {


    content:"●";


    color:

    var(--cyan);


    margin-right:

    10px;


    animation:

    pulse 2s infinite;


}



@keyframes pulse {


    50%{

        opacity:.3;

    }


}



.menu {


    display:flex;

    gap:8px;

    flex-wrap:wrap;

}



.menu a {


    color:

    var(--muted);


    text-decoration:none;


    padding:

    9px 14px;


    border-radius:

    12px;


}



.menu a:hover {


    color:white;


    background:

    rgba(6,182,212,.15);


}



/* ======================
MAIN
====================== */


.container {


    max-width:

    1350px;


    margin:auto;


    padding:

    60px 25px;


}



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


.card {


    background:

    linear-gradient(

        145deg,

        rgba(17,24,39,.95),

        rgba(3,7,18,.95)

    );


    border:

    1px solid var(--line);


    border-radius:

    28px;


    padding:

    40px;


    margin-bottom:

    35px;


    box-shadow:

    0 30px 80px

    rgba(0,0,0,.5);


}



.card h1 {


    font-size:

    52px;


    line-height:

    1.1;


}



.card h2 {


    color:

    var(--cyan);


    margin-bottom:

    20px;


}



.card p {


    color:

    var(--muted);


    font-size:

    17px;


}



/* ======================
TOOLS GRID
====================== */


.tools-grid {


    display:grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:

    28px;


}



.tool-card {


    position:relative;


    background:

    linear-gradient(

        160deg,

        #111827,

        #030712

    );


    border:

    1px solid var(--line);


    border-radius:

    24px;


    padding:

    30px;


    overflow:hidden;


    transition:

    .35s;


}



.tool-card::after {


    content:"";


    position:absolute;


    width:

    120px;


    height:

    120px;


    right:-40px;


    top:-40px;


    background:

    var(--cyan);


    opacity:.12;


    filter:

    blur(50px);


}



.tool-card:hover {


    transform:

    translateY(-12px);


    border-color:

    var(--cyan);


    box-shadow:

    0 25px 60px

    rgba(6,182,212,.18);


}



.tool-card h3 {


    font-size:

    24px;


    margin-bottom:

    15px;


}



.tool-card p {


    color:

    var(--muted);


    min-height:

    60px;


}



.tool-card a {


    display:inline-flex;


    align-items:center;


    margin-top:

    25px;


    padding:

    12px 25px;


    border-radius:

    14px;


    background:

    linear-gradient(

        135deg,

        rgba(6,182,212,.2),

        rgba(37,99,235,.2)

    );


    color:

    var(--cyan);


    text-decoration:none;


    font-weight:

    700;


}



.tool-card a:hover {


    background:

    var(--cyan);


    color:

    #001018;


}



/* ======================
INPUTS
====================== */


input,
select {


    width:

    100%;


    padding:

    16px;


    margin:

    12px 0;


    background:

    rgba(255,255,255,.05);


    border:

    1px solid var(--line);


    border-radius:

    14px;


    color:white;


}



button {


    padding:

    15px 35px;


    border-radius:

    14px;


    border:none;


    color:white;


    font-weight:800;


    background:

    linear-gradient(

        135deg,

        var(--cyan),

        var(--blue)

    );


    cursor:pointer;


}



button:hover {


    box-shadow:

    0 15px 35px

    rgba(6,182,212,.4);


}



/* ======================
RESULTS
====================== */


.result {


    background:

    #020617;


    border:

    1px solid var(--line);


    border-left:

    5px solid var(--cyan);


    padding:

    25px;


    border-radius:

    18px;


}



.result pre {


    color:

    #67e8f9;


}



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


footer {


    padding:

    50px;


    text-align:center;


    color:

    var(--muted);


}



/* ======================
RESPONSIVE
====================== */


@media(max-width:1000px){


.tools-grid{

grid-template-columns:

repeat(2,1fr);

}


}



@media(max-width:650px){


.tools-grid{

grid-template-columns:

1fr;

}


.navbar{

flex-direction:

column;

}


.card h1{

font-size:

34px;

}


}