/* ==========================================================================
   KAYALOGY_BASE_CSS_V2 • NEURAL DESIGN SYSTEM v1 (Deep-Tech MedAI)
   ========================================================================== */

/* #region TOKENS (Neural Enterprise Design System) */
:root{
  /* Surfaces */
  --bg-0: #05070B;     /* deep ink */
  --bg-1: #0A0F16;     /* graphite */
  --bg-2: #111A24;     /* carbon */

  /* Panels / strokes */
  --card: rgba(255,255,255,.045);
  --card-2: rgba(255,255,255,.075);

  --stroke: rgba(199,205,214,.22);    /* platinum line */
  --stroke-2: rgba(154,164,178,.38);  /* brushed steel */

  /* Text */
  --text: #EEF2F6;        /* platinum white */
  --text-2: rgba(238,242,246,.78);
  --muted: rgba(238,242,246,.52);

  /* Metallic brand system */
  --brand: #C7CDD6;      /* platinum */
  --brand-2: #9AA4B2;    /* brushed steel */
  --teal: #4A7C82;       /* medical secondary */
  --danger: #E24A6A;

  /* Radii / Shadow */
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;

  --shadow-1: 0 14px 40px rgba(0,0,0,.55);
  --shadow-2: 0 30px 90px rgba(0,0,0,.75);

  /* Platinum glow (instead of blue neon) */
  --glow-1: 0 0 0 1px rgba(199,205,214,.22), 0 0 60px rgba(199,205,214,.14);

  /* Layout */
  --container: 1120px;
}
/* #endregion */


/* #region BASE (HTML / BODY / LAYOUT FIXES) */
html, body{ height:100%; }

html, body{
  background-color: var(--bg-0) !important; /* prevent white flashes */
}

body{
  margin:0;
  background: var(--bg-0) !important;       /* deep medical canvas */
  color: var(--text);
  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,sans-serif;
}

/* Never let Bootstrap/container layouts paint backgrounds */
main{ background: transparent !important; }

/* Containers */
.container{
  max-width: var(--container) !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
}

.k-container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 18px;
}
/* #endregion */


/* #region LIGHT MODE HELPERS (White Sections) */
.page-light{ color: #0F172A; }
.page-light .lead,
.page-light p{ color: rgba(15,23,42,.72); }

.page-light a{ color: #0B2C3A; }
.page-light a:hover{ color: #06202B; }
/* #endregion */


/* #region TYPOGRAPHY */
h1{
  font-size: clamp(2rem,4vw,3.2rem);
  line-height:1.05;
  letter-spacing:-.6px;
  margin: 12px 0 10px;
}
h2{
  font-size: clamp(1.35rem,2.4vw,2.05rem);
  letter-spacing:-.25px;
  margin: 0 0 10px;
}
.feature h5{
  margin-top: 26px;
  margin-bottom: 10px;
  letter-spacing: .02em;
  text-transform: none;
}
.lead{
  font-size: 1.08rem;
  line-height: 1.65;
  color: var(--text-2);
  max-width: 68ch;
}
/* #endregion */


/* #region PILLS */
.pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(76,201,240,.10);
  border: 1px solid rgba(122,231,255,.22);
  color: rgba(234,244,255,.86);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing:.2px;
}
/* #endregion */


/* #region NAVBAR (Glass + Brand + Menu) */
.navbar{
  background: linear-gradient(145deg, rgba(5,7,11,.88), rgba(10,15,22,.72) 55%, rgba(10,28,36,.72));
  border-bottom: 1px solid rgba(122,231,255,.22);
  box-shadow: 0 18px 70px rgba(0,0,0,.55);
}

@supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))){
  .navbar{
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}

/* Brand wrapper */
.navbar .navbar-brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
}

/* Logo */
.navbar .brand-logo{
  height: 64px;
  width: auto;
  max-height: 64px;
  object-fit: contain;
  display:block;
}
.navbar .brand-logo.is-padded{
  transform: scale(1.12);
  transform-origin: left center;
}

/* Brand text */
.navbar .brand-text{
  display:flex;
  flex-direction:column;
  line-height:1.05;
}
.navbar .brand-name{
  font-weight: 950;
  color: var(--text);
  letter-spacing: .4px;
}
.navbar .brand-tagline{
  display:block;
  font-size:.72rem;
  color: rgba(234,244,255,.58);
  margin-top: -2px;
}

