/* ============================================================
   PRATHUM SAFETEK — Design System
   Logo Colors:
     Primary Blue  : #4A90C4  (logo background)
     White         : #FFFFFF  (arrows & P)
     Stripe Red    : #E8231A
     Stripe Yellow : #F5C400
     Stripe Green  : #2E8B35
   Extended palette built around these anchors.
   ============================================================ */

:root {
  /* ── Logo-derived palette ── */
  --brand-blue:       #4A90C4;
  --brand-blue-dark:  #2E6A99;
  --brand-blue-deeper:#1A4E75;
  --brand-blue-light: #6AAFD8;
  --brand-blue-dim:   rgba(74,144,196,0.15);

  --stripe-red:       #E8231A;
  --stripe-red-dim:   rgba(232,35,26,0.15);
  --stripe-yellow:    #F5C400;
  --stripe-yellow-dim:rgba(245,196,0,0.15);
  --stripe-green:     #2E8B35;
  --stripe-green-dim: rgba(46,139,53,0.15);

  /* ── Background / surface ── */
  --bg-base:    #0B1E2D;   /* deep navy derived from brand blue */
  --bg-surface: #122335;
  --bg-card:    #172C3E;
  --bg-panel:   #1E3650;

  /* ── Text ── */
  --text-primary: #EEF4FA;
  --text-muted:   rgba(238,244,250,0.60);
  --line:         rgba(74,144,196,0.18);

  /* ── Aliases used in components ── */
  --signal:     var(--brand-blue);
  --fire-color: var(--stripe-red);
  --sec-color:  var(--brand-blue);
  --solar-color:var(--stripe-yellow);

  /* ── Typography ── */
  --font-display: "Space Grotesk", sans-serif;
  --font-body:    "Inter", sans-serif;
  --font-mono:    "JetBrains Mono", monospace;
}

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--brand-blue); color: #fff; }
h1,h2,h3,h4,h5 { font-family: var(--font-display); letter-spacing: -0.01em; }
a { color: var(--brand-blue-light); text-decoration: none; }
a:hover { color: var(--brand-blue); }
:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ── Utility text colors ── */
.text-fire-accent   { color: var(--stripe-red); }
.text-sec-accent    { color: var(--brand-blue-light); }
.text-solar-accent  { color: var(--stripe-yellow); }
.text-green-accent  { color: var(--stripe-green); }

/* ============================================================
   STATUS TICKER
   ============================================================ */
.status-ticker {
  background: #060F18;
  border-bottom: 2px solid var(--brand-blue-dark);
  overflow: hidden;
  white-space: nowrap;
}
.status-ticker__inner {
  display: inline-flex;
  gap: 3rem;
  padding: .45rem 1.5rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .07em;
  animation: ticker 30s linear infinite;
}
@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.status-chip { color: var(--text-muted); display: inline-flex; align-items: center; gap: .5rem; }
.status-chip strong { color: var(--text-primary); }

.dot {
  width: 7px; height: 7px; border-radius: 50%;
  display: inline-block;
  animation: pulse 2s ease-in-out infinite;
}
.dot--fire  { background: var(--stripe-red);    color: var(--stripe-red); }
.dot--sec   { background: var(--brand-blue);     color: var(--brand-blue); }
.dot--solar { background: var(--stripe-yellow);  color: var(--stripe-yellow); }
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 0 currentColor; }
  50%      { box-shadow: 0 0 0 5px transparent; }
}

/* ============================================================
   NAVBAR
   ============================================================ */
    #mainNav{
    background:rgba(11,30,45,.92);
    backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line);
    padding:.8rem 0;
}

#mainNav.is-scrolled{
    padding:.45rem 0;
    box-shadow:0 6px 30px -10px rgba(0,0,0,.6);
}

.header-logo{
    display:flex;
    align-items:center;
}

.navbar-brand{
    display:flex;
    align-items:center;
    gap:.7rem;
    text-decoration:none;
}

