/* Hardward Compatibility Table */
#hardware table {
    table-layout: fixed;
    overflow-x: auto;
}
#hardware table>:not(:first-child) {
    border-top: 1.5px solid gray;
}
#hardware td {
    max-width: 50px;
}
#hardware td i{
    font-size: 24px;
}
#hardware tr{
    text-align: center
}
#hardware .device{
    text-align:right;
    min-width: 140px;
    max-width: 240px;
}
.yes {
    color: green;
}
.no {
    color: #cd5c5c;
}


.competition-logos{
    text-align:center;
}
.competition-logos img{
    margin: .5em;
    width: 150px;
}

/* Testimonials */

.testimonials-card {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 26px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    height: 100%;
}

.testimonial-image {
    border-radius: 100%;
    width: 5em;
    height: 5em;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #eee;
    margin-bottom: 1em;
    justify-content: center;
    display: flex;
}
.testimonial-image img {
    height: 100%;
}

.testimonials-card .outlet img {
    max-width: 10em;
    min-width: 3em;
}

.testimonials-card hr {
    border: 1px solid #ccc;
    margin: 1.25em 0;
}

.testimonials-card .quote {
    font-family: Satoshi-Regular;
    font-size: 16px;
    font-style: italic;
}

.testimonials-card .author {
    font-family: Satoshi-Bold;
    margin-bottom: 0;
    font-size: 15px;
}

.testimonials-card .role {
    font-size: 14px;
    color: #777;
}

/* Solutions  */

.decoder {
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
    background: linear-gradient(45deg, white, transparent);
    border-radius: 2em;
    padding: 2em;
    margin-bottom: 2em;
}

.decoder .description {
    transition: 0.5s;
}

.decoder-demo {
    transition: 0.5s;
}


/* Patents List */

.patent-card {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: 0.5s;
    margin-bottom: 2em;
  }

  .patent-card:hover {
    margin-top: -.5em;
    margin-bottom: 2.5em;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
  }

  .patent-card h3 {
    font-size: 1.2rem;
    color: #222;
    margin-bottom: 10px;
  }

  .patent-card p {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 15px;
  }

  .issuing-offices ul {
    list-style-type: disc;
    padding-left: 20px;
    margin: 0;
  }

  .issuing-offices li {
    font-size: 0.9rem;
    color: #555;
    margin-bottom: 5px;
  }

  .issuing-offices li span {
    font-weight: bold;
  }

.patent-card .label {
  border-radius: 3px;
  color: white;
  font-size: .7rem;
  padding: .2rem;
}

.pending {
    background-color: gray;
}

.granted {
    background-color: green;
}

.patent-card a:hover{
    color: #5684bd
}

/* Publications List */

.tab {
    margin-top: 1em;
    text-align: center;
}

.tabcontent {
    margin-top: 0;
}

.tablinks {
    background-color: #dddee0;
    border-radius: 100px;
    border: solid 2px #dddee0;
    padding: 0.2em .7em 0.2em .7em;
}

.tablinks:hover {
    background-color: #b3b3b3;
    transition: .5s;
}

button.tablinks.active{
    border: solid 2px gray;
}

#publications a {
    color: #5684bd;
    font-family: Satoshi-Bold;
    text-decoration: none;
}

#publications a:hover {
    text-decoration: underline;
}

.subtitle {
    font-family: Satoshi-Light;
    text-align: center;
    margin-top: 0;
}
#publications ul {
    list-style-type: none;
    padding-left: 0;
    padding-right: 0;
}
#publications li {
    padding: 1em;
    transition: 0.5s;
    border-radius: 5px;
    margin-top: 1em;
    border-bottom: 1px solid #ccc;
}

#publications li:hover {
    margin-left: 1em;
    margin-right: -1em;
}

/* Demo Video  */

#vid-container {
    max-height: 40em;
    overflow: hidden;
    display: flex;
    transition: all 0.5s;
}

#demoVideo {
    right: 0;
    bottom: 0;
    max-height: 40em;
    max-width: 100%;
    margin: auto;
  }
  
  .content {
    position: relative;
    margin-top: -180px;
    z-index: 100;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    color: #f1f1f1;
    width: 100%;
    padding: 20px;
    transition: all 0.5s;
  }
  
#vid-content-lg {
    display:block;
}

.vid-button {
    margin: 0 1em;
    display: inline-block;
    text-decoration: none;
    text-align: center;
    font-size: 18px;
    padding: 10px;
    border: none;
    color: black;
    cursor: pointer;
    vertical-align: middle;
    height: 47px;
}

