@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ═══════════════════════════════════════════════════════
   BOSACH TECHNOLOGIES v5 — Light + Peacock Blue + Red-Tan
   ═══════════════════════════════════════════════════════ */
:root {
  /* ── Backgrounds — LIGHT ── */
  --bg:        #F0F6FF;      /* light blue-white */
  --bg2:       #E8F2FF;      /* slightly deeper blue-white */
  --bg3:       #DCEEFF;
  --bg-dark:   #0A1628;      /* used for hero sections */

  /* ── Peacock blue ── */
  --peacock:   #007ACC;      /* vivid peacock / cobalt blue — readable on light */
  --peacock2:  #005FA3;      /* deeper */
  --peacock3:  #00B8D9;      /* bright cyan-peacock */
  --peacock-light: rgba(0,122,204,0.09);

  /* ── Red / tan ── */
  --red:       #CC1F1F;
  --red2:      #B31A1A;
  --tan:       #C4622D;      /* red-tan, readable on light */
  --tan2:      #E07040;

  /* ── Text ── */
  --text:      #0D1A2E;      /* near-black navy */
  --text2:     #3D5A7A;      /* mid blue-grey */
  --text3:     #7A9AB8;      /* light blue-grey */

  /* ── Cards / surfaces ── */
  --surface:   rgba(0,122,204,0.06);
  --surface2:  rgba(0,122,204,0.11);
  --border:    rgba(0,122,204,0.16);
  --border2:   rgba(0,122,204,0.28);

  /* ── Gradients ── */
  --grad-main:  linear-gradient(135deg, #007ACC 0%, #0057D9 55%, #7B2FCE 100%);
  --grad-warm:  linear-gradient(135deg, #C4622D 0%, #CC1F1F 100%);
  --grad-hero:  linear-gradient(135deg, #00B8D9 0%, #0057D9 45%, #C4622D 100%);
  --grad-card:  linear-gradient(145deg, rgba(0,122,204,0.06) 0%, rgba(0,87,217,0.03) 100%);

  /* ── Fonts ── */
  --font: 'Outfit', sans-serif;
  --mono: 'JetBrains Mono', monospace;

  /* ── Radii ── */
  --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px;

  /* ── Shadows ── */
  --shadow-card:  0 2px 16px rgba(0,60,120,0.10), 0 0 0 1px rgba(0,122,204,0.08);
  --shadow-hover: 0 12px 40px rgba(0,60,120,0.18), 0 0 40px rgba(0,122,204,0.12);
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body { font-family: var(--font); background: var(--bg); color: var(--text); overflow-x: hidden; line-height: 1.6; }

/* ── CANVAS ── */
#bg-canvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

/* ── NAV ── */
#main-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: 86px;
  display: flex; align-items: center; justify-content: space-between; padding: 0 5%;
  background: rgba(240,246,255,0.82);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border-bottom: 1px solid rgba(0,122,204,0.14);
  transition: background .3s, box-shadow .3s;
}
#main-nav.scrolled {
  background: rgba(240,246,255,0.96);
  box-shadow: 0 2px 32px rgba(0,60,120,0.12);
}
.nav-logo { display: flex; align-items: center; text-decoration: none; }
.nav-logo img { height: 68px; width: auto; mix-blend-mode: multiply; }
.nav-logo-fallback { font-family:var(--font); font-weight:900; font-size:1.15rem; letter-spacing:-.5px; color:var(--red); text-transform:uppercase; }
.nav-links { display: flex; list-style: none; gap: 0; align-items: center; }
.nav-links a {
  color: var(--text2); text-decoration: none; font-size: .83rem; font-weight: 500;
  letter-spacing: .3px; padding: .45rem .9rem; border-radius: 7px; transition: color .2s, background .2s;
}
.nav-links a:hover { color: var(--text); background: var(--surface); }
.nav-links a.active { color: var(--peacock); font-weight: 600; }

/* Dropdown */
.has-dropdown { position: relative; }
.has-dropdown > a { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.has-dropdown > a::after { content: '⌄'; font-size: .65rem; opacity: .5; margin-top: 1px; }
.dropdown {
  display: none; position: absolute; top: calc(100% + 10px); left: -12px;
  background: rgba(248,252,255,0.99);
  border: 1px solid var(--border2); border-radius: var(--r-md); padding: .5rem; min-width: 260px;
  box-shadow: 0 16px 48px rgba(0,60,120,0.18), 0 0 0 1px rgba(0,122,204,0.08);
  backdrop-filter: blur(20px); z-index: 300;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown { display: block; animation: fade-drop .15s ease; }
.has-dropdown > a { outline: none; }
@keyframes fade-drop { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }
.dropdown a {
  display: flex; align-items: center; gap: 10px; padding: .65rem .9rem;
  border-radius: 9px; color: var(--text2); font-size: .83rem; transition: all .15s; text-decoration: none;
}
.dropdown a:hover { color: var(--text); background: var(--surface); }
.dropdown-logo { width: 30px; height: 24px; object-fit: contain; border-radius: 5px; background: rgba(0,122,204,0.06); padding: 2px; flex-shrink: 0; }
.dropdown-name { font-weight: 700; font-size: .83rem; color: var(--text); }
.dropdown-tag { font-size: .66rem; color: var(--text3); margin-top: 1px; }
.dropdown-divider { height: 1px; background: var(--border); margin: .4rem 0; }

/* Nav CTA */
.nav-cta {
  padding: .5rem 1.2rem; border-radius: 8px;
  background: linear-gradient(135deg, #007ACC, #0057D9);
  color: #fff; font-weight: 700; font-size: .8rem; letter-spacing: .3px; text-decoration: none;
  box-shadow: 0 3px 16px rgba(0,122,204,0.35); transition: opacity .2s, transform .2s, box-shadow .2s;
}
.nav-cta:hover { opacity: .88; transform: translateY(-1px); box-shadow: 0 6px 24px rgba(0,122,204,0.42); }

/* Hamburger / mobile */
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; }
.hamburger span { display: block; width: 22px; height: 1.5px; background: var(--text2); border-radius: 2px; transition: all .3s; }
.mobile-menu {
  display: none; position: fixed; top: 86px; left: 0; right: 0;
  background: rgba(240,246,255,0.98); border-bottom: 1px solid var(--border);
  padding: 1rem 5%; z-index: 199; backdrop-filter: blur(20px);
}
.mobile-menu.open { display: block; }
.mobile-menu a { display: block; padding: .75rem 0; color: var(--text2); text-decoration: none; font-size: .9rem; font-weight: 500; border-bottom: 1px solid var(--border); }
.mobile-menu a:last-child { border-bottom: none; }

/* ── PAGE ── */
.page-wrap { position: relative; z-index: 1; padding-top: 86px; }
.container { max-width: 1180px; margin: 0 auto; padding: 0 5%; }
section { padding: 6rem 5%; }

/* ── TYPOGRAPHY ── */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .68rem; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--peacock); margin-bottom: .875rem;
}
.eyebrow::before { content: ''; width: 20px; height: 1.5px; background: var(--peacock); }
.headline {
  font-size: clamp(2rem,4.5vw,3.8rem); font-weight: 800; line-height: 1.06;
  letter-spacing: -1.5px; color: var(--text); margin-bottom: 1.25rem;
}
.headline em { font-style: normal; background: var(--grad-main); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.headline .warm { font-style: normal; background: var(--grad-warm); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.subhead { font-size: 1rem; color: var(--text2); line-height: 1.78; font-weight: 300; }
.text-center { text-align: center; }

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--font);
  font-weight: 600; font-size: .875rem; border-radius: var(--r-sm); border: none;
  cursor: pointer; text-decoration: none; transition: all .22s; padding: .75rem 1.6rem; letter-spacing: .2px;
}
.btn-primary { background: linear-gradient(135deg,#007ACC,#0057D9); color:#fff; box-shadow:0 4px 20px rgba(0,122,204,.35); }
.btn-primary:hover { opacity:.88; transform:translateY(-2px); box-shadow:0 8px 30px rgba(0,122,204,.45); }
.btn-warm { background: linear-gradient(135deg,#C4622D,#CC1F1F); color:#fff; box-shadow:0 4px 20px rgba(196,98,45,.3); }
.btn-warm:hover { opacity:.88; transform:translateY(-2px); }
.btn-ghost { background: #fff; color: var(--text); border: 1px solid var(--border2); box-shadow: 0 1px 6px rgba(0,60,120,0.08); }
.btn-ghost:hover { background: var(--bg); border-color: var(--peacock); color: var(--peacock); }
.btn-outline { background: transparent; color: var(--peacock); border: 1px solid rgba(0,122,204,.4); }
.btn-outline:hover { background: var(--surface); border-color: var(--peacock); }
/* legacy aliases */
.btn-teal { background: linear-gradient(135deg,#007ACC,#0057D9); color:#fff; box-shadow:0 4px 20px rgba(0,122,204,.35); }
.btn-teal:hover { opacity:.88; transform:translateY(-2px); }
.btn-ghost-teal { background: var(--surface); color: var(--peacock); border: 1px solid var(--border2); }
.btn-outline-teal { background: transparent; color: var(--peacock); border: 1px solid rgba(0,122,204,.35); }
.btn-outline-teal:hover { background: var(--surface); border-color: var(--peacock); }

/* ── CARDS ── */
.card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-card); transition: transform .3s, border-color .3s, box-shadow .3s;
}
.card:hover { transform: translateY(-5px); border-color: rgba(0,122,204,.35); box-shadow: var(--shadow-hover); }
.card-pad { padding: 2rem; }

/* ── BADGES ── */
.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px;
  border-radius: 20px; font-size: .65rem; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
}
.badge-live { background: rgba(0,122,204,.1); color: var(--peacock2); border: 1px solid rgba(0,122,204,.25); }
.badge-live::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--peacock); animation:pulse-dot 2s infinite; flex-shrink:0; }
.badge-soon { background: rgba(196,98,45,.1); color: var(--tan); border: 1px solid rgba(196,98,45,.25); }
.badge-blue { background: rgba(0,87,217,.1); color: #1A5FCC; border: 1px solid rgba(0,87,217,.2); }
.badge-gold { background: rgba(196,98,45,.1); color: var(--tan); border: 1px solid rgba(196,98,45,.25); }
@keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:.25} }

/* ── DECORATIVE ── */
.glow-line { height: 1px; background: linear-gradient(90deg,transparent,var(--peacock),transparent); opacity:.35; }
.glow-line-warm { height: 1px; background: linear-gradient(90deg,transparent,var(--tan),transparent); opacity:.3; }

/* ── STATS ── */
.stat-num { font-size:2.6rem; font-weight:800; line-height:1; background:var(--grad-main); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.stat-label { font-size:.75rem; color:var(--text3); margin-top:5px; font-weight:400; letter-spacing:.3px; }

.stats-band {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr));
  background: #fff; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  position: relative; z-index: 1;
}
.stat-cell { padding: 2.25rem 1.5rem; text-align: center; border-right: 1px solid var(--border); }
.stat-cell:last-child { border-right: none; }
.stat-cell-num { font-family:var(--font); font-size:2rem; font-weight:800; background:var(--grad-main); -webkit-background-clip:text; -webkit-text-fill-color:transparent; line-height:1; margin-bottom:6px; }
.stat-cell-label { font-size:.75rem; color:var(--text3); font-weight:400; letter-spacing:.3px; }

/* ── TICKER ── */
.ticker-wrap { overflow:hidden; padding:1.1rem 0; background:#fff; border-top:1px solid var(--border); border-bottom:1px solid var(--border); position:relative; z-index:1; }
.ticker-wrap::before,.ticker-wrap::after { content:''; position:absolute; top:0; bottom:0; width:120px; z-index:2; pointer-events:none; }
.ticker-wrap::before { left:0; background:linear-gradient(to right,#fff,transparent); }
.ticker-wrap::after  { right:0; background:linear-gradient(to left,#fff,transparent); }
.ticker-track { display:flex; gap:0; animation:ticker-scroll 40s linear infinite; }
.ticker-item { display:flex; align-items:center; gap:10px; padding:0 2.5rem; white-space:nowrap; flex-shrink:0; color:var(--text2); font-size:.8rem; font-weight:600; border-right:1px solid var(--border); transition:color .2s; }
.ticker-item img { height:22px; width:auto; object-fit:contain; opacity:.65; transition:opacity .2s; }
.ticker-item:hover { color:var(--peacock); }
.ticker-item:hover img { opacity:1; }
@keyframes ticker-scroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* ── MONO ── */
.mono { font-family:var(--mono); font-size:.78rem; color:var(--peacock); }

/* ── REVEALS ── */
.reveal   { opacity:0; transform:translateY(28px);  transition:opacity .6s ease,transform .6s ease; }
.reveal-l { opacity:0; transform:translateX(-24px); transition:opacity .6s ease,transform .6s ease; }
.reveal-r { opacity:0; transform:translateX(24px);  transition:opacity .6s ease,transform .6s ease; }
.reveal.in,.reveal-l.in,.reveal-r.in { opacity:1; transform:none; }

/* ── FOOTER ── */
footer { position:relative; z-index:1; border-top:1px solid var(--border); background:#fff; padding:4rem 5% 2rem; }
.footer-grid { display:grid; grid-template-columns:2.2fr 1fr 1fr 1fr; gap:3rem; margin-bottom:3rem; }
.footer-logo img { height:64px; width:auto; }
.footer-brand p { font-size:.8rem; color:var(--text3); line-height:1.75; margin-top:1rem; max-width:260px; font-weight:300; }
footer h6 { font-size:.65rem; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:var(--text3); margin-bottom:1.25rem; }
footer ul { list-style:none; }
footer ul li { margin-bottom:.55rem; }
footer ul li a { color:var(--text2); text-decoration:none; font-size:.82rem; font-weight:400; transition:color .2s; }
footer ul li a:hover { color:var(--peacock); }
.footer-bottom { border-top:1px solid var(--border); padding-top:1.5rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.5rem; }
.footer-bottom p { font-size:.73rem; color:var(--text3); font-weight:300; }
.social-row { display:flex; gap:.5rem; }
.social-btn { width:32px; height:32px; border-radius:7px; border:1px solid var(--border); background:var(--bg); display:flex; align-items:center; justify-content:center; color:var(--text3); text-decoration:none; font-size:.72rem; font-weight:700; transition:all .2s; }
.social-btn:hover { border-color:var(--peacock); color:var(--peacock); background:var(--surface); }

/* ── RESPONSIVE ── */
/* ── TABLET (≤900px) ── */
@media(max-width:900px) {
  .nav-links,.nav-cta { display:none }
  .hamburger { display:flex }
  .footer-grid { grid-template-columns:1fr 1fr }
  .headline { font-size:clamp(1.8rem,5vw,2.8rem) }
  section { padding:4rem 5% }
  .stats-band { grid-template-columns:repeat(2,1fr) }
  .stat-cell { border-right:none; border-bottom:1px solid var(--border) }
  .stat-cell:nth-child(odd) { border-right:1px solid var(--border) }
  .stat-cell:last-child { border-bottom:none }
}

/* ── MOBILE (≤640px) ── */
@media(max-width:640px) {
  .footer-grid { grid-template-columns:1fr }
  .headline { font-size:clamp(1.6rem,6vw,2.2rem); letter-spacing:-.5px }
  .subhead { font-size:.9rem }
  section { padding:3rem 5% }
  .stats-band { grid-template-columns:1fr 1fr }
  .stat-cell { padding:1.5rem 1rem }
  .stat-cell-num { font-size:1.5rem }
  .ticker-wrap::before,.ticker-wrap::after { width:40px }
  .btn { padding:.65rem 1.2rem; font-size:.82rem }
  .card-pad { padding:1.25rem }
  .badge { font-size:.6rem; padding:2px 8px }
  .eyebrow { font-size:.6rem; letter-spacing:2px }
}

/* ── SMALL MOBILE (≤400px) ── */
@media(max-width:400px) {
  .headline { font-size:1.5rem }
  section { padding:2.5rem 4% }
  .footer-grid { gap:2rem }
}