.brand-logo{
    width:40px;
    height:40px;
    object-fit:contain;
}

.brand-text{
    font-family:var(--font-display);
    font-weight:700;
    font-size:1.05rem;
    letter-spacing:.04em;
    color:var(--text-primary);
}

.brand-text em{
    color:var(--brand-blue-light);
    font-style:normal;
}

.navbar-nav .nav-link{
    color:var(--text-muted);
    font-weight:500;
    font-size:.92rem;
    padding:.45rem .8rem;
    border-radius:5px;
    transition:.2s;
}

.navbar-nav .nav-link:hover{
    color:var(--text-primary);
    background:var(--brand-blue-dim);
}

.navbar-nav .current-menu-item > .nav-link,
.navbar-nav .current-menu-ancestor > .nav-link{
    color:var(--brand-blue-light);
}

.dropdown-menu{
    background:var(--bg-panel);
    border:1px solid var(--line);
    border-top:2px solid var(--brand-blue);
    border-radius:8px;
    padding:.5rem;
    box-shadow:0 16px 40px -8px rgba(0,0,0,.5);
}

.dropdown-item{
    color:var(--text-muted);
    border-radius:5px;
    padding:.55rem .75rem;
    font-size: 0.92rem;
}

.dropdown-item:hover{
    background:var(--brand-blue-dim);
    color:#fff;
}

.btn-signal{
    background:var(--brand-blue);
    color:#fff;
    border-radius:6px;
    padding:.5rem 1.2rem;
}

.btn-tomn {
  background: var(--brand-blue);
    color: #fff;
    border-radius: 5px;
}
.btn-tomn:hover {
  background: var(--brand-blue-dark);
}
.btn-tomn a{
    color: #fff !important;
}
.ser-topm-fi{
        border-bottom: 1px solid var(--brand-blue-dark);
    padding-bottom: 10px;
}
/* ============================================================
   TRICOLOR STRIPE (logo motif reused as decorative element)
   ============================================================ */
.tricolor-bar {
  height: 4px;
  background: linear-gradient(90deg,
    var(--stripe-red)    0% 33.33%,
    var(--stripe-yellow) 33.33% 66.66%,
    var(--stripe-green)  66.66% 100%);
  border-radius: 2px;
}
.tricolor-bar--full { border-radius: 0; }
.tricolor-bar--sm   { height: 3px; }
.tricolor-bar--lg   { height: 6px; }

/* ============================================================
   TYPOGRAPHY HELPERS
   ============================================================ */
.eyebrow {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .12em;
  color: var(--brand-blue-light);
  margin-bottom: .9rem;
}
.eyebrow--fire  { color: var(--stripe-red); }
.eyebrow--solar { color: var(--stripe-yellow); }
.eyebrow--green { color: var(--stripe-green); }
.eyebrow__bracket { color: var(--text-muted); }

.section__title {
  font-size: clamp(1.75rem, 3vw, 2.6rem);
  font-weight: 700;
  margin-bottom: 1rem;
}
.section__lead {
  color: var(--text-muted);
  font-size: 1.05rem;
  max-width: 640px;
}

/* ============================================================
   SECTIONS
   ============================================================ */
.section { padding: 5.5rem 0; border-bottom: 1px solid var(--line); }
.section--alt { background: var(--bg-surface); }

/* ============================================================
   HERO (home)
   ============================================================ */
.hero {
  position: relative;
  padding: 7rem 0 5rem;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 60% at 75% 0%, rgba(74,144,196,.14), transparent 60%),
    radial-gradient(ellipse 60% 50% at 5%  100%, rgba(46,139,53,.08), transparent 60%),
    var(--bg-base);
}
.hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, black, transparent 80%);
  opacity: .55;
}
.hero__content { position: relative; z-index: 1; }
.hero__title {
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 1.4rem;
}
.hero__title .accent { color: var(--brand-blue-light); }
.hero__lead {
  color: var(--text-muted);
  font-size: 1.1rem;
  max-width: 560px;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.8rem; }

