@charset "UTF-8";
/*
# ---------------------- #
# Developed by Volkertek #
# All rights reserved    #
# ---------------------- #
*/
/* -------------------------------------------------- */

:root {

  --transition: .15s all
}

html {
    overflow-x: hidden;
    overflow-y: scroll
}

body {
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    min-height: 100vh;
    padding-left: 0 !important;
    padding-right: 0 !important;


          background: var(--bg);
      color: var(--text);

}


header,
footer {
    flex: none
}

main {
    flex: 1 0 auto
}

a {
    transition: .15s all
}

section {
    padding: 120px 0
}

.modal {
    margin: 0 !important;
    padding: 0 !important
}




    :root{
      --bg: #0b0b10;
      --panel: rgba(255,255,255,.04);
      --panel-2: rgba(255,255,255,.06);
      --line: rgba(255,255,255,.08);
      --text: rgba(255,255,255,.92);
      --muted: rgba(255,255,255,.68);
      --muted-2: rgba(255,255,255,.54);
      --brand: #8e2de2;
      --brand-2: #5b2cff;
      --radius: 1.35rem;
      --shadow: 0 18px 60px rgba(0,0,0,.55);
    }



    /* Fix Bootstrap defaults (avoid white panels on dark UI) */
    .accordion, .accordion-item, .accordion-header, .accordion-body{color: var(--text);}
    .accordion-item{background: rgba(255,255,255,.03) !important; border-color: rgba(255,255,255,.08) !important;}
    .accordion-button{background: transparent !important; color: var(--text) !important; box-shadow: none !important;}
    .accordion-button:not(.collapsed){background: rgba(255,255,255,.04) !important; color: var(--text) !important;}
    .accordion-button::after{filter: invert(1) opacity(.85);}

    .form-control, .form-select{
      background: rgba(255,255,255,.04) !important;
      border-color: rgba(255,255,255,.12) !important;
      color: #fff !important;
    }
    .form-control::placeholder{color: rgba(255,255,255,.55) !important;}
    .form-control:focus, .form-select:focus{box-shadow: 0 0 0 .25rem rgba(142,45,226,.20) !important;}





.navbar {
    background-color: rgba(11,11,11,.72);
    backdrop-filter: blur(12px);
    transition: var(--transition)
}

.navbar .navbar-brand {
    height: 60px;
    padding: 10px 0
}

.navbar .navbar-brand img {
    height: 100%;
    width: auto
}


.navbar .navbar-nav .nav-link {
    color: #F6F6F6
}