.vid-button:hover {
    background-color: #ddd;
  }

.vid-button.play {
    width: 200px;
    background: #ff66c4;
}

.vid-button.play:hover{
    background: #e059ac;
}

.vid-button.cc {
    color: white;
    background-color: transparent;
    border: 1px solid white;
    width: 50px;
}

.vid-button.cc:hover {
    background-color: rgb(60,60,60);
}

.vid-button.cc.active {
    color: black;
    background-color: white;
    border: none;
}
.vid-button.cc.active:hover {
    background-color: rgb(220,220,220);
}

.vid-button.mute {
    font-size: 32px;
    width: 50px;
    padding: 0;
}

.desc {
    font-size: 1.2em;
    font-family: Satoshi-Light;
}

.align-text-center {
    text-align: center;
}

.cog-btn-light {
    text-decoration: none;
    padding: 0.5em 1em;
    border-radius: 5px;
    font-size: 1.2em;
    border: 2px solid gray;
    transition: 0.3s;
  }
  .cog-btn-light:hover {
    text-decoration: none;
    padding: 0.5em 1em;
    border-radius: 5px;
    font-size: 1.2em;
    border: 3px solid gray;
    color: black;
    background-color:#e1e1e1;
  }

.cog-btn-dark {
    text-decoration: none;
    padding: 0.5em 1em;
    border-radius: 5px;
    font-size: 1.2em;
    border: 2px solid white;
    transition: 0.3s;
}
.cog-btn-dark:hover {
    text-decoration: none;
    padding: 0.5em 1em;
    border-radius: 5px;
    font-size: 1.2em;
    color: white;
    background-color: rgba(255,255,255,.1);
}
  
.cog-mini-section {
text-align: center; 
padding-top:2em; 
margin-bottom:5em;
}  

/* Navbar */

.socials {
    display: inline-block;
    height: 1.5em;
}

.socials a {
    display:inline-block;
    padding-left: 0.2rem !important ;
    padding-right: 0.2rem !important;
}

.socials img {
    height: 1.5em;
}

.socials p {
    display: inline;
    padding-right: .5em;
    padding-left: .6em;
}

.nav-link.px-2 {
    font-family: Satoshi-Black, serif;
    color: #727272;
}

nav {
    background: white;
}

.show.nav-item.dropdown a:hover{
    color: rgba(0,0,0,0.7);
}

#waves {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    max-height: 3500px;
}

#content {
    position: relative;
}

h1 {
    font-family: Satoshi-Black, serif;
}

.soft {
    font-family: Satoshi-Light, serif;

}

.lead {
    font-family: Satoshi-Light, serif;
}

.badge {
    font-family: Satoshi-Black, serif;
    font-size: 1.25rem;
}

.badge h4{
    font-family: Satoshi-Regular;
    color: #1d1d1b;
}

body {
    background: #F2F2F2;
    font-family: Satoshi-Medium, serif;
    overflow-x: hidden;
}

header {
    margin-bottom: 8em;
}

.anchor {
    scroll-margin-top: 83px; 
}

.rounded-pill {
    padding: 0.7em 1.3em;
    margin-left: -0.7em
}

.subwinner {
    font-family: Satoshi-Italic, Satoshi-Medium, serif;
    font-size: 1rem;
    padding-left: 1rem;
}

.dark {
    background: #1D1D1B;
    color: white;
}

.light {
    background: #F2F2F2;
    color: black;
}

.hardware {
    font-family: Satoshi-Medium, serif;
    font-size: 1.5rem;
}

h2 {
    font-family: Satoshi-Medium, serif;
    font-size: 1.5rem;
}

.italics {
    font-family: Satoshi-Italic, Satoshi-Medium, serif;
}

.team-photo {
    border-radius: 100%;
    margin-bottom: 20px;
    margin-top: 20px;
    object-fit: cover;
    width: 180px;
    height: 180px;
    background-color: white;

}


footer {
    font-family: Satoshi-Light, serif;
}

footer a:hover {
    color: #56c4f1
}

#footer a:hover {
    color: #56c4f1;
}

a {
    color: inherit;
}

#waves {
    position: absolute;
    top: -850px;
    right: -15%;
    z-index: -11;
}

.badge img {
    width: 100%;
    min-width: 75px;
    max-width: 200px;
}