.hero__stats { margin-top: 3rem; }
.stat-num {
  font-family: var(--font-mono);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--brand-blue-light);
  line-height: 1;
}
.stat-num--red    { color: var(--stripe-red); }
.stat-num--yellow { color: var(--stripe-yellow); }
.stat-num--green  { color: var(--stripe-green); }
.stat-label {
  font-size: .78rem;
  color: var(--text-muted);
  margin-top: .3rem;
  font-family: var(--font-mono);
  letter-spacing: .04em;
}

/* ── Panel card (hero) ── */
.panel-card {
  background: linear-gradient(160deg, var(--bg-panel), var(--bg-surface));
  border: 1px solid var(--line);
  border-top: 3px solid var(--brand-blue);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.6);
}
.panel-card__head {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  color: var(--text-muted);
  background: rgba(74,144,196,.07);
  padding: .75rem 1.25rem;
  border-bottom: 1px solid var(--line);
}
.panel-card__live { color: var(--stripe-green); display: inline-flex; align-items: center; gap: .4rem; }
.panel-card__body { padding: .5rem 1.25rem 1.25rem; }
.panel-card__list { list-style: none; padding: 0; margin: 0; }
.panel-card__list li {
  display: flex; align-items: center; gap: .75rem;
  padding: .65rem 0;
  font-size: .92rem;
  border-bottom: 1px dashed var(--line);
}
.panel-card__list li:last-child { border-bottom: none; }
.panel-card__list i { color: var(--brand-blue-light); font-size: 1rem; width: 18px; }
.panel-card__foot {
  font-family: var(--font-mono);
  font-size: .67rem;
  color: var(--text-muted);
  background: rgba(74,144,196,.05);
  padding: .55rem 1.25rem;
  border-top: 1px solid var(--line);
}

.badge-ok {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: .65rem;
  padding: .15rem .5rem;
  border-radius: 3px;
  background: rgba(46,139,53,.18);
  color: var(--stripe-green);
  letter-spacing: .04em;
}

/* ============================================================
   PAGE HEADER (inner pages)
   ============================================================ */
.page-header {
  position: relative;
  padding: 5rem 0 3.5rem;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 60% at 80% 0%, rgba(74,144,196,.14), transparent 60%),
    var(--bg-base);
  border-bottom: 1px solid var(--line);
}
.page-header__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, black, transparent 85%);
  opacity: .4;
}
.page-header__content { position: relative; z-index: 1; }
.page-header__title {
  font-size: clamp(1.9rem, 3.5vw, 3rem);
  font-weight: 700;
  margin-bottom: .8rem;
}
.page-header__lead { color: var(--text-muted); font-size: 1.05rem; max-width: 640px; }

/* Breadcrumb */
.breadcrumb-trail {
  font-family: var(--font-mono);
  font-size: .76rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
  display: flex; align-items: center; gap: .4rem;
}
.breadcrumb-trail a { color: var(--text-muted); }
.breadcrumb-trail a:hover { color: var(--brand-blue-light); }
.breadcrumb-trail .sep { opacity: .4; }
.breadcrumb-trail .current { color: var(--brand-blue-light); }

/* Service sub-nav pills */
.service-subnav { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.service-subnav a {
  font-family: var(--font-mono);
  font-size: .75rem;
  padding: .4rem .9rem;
  border: 1px solid var(--line);
  border-radius: 20px;
  color: var(--text-muted);
  transition: all .15s;
}
.service-subnav a.active { background: var(--brand-blue-dim); border-color: var(--brand-blue); color: var(--brand-blue-light); }
.service-subnav a:hover:not(.active) { border-color: var(--text-muted); color: var(--text-primary); }

/* ============================================================
   CARDS & TILES
   ============================================================ */

/* Diff / about cards */
.diff-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1.4rem;
  height: 100%;
  transition: border-color .2s, transform .2s;
}
.diff-card:hover { border-color: var(--brand-blue); transform: translateY(-3px); }
.diff-card i { font-size: 1.4rem; color: var(--brand-blue-light); }
.diff-card h3 { font-size: 1rem; margin: .7rem 0 .35rem; }
.diff-card p  { font-size: .86rem; color: var(--text-muted); margin: 0; }
.diff-card--wide { display: flex; align-items: flex-start; gap: .9rem; }
.diff-card--wide i { margin-top: .1rem; flex-shrink: 0; }

