/* ═══════════════════════════════════════════════════════════
   Cloud Commons Labs · shared.css
   Dark-first technical build entity — www.cloudcommonslabs.ca
   ═══════════════════════════════════════════════════════════ */

/* ── RESET & VARIABLES ── */
:root {
  /* === Shared Teal Backbone (same as CCC) === */
  --teal:        #004d4d;
  --teal-mid:    #006666;
  --teal-bright: #008080;
  --teal-dark:   #002a2a;
  --cyan:        #00b8cc;
  --cyan-full:   #00e5ff;

  /* === Labs-Exclusive Amber Accent (replaces CCC lime) === */
  --amber:       #f59e0b;
  --amber-bright:#fbbf24;
  --amber-dark:  #b45309;

  /* === Dark-First Background System === */
  --bg:          #0d1a1a;
  --bg-alt:      #0a1414;
  --surface:     #0f2020;
  --surface-alt: #162828;
  --rule:        #1a3a3a;
  --rule-mid:    #204040;

  /* === Ink (on dark) === */
  --ink:         #e8f4f4;
  --ink-soft:    #b4cccc;
  --ink-muted:   #5a8a8a;
  --ink-faint:   #3a6464;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;overflow-x:hidden;max-width:100%;}
body{font-family:'IBM Plex Sans',sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden;max-width:100%;}

/* ── NAV ── */
nav{
  position:sticky;top:0;z-index:200;
  background:rgba(13,26,26,0.97);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--rule);
  height:64px;display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(1.5rem,4vw,3rem);
}
.nav-brand{display:flex;align-items:center;gap:10px;text-decoration:none;}
.nav-mark{height:40px;display:block;}
.nav-wordmark{
  font-family:'IBM Plex Mono',monospace;font-size:0.62rem;font-weight:500;
  letter-spacing:0.09em;text-transform:uppercase;color:var(--cyan-full);line-height:1.35;
}
.nav-wordmark span{color:var(--amber);display:block;}
.nav-links-wrap{display:flex;align-items:center;}
.nav-link{
  font-family:'IBM Plex Mono',monospace;font-size:0.62rem;letter-spacing:0.07em;
  text-transform:uppercase;color:var(--ink-muted);text-decoration:none;
  padding:0 0.9rem;border-left:1px solid var(--rule);height:64px;
  display:flex;align-items:center;transition:color .15s;white-space:nowrap;
}
.nav-link:hover{color:var(--cyan-full);}
.nav-active{color:var(--amber);font-weight:500;}
.nav-cta{
  font-family:'IBM Plex Mono',monospace;font-size:0.62rem;letter-spacing:0.09em;
  text-transform:uppercase;background:var(--amber);color:#0a1414;
  padding:0.44rem 1.1rem;margin-left:1.25rem;text-decoration:none;
  transition:background .15s;white-space:nowrap;font-weight:500;
}
.nav-cta:hover{background:var(--amber-bright);}
/* Mobile nav */
.nav-hamburger{
  display:none;flex-direction:column;gap:5px;cursor:pointer;
  padding:0.5rem;margin-left:1rem;background:none;border:none;
}
.nav-hamburger span{display:block;width:22px;height:2px;background:var(--ink);transition:all .2s;}
.mobile-nav{
  display:none;position:fixed;top:64px;left:0;right:0;z-index:190;
  background:var(--surface);border-bottom:1px solid var(--rule);flex-direction:column;
}
.mobile-nav.open{display:flex;}
.mobile-nav a{
  font-family:'IBM Plex Mono',monospace;font-size:1rem;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--ink);text-decoration:none;
  padding:1rem clamp(1.5rem,4vw,3rem);border-bottom:1px solid var(--rule);
  transition:color .15s,background .15s;
}
.mobile-nav a:hover{color:var(--cyan-full);background:rgba(0,229,255,0.04);}
.mobile-nav a.mobile-cta{background:var(--amber);color:#0a1414;font-weight:500;}

/* Progress bar */
.progress-bar{position:fixed;top:0;right:0;bottom:0;z-index:190;width:3px;background:transparent;}
.progress-fill{width:100%;background:var(--amber);height:0%;transition:height .1s linear;}

/* ── FOOTER ── */
footer{
  background:var(--bg-alt);border-top:1px solid var(--rule);
  padding:1.75rem clamp(1.5rem,4vw,3rem);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;
}
.foot-brand{display:flex;align-items:center;gap:0.75rem;text-decoration:none;}
.foot-logo{height:26px;opacity:0.5;filter:brightness(1.5);}
.foot-org{
  font-family:'IBM Plex Mono',monospace;font-size:0.6rem;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--ink-faint);
}
.foot-links{display:flex;gap:1.5rem;flex-wrap:wrap;}
.foot-link{
  font-family:'IBM Plex Mono',monospace;font-size:0.6rem;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--ink-faint);text-decoration:none;
  transition:color .15s;
}
.foot-link:hover{color:var(--ink-muted);}
.foot-parent{
  font-family:'IBM Plex Mono',monospace;font-size:0.6rem;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--amber-dark);text-decoration:none;
  transition:color .15s;
}
.foot-parent:hover{color:var(--amber);}

