/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/

       :root{
      --bg:#070A12;
      --bg2:#0B1224;
      --card:#0E1733;
      --card2:#0B1430;
      --text:#EAF0FF;
      --muted:#000;
      --muted2:#000;
      --line:rgba(255,255,255,.10);
      --line2:rgba(255,255,255,.14);
      --shadow:0 22px 70px rgba(0,0,0,.45);
      --shadow2:0 12px 35px rgba(0,0,0,.35);
      --r22:22px;
      --r18:18px;
      --r14:14px;
      --accent:#6EE7FF;
      --accent2:#A78BFA;
      --ok:#34D399;
      --warn:#FBBF24;
    }



       .mini-link a {
         color:#CC0201 !important;
         }
       .main-get-demo-section{
        background: radial-gradient(900px 520px at 64% 28%, rgba(238, 42, 70, .16), hsla(0, 0%, 100%, 0) 60%), radial-gradient(820px 520px at 92% 42%, rgba(238, 42, 70, .1), hsla(0, 0%, 100%, 0) 64%), radial-gradient(900px 620px at 20% 8%, rgba(238, 42, 70, .08), hsla(0, 0%, 100%, 0) 60%), #fff;
        height: 100%;
        width: 100%;
       }



      .main-get-demo-section .get-bg-section{
        max-width:1200px;
        margin:0 auto;
       }

    /* Topbar */
    .main-get-demo-section .topbar{
      padding:18px 0;
      position:sticky; top:0; z-index:20;
      background: linear-gradient(180deg, rgba(7,10,18,.92), rgba(7,10,18,.55));
      backdrop-filter: blur(10px);
      border-bottom:1px solid rgba(255,255,255,.06);
    }
  .main-get-demo-section  .topbar-inner{display:flex; align-items:center; justify-content:space-between; gap:14px}
   .main-get-demo-section .brand{display:flex; align-items:center; gap:12px; font-weight:850; letter-spacing:.2px}
   .main-get-demo-section .logo{
      width:36px; height:36px; border-radius:12px;
      background:
        radial-gradient(circle at 30% 30%, rgba(110,231,255,.9), rgba(110,231,255,.05) 55%),
        radial-gradient(circle at 70% 70%, rgba(167,139,250,.9), rgba(167,139,250,.05) 55%),
        linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
      border:1px solid rgba(255,255,255,.14);
      box-shadow:0 10px 25px rgba(0,0,0,.25);
    }
   .main-get-demo-section .nav{display:flex; gap:16px; align-items:center; color:var(--muted)}
   .main-get-demo-section .nav a{padding:8px 10px; border-radius:10px}
   .main-get-demo-section .nav a:hover{background:rgba(255,255,255,.06); color:var(--text)}
   .main-get-demo-section .cta-mini{
      padding:10px 14px; border-radius:12px;
      border:1px solid rgba(110,231,255,.35);
      background:rgba(110,231,255,.10);
      color:var(--text);
      font-weight:800;
    }
   .main-get-demo-section .cta-mini:hover{background:rgba(110,231,255,.16)}

    /* Hero */
   .main-get-demo-section .hero{padding:34px 0 14px}
  .main-get-demo-section  .pill-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px}
  .main-get-demo-section  .pill{
      display:inline-flex; align-items:center; gap:8px;
      padding:8px 10px; border-radius:999px;
      background: rgba(255, 0, 0, .05);
      border: 1px solid rgba(51, 0, 0, .1);
      color:var(--muted);
      font-size:13px;
    }
   .main-get-demo-section .dot{
      width:8px;
      height:8px; 
      border-radius:999px;
      background:#cc0201;
/*       box-shadow:0 0 0 4px #cc020129; */
    }

  .main-get-demo-section .hero h1{
      margin:0 0 10px;
      font-size: clamp(30px, 4.1vw, 48px);
      letter-spacing:-0.7px;
      line-height:1.08;
    }
   .main-get-demo-section .sub{
      margin:0 0 10px;
      color:var(--muted);
      font-size: clamp(14px, 1.5vw, 16px);
    }
  .main-get-demo-section  .hero-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
  .main-get-demo-section  .btn{
      display:inline-flex; align-items:center; justify-content:center; gap:10px;
      padding:12px 14px;
      border-radius:14px;
      font-weight:700;
      background: hsl(0.29deg 100% 40% / 9%);
      border: 1px solid hsl(0.29deg 100% 40% / 27%);
      cursor:pointer;
      transition: transform .15s ease, background .15s ease, border-color .15s ease;
    }
 
  

  .main-get-demo-section  .btn-primary{
      border-color: #CC0201;
      background: #CC0201;
/*       box-shadow: 0 14px 40px rgba(0,0,0,.25); */
      color:#fff;
    }

   .main-get-demo-section .btn-primary:hover{
     opacity:.8;
    }

   .main-get-demo-section .btn-ghost{color:var(--muted)}

   .main-get-demo-section .btn-ghost:hover{color:#CC0201}

   .main-get-demo-section .hint{margin:10px 0 0; color:var(--muted2); font-size:13px}
   .main-get-demo-section .hint a{color:#CC0201 }
    /* Main grid */
   .main-get-demo-section .main{padding: 10px 0 22px}
   .main-get-demo-section .grid{
      display:grid;
      grid-template-columns: 1.05fr .95fr;
      gap:18px;
      align-items:stretch;
    }

    /* Cards */
   .main-get-demo-section .card{
      border-radius:22px;
      overflow:hidden;
      position:relative;
      border: 1px solid #fdbcc0;
      border-radius: 20px;
      box-shadow: 0 8px 23px rgba(224, 0, 19, .15);
      background-color:#fff;
    }
   .main-get-demo-section .card::before{
/*       content:"";
      position:absolute; inset:-1px;
      background:
        radial-gradient(650px 230px at 20% 0%, rgba(110,231,255,.14), transparent 55%),
        radial-gradient(600px 260px at 85% 20%, rgba(167,139,250,.12), transparent 60%);
      pointer-events:none;
      opacity:.9; */
    }
   .main-get-demo-section .card-inner{position:relative; padding:18px}
   .main-get-demo-section .card h2{margin:0 0 8px; font-size:18px}
   .main-get-demo-section .card h3{margin:0 0 8px;font-size:18px}
   .main-get-demo-section .muted{color:var(--muted)}
   .main-get-demo-section .small{font-size:13px; color:var(--muted2);padding-bottom:0; margin-bottom: 10px;line-height:1.7}
   .main-get-demo-section .hr{height:1px; hsl(0.29deg 100% 40% / 16%); margin:14px 0}

    /* Form */
   .main-get-demo-section .form{display:flex; flex-direction:column; gap:12px; margin-top:10px}
   .main-get-demo-section .row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
    label{display:block; font-size:13px; color:var(--muted); margin:0 0 7px}
   .main-get-demo-section .field{
      width:100%;
      padding:12px 12px;
      border-radius: var(--r14);
      border:1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.04);
      color: var(--text);
      outline:none;
      appearance:none;
    }
   .main-get-demo-section select.field{
      background-image:
        linear-gradient(45deg, transparent 50%, rgba(234,240,255,.75) 50%),
        linear-gradient(135deg, rgba(234,240,255,.75) 50%, transparent 50%),
        linear-gradient(to right, rgba(255,255,255,.10), rgba(255,255,255,.10));
      background-position:
        calc(100% - 18px) calc(1em + 2px),
        calc(100% - 13px) calc(1em + 2px),
        calc(100% - 2.6em) 0.75em;
      background-size: 5px 5px, 5px 5px, 1px 1.6em;
      background-repeat: no-repeat;
      padding-right: 42px;
    }
  .main-get-demo-section  .field:focus{
      border-color: rgba(110,231,255,.45);
      box-shadow: 0 0 0 4px rgba(110,231,255,.10);
    }
  .main-get-demo-section  textarea.field{min-height:110px; resize:vertical}

   .main-get-demo-section .btn-submit{
      width:100%;
      padding:13px 14px;
      border-radius: 14px;
      border:1px solid rgba(110,231,255,.45);
      background: linear-gradient(135deg, rgba(110,231,255,.24), rgba(167,139,250,.18));
      font-weight:900;
      cursor:pointer;
      transition: transform .15s ease, filter .15s ease;
    }
  .main-get-demo-section  .btn-submit:hover{transform: translateY(-1px); filter: brightness(1.06)}
   .main-get-demo-section .disclaimer{margin:0; font-size:12px; color:var(--muted2)}

    /* Right column blocks */
   .main-get-demo-section .kpi{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap:12px;
      margin-top: 12px;
    }
  .main-get-demo-section  .kpi .box{
   background: rgb(204 1 0 / 2%);
    border: 1px solid rgba(204, 1, 0, .19);
    border-radius: 18px;
    padding: 12px;
    }
   .main-get-demo-section .kpi .n{font-weight:950; letter-spacing:-.2px; margin:0 0 4px}
   .main-get-demo-section .kpi .t{margin:0; color:var(--muted); font-size:13px}
   .main-get-demo-section ul.clean{margin:0; padding-left:18px; color:var(--muted)}

   .main-get-demo-section .callout{
/*       margin-top: 14px; */
      padding:14px;
      border-radius: var(--r22);
      border:1px dashed rgba(255,255,255,.16);
      background: rgba(255,255,255,.03);
    }
   .main-get-demo-section .callout h3{margin:0 0 8px; font-size:16px}
   .main-get-demo-section .callout ul{margin:10px 0 0; padding-left:18px; color: var(--muted);font-size: 14px;line-height: 1.7;}
  
  .main-get-demo-section .badge{
      display:inline-flex;
     align-items:center;
      gap:8px;
      padding:7px 10px;
      border-radius:999px;
      background: rgba(255, 0, 0, .05);
      border: 1px solid rgba(51, 0, 0, .1);
      color: var(--muted);
      font-size: 12px;
      margin-top: 10px;
    }
   .main-get-demo-section .badge .b{
      width:8px;
      height:8px;
      border-radius:999px; 
      background:#cc0201;
      box-shadow:0 0 0 4px #cc020129;
    }

    /* Agenda list */
   .main-get-demo-section .agenda{display:grid; gap:10px; margin-top:12px}
   .main-get-demo-section .agenda .item{
    align-items: flex-start;
    background: rgb(204 1 0 / 4%);
    border: 1px solid rgba(204, 1, 0, .19);
    border-radius: 18px;
    display: flex;
    gap: 10px;
    padding: 12px;
    }

   .main-get-demo-section .chip{
      width:26px;
      height:26px;
      border-radius: 10px;
      background: rgba(204, 1, 0, .19);
      border: 1px solid rgba(204, 1, 0, .19);
      display:flex; align-items:center;
      justify-content:center;
      color: #000;
      font-weight:900;
      flex:0 0 auto;
    }
   .main-get-demo-section .agenda .tt{margin:0; font-weight:900}
   .main-get-demo-section .agenda .dd{margin:4px 0 0; color:var(--muted); font-size:13px}

    /* FAQ */
  .main-get-demo-section .faq{
    margin-top: 14px; 
    border:1px solid rgba(204,1,0,.18);
    border-radius: 22px; 
    overflow:hidden
 }
   
  .main-get-demo-section details{
    background: rgba(255,255,255,.03);
    border-top:1px solid hsl(0.29deg 100% 40% / 18%);
  }
  
/*    .main-get-demo-section details:first-child{border-top:none} */
   
   .main-get-demo-section  summary{
      list-style:none;
      cursor:pointer;
      padding: 14px 14px;
      display:flex; align-items:center; justify-content:space-between; gap:10px;
      font-weight:900;
/*      border-top: 1px solid hsl(0.29deg 100% 40% / 18%); */
    }

  .main-get-demo-section summary:focus {
    outline: none !important;
    box-shadow: none !important;
    border-bottom: 0 !important;
   }

   .main-get-demo-section summary::-webkit-details-marker{display:none}
   .main-get-demo-section .chev{
      width:28px;
     height:28px; 
     border-radius: 10px;
      background:#CC0201;
      border:1px solid #CC0201;
      display:flex;
     align-items:center; 
     justify-content:center;
      color:#fff;
      flex: 0 0 auto;
    }
  .main-get-demo-section  details[open] summary .chev{color: var(--text)}
  .main-get-demo-section  .ans{padding: 0 14px 14px; color: var(--muted); font-size: 13px}

    /* Footer */
   .main-get-demo-section .footer{
      padding: 22px 0 38px;
      border-top: 1px solid rgba(255,255,255,.08);
      color: var(--muted2);
      font-size: 13px;
    }
   .main-get-demo-section .footer a{color: var(--muted); text-decoration:underline; text-underline-offset:3px}
   .main-get-demo-section .footer a:hover{color: var(--text)}

    /* Responsive */
    @media (max-width: 980px){
      .nav{display:none}
      .grid{grid-template-columns:1fr}
      .row{grid-template-columns:1fr}
      .kpi{grid-template-columns:1fr}
    }

@media (max-width: 767px){
  .main-get-demo-section .grid{
   grid-template-columns: 1fr !important;
  }
 
  .main-get-demo-section .callout {
    padding: 0;
   }
   .kpi {
        grid-template-columns: 1fr !important;
    }
  
  .main-get-demo-section .get-bg-section {
    padding: 0 15px;
}
}

.right-fill{ display:flex; flex-direction:column; gap:12px; }

.mini-card{
  border: 1px solid rgba(204,2,1,0.18);
  background: rgba(204,2,1,0.04);
  border-radius: 14px;
  padding: 14px 14px;
}

.mini-card h3{ margin:0 0 10px; font-size: 15px; }

.steps{ display:flex; flex-direction:column; gap:8px; }
.step{ display:flex; gap:10px; align-items:flex-start; font-size: 13px; }
.step .num{
  width:22px; height:22px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background:#CC0201; color:#fff; font-weight:700; font-size:12px;
  flex:0 0 22px;
}

.ticks{ margin:0; padding-left:18px; }
.ticks li{ margin:6px 0; font-size:13px; }

.micro{ margin:10px 0 0; font-size:12px; }

.link-row{ display:flex; flex-wrap:wrap; gap:8px; }
.mini-link{
  display:inline-flex; padding:8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(204,2,1,0.22);
  background: #fff;
  font-size: 12px;
  text-decoration: none;
  color:#CC0201 !important
}

 
.micro a{color:#CC0201 !important}
.mini-link:hover{ text-decoration: underline; }
#demo-form {
  scroll-margin-top: 100px;
}