/*
Theme Name: BioTech Theme
Theme URI: https://example.com/biotech
Author: BioTech
Description: Custom lightweight theme for BioTech (aesthetic devices) using black, champagne gold, and red accents.
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: biotech
*/

/* Root color system */
:root {
  --biotech-black: #0B0B0B;
  --biotech-black-2: #151515;
  --biotech-champagne: #D9C3A3; /* champagne gold */
  --biotech-gold: #C9B28E;
  --biotech-red: #E53935; /* ECG accent */
  --biotech-white: #FFFFFF;
  --biotech-muted: #9EA3A8;
  --radius: 12px;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
}

html, body {
  margin: 0; padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif;
  color: var(--biotech-white);
  background: var(--biotech-black);
  line-height: 1.6;
}

a { color: var(--biotech-champagne); text-decoration: none; }
a:hover { color: var(--biotech-red); }

.container { width: min(1200px, 92%); margin: 0 auto; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(11,11,11,.85); backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(217,195,163,.15);
}
.nav { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; }
.nav .logo { display:flex; gap:12px; align-items:center; }
.nav img.logo-img { height:40px; border-radius:6px; }
.nav ul { display:flex; list-style:none; gap:22px; margin:0; padding:0; }
.nav li a { padding:8px 10px; border-radius:8px; }
.nav li a.cta { background: linear-gradient(135deg, var(--biotech-champagne), var(--biotech-gold)); color:#000; font-weight:600; }

/* Hero */
.hero { padding: 96px 0 72px; background:
 radial-gradient(80% 60% at 50% 0%, rgba(201,178,142,.18), transparent 60%),
 linear-gradient(180deg, rgba(217,195,163,.06), rgba(0,0,0,0));
}
.badge { display:inline-flex; align-items:center; gap:10px; border:1px solid rgba(217,195,163,.35); color:var(--biotech-champagne); padding:6px 10px; border-radius:999px; font-size:14px; }
.hero h1 { font-size: clamp(36px, 5vw, 64px); margin: 18px 0 8px; line-height: 1.1; }
.hero p.lede { font-size: 20px; color:#d6d6d6; max-width: 820px; }
.btns { display:flex; gap:14px; margin-top: 22px; flex-wrap:wrap; }
.btn { padding: 12px 18px; border-radius: 12px; border:1px solid rgba(217,195,163,.3); background:#111; color:#fff; }
.btn.primary { background: linear-gradient(135deg, var(--biotech-champagne), var(--biotech-gold)); color:#000; border: none; }
.btn.ghost { background: transparent; }
.kpis { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:18px; margin-top: 34px; }
.kpis .card { background: #121212; border: 1px solid rgba(217,195,163,.18); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }

.section { padding: 72px 0; border-top: 1px solid rgba(217,195,163,.15);}
.section h2 { font-size: clamp(28px, 4vw, 40px); margin:0 0 8px; }
.section p.sub { color:#c7c7c7; max-width: 800px; }

.grid-3 { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:22px; }
.card { background: #121212; border:1px solid rgba(217,195,163,.18); border-radius: var(--radius); padding: 20px; }
.card h3 { margin-top: 0; }
.tag { display:inline-block; background: rgba(229,57,53,.12); border:1px solid rgba(229,57,53,.35); color: var(--biotech-champagne); padding: 4px 8px; border-radius: 999px; font-size: 12px; margin-bottom: 8px; }

.feature-list { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:16px; margin-top:16px; }
.feature-list li { list-style: none; padding-left: 12px; border-left: 2px solid var(--biotech-champagne); }
.check::before { content: '✓'; color: var(--biotech-champagne); margin-right: 8px; }

.gallery {
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:10px; margin-top: 16px;
}
.gallery .ph { background:#1c1c1c; border:1px dashed rgba(217,195,163,.3); padding-top:70%; border-radius: 10px; }

.trust {
  display:flex; gap:24px; flex-wrap: wrap; align-items:center; margin-top: 18px;
}
.trust .item { opacity:.85; border:1px solid rgba(217,195,163,.18); padding:10px 14px; border-radius:10px; background:#111; }

.cta-band { background: linear-gradient(180deg,#121212, #0B0B0B); border-top:1px solid rgba(217,195,163,.25); }
.footer { padding: 36px 0; background:#0A0A0A; border-top:1px solid rgba(217,195,163,.2); color:#bdbdbd; }
.footer a { color:#bdbdbd; }
.biotech-locator, .biotech-locator * { font-family: inherit; line-height: 1.5; }
.biotech-locator .clinic-address { font-style: normal; }
/* Header base */
.site-header{
  position: sticky; top: 0; z-index: 1000;
  background: rgba(11,11,11,.9); backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(217,195,163,.15);
}
.container.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:12px 0;
}

/* Menu base */
.site-nav .menu{
  display:flex; gap:20px; list-style:none; margin:0; padding:0;
}
.site-nav .menu > li{ position:relative; }
.site-nav .menu a{ text-decoration:none; }

/* Desktop dropdown */
@media (min-width:900px){
  .site-nav .sub-menu{
    display:none; position:absolute; left:0; top:calc(100% + 8px);
    background:#111; border:1px solid rgba(255,255,255,.12); border-radius:6px;
    min-width:220px; padding:8px 0; z-index:9999; white-space:nowrap;
  }
  .site-nav .menu > li:hover > .sub-menu,
  .site-nav .menu > li:focus-within > .sub-menu{ display:block; }
  .site-nav .sub-menu a{ display:block; padding:10px 16px; }
  .site-nav .sub-menu a:hover{ background:#e7c79d; color:#111; border-radius:4px; }
}

/* Mobile layout */
.nav-toggle{
  display:inline-flex; flex-direction:column; gap:4px; background:transparent; border:0; padding:8px;
}
.nav-toggle-bar{ width:24px; height:2px; background:#fff; display:block; }
@media (max-width:899.98px){
  .container.nav{ padding:10px 0; }

  /* Hide nav by default on mobile */
  .site-nav{
    position:absolute; left:0; right:0; top:100%;
    background:#0f0f0f; border-bottom:1px solid rgba(217,195,163,.15);
    display:none; z-index:2000;   /* ensure it's above content */
  }

  /* Show when header or body has the open class */
  .site-header.is-open .site-nav,
  body.nav-open .site-nav{
    display:block !important;     /* <-- win any specificity fights */
  }

  .site-nav .menu{
    display:flex; flex-direction:column; gap:0; padding:8px 12px; margin:0;
    list-style:none;
  }
  .site-nav .menu > li > a{
    display:block; padding:12px 8px; border-radius:6px;
  }

  .site-nav .menu > li > .sub-menu{
    position:static; display:none; border:0; padding:0; margin:0 0 6px 0;
 
}<style>

</section>