/* ── SHARED LAYOUT & TYPOGRAPHY ── */
.section{padding:clamp(3.5rem,5.5vw,5.5rem) clamp(1.5rem,4vw,3rem);}
.section-inner{max-width:1160px;margin:0 auto;}
.two-col{display:grid;grid-template-columns:220px 1fr;gap:4.5rem;align-items:start;}
.section-tag{
  font-family:'IBM Plex Mono',monospace;font-size:0.72rem;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--amber);
  display:flex;align-items:center;gap:0.5rem;padding-top:0.3rem;
}
.section-tag::before{content:'//';color:var(--teal-bright);font-size:1.05rem;}

h2.display{
  font-family:'Montserrat',sans-serif;font-weight:800;
  font-size:clamp(1.65rem,2.6vw,2.6rem);line-height:1.08;
  letter-spacing:-0.02em;text-transform:uppercase;color:var(--cyan-full);margin-bottom:1.1rem;
}
h2.display .ax{color:var(--amber);}
h2.display .cx{color:var(--cyan-full);}
h2.display .wh{color:var(--ink);}
.body-p{font-size:1.05rem;line-height:1.85;color:var(--ink-soft);font-weight:300;max-width:58ch;}

/* Card grid */
.cg-wrap{border:1px solid var(--rule);background:var(--rule);gap:1px;display:grid;}
.cg-wrap.g2{grid-template-columns:repeat(2,1fr);}
.cg-wrap.g3{grid-template-columns:repeat(3,1fr);}
.cg-wrap.g4{grid-template-columns:repeat(4,1fr);}
.cg{background:var(--surface);padding:1.5rem 1.3rem;position:relative;}
.cg::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;}
.cg.t-amber::before{background:var(--amber);}
.cg.t-cyan::before{background:var(--cyan);}
.cg.t-teal::before{background:var(--teal-bright);}
.cg.t-rule::before{background:var(--rule-mid);}
.cg-label{
  font-family:'IBM Plex Mono',monospace;font-size:0.62rem;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:0.5rem;
}
.cg h4{font-size:1.0rem;font-weight:600;color:var(--cyan-full);margin-bottom:0.35rem;}
.cg p{font-size:0.95rem;line-height:1.75;color:var(--ink-soft);}

/* Buttons */
.btn-primary{
  font-family:'IBM Plex Mono',monospace;font-size:0.62rem;letter-spacing:0.09em;
  text-transform:uppercase;background:var(--amber);color:#0a1414;
  padding:0.75rem 1.5rem;text-decoration:none;font-weight:500;
  transition:background .15s,transform .12s;display:inline-block;
}
.btn-primary:hover{background:var(--amber-bright);transform:translateY(-1px);}
.btn-ghost{
  font-family:'IBM Plex Mono',monospace;font-size:0.62rem;letter-spacing:0.09em;
  text-transform:uppercase;border:1px solid rgba(0,229,255,0.25);color:rgba(232,244,244,0.75);
  padding:0.75rem 1.5rem;text-decoration:none;transition:border-color .15s,color .15s;
  display:inline-block;
}
.btn-ghost:hover{border-color:var(--cyan-full);color:var(--cyan-full);}
.btn-ghost-amber{
  font-family:'IBM Plex Mono',monospace;font-size:0.62rem;letter-spacing:0.09em;
  text-transform:uppercase;border:1px solid rgba(245,158,11,0.3);color:var(--amber);
  padding:0.75rem 1.5rem;text-decoration:none;transition:border-color .15s,color .15s;
  display:inline-block;
}
.btn-ghost-amber:hover{border-color:var(--amber);color:var(--amber-bright);}

/* Code block */
.code-block{
  background:var(--bg-alt);border:1px solid var(--rule);border-left:3px solid var(--teal-bright);
  padding:1.1rem 1.3rem;font-family:'IBM Plex Mono',monospace;font-size:0.78rem;
  color:var(--cyan-full);line-height:1.65;overflow-x:auto;margin:1.25rem 0;
}
.code-block .cm{color:var(--ink-muted);}

/* Inline link */
.inline-link{
  font-family:'IBM Plex Mono',monospace;font-size:0.65rem;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--amber);text-decoration:none;
  border-bottom:1px solid var(--rule);padding-bottom:0.15rem;
  transition:color .15s,border-color .15s;display:inline-block;margin-top:1rem;
}
.inline-link:hover{color:var(--amber-bright);border-bottom-color:var(--amber);}

/* Trust callout */
.trust-callout{
  border-left:3px solid var(--teal-bright);padding-left:1.5rem;margin-top:2rem;
}

/* Entity badge */
.entity-badge{
  display:inline-flex;align-items:center;gap:0.5rem;
  font-family:'IBM Plex Mono',monospace;font-size:0.58rem;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--amber);border:1px solid var(--amber-dark);
  padding:0.25rem 0.6rem;
}

/* Divider */
.rule-line{border:none;border-top:1px solid var(--rule);margin:2.5rem 0;}

/* ── RESPONSIVE ── */
@media(max-width:900px){
  .nav-links-wrap{display:none;}
  .nav-hamburger{display:flex;}
  .two-col{grid-template-columns:1fr;gap:2rem;}
  .cg-wrap.g2,.cg-wrap.g3,.cg-wrap.g4{grid-template-columns:1fr;}
}
@media(max-width:600px){
  footer{flex-direction:column;align-items:flex-start;}
  .foot-links{flex-direction:column;gap:0.75rem;}
  .section-tag,.cg-label{font-size:0.78rem;}
  .section-tag{font-weight:600;}
}