.navbar .navbar-nav .nav-link:hover {
    color: var(--bs-primary)
}



















    .brand-mark{
      width: 10px; height: 10px; display:inline-block;
      background: linear-gradient(135deg, var(--brand), var(--brand-2));
      border-radius: 3px;
      box-shadow: 0 0 0 6px rgba(142,45,226,.12);
      transform: translateY(-1px);
    }



    /* HERO */
    .hero{
      position: relative;
      min-height: 100vh;
      padding-top: 92px;
      display: grid;
      place-items: center;
      overflow: hidden;
      background:
        radial-gradient(1200px 700px at 15% 15%, rgba(142,45,226,.35), transparent 60%),
        radial-gradient(900px 600px at 85% 25%, rgba(91,44,255,.26), transparent 60%),
        radial-gradient(700px 700px at 65% 85%, rgba(142,45,226,.18), transparent 55%),
        linear-gradient(180deg, #0b0b10 0%, #07070c 60%, #0b0b10 100%);
    }

    .hero::before{
      content:"";
      position:absolute;
      inset:-2px;
      background:
        radial-gradient(600px 600px at 10% 60%, rgba(255,255,255,.06), transparent 70%),
        radial-gradient(520px 520px at 90% 70%, rgba(255,255,255,.05), transparent 70%);
      pointer-events:none;
      mix-blend-mode: screen;
      opacity:.55;
    }

    .gridlines{
      position:absolute;
      inset:-1px;
      background-image:
        linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
      background-size: 68px 68px;
      opacity: .07;
      mask-image: radial-gradient(ellipse at 50% 40%, black 0%, transparent 68%);
      pointer-events:none;
    }

    .hero-card{
      border: 1px solid var(--line);
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
      border-radius: calc(var(--radius) + .4rem);
      box-shadow: var(--shadow);
      position: relative;
      overflow:hidden;
    }

    .hero-card::after{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(700px 220px at 30% 0%, rgba(142,45,226,.18), transparent 60%),
        radial-gradient(600px 240px at 80% 20%, rgba(91,44,255,.12), transparent 60%);
      pointer-events:none;
    }

    .badge-premium{
      border: 1px solid rgba(142,45,226,.35);
      background: rgba(142,45,226,.12);
      color: rgba(255,255,255,.90);
      padding: .55rem .85rem;
      border-radius: 999px;
      display:inline-flex;
      gap:.5rem;
      align-items:center;
      font-weight: 600;
      letter-spacing: .2px;
    }

    .btn-brand{
      background: linear-gradient(135deg, var(--brand), var(--brand-2));
      border: 0;
      box-shadow: 0 14px 40px rgba(142,45,226,.18);
    }
    .btn-brand:hover{filter: brightness(1.08);}

    .btn-ghost{
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(255,255,255,.04);
      color: rgba(255,255,255,.90);
    }
    .btn-ghost:hover{border-color: rgba(255,255,255,.24); background: rgba(255,255,255,.06);}

    /* SECTION */
    .section{padding: 96px 0;}
    .section-title{max-width: 820px;}

    .kicker{
      text-transform: uppercase;
      letter-spacing: .22em;
      font-size: .78rem;
      color: rgba(255,255,255,.62);
    }

    .muted{color: var(--muted);}
    .muted-2{color: var(--muted-2);}

    .panel{
      border: 1px solid var(--line);
      background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
      border-radius: var(--radius);
      box-shadow: 0 16px 50px rgba(0,0,0,.45);
    }

    .panel:hover{
      border-color: rgba(142,45,226,.28);
      transform: translateY(-4px);
      transition: .25s ease;
    }

    .icon-chip{
      width: 44px; height: 44px;
      border-radius: 14px;
      display:grid;
      place-items:center;
      border: 1px solid rgba(142,45,226,.25);
      background: rgba(142,45,226,.10);
    }

    .stat{
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.03);
      border-radius: 1rem;
      padding: 1rem 1.1rem;
    }

    .logo-wall{
      border-top: 1px solid rgba(255,255,255,.08);
      border-bottom: 1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.02);
    }

    .logo-pill{
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.03);
      border-radius: 999px;
      padding: .55rem .95rem;
      color: rgba(255,255,255,.70);
      font-weight: 600;
      font-size: .95rem;
      white-space: nowrap;
    }

    .pricing{
      border: 1px solid rgba(255,255,255,.10);
      background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
      border-radius: calc(var(--radius) + .25rem);
      overflow:hidden;
      position: relative;
    }

    .pricing.featured{
      border-color: rgba(142,45,226,.45);
      box-shadow: 0 20px 70px rgba(142,45,226,.12);
    }

    .pricing .topbar{
      background: rgba(142,45,226,.10);
      border-bottom: 1px solid rgba(142,45,226,.25);
      color: rgba(255,255,255,.92);
    }

    .check{color: rgba(255,255,255,.86);}
    .check i{color: rgba(142,45,226,.95);}

    .quote{
      border-left: 2px solid rgba(142,45,226,.75);
      padding-left: 1rem;
    }

    .cta{
      background:
        radial-gradient(900px 500px at 20% 50%, rgba(142,45,226,.28), transparent 60%),
        radial-gradient(900px 500px at 80% 50%, rgba(91,44,255,.22), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
      border: 1px solid rgba(255,255,255,.10);
      border-radius: calc(var(--radius) + .55rem);
      box-shadow: var(--shadow);
      overflow:hidden;
      position: relative;
    }

    .cta::after{
      content:"";
      position:absolute;
      inset:-2px;
      background:
        radial-gradient(600px 220px at 30% 0%, rgba(255,255,255,.06), transparent 60%),
        radial-gradient(560px 240px at 85% 20%, rgba(255,255,255,.05), transparent 60%);
      opacity: .55;
      pointer-events:none;
    }

    .footer{
      border-top: 1px solid rgba(255,255,255,.08);
      padding: 48px 0;
      color: rgba(255,255,255,.70);
    }


    /* PC SVG sizing */
    .pc-wrap{max-width: 560px; margin-inline:auto;}
    .pc-glow{filter: drop-shadow(0 26px 60px rgba(142,45,226,.16));}





@media (min-width: 992px) {
    .navbar {
        padding: 20px 0
    }
    .navbar .navbar-nav .nav-item {
        margin-left: 20px
    }
    .navbar .navbar-nav .nav-item:first-of-type {
        margin-left: 0
    }
}







/* -------------------------------------------------- */