/* Nav links */
.navbar .nav-link{
  display:inline-flex;
  align-items:center;
  padding:.55rem .9rem;
  border-radius:14px;
  font-weight:800;
  letter-spacing:.05em;
  text-decoration:none;
  color:rgba(234,244,255,.78) !important;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(160,220,255,.16);
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
}
.navbar .nav-link:hover{
  background: linear-gradient(
    135deg,
    rgba(255,255,255,.08),
    rgba(255,255,255,.02)
  ) !important;

  border-color: rgba(199,205,214,.40);
  box-shadow:
    0 12px 38px rgba(0,0,0,.65),
    0 0 0 1px rgba(199,205,214,.22);
}

/* =========================
   NAVBAR ACTIVE – METALLIC FDA STYLE
========================= */
.navbar .nav-link.active{
  color: #020617 !important;
  letter-spacing: .14em;
  text-transform: uppercase;

  background: linear-gradient(
    135deg,
    #F0F2F6 0%,
    #C7CDD6 45%,
    #9AA4B2 75%,
    #6B7280 100%
  ) !important;

  border: 1px solid rgba(199,205,214,.65) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    0 12px 36px rgba(0,0,0,.70),
    0 0 0 1px rgba(199,205,214,.35);
}

/* Navbar responsive */
@media (max-width: 992px){
  .navbar .brand-logo{ height: 48px; max-height: 48px; }
}
@media (max-width: 768px){
  .navbar .brand-logo{ height: 44px; max-height: 44px; }
  .navbar .brand-tagline{ display:none; }
  .navbar .nav-link{ width:100%; justify-content:center; }
}

/* #endregion */


/* #region BUTTONS (Neural + Bootstrap mapping) */
.btn-neural{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: .62rem 1.05rem;
  border-radius: 14px;
  font-weight: 900;
  letter-spacing:.2px;
  text-decoration:none;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  user-select:none;
}

.navbar .btn.btn-primary{
  background: linear-gradient(135deg,#F0F2F6,#C7CDD6,#9AA4B2,#6B7280) !important;
  color: #020617 !important;
  border: 1px solid rgba(199,205,214,.65) !important;
  box-shadow: 0 10px 34px rgba(0,0,0,.65);
}

.navbar .btn.btn-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 44px rgba(0,0,0,.85);
}


.btn-ghost-neural{
  color: rgba(234,244,255,.88);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(160,220,255,.22);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.btn-ghost-neural:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.08);
  border-color: rgba(160,220,255,.30);
}

/* Bootstrap mapping */
.btn.btn-primary{
  background: linear-gradient(135deg, var(--brand), var(--brand-2)) !important;
  color: #021018 !important;
  border: 1px solid rgba(122,231,255,.55) !important;
  border-radius: 14px !important;
  font-weight: 900 !important;
  box-shadow: 0 18px 55px rgba(76,201,240,.25) !important;
  transition: transform .15s ease, box-shadow .2s ease !important;
}
.btn.btn-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 22px 70px rgba(76,201,240,.32) !important;
}

.btn-outline-tech{
  border:1px solid rgba(160,220,255,.30) !important;
  color: rgba(234,244,255,.90) !important;
  border-radius:14px !important;
  padding:.62rem 1.05rem !important;
  font-weight: 850 !important;
  background: rgba(255,255,255,.05) !important;
  transition: transform .15s ease, background .2s ease, border-color .2s ease !important;
}
.btn-outline-tech:hover{
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(160,220,255,.40) !important;
  transform: translateY(-1px);
}
/* #endregion */