/* Service tiles (home + services.php) */
.service-tile {
  display: block;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-top: 4px solid var(--brand-blue);
  border-radius: 8px;
  padding: 1.8rem 1.5rem;
  height: 100%;
  transition: transform .2s, border-color .2s, box-shadow .2s;
  color: var(--text-primary);
}
.service-tile:hover {
  transform: translateY(-5px);
  border-color: var(--brand-blue-light);
  box-shadow: 0 16px 40px -12px rgba(74,144,196,.3);
  color: var(--text-primary);
}
.service-tile--fire   { border-top-color: var(--stripe-red); }
.service-tile--solar  { border-top-color: var(--stripe-yellow); }
.service-tile--green  { border-top-color: var(--stripe-green); }
.service-tile i { font-size: 1.8rem; color: var(--brand-blue-light); }
.service-tile--fire i  { color: var(--stripe-red); }
.service-tile--solar i { color: var(--stripe-yellow); }
.service-tile h3 { font-size: 1.05rem; margin: .9rem 0 .5rem; }
.service-tile p  { font-size: .87rem; color: var(--text-muted); margin-bottom: 1rem; }
.service-tile__cta { font-family: var(--font-mono); font-size: .75rem; color: var(--brand-blue-light); }

/* Feature cards (service detail pages) */
.feature-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1.25rem;
  height: 100%;
}
.feature-card i { font-size: 1.35rem; color: var(--stripe-red); }
.feature-card--sec i { color: var(--brand-blue-light); }
.feature-card--solar i { color: var(--stripe-yellow); }
.feature-card h4 { font-size: .95rem; margin: .65rem 0 .4rem; }
.feature-card p  { font-size: .83rem; color: var(--text-muted); margin: 0; }

/* Mini feature list */
.mini-feature-list { display: flex; flex-direction: column; gap: 1rem; }
.mini-feature-list > li { display: flex; gap: .85rem; list-style: none; }
.mini-feature-list i { font-size: 1.2rem; color: var(--brand-blue-light); margin-top: .1rem; flex-shrink: 0; }
.mini-feature-list strong { display: block; font-size: .92rem; }
.mini-feature-list span   { font-size: .83rem; color: var(--text-muted); }

/* Check list */
.check-list { list-style: none; padding: 0; }
.check-list li {
  display: flex; align-items: center; gap: .65rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--line);
  font-size: .97rem;
}
.check-list li:last-child { border-bottom: none; }
.check-list i { color: var(--stripe-green); }

/* ============================================================
   INTEGRATION DIAGRAM (surveillance page)
   ============================================================ */
.integ-diagram {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding: 3rem;
}
.integ-diagram__hub {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100px; height: 100px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 2px solid var(--brand-blue);
  box-shadow: 0 0 0 10px rgba(74,144,196,.08);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: .6rem;
  text-align: center;
  color: var(--brand-blue-light);
  z-index: 2;
}
.integ-diagram__hub i { font-size: 1.3rem; margin-bottom: .3rem; }
.integ-diagram__node {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
  font-size: .84rem;
}
.integ-diagram__node i { font-size: 1.4rem; display: block; margin-bottom: .5rem; }
.integ-diagram__node.n--fire   i { color: var(--stripe-red); }
.integ-diagram__node.n--sec    i { color: var(--brand-blue-light); }
.integ-diagram__node.n--solar  i { color: var(--stripe-yellow); }
.integ-diagram__node.n--auto   i { color: var(--text-muted); }

/* ============================================================
   SOLAR PANEL ART
   ============================================================ */
