/* Bridge District — Blueprint Mesh theme */
:root{
  --bd-navy: #0a1b2a;
  --bd-deep: #0E6E9E;
  --bd-cyan: #00A9E0;
  --bd-ice: #cfefff;
  --bd-card: rgba(0,169,224,.08);
  --bd-outline: rgba(255,255,255,.22);
  --radius-xl: 18px;
  --shadow: 0 10px 24px rgba(0,0,0,.35), 0 3px 6px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui, -apple-system, Segoe UI, Inter, Roboto, Helvetica, Arial, sans-serif;
  color:#f4fbff;
  background: radial-gradient(1200px 600px at 10% -20%, #0f2b44 0%, #0a1b2a 50%) fixed;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

.site-header{
  position: sticky; top:0; z-index:999;
  background: rgba(10,27,42,.6);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
}
.nav{position:relative; 
  max-width: 1180px; margin: 0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding: .75rem 1rem;
}
.brand{display:flex; align-items:center; gap:.6rem; text-decoration:none; color:#e9f8ff; font-weight:800}
.brand img{width:38px; height:38px; border-radius:.6rem; object-fit:cover; box-shadow:var(--shadow)}
.menu{display:flex; gap:.25rem .5rem; flex-wrap:wrap}
.menu a{color:#e7f7ff; text-decoration:none; padding:.55rem .8rem; border-radius:.6rem; border:1px solid transparent}
.menu a:hover{border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.06)}

.nav-toggle{display:none; background:none; border:0; padding:.5rem; border-radius:.6rem}
.nav-toggle span{display:block; width:24px; height:2px; background:#e7f7ff; margin:5px 0; border-radius:2px}

.hero{
  max-width:1180px; margin: 1rem auto 0; padding: clamp(1rem, 3vw, 2rem);
  display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1rem, 4vw, 2rem);
  align-items:center;
}
.hero h1{font-size: clamp(2.2rem, 5vw, 3.6rem); line-height:1.05; margin:0 0 .6rem 0; letter-spacing:.2px;}
.hero .subtitle{margin:.2rem 0 1.25rem; color:#bfeaff; max-width:52ch}
.cta{display:flex; gap:.75rem; flex-wrap:wrap}
.btn{display:inline-block; text-decoration:none; padding:.85rem 1.05rem; border-radius:12px; font-weight:800; letter-spacing:.2px}
.btn.primary{background:linear-gradient(135deg, var(--bd-deep), var(--bd-cyan)); color:#04121c; box-shadow:var(--shadow)}
.btn.ghost{border:1px solid rgba(207,239,255,.4); color:#e7f7ff; background:rgba(255,255,255,.03)}

.mesh{
  min-height: 280px; position:relative; border-radius: var(--radius-xl);
  background: radial-gradient(800px 300px at 110% -10%, rgba(0,169,224,.20), transparent 60%),
              radial-gradient(800px 300px at -10% 110%, rgba(13,110,158,.20), transparent 60%),
              rgba(255,255,255,.02);
  overflow:hidden; box-shadow: var(--shadow); border:1px solid var(--bd-outline);
}
.mesh svg{position:absolute; inset:0; width:100%; height:100%}
.node{fill: var(--bd-cyan); opacity:.75}
.path{stroke: rgba(154,214,255,.3); stroke-width:2; fill:none; stroke-linecap:round}
.animate-dash{stroke-dasharray: 8 14; animation: dash 12s linear infinite}
@keyframes dash{to{stroke-dashoffset:-500}}
.pulse::after{content:""; position:absolute; border-radius:50%; width:10px; height:10px;
  background:radial-gradient(circle, #8fe6ff 0%, rgba(143,230,255,0) 70%); animation:pulse 2.8s ease-in-out infinite; mix-blend-mode:screen;}
@keyframes pulse{0%{transform:scale(.8); opacity:.3} 50%{transform:scale(1.5); opacity:.7} 100%{transform:scale(.8); opacity:.3}}

.section{max-width:1180px; margin: 1.2rem auto; padding: 0 clamp(1rem,3vw,2rem);}
.grid{display:grid; gap:1rem; grid-template-columns: repeat(12, 1fr);}
.card{grid-column: span 6; background: var(--bd-card); border: 1px dashed var(--bd-outline);
  border-radius: var(--radius-xl); padding: clamp(1rem, 2.4vw, 1.5rem); backdrop-filter: blur(4px);}
.card h3{margin:.1rem 0 .4rem; font-size:1.25rem}
.card p{margin:0; color:#cfefff}
.card .pill{display:inline-block; margin-top:.75rem; border:1px solid rgba(207,239,255,.5); border-radius:999px; padding:.4rem .7rem; text-decoration:none; color:#e7f7ff}
.card.tall{grid-column: span 4; grid-row: span 2}
.card.wide{grid-column: span 8}
.card.center{display:flex; align-items:center; justify-content:center}

.hardware-scroller{display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.6rem;}
.badge{border:1px solid rgba(207,239,255,.35); background:rgba(255,255,255,.04); border-radius:999px; padding:.35rem .6rem; font-weight:700; color:#bfeaff; font-size:.92rem}

.about{background: rgba(0,169,224,.10); border:1px solid var(--bd-outline); border-radius: var(--radius-xl); padding: clamp(1rem,3vw,2rem);}

.contact-card{background: rgba(0,169,224,.12); border:1px solid var(--bd-outline); border-radius: var(--radius-xl); box-shadow: var(--shadow); padding: clamp(1rem,3vw,2rem);}

.site-footer{padding: 2rem 1rem; text-align:center; color:#b8e7ff}

.tropical{background-image: url('assets/tropical.svg'); background-size: cover; background-position:center; border:1px solid var(--bd-outline);}

/* Responsive */
@media (max-width: 900px){
  .hero{grid-template-columns: 1fr; margin-top:.5rem}
  .mesh{order:-1; min-height:220px}
  .grid{grid-template-columns: 1fr}
  .card, .card.wide, .card.tall{grid-column: span 1; grid-row:auto}
  .menu{display:none}
  .menu.open{display:flex; position:fixed; right:1rem; top:64px; background:rgba(10,27,42,.95); padding:.75rem; border-radius:.75rem; border:1px solid var(--bd-outline); box-shadow: var(--shadow); flex-direction:column; z-index:1001; gap:.25rem}
  .nav-toggle{display:block}
}

.hero-card{
  min-height: 280px; position:relative; border-radius: var(--radius-xl);
  background:#ffffff; overflow:hidden; box-shadow: var(--shadow); border:1px solid var(--bd-outline);
}
.hero-card img{width:100%; height:100%; object-fit:contain; display:block; padding:16px; border-radius: inherit;}
@media (max-width:900px){ .hero-card{order:-1; min-height:220px} }

/* Floating WhatsApp button */
.fab-whatsapp{
  position: fixed; right: 16px; bottom: 92px; z-index: 60;
  width: 56px; height: 56px; border-radius: 50%;
  background:#25D366; box-shadow: var(--shadow);
  display:flex; align-items:center; justify-content:center;
  border: 1px solid rgba(0,0,0,.15);
}
.fab-whatsapp:hover{filter: brightness(1.05)}
.fab-whatsapp svg{width:28px; height:28px; fill:#fff}

/* Sticky bottom footer bar */
.sticky-footer{
  position: fixed; left:0; right:0; bottom:0; z-index:55;
  background: rgba(10,27,42,.85);
  border-top: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
  display:flex; gap:.5rem; justify-content:center; align-items:center;
  padding:.5rem;
}
.sticky-footer a{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.6rem .9rem; border-radius:12px; text-decoration:none;
  color:#e7f7ff; border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  font-weight:700;
}
.sticky-footer a:hover{background:rgba(255,255,255,.12)}
.sticky-footer svg{width:18px; height:18px; fill:#e7f7ff}

/* Reserve space at page bottom so content isn't hidden behind the sticky footer */
body{padding-bottom: 72px;}
@media (min-width: 900px){ body{padding-bottom: 64px;} }