/* #region HERO (Dark Deep-Tech) */
.hero{
  padding: 64px 0 26px;
  background:
    radial-gradient(1100px 620px at 15% 15%, rgba(76,201,240,.18), transparent 60%),
    radial-gradient(900px 620px at 85% 20%, rgba(122,231,255,.14), transparent 62%),
    linear-gradient(180deg, rgba(5,7,11,1) 0%, rgba(10,15,22,1) 72%, rgba(10,15,22,.65) 100%);
  position: relative;
  overflow:hidden;
}
.hero:after{
  content:"";
  position:absolute;
  inset:-1px;
  background: radial-gradient(700px 260px at 50% 0%, rgba(122,231,255,.10), transparent 65%);
  pointer-events:none;
}
.hero h1{
  background: linear-gradient(180deg, #FFFFFF 0%, rgba(234,244,255,.72) 90%);
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}
/* #endregion */


/* #region TRUST BADGES (FDA Portal – dark, compact, official) */
.trust-badges{
  background:
    radial-gradient(1100px 620px at 15% 15%, rgba(76,201,240,.10), transparent 60%),
    radial-gradient(900px 620px at 85% 20%, rgba(122,231,255,.08), transparent 62%),
    linear-gradient(180deg, rgba(5,7,11,1) 0%, rgba(10,15,22,1) 100%);
  border-top: 1px solid rgba(122,231,255,.14);
  border-bottom: 1px solid rgba(122,231,255,.10);
}

.trust-badges-row{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 10px 0;
  position: relative;
}

/* Hairline across row */
.trust-badges-row::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:0;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(122,231,255,.18), transparent);
  opacity:.9;
}

.trust-badge{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;

  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border: 1px solid rgba(122,231,255,.26);

  box-shadow:
    0 10px 26px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(0,0,0,.35);
}

.trust-badge:hover{
  border-color: rgba(122,231,255,.32);
  box-shadow:
    0 12px 34px rgba(0,0,0,.62),
    0 0 0 1px rgba(76,201,240,.18),
    inset 0 0 0 1px rgba(0,0,0,.35);
}

.trust-badge-icon{
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display:grid;
  place-items:center;
  background: rgba(76,201,240,.10);
  border: 1px solid rgba(122,231,255,.22);
  color: rgba(234,244,255,.92);
  flex: 0 0 auto;
}

.trust-badge-icon svg{
  width: 18px;
  height: 18px;
  display:block;
}

.trust-badge-title{
  font-weight: 900;
  font-size: .80rem;
  color: rgba(234,244,255,.92);
  letter-spacing:.08em;
  text-transform: uppercase;
  line-height: 1.05;
}

.trust-badge-sub{
  margin-top: 2px;
  font-size: .70rem;
  color: rgba(234,244,255,.62);
  letter-spacing:.04em;
  line-height: 1.15;
}