.solar-art {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.5rem;
}
.solar-art__row { display: grid; grid-template-columns: repeat(6,1fr); gap: .45rem; margin-bottom: .45rem; }
.solar-art__row:last-child { margin-bottom: 0; }
.solar-art__cell {
  aspect-ratio: 1.4;
  background: linear-gradient(135deg, rgba(245,196,0,.18), rgba(245,196,0,.04));
  border: 1px solid rgba(245,196,0,.3);
  border-radius: 3px;
  animation: solar-glint 3s ease-in-out infinite;
}
.solar-art__cell:nth-child(2n)   { animation-delay: .4s; }
.solar-art__cell:nth-child(3n)   { animation-delay: .8s; }
.solar-art__cell:nth-child(4n+1) { animation-delay: 1.2s; }
@keyframes solar-glint {
  0%,100% { box-shadow: none; }
  50%      { box-shadow: 0 0 12px rgba(245,196,0,.35); }
}

/* ============================================================
   PROJECT CARDS
   ============================================================ */
.project-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  height: 100%;
  transition: transform .2s, box-shadow .2s;
}
.project-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px -12px rgba(0,0,0,.4); }
.project-card__tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .06em;
  padding: .35rem 1rem;
}
.project-card__tag--fire  { background: var(--stripe-red-dim);    color: var(--stripe-red); }
.project-card__tag--sec   { background: var(--brand-blue-dim);    color: var(--brand-blue-light); }
.project-card__tag--solar { background: var(--stripe-yellow-dim); color: var(--stripe-yellow); }
.project-card__tag--green { background: var(--stripe-green-dim);  color: var(--stripe-green); }
.project-card__body { padding: 1.2rem 1.4rem 1.4rem; }
.project-card__body h3 { font-size: 1rem; margin-bottom: .5rem; }
.project-card__body p  { font-size: .86rem; color: var(--text-muted); margin: 0; }

/* ============================================================
   SIMPLE CARDS (consultancy / careers)
   ============================================================ */
.simple-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1.5rem;
  height: 100%;
}
.simple-card i { font-size: 1.6rem; color: var(--brand-blue-light); }
.simple-card h3 { font-size: 1.05rem; margin: .8rem 0 .45rem; }
.simple-card p  { font-size: .88rem; color: var(--text-muted); margin: 0; }

/* Job cards */
.job-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand-blue);
  border-radius: 8px;
  padding: 1.3rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  transition: border-color .15s;
}
.job-card:hover { border-left-color: var(--stripe-green); }
.job-card h4 { font-size: 1rem; margin-bottom: .3rem; }
.job-card__meta { font-size: .8rem; color: var(--text-muted); font-family: var(--font-mono); }
.job-card__meta .badge {
  background: var(--brand-blue-dim);
  color: var(--brand-blue-light);
  border-radius: 4px;
  padding: .15rem .5rem;
  font-size: .7rem;
  margin-left: .5rem;
}

/* ============================================================
   CONTACT FORM
   ============================================================ */
.contact-info-list { list-style: none; padding: 0; }
.contact-info-list li {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--line);
  font-size: .96rem;
}
.contact-info-list li:last-child { border-bottom: none; }
.contact-info-list .ci-icon {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 6px;
  background: var(--brand-blue-dim);
  display: flex; align-items: center; justify-content: center;
  color: var(--brand-blue-light);
  font-size: 1rem;
}
.contact-info-list small { color: var(--text-muted); display: block; font-size: .8rem; }

.contact-form label {
  font-size: .82rem;
  color: var(--text-muted);
  margin-bottom: .35rem;
}
.contact-form .form-control,
.contact-form .form-select {
  background: var(--bg-card);
  border: 1px solid var(--line);
  color: var(--text-primary);
  border-radius: 6px;
  padding: .65rem .9rem;
  font-size: .93rem;
}
.contact-form .form-control:focus,
.contact-form .form-select:focus {
  background: var(--bg-card);
  color: var(--text-primary);
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(74,144,196,.2);
}
.contact-form .form-control::placeholder { color: rgba(238,244,250,.3); }
.form-success { color: var(--stripe-green); font-size: .9rem; }