@media only screen and (max-width: 991px) {

    #waves {
        display:none;
    }

}

@media only screen and (min-width: 991px) and (max-width: 1400px) {

#waves {
    right: -55vw;
}

}
@media only screen and (min-width: 1400px) and (max-width: 1830px) {

#waves {
    right: -30vw;
}

}

.round-image {
    border-radius: 100%;
    object-fit: cover;
    width: 100%;
}

#waves_m {
    min-height: 500px;
    width: 100%;
    background-image: url(../images/qwaves.png);
    background-size: contain;
    margin-top: -200px;
    background-position-x: right;
    background-repeat: no-repeat;
}

header {
    z-index: 10;
}

.feature-icon > img {
    height: 120px;
}

@media only screen and (max-width: 768px) {

    #vid-content-lg{
        display:none;

    }

    #as-seen a {
        font-size: 1em;
    }

    #hardware table {
        display: block;
    }

}

@media only screen and (min-width: 1040px) {

    .feature-title {
        min-height: 5rem;
        margin-top: 3rem;
    }
    .feature-icon{
        text-align: left;
    }

    .decoder .description {
        padding-left: 1rem;
        padding-right: 1rem;
    }

}

#waves_vid{
    z-index: -1;
    position: absolute;
    right: 0;
    max-width: 50%;
}

video, video:focus { outline:none;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden; }
.video-wrapper {
    overflow: hidden;
    width: 160px;
    height:84px;
}
.video-wrapper video {
    left: -1px;
    top:-1px;
    position: relative;
    height:86px;
    width:162px;
    opacity:1;
    display: block;
}

.featured-title {
    text-align: center;
    font-family: 'Satoshi-Medium';
    font-size: 1.2em;
    color: #2e6ca4;
    margin-top: 4em;
    margin-bottom: 0;
}
.news-logo {
    padding:2%;
}
#all-news-logos img{
    width:100%;
}

@media only screen and (max-width: 576px) {

    .news-logo{
        display:none;

    }
}
    
@media only screen and (min-width: 576px) {

    #all-news-logos{
        display:none;

    }

}

.news-col {
    width: 200px;
    overflow: hidden;
}

/* NeuroRVQ */

.nrvq-hero .lead {
    font-size: 1.35rem;
    max-width: 46rem;
    margin: 1.5em auto 0 auto;
}

.nrvq-eyebrow {
    font-family: Satoshi-Bold, serif;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .85rem;
    color: #5684bd;
    margin-bottom: .75em;
}

.nrvq-stat {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 28px 24px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    height: 100%;
    text-align: center;
    transition: 0.5s;
}