/* Responsive */
@media (max-width: 992px){
  .trust-badges-row{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px){
  .trust-badges-row{ grid-template-columns: 1fr; }
}
/* #endregion */


/* #region KPI STRIP */
.kpi-strip{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.hero .kpi-strip{
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid rgba(160,220,255,.16);
}

.kpi-item{
  padding-top: 10px;
  border-top: 1px solid rgba(160,220,255,.10);
}
.kpi-label{
  font-size: .70rem;
  text-transform: uppercase;
  letter-spacing: .9px;
  font-weight: 950;
  color: rgba(234,244,255,.55);
}
.kpi-value{
  font-weight: 950;
  color: rgba(234,244,255,.95);
}
.kpi-sub{
  font-size: .86rem;
  color: rgba(234,244,255,.58);
}

/* KPI responsive */
@media (max-width: 992px){
  .kpi-strip{ grid-template-columns: 1fr 1fr; }
}
/* #endregion */


/* #region CONTENT SECTIONS (White Area) */
.section-light{
  background: #FFFFFF;
  color: #0F172A;
}
.section-light .feature-title{ color: #0B2C3A; }
.section-light p{ color: rgba(15,23,42,.72); }
.section-light .feature{ border-top: 1px solid rgba(15,23,42,.08); }
.section-light .feature:first-of-type{ border-top: 0; }
/* #endregion */


/* #region CONTACT PAGE (Form + Sidebar) */
.contact-layout{
  display:grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 28px;
  align-items:start;
}

/* left column width like Team page (not centered) */
.contact-main{
  max-width: 920px;
}

/* panel wrapper (use your existing style if you already have one) */
.medical-panel{
  border-radius: var(--r-lg);
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.92);
  box-shadow: 0 18px 60px rgba(0,0,0,.10);
  padding: 18px 18px;
}

.medical-panel--wide{
  max-width: 920px;
}

.contact-note{
  font-size: .85rem;
  color: rgba(15,23,42,.55);
  max-width: 62ch;
}

/* Sidebar cards */
.contact-card{
  padding: 16px 16px;
}

.contact-card-title{
  margin: 0 0 12px;
  font-weight: 950;
  letter-spacing: -.2px;
  color: #0B2C3A;
}

.contact-item{
  padding: 10px 0;
  border-top: 1px solid rgba(15,23,42,.08);
}
.contact-item:first-of-type{ border-top: 0; }

.contact-item-label{
  font-size: .72rem;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-weight: 900;
  color: rgba(15,23,42,.55);
}

.contact-item-value{
  margin-top: 4px;
  font-weight: 750;
  color: rgba(15,23,42,.82);
  text-decoration:none;
}
a.contact-item-value:hover{ text-decoration: underline; }

.contact-divider{
  height:1px;
  background: rgba(15,23,42,.10);
  margin: 12px 0;
}

.contact-mini-title{
  font-size: .78rem;
  font-weight: 950;
  color: rgba(15,23,42,.78);
  text-transform: uppercase;
  letter-spacing: .10em;
}

.contact-mini-text{
  margin-top: 6px;
  color: rgba(15,23,42,.68);
  line-height: 1.55;
  font-size: .92rem;
}

.contact-bullets{
  margin: 0;
  padding-left: 16px;
  color: rgba(15,23,42,.72);
}
.contact-bullets li{ margin: 8px 0; }

/* Responsive */
@media (max-width: 992px){
  .contact-layout{
    grid-template-columns: 1fr;
  }
  .contact-main,
  .medical-panel--wide{
    max-width: 100%;
  }
}
/* #endregion */


/* #region FEATURE BLOCKS */
.feature{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 28px;
  align-items:center;
  padding: 26px 0;
}
.feature + .feature{
  border-top: 1px solid rgba(15,23,42,.08);
}
.feature.reverse{ grid-template-columns: .95fr 1.05fr; }
.feature.reverse .feature-media{ order:2; }

.feature-media{
  border-radius: var(--r-lg);
  overflow:hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,.22);
  border: 1px solid rgba(15,23,42,.08);
  aspect-ratio: 16 / 10;
  background: #0B0F14;
}
.feature-media img{
  width:100%;
  height:100%;
  display:block;
  object-fit: cover;
}
.feature-media:hover{
  box-shadow: 0 22px 80px rgba(0,0,0,.24), 0 0 0 1px rgba(76,201,240,.18);
  border-color: rgba(76,201,240,.25);
}

.feature-title{
  font-weight: 1000;
  letter-spacing: -.3px;
}
.feature-points{
  margin: 12px 0 0;
  color: rgba(15,23,42,.68);
}
.feature-points li{ margin: 6px 0; }

/* Feature responsive */
@media (max-width: 992px){
  .feature,
  .feature.reverse{ grid-template-columns: 1fr; }
  .feature.reverse .feature-media{ order:0; }
}
/* #endregion */


/* #region FINAL CTA */
.product-cta{
  margin-top: 22px;
  padding: 22px 0 34px;
  border-top: 1px solid rgba(15,23,42,.10);
  display:flex;
  justify-content:space-between;
  gap: 14px;
  align-items:center;
}
@media (max-width: 992px){
  .product-cta{ flex-direction: column; align-items:flex-start; }
}
/* #endregion */


/* #region FAQS — LIGHT BACKGROUND (Neural Metal Final) */
.section-light .faq{
  border-top:1px solid rgba(0,0,0,.08);
  padding-top:12px;
}

.section-light .faq .faq-item{
  border-bottom:1px solid rgba(0,0,0,.08);
}

.section-light .faq summary::-webkit-details-marker{ display:none; }
.section-light .faq summary{ list-style:none; }

/* Questions */
.section-light .faq summary.faq-q{
  cursor:pointer;
  padding:16px 6px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#5E6A75 !important;          /* normal: mid metal grey */
  transition:.25s;
}

.section-light .faq summary.faq-q:hover{
  color:#0A0E12 !important; /* hover: deep metal black */ }

.section-light .faq .faq-item[open] > summary.faq-q{
  color:#3A4046 !important; /* normal: mid metal grey */ font-weight:700; }

/* Answers */
.section-light .faq .faq-a{
  padding:0 6px 18px;
  color:#3E4A55 !important;          /* reading grey */
  line-height:1.65;
}

/* #endregion */


/* #region TRUST STRIP (Legacy White Logo Strip - FINAL OVERRIDE) */
/* Keep this only if you still use .trust-strip-logos-* somewhere */
.trust-strip-logos-bg{
  background: linear-gradient(180deg, #FFFFFF, #F4F7FB) !important;
  border-top: 1px solid rgba(15,23,42,.12) !important;
  border-bottom: 1px solid rgba(15,23,42,.12) !important;
}
.trust-strip-logos-inner{
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1px !important;
  max-width: var(--container) !important;
  margin: 0 auto !important;
  padding: 8px 18px !important;
}
.trust-strip-logo-box{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding: 12px 12px !important;
  background: linear-gradient(180deg, #FFFFFF, #F4F7FB) !important;
  box-shadow:
    inset 0 0 0 1px rgba(15,23,42,.06),
    0 8px 18px rgba(0,0,0,.10) !important;
}
.trust-strip-logo-box img{
  height: 44px !important;
  max-width: 220px !important;
  width: auto !important;
  object-fit: contain !important;
}
@media (max-width: 520px){
  .trust-strip-logos-inner{
    grid-template-columns: 1fr !important;
    padding: 6px 14px !important;
  }
  .trust-strip-logo-box{
    padding: 10px 10px !important;
  }
  .trust-strip-logo-box img{
    height: 40px !important;
    max-width: 240px !important;
  }
}
/* #endregion */


/* #region FOOTER (Dark Metallic) */
footer.footer{
  background:
    radial-gradient(900px 420px at 20% 0%, rgba(76,201,240,.10), transparent 60%),
    linear-gradient(180deg, var(--bg-1), var(--bg-0));
  border-top: 1px solid rgba(122,231,255,.18);
  color: rgba(234,244,255,.70);
}

/* Partner logos strip (if used inside footer) */
footer.footer .footer-logos{
  display:block !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)) !important;
  border-top: 1px solid rgba(122,231,255,.18) !important;
  border-bottom: 1px solid rgba(122,231,255,.18) !important;
}

footer.footer .footer-logo-box{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding: 18px 14px !important;
  text-decoration:none !important;
  background: linear-gradient(180deg, #FFFFFF, #F4F7FB) !important;
  box-shadow:
    0 10px 26px rgba(0,0,0,.14),
    inset 0 0 0 1px rgba(15,23,42,.06) !important;
  transition: transform .18s ease, box-shadow .22s ease !important;
}
footer.footer .footer-logo-box:hover{
  transform: translateY(-2px) !important;
  box-shadow:
    0 18px 44px rgba(0,0,0,.22),
    0 0 0 1px rgba(76,201,240,.28) !important;
}
footer.footer .footer-logo-box img{
  height: 58px;
  max-width: 220px;
  width:auto;
  object-fit:contain;
  opacity: .98;
  filter: none;
}

/* Footer grid */
footer.footer .footer-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  padding: 34px 18px 18px;
}
footer.footer .footer-col h6{
  margin: 0 0 12px;
  color: rgba(234,244,255,.86);
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .74rem;
}
footer.footer .footer-col a{
  display:block;
  text-decoration:none;
  color: rgba(234,244,255,.70);
  padding: 6px 0;
  font-weight: 650;
  transition: color .2s ease, transform .2s ease;
}
footer.footer .footer-col a:hover{
  color: rgba(234,244,255,.94);
  transform: translateX(2px);
}
footer.footer .footer-col a.active{ color: var(--brand-2); }
footer.footer .footer-col p{
  margin: 0 0 10px;
  color: rgba(234,244,255,.60);
  line-height: 1.6;
}

/* Footer bottom */
footer.footer .footer-bottom{
  border-top: 1px solid rgba(122,231,255,.12);
  padding: 16px 18px;
  text-align:center;
  color: rgba(234,244,255,.55);
  font-size: .85rem;
}

/* =========================
   FOOTER ACTIVE LINK
========================= */
footer.footer a.active{
  color: var(--brand-2) !important;
  font-weight: 900;
  text-decoration: none;
}

footer.footer a.active::before{
  content:"";
  display:inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  margin-right: 8px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 0 0 1px rgba(122,231,255,.18), 0 0 18px rgba(76,201,240,.18);
  transform: translateY(-1px);
}

/* Footer responsive */
@media (max-width: 992px){
  footer.footer .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px){
  footer.footer .footer-grid{ grid-template-columns: 1fr; }
}
/* #endregion */

/* ==========================================================================
   END OF KAYALOGY_BASE_CSS_V2
   ========================================================================== */