@charset "utf-8";
/* CSS Document */

html {
  scroll-behavior: smooth;
}

.square-container {
  list-style-type: none;
  display: flex;
  position: relative;
}

.square {
  margin: 4px;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  animation: rotating 2s ease infinite;
}

.square1 {
  background: #736EFE;
  animation-delay: 0.2s;
}

.square2 {
  background: #5999FF;
  animation-delay: 0.4s;
}

.square3 {
  background: #44B9FF;
  animation-delay: 0.6s;
}

.square4 {
  background: #31D8FF;
  animation-delay: 0.8s;
}

.square5 {
  background: #18FFFF;
  animation-delay: 1s;
}

@keyframes rotating {
  0% {
    transform: rotate(0) scale(1);
  }
  50% {
    transform: rotate(90deg) scale(0.6);
  }
  100% {
    transform: rotate(90deg) scale(1);
  }
}






.aaa {
    margin-bottom: 30px;
}

img#company-brand-logo {
    height: 50px;
}

.RightHeader {
    margin-bottom: 50px !important;
}

input, select {
    width: 60% !important;
}

        :root{
            --bg:#0b0b10; --card:#12121a; --muted:#9aa3b2; --text:#e6e9ee;
            --primary:#7c5cff; --primary-2:#3fb6ff; --accent:#00d4a7; --warning:#ffd166;
            --ring:rgba(124,92,255,.35);
        }
        *{box-sizing:border-box}
        html,body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,Segoe UI,Roboto,Arial,Apple Color Emoji,Segoe UI Emoji;line-height:1.5}
        a{color:inherit;text-decoration:none}
        img{max-width:100%;display:block}
        .container{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}
        .btn{display:inline-block;padding:12px;border-radius:12px;font-weight:600;border:1px solid transparent}
        .btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-2));color:white;box-shadow:0 8px 24px rgba(124,92,255,.35)}
        .btn-ghost{background:transparent;border-color:#2b2f3a;color:var(--text)}
        .btn:hover{transform:translateY(-1px)}
        header{position:sticky;top:0;background:linear-gradient(to bottom,var(--bg),rgba(11,11,16,.75));backdrop-filter:saturate(140%) blur(6px);border-bottom:1px solid #161823;z-index:10}
        .nav{display:flex;align-items:center;justify-content:space-between;padding:16px 0}
        .brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.2px}
        .dot{width:12px;height:12px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--accent))}
        .hero{position:relative;overflow:hidden}
        .hero .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center;padding:72px 0}
        .headline{font-size:46px;line-height:1.1;margin:0 0 12px 0;letter-spacing:-.02em}
        .headline strong{background:linear-gradient(135deg,var(--primary),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
        .sub{color:var(--muted);max-width:720px;margin-bottom:22px}
        .badges{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px}
        .badge{border:1px solid #202334;background:#12131c;padding:6px 10px;border-radius:999px;font-size:12px;color:#c7cddd}
        .glass{
            background:radial-gradient(1200px 600px at -10% -10%,rgba(124,92,255,.25),transparent 60%),
                       radial-gradient(900px 500px at 120% 20%,rgba(63,182,255,.25),transparent 60%),
                       radial-gradient(1000px 500px at 60% 120%,rgba(0,212,167,.18),transparent 60%);
        }
        .card{background:var(--card);border:1px solid #1b1f2b;border-radius:18px;padding:18px}
        .shadow{box-shadow:0 12px 30px rgba(0,0,0,.35)}
        .form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
        label{font-size:12px;color:#c7cddd}
        input,select{width:100%;padding:12px 12px;background:#0f1017;border:1px solid #232733;border-radius:12px;color:var(--text);outline:none}
        input:focus,select:focus{border-color:var(--primary);box-shadow:0 0 0 6px var(--ring)}
        .steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:36px}
        .step h4{margin:10px 0 6px 0}
        .pill{display:inline-block;padding:6px 10px;border-radius:999px;background:#0f1017;border:1px solid #232733;font-size:12px;color:#c7cddd}
        .section{padding:64px 0}
        .features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
        .feature h3{margin:10px 0 6px 0}
        .industries{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
        .industry{padding:16px;border-radius:14px;background:#0f1017;border:1px solid #232733}
        .check{color:#00d4a7;margin-right:6px}
        .pricing{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
        .price .title{font-weight:700}
        .faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
        details{background:#0f1017;border:1px solid #232733;border-radius:12px;padding:12px}
        summary{cursor:pointer;font-weight:600}
        footer{padding:32px 0;border-top:1px solid #161823;color:#99a3b3}
        @media (max-width: 980px){
            .hero .grid{grid-template-columns:1fr;padding:40px 0}
            .features{grid-template-columns:1fr}
            .industries{grid-template-columns:1fr 1fr}
            .pricing{grid-template-columns:1fr}
            .steps{grid-template-columns:1fr}
            .faq{grid-template-columns:1fr}
            .form-row{grid-template-columns:1fr}
            .headline{font-size:36px}
        }



a.WOD_Logout.WOD_Profile {
    margin-right: 10px;
}


















  /* ---- Theme tokens (tweak here) ---- */
  :root{

    --btn-bg: #1e2230;
    --btn-hover: #262b3c;
    --btn-active: #1a1e2a;
    --shadow: 0 6px 20px rgba(0,0,0,.35);
    --radius-xl: 18px;
    --radius: 14px;
    --gap: 16px;
  }
  @media (prefers-color-scheme: light){
    :root{

      --btn-bg:#ffffff;
      --btn-hover:#f3f5f9;
      --btn-active:#e9ecf3;
      --shadow: 0 10px 30px rgba(16,24,40,.12);
    }
  }







  /* ---- Panel ---- */
  .panel{
    width:min(680px, 100%);
    background: linear-gradient(180deg, color-mix(in oklab, var(--panel), white 2%), var(--panel));
    border:1px solid var(--stroke);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
    padding: 28px;    
  }

  .hdr{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin-bottom: 18px;
  }
  .hdr h1{
    margin:0;
    font-size: clamp(20px, 3.2vw, 26px);
    letter-spacing:.3px;
  }
  .hdr small{
    color:var(--muted);
    display:block;
    margin-top:6px;
    font-size:.95rem;
  }

  /* ---- Plans ---- */
  .plans{
    display:grid;
    gap: var(--gap);
    grid-template-columns: 1fr;
  }
  @media (min-width:640px){
    .plans{ grid-template-columns: 1fr; } /* single column keeps focus & scan easy */
  }

  /* Button-as-card keeps existing click handlers intact.
     If your original markup used <a> tags, you can safely swap <button> for <a>
     while keeping classes and data attributes. */
  .plan{
    appearance:none;
    border:1px solid var(--stroke);
    background: var(--btn-bg);
    color:inherit;
    border-radius: var(--radius);
    padding:18px 18px;
    text-align:left;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    cursor:pointer;
    transition: transform .08s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
    box-shadow: 0 2px 0 rgba(0,0,0,.05) inset;
    width:100%;
    color:#000;
  }
  .plan:hover{ background: var(--btn-hover); border-color: color-mix(in oklab, var(--stroke), white 14%); }
  .plan:active{ background: var(--btn-active); transform: translateY(1px); }
  .plan:focus-visible{
    outline: 3px solid color-mix(in oklab, var(--brand), white 18%);
    outline-offset: 2px;
  }

  .plan__info{ display:flex; flex-direction:column; gap:6px; }
  .plan__name{
    font-weight:700;
    font-size:1.05rem;
    letter-spacing:.2px;
  }
  .plan__meta{    
    font-size:.95rem;
  }
  .plan__price{
    font-weight:800;
    font-size:1.05rem;
    white-space:nowrap;
    padding:8px 12px;
    border-radius: 999px;
    border:1px solid #cacaca;
    background: linear-gradient(180deg, color-mix(in oklab, var(--panel), white 6%), var(--panel));
  }

  /* Featured (optional): visually emphasize the middle “Pro” plan */
  .plan.is-featured{
    border-color: color-mix(in oklab, var(--brand), var(--stroke) 65%);
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--brand), var(--stroke) 65%) inset, var(--shadow);
    background:
      linear-gradient(180deg, color-mix(in oklab, var(--btn-bg), white 6%), var(--btn-bg));
  }
  .badgeB{
    font-size:.75rem;
    font-weight:700;
    color: var(--brand);
    background: color-mix(in oklab, #0b00ff, transparent 85%);
    border:1px solid color-mix(in oklab, #0b00ff, transparent 50%);
    padding:4px 8px;
    border-radius:999px;
    margin-left:auto;
  }

  /* Tiny footer note */
  .fineprint{
    margin-top:14px;
    color:var(--muted);
    font-size:.9rem;
    text-align:center;
  }