/* ============================================================
   LOGIC SYSTEMS & SOLUTIONS — Bootstrap theme layer
   Palette sourced from brand logo: blue / green / red accents
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* brand palette — sampled from logic-logo-3.png */
  --lss-blue:        #2E7FBE;
  --lss-blue-deep:    #205F92;
  --lss-blue-light:  #5DA6DD;
  --lss-navy:        #0B1E33;
  --lss-navy-2:      #12253F;
  --lss-light:       #F4F8FB;
  --lss-light-2:     #EAF1F8;
  --lss-green:       #5FB74A;
  --lss-red:         #E8483C;
  --lss-ink:         #16233A;
  --lss-slate:       #5B6B85;

  /* remap into bootstrap variables */
  --bs-primary: var(--lss-blue);
  --bs-primary-rgb: 46,127,190;
  --bs-secondary: var(--lss-navy);
  --bs-link-color: var(--lss-blue);
  --bs-link-hover-color: var(--lss-blue-deep);
  --bs-body-font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --bs-body-color: var(--lss-ink);
  --bs-border-radius: .3rem;

  --f-display: 'Fraunces', 'Iowan Old Style', serif;
  --f-mono: 'IBM Plex Mono', 'SFMono-Regular', monospace;
}

html{ scroll-behavior:smooth; }
[id]{ scroll-margin-top:88px; }
body{ overflow-x:hidden; }

h1,h2,h3,h4,.font-display{ font-family:var(--f-display); font-weight:600; letter-spacing:-0.01em; }

.eyebrow{
  font-family:var(--f-mono); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--lss-blue); display:inline-flex; align-items:center; gap:10px; font-weight:500;
}
.eyebrow::before{ content:""; width:20px; height:1px; background:var(--lss-blue); display:inline-block; }
.eyebrow.center::before{ display:none; }

.font-mono{ font-family:var(--f-mono); }

/* ---------------- buttons ---------------- */
.btn{ font-family:var(--f-mono); font-size:.8rem; letter-spacing:.07em; text-transform:uppercase; padding:.75rem 1.5rem; border-radius:.25rem; }
.btn-primary{ --bs-btn-bg:var(--lss-blue); --bs-btn-border-color:var(--lss-blue); --bs-btn-hover-bg:var(--lss-blue-deep); --bs-btn-hover-border-color:var(--lss-blue-deep); }
.btn-light-outline{
  border:1px solid rgba(255,255,255,.28); color:#fff; background:transparent;
}
.btn-light-outline:hover{ border-color:var(--lss-blue-light); color:var(--lss-blue-light); }
.btn-dark-outline{
  border:1px solid rgba(11,30,51,.18); color:var(--lss-ink); background:transparent;
}
.btn-dark-outline:hover{ border-color:var(--lss-blue); color:var(--lss-blue); }

