:root{
  --bg:#0B0C10;
  --surface:#10131a;
  --text:#eaf1ff;
  --muted:#B9C2D0;
  --brand:#3B82F6;
  --brand2:#692788;
  --radius:14px;
  --shadow:0 8px 24px rgba(0,0,0,.35);
  --nav-h:68px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif}
a{color:var(--brand);text-decoration:none}
img{max-width:100%;height:auto}
.container{width:min(1120px,92%);margin-inline:auto}

/* Fixed Nav with dropdown + logo sized to bar height */
.nav{position:fixed;top:0;left:0;right:0;background:linear-gradient(90deg, rgba(16,19,26,.96), rgba(16,19,26,.92));backdrop-filter:saturate(140%) blur(6px);z-index:1000;border-bottom:1px solid rgba(255,255,255,.06)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h)}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:calc(var(--nav-h) - 12px);width:auto;object-fit:contain;display:block}
.brand-name{font-weight:700;letter-spacing:.4px}
.menu{display:flex;gap:18px;align-items:center;list-style:none;margin:0;padding:0}
.menu > li { position:relative }
.menu a{padding:10px 12px;border-radius:10px;color:#e6eeff;display:block}
.menu a:hover{background:rgba(255,255,255,.06)}
.cta{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#0B0C10!important;font-weight:700;padding:10px 14px;border-radius:10px;box-shadow:0 8px 20px rgba(0,0,0,.25)}

/* Dropdown */
.dropdown-menu{
  display:none; position:absolute; background:#0f131b;
  top:100%; left:0; min-width:220px; border-radius:12px;
  box-shadow:0 10px 28px rgba(0,0,0,.45); padding:8px 0;
  border:1px solid rgba(255,255,255,.06);
}
.menu li:hover > .dropdown-menu{ display:block }
.dropdown-menu a{ padding:10px 14px; white-space:nowrap }

/* Mobile nav */
.menu-toggle{display:none;background:none;border:none;color:var(--brand);font-size:1.6rem;cursor:pointer}
.menu-mobile{display:none;flex-direction:column;gap:12px;margin-top:8px}
.menu-mobile a{padding:12px;border-radius:10px;background:rgba(255,255,255,.05)}

@media (max-width: 900px){
  .menu{display:none}
  .menu-toggle{display:block}
  .menu-mobile.show{display:flex}
}

header,section,footer{scroll-margin-top:var(--nav-h)}
body{padding-top:var(--nav-h)}

/* Hero */
.hero{padding:82px 0;position:relative}
.hero h1{font-family:Merriweather,serif;font-size:clamp(32px,4vw,46px);line-height:1.1;margin:0 0 12px}
.lead{color:var(--muted);font-size:1.08rem;margin:0 0 20px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.button{display:inline-block;padding:12px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.12)}
.button:hover{border-color:rgba(255,255,255,.28)}

/* Sections */
section{padding:56px 0;border-top:1px solid rgba(255,255,255,.06)}
.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:22px}
.section-head h2{font-family:Merriweather,serif;margin:0;font-size:1.8rem}
.section-head p{margin:6px 0 0;color:var(--muted)}

/* Grid & Cards */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.card{grid-column:span 4;background:#0f131b;border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.card .thumb{aspect-ratio:16/9;background:#0c0f14;object-fit:cover}
.card .content{padding:16px}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;color:#0b1218;background:linear-gradient(135deg,var(--brand),var(--brand2));padding:6px 10px;border-radius:999px;font-weight:700}
.meta{color:var(--muted);font-size:.92rem;margin:6px 0 0}

/* Footer */
footer{padding:36px 0;border-top:1px solid rgba(255,255,255,.06);color:var(--muted)}
.foot{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:18px}

@media (max-width:960px){
  .grid{grid-template-columns:repeat(6,1fr)}
  .card{grid-column:span 6}
  .foot{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .card{grid-column:span 2}
  .foot{grid-template-columns:1fr}
}
/* ==== BKI NAVBAR ADJUSTMENTS ==== */
:root{
  --nav-h: 68px;             /* navbar height */
  --brand: #030732;          /* set this to your logo's exact blue */
  --nav-bg: var(--brand);    /* navbar background equals logo blue */
}

/* Navbar background now matches the logo blue */
.nav{
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1000;
  background: var(--nav-bg);
  border-bottom: 1px solid rgba(255,255,255,.12);
}

/* Keep content from hiding under fixed bar */
body{ padding-top: var(--nav-h); }
header, section, footer{ scroll-margin-top: var(--nav-h); }

/* Layout row */
.nav-inner{
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Left brand: logo sized to bar height */
.brand{
  display: flex;
  align-items: center;
  height: var(--nav-h);
}
.brand img{
  height: calc(var(--nav-h) - 12px);
  width: auto;
  object-fit: contain;
  display: block;
}

/* Right side: menu + site title inline */
.nav-right{
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Menu (desktop) */
.menu{
  display: flex;
  align-items: center;
  gap: 18px;
  list-style: none;
  margin: 0; padding: 0;
}
.menu > li{ position: relative; }
.menu a{
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  color: #e6eeff;
  text-decoration: none;
}
.menu a:hover{ background: rgba(255,255,255,.12); }

/* Dropdown */
.dropdown-menu{
  display: none;
  position: absolute;
  top: 100%; left: 0;
  min-width: 220px;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  padding: 8px 0;
}
.menu li:hover > .dropdown-menu{ display: block; }
.dropdown-menu a{ white-space: nowrap; }

/* CTA keeps brand gradient pop */
.cta{
  background: linear-gradient(135deg, var(--brand), #692788);
  color: #0B0C10 !important;
  font-weight: 700;
  padding: 10px 14px;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}

/* Site title to the RIGHT of "Shop Now" */
.site-title{
  color: #ffffff;            /* white text */
  font-size: 21px;           /* +5px if base is 16px */
  font-weight: 800;
  letter-spacing: .3px;
}

/* Mobile: collapse desktop menu; hide long site title for space */
.menu-toggle{
  display: none;
  background: none;
  border: none;
  color: #ffffff;
  font-size: 1.6rem;
  cursor: pointer;
}
.menu-mobile{
  display: none;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}
.menu-mobile a{
  padding: 12px; border-radius: 10px; background: rgba(255,255,255,.08);
}

@media (max-width: 900px){
  .menu{ display: none; }
  .menu-toggle{ display: block; }
  .menu-mobile.show{ display: flex; }
  .site-title{ display: none; } /* keeps the top bar clean on phones */
  :root{ --nav-h: 60px; }
}
/* ================================
   BKI NAVBAR: layout + colors
   ================================ */
:root{
  --nav-h: 68px;            /* navbar height */
  --brand: #030732;         /* your logo blue (adjust if needed) */
  --purple: #692788;        /* your purple */
}

/* Make nav full-width; handle “slight right offset” with padding-right */
.nav{
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: var(--brand);
  border-bottom: 1px solid rgba(255,255,255,.12);
  color: #fff;
}
.nav-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
  padding-left: 0;                 /* logo flush left */
  padding-right: 32px;             /* slight offset from right edge */
  width: 100%;
}
/* If your theme wraps nav in a .container, neutralize it here */
.nav .container{ width: 100%; max-width: none; margin: 0; padding: 0; }

/* Left: logo pinned left, sized to bar height; kill global absolute img rules */
.brand{
  display: flex; align-items: center; height: var(--nav-h); margin-left: 0;
}
.brand img{
  position: static !important;
  height: calc(var(--nav-h) - 12px);
  width: auto; object-fit: contain; display: block;
}

/* Right: menu + site title inline and pushed to the right */
.nav-right{
  display: flex; align-items: center; gap: 16px;
  margin-left: auto;                 /* pushes right group to the right */
}

/* Desktop menu */
.menu{
  display: flex; align-items: center; gap: 18px;
  list-style: none; margin: 0; padding: 0;
}
.menu > li{ position: relative; }
.menu a{
  color: #fff;                       /* white menu text */
  display: block; padding: 10px 12px; border-radius: 10px; text-decoration: none;
}
.menu a:hover{ background: rgba(255,255,255,.12); }

/* Dropdown */
.dropdown-menu{
  display: none; position: absolute; top: 100%; left: 0;
  min-width: 220px; background: rgba(0,0,0,.35); color: #fff;
  border: 1px solid rgba(255,255,255,.15); border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0,0,0,.35); padding: 8px 0;
}
.menu li:hover > .dropdown-menu{ display: block; }
.dropdown-menu a{ white-space: nowrap; color: #fff; }

/* CTA button keeps gradient, but ensure legibility over blue nav */
.cta{
  background: linear-gradient(135deg, var(--brand), var(--purple));
  color: #0B0C10 !important; font-weight: 700;
  padding: 10px 14px; border-radius: 10px; box-shadow: 0 8px 20px rgba(0,0,0,.25);
}

/* “BKI Applications” on the far right, white and +5px size increase */
.site-title{
  color: #fff;
  font-size: calc(16px + 5px);
  font-weight: 800;
  letter-spacing: .3px;
}

/* Mobile: hide desktop menu, keep a clean top bar */
.menu-toggle{
  display: none; background: none; border: none; color: #fff; font-size: 1.6rem; cursor: pointer;
}
.menu-mobile{
  display: none; flex-direction: column; gap: 12px; margin: 0 16px 8px 16px;
}
.menu-mobile a{ padding: 12px; border-radius: 10px; background: rgba(255,255,255,.08); color: #fff; text-decoration: none; }
.menu-mobile.show{ display: flex; }

@media (max-width: 900px){
  .menu{ display: none; }
  .menu-toggle{ display: block; }
  .site-title{ display: none; }          /* keep mobile bar tidy */
  :root{ --nav-h: 60px; }
}

/* ================================
   Make black buttons purple + all white text in hero/nav
   ================================ */
/* Any generic .button that looked black → make it purple with white text */
.button, a.button, button.button{
  background: var(--purple) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
}
.button:hover, a.button:hover, button.button:hover{
  filter: brightness(1.05);
}

/* Ensure white text where needed */
body, .lead, .meta, .menu a, .dropdown-menu a, .site-title{
  color: #fff !important;
}
/* ===== Footer: make all copy white ===== */
footer, footer .meta, footer p, footer li, footer strong,
footer a {
  color: #fff !important;
}
footer a:hover { color: #e6e6ff !important; }

/* ===== Product cards: white text on buttons & pill ===== */
/* Category pill (“type”) */
.card .pill {
  color: #fff !important;
}

/* Buttons on product placeholders/cards */
.card .cta {
  /* keep your gradient, switch text to white */
  background: linear-gradient(135deg, var(--brand, #3B82F6), var(--purple, #692788));
  color: #fff !important;
}
.card .button {
  /* force the generic button style to be purple with white text */
  background: var(--purple, #692788) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
}
.card .button:hover,
.card .cta:hover {
  filter: brightness(1.05);
}
/* Global CTA text white (optional) */
.cta { color: #fff !important; }
/* ===== Contact page fixes ===== */
form[aria-label="Contact form"] {
  --field-bg: #0f131b;
  --field-border: rgba(255,255,255,.18);
  --field-focus: var(--brand, #3B82F6);
  color: #fff; /* make all form text white */
}

/* two-column row for Name/Email; collapses on mobile */
form[aria-label="Contact form"] .form-row{
  display: grid !important;               /* override inline style if present */
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
}

/* labels stack their caption + input nicely */
form[aria-label="Contact form"] label{
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #fff;                            /* label text white */
}

/* full-width fields with dark theme + focus ring */
form[aria-label="Contact form"] input,
form[aria-label="Contact form"] textarea{
  width: 100% !important;
  background: var(--field-bg);
  color: #fff;
  border: 1px solid var(--field-border);
  border-radius: 10px;
  padding: 12px 14px;
  outline: none;
}
form[aria-label="Contact form"] input:focus,
form[aria-label="Contact form"] textarea:focus{
  border-color: var(--field-focus);
  box-shadow: 0 0 0 3px rgba(59,130,246,.25);
}

/* make the helper paragraph & mailto link white */
section a[href^="mailto:"],
form[aria-label="Contact form"] ~ p,
form[aria-label="Contact form"] ~ p a{
  color: #fff !important;
}

/* ensure the primary button is purple with white text */
form[aria-label="Contact form"] .cta{
  background: linear-gradient(135deg, var(--brand, #3B82F6), var(--purple, #692788));
  color: #fff !important;
  border: 1px solid transparent !important;
  padding: 10px 14px;
  border-radius: 10px;
}
form[aria-label="Contact form"] .cta:hover{
  filter: brightness(1.05);
}

/* mobile: stack fields */
@media (max-width: 900px){
  form[aria-label="Contact form"] .form-row{
    grid-template-columns: 1fr !important;
  }
}
/* Hide purchase button in product cards (keep Preview) */
.card .content > div .cta:first-child { 
  display: none !important; 
}

/* Optional: make Preview look primary */
.card .button{
  background: var(--purple, #692788) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
}
.card .bu/* Reganthia detail: larger key art */
.keyart{
  display:block;
  width: 115%;          /* make the image larger than its column */
  max-width: none;
  margin-right: -6%;    /* gentle bleed toward the right edge */
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(0,0,0,.35);
  object-fit: cover;
}

/* Keep it tidy on small screens */
@media (max-width: 900px){
  .keyart{
    width: 100%;
    margin-right: 0;
    border-radius: 12px;
  }
}
tton:hover{ filter: brightness(1.05); }