/* ============================================================
   LINK CARDS (projects / consultancy)
   ============================================================ */
.link-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1.8rem;
  height: 100%;
}
.link-card i { font-size: 1.7rem; color: var(--brand-blue-light); }
.link-card h3 { font-size: 1.1rem; margin: .8rem 0 .5rem; }
.link-card p  { font-size: .9rem; color: var(--text-muted); margin-bottom: 1rem; }
.link-card a  { font-family: var(--font-mono); font-size: .78rem; color: var(--brand-blue-light); }
.link-card a:hover { color: var(--brand-blue); }

/* CTA section */
.cta-section {
  background: linear-gradient(135deg, var(--bg-panel), var(--bg-surface));
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 3rem;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: #060F18;
  padding: 4rem 0 0;
  border-top: 1px solid var(--line);
}
.footer-logo { height: 36px; width: 36px; object-fit: contain; border-radius: 5px; }
.footer__about { color: var(--text-muted); font-size: .9rem; max-width: 300px; line-height: 1.6; }
.footer__stripe { width: 80px; }

.footer__heading {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--text-muted);
  margin-bottom: 1rem;
  text-transform: uppercase;
}
.footer__links { margin: 0; }
.footer__links li { margin-bottom: .5rem; }
.footer__links a { color: var(--text-muted); font-size: .88rem; display: flex; align-items: center; gap: .3rem; }
.footer__links a i { font-size: .7rem; color: var(--brand-blue); }
.footer__links a:hover { color: var(--brand-blue-light); }

.footer__contact { margin: 0; }
.footer__contact li {
  display: flex; align-items: flex-start; gap: .6rem;
  margin-bottom: .7rem;
  font-size: .86rem;
  color: var(--text-muted);
}
.footer__contact i { color: var(--brand-blue); margin-top: .15rem; flex-shrink: 0; }
.footer__contact a { color: var(--text-muted); }
.footer__contact a:hover { color: var(--brand-blue-light); }

.footer__bottom { margin-top: 3rem; }
.footer__stripe-bar {
  height: 4px;
  background: linear-gradient(90deg,
    var(--stripe-red)    0% 33.33%,
    var(--stripe-yellow) 33.33% 66.66%,
    var(--stripe-green)  66.66% 100%);
}
.footer__copy { color: var(--text-muted); font-size: .83rem; }

.btn-back-top {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text-muted);
  font-size: .82rem;
  border-radius: 5px;
  padding: .4rem 1rem;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.btn-back-top:hover { border-color: var(--brand-blue); color: var(--brand-blue-light); }

/* ============================================================
   ABOUT PAGE VALUE CARDS with tricolor left-border
   ============================================================ */
.value-card {
  border-left: 4px solid;
  padding: 1.2rem 1.4rem;
  background: var(--bg-card);
  border-radius: 0 8px 8px 0;
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.value-card--red    { border-left-color: var(--stripe-red); }
.value-card--yellow { border-left-color: var(--stripe-yellow); }
.value-card--green  { border-left-color: var(--stripe-green); }
.value-card--blue   { border-left-color: var(--brand-blue); }
.value-card h4 { font-size: 1rem; margin-bottom: .35rem; }
.value-card p  { font-size: .86rem; color: var(--text-muted); margin: 0; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 991.98px) {
  .hero { padding: 5rem 0 3.5rem; }
  .integ-diagram__hub { position: static; transform: none; margin: 0 auto 1rem; }
  .integ-diagram { display: flex; flex-direction: column; align-items: center; }
  .navbar-collapse { margin-top: .5rem; }
  .section { padding: 4rem 0; }
}
@media (max-width: 575.98px) {
  .hero__title { font-size: 1.8rem; }
  .cta-section { padding: 2rem 1.5rem; }
}