/* ---------------- navbar ---------------- */
.navbar-brand{ display:flex; align-items:center; gap:12px; }
.navbar-brand img{ height:38px; width:38px; }
.brand-text{ display:flex; flex-direction:column; line-height:1.05; }
.brand-text .l1{ font-family:var(--f-display); font-size:1.05rem; font-weight:600; color:#fff; }
.brand-text .l2{ font-family:var(--f-mono); font-size:.6rem; letter-spacing:.22em; color:var(--lss-blue-light); text-transform:uppercase; margin-top:2px; }

.site-navbar{
  background:rgba(11,30,51,0.88); backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.site-navbar .nav-link{
  font-family:var(--f-mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(255,255,255,.68) !important; padding:.5rem 1rem !important;
}
.site-navbar .nav-link:hover, .site-navbar .nav-link.active{ color:#fff !important; }
.site-navbar .nav-link.active{ position:relative; }
.site-navbar .btn-primary{ margin-left:.5rem; }

/* ---------------- section backgrounds ---------------- */
section{ padding:6rem 0; position:relative; }
.section-dark{ background:var(--lss-navy); color:#EAF0F7; }
.section-dark .eyebrow{ color:var(--lss-blue-light); }
.section-dark .eyebrow::before{ background:var(--lss-blue-light); }
.section-dark p{ color:#93A3BC; }
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4{ color:#fff; }
.section-dark .text-strong{ color:#EAF0F7 !important; }

.section-light{ background:#fff; }
.section-alt{ background:var(--lss-light); }

.bg-blueprint{
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:56px 56px;
}
.bg-blueprint-light{
  background-image:
    linear-gradient(rgba(46,127,190,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46,127,190,.07) 1px, transparent 1px);
  background-size:56px 56px;
}

/* ---------------- hero ---------------- */
.hero{ padding:7.5rem 0 5.5rem; overflow:hidden; }
.hero h1{ font-size:clamp(2.4rem,4.6vw,4rem); line-height:1.06; color:#fff; }
.hero h1 em{ font-style:italic; color:var(--lss-blue-light); }
.hero .lead{ color:#93A3BC; font-size:1.05rem; max-width:480px; }
.hero-watermark{
  position:absolute; top:50%; right:-8%; transform:translateY(-50%);
  width:640px; max-width:60vw; opacity:.14; pointer-events:none;
}
.hero-stats{ border-top:1px solid rgba(255,255,255,.12); margin-top:3rem; padding-top:2rem; }
.hero-stats .num{ font-family:var(--f-display); font-size:2rem; color:var(--lss-blue-light); }
.hero-stats .label{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:#93A3BC; }

.page-hero{ padding:6.5rem 0 4rem; }
.page-hero h1{ color:#fff; font-size:clamp(2.1rem,3.8vw,3.2rem); }
.page-hero .lead{ color:#93A3BC; max-width:620px; }

/* ---------------- cards ---------------- */
.svc-card{
  background:#fff; border:1px solid #E4EAF1; border-radius:.4rem; padding:0.1rem 1.8rem 2.1rem 1.8rem; height:100%;
  transition:transform .2s, box-shadow .2s, border-color .2s; position:relative;
}
.svc-card:hover{ transform:translateY(-4px); box-shadow:0 18px 40px -20px rgba(11,30,51,.22); border-color:var(--lss-blue-light); }
.svc-card .tag{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.1em; color:var(--lss-blue); }
.svc-card .icon-wrap{
  width:90px; height:90px; border-radius:.4rem; background:var(--lss-light-2); color:var(--lss-blue);
  display:flex; align-items:center; justify-content:center; margin:1.1rem 0 1.2rem;
}
.svc-card .icon-wrap span{ font-size:52px;}
.svc-card .icon-wrap svg{ width:24px; height:24px; }
.svc-card h3{ font-size:1.2rem; margin-bottom:.6rem; }
.svc-card p{ color:var(--lss-slate); font-size:.92rem; line-height:1.65; }
.svc-card .know-more{ display:inline-flex; align-items:center; gap:8px; margin-top:1.1rem; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--lss-ink); text-decoration:none; }
.svc-card .know-more svg{ width:12px; height:12px; transition:transform .2s; }
.svc-card:hover .know-more svg{ transform:translateX(4px); }
.svc-card .know-more:hover{ color:var(--lss-blue); }

/* accent border-top using logo gradient (blue -> green -> red) on hover, sparingly */
.svc-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px; border-radius:.4rem .4rem 0 0;
  background:linear-gradient(90deg, var(--lss-blue), var(--lss-green) 55%, var(--lss-red));
  transform:scaleX(0); transform-origin:left; transition:transform .3s;
}
.svc-card:hover::before{ transform:scaleX(1); }

/* ---------------- stat strip ---------------- */
.stat-cell{ text-align:center; padding:1.5rem 1rem; border-left:1px solid rgba(255,255,255,.1); }
.stat-cell:first-child{ border-left:none; }
.stat-cell .num{ font-family:var(--f-display); font-size:2.4rem; color:var(--lss-blue-light); }
.stat-cell .label{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:#93A3BC; margin-top:.4rem; }

/* ---------------- badges / logo chips ---------------- */
.chip{
  font-family:var(--f-mono); font-size:.78rem; color:var(--lss-slate);
  border:1px solid #DCE5EE; padding:.65rem 1.1rem; border-radius:.25rem; display:inline-block; background:#fff;
  transition:border-color .2s, color .2s;
}
.chip:hover{ border-color:var(--lss-blue); color:var(--lss-ink); }
.section-dark .chip{ background:transparent; border-color:rgba(255,255,255,.14); color:#93A3BC; }
.section-dark .chip:hover{ border-color:var(--lss-blue-light); color:#fff; }

/* ---------------- CTA band ---------------- */
.cta-band{
  background:linear-gradient(120deg, var(--lss-blue-deep), var(--lss-blue) 60%, #3E93CC);
  border-radius:.5rem; padding:3.4rem; color:#fff; position:relative; overflow:hidden;
}
.cta-band::after{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(circle at 85% 20%, rgba(255,255,255,.18), transparent 55%);
}
.cta-band h2{ color:#fff; }
.cta-band p{ color:rgba(255,255,255,.82); }
.cta-band .btn-light{ --bs-btn-color:var(--lss-navy); font-weight:600; }

/* ---------------- spec rows ---------------- */
.spec-row{ display:flex; gap:2rem; padding:1.9rem 0; border-bottom:1px solid #E4EAF1; }
.section-dark .spec-row{ border-bottom-color:rgba(255,255,255,.1); }
.spec-row .code{ font-family:var(--f-mono); color:var(--lss-blue); font-size:.85rem; width:80px; flex:none; padding-top:.2rem; }
.section-dark .spec-row .code{ color:var(--lss-blue-light); }
.spec-row h4{ font-size:1.15rem; margin-bottom:.4rem; }
.spec-row p{ color:var(--lss-slate); font-size:.92rem; margin-bottom:0; }
.section-dark .spec-row p{ color:#93A3BC; }

/* ---------------- forms ---------------- */
.form-control, .form-select{
  background:#fff; border:1px solid #DCE5EE; border-radius:.3rem; padding:.7rem .9rem; font-size:.92rem;
}
.form-control:focus, .form-select:focus{ border-color:var(--lss-blue); box-shadow:0 0 0 .2rem rgba(46,127,190,.14); }
.form-label{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--lss-slate); margin-bottom:.4rem; }

.contact-card{ background:var(--lss-navy); color:#EAF0F7; border-radius:.5rem; padding:2.6rem; }
.contact-card .office-head{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--lss-blue-light); margin-bottom:.8rem; }
.contact-card p{ color:#93A3BC; font-size:.92rem; line-height:1.75; }
.contact-card a{ color:#EAF0F7; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.18); }
.contact-card a:hover{ color:var(--lss-blue-light); border-color:var(--lss-blue-light); }

/* ---------------- footer ---------------- */
.site-footer{ background:var(--lss-navy); color:#93A3BC; padding:4.5rem 0 2rem; }
.site-footer h6{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--lss-blue-light); margin-bottom:1.1rem; }
.site-footer a{ color:#93A3BC; text-decoration:none; }
.site-footer a:hover{ color:#fff; }
.site-footer p.brand-desc{ color:#8090AB; font-size:.9rem; max-width:280px; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); margin-top:2.5rem; padding-top:1.6rem; font-family:var(--f-mono); font-size:.75rem; color:#5B6B85; }

/* ---------------- reveal ---------------- */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* network diagram accent colors reused from logo */
.node-diagram .hub-ring{ stroke:var(--lss-blue-light); }
.node-diagram .node-dot{ stroke:var(--lss-blue-light); }
.node-diagram .pulse{ stroke:var(--lss-blue-light); }

@media (max-width:991.98px){
  .hero-watermark{ display:none; }
}