.nrvq-stat:hover {
    transform: translateY(-.5em);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

.nrvq-stat .value {
    font-family: Satoshi-Black, serif;
    font-size: 2.6rem;
    line-height: 1.1;
    color: #1d1d1b;
    margin-bottom: .35em;
}

.nrvq-stat .label {
    font-size: 1rem;
    color: #555;
    margin-bottom: .5em;
}

.nrvq-stat .source {
    font-family: Satoshi-Light, serif;
    font-size: .85rem;
    color: #777;
    margin-bottom: 0;
}

.nrvq-source a,
.nrvq-stat .source a {
    color: #5684bd;
    font-family: Satoshi-Bold, serif;
    text-decoration: none;
}

.nrvq-source a:hover,
.nrvq-stat .source a:hover {
    text-decoration: underline;
}

.nrvq-prose {
    max-width: 46rem;
    margin: 0 auto;
    font-size: 1.1rem;
    padding-bottom: 1em;
}

.nrvq-prose p {
    margin-bottom: 1.25em;
}

.nrvq-prose .emphasis {
    font-family: Satoshi-Bold, serif;
}

.nrvq-step-number {
    font-family: Satoshi-Black, serif;
    font-size: 2.5rem;
    color: #56c4f1;
    line-height: 1;
    margin-bottom: .5em;
}

.nrvq-step h2 {
    font-family: Satoshi-Bold, serif;
    font-size: 1.3rem;
    margin-bottom: .75em;
}

.nrvq-result {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 26px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    height: 100%;
}

.nrvq-result h3 {
    font-size: 1.2rem;
    font-family: Satoshi-Bold, serif;
    color: #222;
    margin-bottom: 12px;
}

.nrvq-result p {
    color: #555;
    margin-bottom: 0;
}

.nrvq-result .metric {
    font-family: Satoshi-Black, serif;
    font-size: 2rem;
    color: #1d1d1b;
    line-height: 1.1;
    margin-bottom: .4em;
}

.nrvq-multipliers {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: 1em;
}

.nrvq-multipliers div {
    text-align: center;
    flex: 1;
}

.nrvq-multipliers .metric {
    margin-bottom: 0;
}

.nrvq-multipliers span {
    font-family: Satoshi-Bold, serif;
    font-size: .8rem;
    letter-spacing: .08em;
    color: #777;
}

/* NeuroRVQ: scroll-linked fades into and out of the dark section.
   These are the static starting gradients (also used if JavaScript is off or
   the visitor prefers reduced motion). The script at the bottom of
   neurorvq.html rewrites each band's background as you scroll, so the
   light/dark boundary rises faster than the page. The band's top and bottom
   edges always match the neighbouring sections, so there is never a seam. */

.nrvq-fade {
    position: relative;
    height: clamp(10rem, 40vh, 26rem);
    overflow: hidden;
}

.nrvq-fade-to-dark {
    background: linear-gradient(180deg,
        #F2F2F2 25%, #D1D1D0 37.5%, #878786 50%, #3E3E3C 62.5%, #1D1D1B 75%);
}

.nrvq-fade-to-light {
    background: linear-gradient(180deg,
        #1D1D1B 25%, #3E3E3C 37.5%, #878786 50%, #D1D1D0 62.5%, #F2F2F2 75%);
}

/* NeuroRVQ: "From benchmark to clinic" case study */

.nrvq-cs-title {
    font-family: Satoshi-Black, serif;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.1;
    margin-bottom: .6em;
}

.nrvq-cs-lead {
    font-family: Satoshi-Light, serif;
    font-size: 1.25rem;
    line-height: 1.7;
}

.nrvq-cs-chip {
    display: inline-block;
    font-family: Satoshi-Bold, serif;
    font-size: .95rem;
    line-height: 1.5;
    padding: 0 .7em;
    border-radius: 999px;
    background: #56C4F1;
    color: #fff;
}

.nrvq-cs-body {
    color: #444;
}

/* the dark "monitor" panel with the EEG chart */
.nrvq-cs-monitor {
    position: relative;
    margin: 0;
    border-radius: 2em;
    overflow: hidden;
    background: #1D1D1B;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

.nrvq-cs-monitor img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 11;
    object-fit: cover;
}

.nrvq-cs-monitor::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to top, rgba(29, 29, 27, 0.92) 0, rgba(29, 29, 27, 0.5) 25%, rgba(29, 29, 27, 0) 50%);
}

.nrvq-cs-live {
    position: absolute;
    top: 1.25em;
    left: 1.5em;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .5em;
    padding: .35em .9em;
    border-radius: 999px;
    background: rgba(29, 29, 27, 0.75);
    color: #fff;
    font-family: Satoshi-Bold, serif;
    font-size: .75rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.nrvq-cs-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #D840C9;
    box-shadow: 0 0 0 0 rgba(216, 64, 201, 0.6);
    animation: nrvq-cs-pulse 2s infinite;
}

@keyframes nrvq-cs-pulse {
    0% { box-shadow: 0 0 0 0 rgba(216, 64, 201, 0.6); }
    70% { box-shadow: 0 0 0 8px rgba(216, 64, 201, 0); }
    100% { box-shadow: 0 0 0 0 rgba(216, 64, 201, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .nrvq-cs-dot { animation: none; }
}

.nrvq-cs-monitor figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1.4fr 1.4fr;
    gap: 1.25em;
    padding: 1.25em 1.5em 1.4em;
    color: #fff;
}

.nrvq-cs-monitor .k {
    display: block;
    font-family: Satoshi-Bold, serif;
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #85A5F3;
    margin-bottom: .25em;
}

.nrvq-cs-monitor .v {
    display: block;
    font-size: .95rem;
    line-height: 1.35;
}

/* on small screens the facts sit below the image instead of over it */
@media (max-width: 575.98px) {
    .nrvq-cs-monitor::after { display: none; }
    .nrvq-cs-monitor figcaption {
        position: static;
        grid-template-columns: 1fr;
        gap: .9em;
    }
}

/* findings: open columns with a brand-gradient rule, not boxed cards */
.nrvq-cs-findings-title {
    font-family: Satoshi-Bold, serif;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .85rem;
    color: #5684bd;
    margin: 1em 0 0;
}

.nrvq-cs-finding {
    height: 100%;
    padding: .25em 0 .25em 1.25em;
    border-left: 2px solid #85A5F3;
    border-image: linear-gradient(to bottom, #56C4F1, #85A5F3, #D840C9) 1;
}

.nrvq-cs-icon {
    width: 36px;
    height: 36px;
    margin-bottom: .9em;
    fill: none;
    stroke: url(#nrvq-cs-grad);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nrvq-cs-finding h3 {
    font-family: Satoshi-Bold, serif;
    font-size: 1.15rem;
    margin-bottom: .4em;
}

.nrvq-cs-finding p {
    color: #555;
    margin-bottom: 0;
}

/* NeuroRVQ: abstract tokenizer illustration beside the problem text */
.nrvq-problem-art {
    display: block;
    width: 100%;
    height: auto;
    max-width: 640px;
    margin: 0 auto;
}

/* NeuroRVQ: colour for the headline stats.
   The three cards share one brand gradient that runs across the row
   (cyan -> blue -> periwinkle -> purple -> magenta), shown as each card's
   border and in the big numbers. */

.nrvq-stats .col-md-4:nth-child(1) .nrvq-stat { --nrvq-stat-grad: linear-gradient(90deg, #56C4F1, #5684BD); }
.nrvq-stats .col-md-4:nth-child(2) .nrvq-stat { --nrvq-stat-grad: linear-gradient(90deg, #5684BD, #85A5F3, #572C7C); }
.nrvq-stats .col-md-4:nth-child(3) .nrvq-stat { --nrvq-stat-grad: linear-gradient(90deg, #572C7C, #D840C9); }

/* Gradient border: the card itself is the gradient and a white panel sits
   2px inside it. (A transparent border over a clipped background leaves a
   hairline in some browsers, Safari especially.) */
.nrvq-stats .nrvq-stat {
    position: relative;
    isolation: isolate;
    border: 0;
    padding: 29px 25px;
    background: var(--nrvq-stat-grad);
    box-shadow: none;
}

.nrvq-stats .nrvq-stat::before {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 10px;
    background: #fff;
    z-index: 0;
}

.nrvq-stats .nrvq-stat > * {
    position: relative;
    z-index: 1;
}

/* soft glow around each card, in its own part of the gradient */
.nrvq-stats .nrvq-stat::after {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 14px;
    background: var(--nrvq-stat-grad);
    filter: blur(18px);
    opacity: 0.4;
    z-index: -1;
    transition: opacity 0.5s;
}

.nrvq-stats .nrvq-stat .value {
    background: var(--nrvq-stat-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #1d1d1b;   /* fallback where background-clip: text isn't supported */
}

.nrvq-stats .nrvq-stat:hover {
    box-shadow: none;
}

.nrvq-stats .nrvq-stat:hover::after {
    opacity: 0.75;
}

/* Home page: NeuroRVQ teaser (between "As seen on" and the features) */

.nrvq-teaser-title {
    font-family: Satoshi-Black, serif;
    font-size: clamp(2.2rem, 4.5vw, 3.2rem);
    margin-bottom: .5em;
}

.nrvq-teaser-stats {
    list-style: none;
    padding: 0;
    margin: 2em 0 2.25em;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25em;
}

.nrvq-teaser-stats li {
    padding-left: .9em;
    border-left: 2px solid #85A5F3;
    border-image: linear-gradient(to bottom, #56C4F1, #85A5F3, #D840C9) 1;
}

.nrvq-teaser-stats .value {
    display: block;
    font-family: Satoshi-Black, serif;
    font-size: 1.8rem;
    line-height: 1.1;
    background: linear-gradient(90deg, #56C4F1, #5684BD, #85A5F3, #572C7C, #D840C9);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #1d1d1b;   /* fallback where background-clip: text isn't supported */
}

/* each number picks up its own part of the brand gradient */
.nrvq-teaser-stats li:nth-child(1) .value { background-position: 0% 0; }
.nrvq-teaser-stats li:nth-child(2) .value { background-position: 50% 0; }
.nrvq-teaser-stats li:nth-child(3) .value { background-position: 100% 0; }

.nrvq-teaser-stats .label {
    display: block;
    font-size: .9rem;
    color: #555;
    margin-top: .35em;
    line-height: 1.35;
}

@media (max-width: 575.98px) {
    .nrvq-teaser-stats { grid-template-columns: 1fr; }
}