/* ==========================================================================
   OKRUTI shared design system
   Used by every page. Page-specific styles stay in each page's own <style>.
   ========================================================================== */

:root { --navy:#05070D; --navy-mid:#0D121C; --navy-card:#131A28; --accent:#D93F8F; --accent2:#5C82D6; --accent3:#FF8A3D; --purple:#A06EFF; --cta-yellow:#F5C518; --text:#EEF1F6; --text-muted:#8992A6; --text-dim:#7A83A5; --border:rgba(255,255,255,0.09); --border-accent:rgba(217,63,143,0.25); --font-display:'Petrona',serif; --font-body:'Rubik',sans-serif; --max:1180px; }

/* Self-hosted variable fonts (latin subset only - this site is English-only)
   - avoids the fonts.googleapis.com -> fonts.gstatic.com request chain.
   Each file covers its full weight range as a single variable font. */
@font-face { font-family:'Petrona'; font-style:normal; font-weight:400 800; font-display:optional; src:url('../assets/fonts/petrona-variable.woff2') format('woff2-variations'), url('../assets/fonts/petrona-variable.woff2') format('woff2'); }
@font-face { font-family:'Rubik'; font-style:normal; font-weight:300 700; font-display:optional; src:url('../assets/fonts/rubik-variable.woff2') format('woff2-variations'), url('../assets/fonts/rubik-variable.woff2') format('woff2'); }
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; scrollbar-gutter:stable; }
body { background:var(--navy); color:var(--text); font-family:var(--font-body); font-size:16px; line-height:1.65; overflow-x:hidden; }
body::before { content:''; position:fixed; inset:0; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"); pointer-events:none; z-index:0; opacity:.5; }
.wrap { max-width:var(--max); margin:0 auto; padding:0 32px; position:relative; z-index:1; }

/* NAV */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(11,17,32,0.85);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}
body { padding-top: 69px; }
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 32px;
}
.logo {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -0.5px;
  display: flex;
  align-items: center;
}
.logo svg { height: 22px; width: auto; display: block; }
.logo span { color: var(--accent); }
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
}
.nav-links a {
  position: relative;
  font-size: 14px;
  font-weight: 400;
  color: var(--text);
  text-decoration: none;
  padding: 6px 14px;
  border-radius: 6px;
  transition: color 0.2s, background 0.2s;
}
.nav-links a:hover { color: var(--accent); background: rgba(255,255,255,0.06); }
.nav-links a.active,
.nav-dropdown > summary.active { color: #fff; background: var(--accent); font-weight: 400; }
.nav-links a.active:hover,
.nav-dropdown > summary.active:hover { color: #fff; background: var(--accent); }
.nav-dropdown { position: relative; }
.nav-dropdown > summary {
  position: relative;
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  font-size: 14px; color: var(--text);
  padding: 6px 14px; border-radius: 6px;
  transition: color 0.2s, background 0.2s;
}
.nav-dropdown > summary::-webkit-details-marker { display: none; }
.nav-dropdown > summary:hover { color: var(--accent); background: rgba(255,255,255,0.06); }
.nav-dropdown > summary::after {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  opacity: 0.6;
  transform: rotate(45deg);
  transition: transform 0.25s ease;
}
.nav-dropdown[open] > summary::after { transform: rotate(225deg); }
.dropdown-panel {
  display: flex; flex-direction: column; gap: 2px; min-width: 260px; padding: 10px;
  background: var(--navy-card); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 20px 50px -20px rgba(0,0,0,0.6);
}
.nav-dropdown > .dropdown-panel > a {
  display: block; padding: 10px 12px; border-radius: 8px; font-size: 13px;
  color: var(--text-muted); text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease;
}
.nav-dropdown > .dropdown-panel > a:hover { background: rgba(217,63,143,0.12); color: var(--accent); }
/* second-level flyout inside a top-level dropdown-panel, e.g. Solutions > Java */
.nav-subdropdown { margin: 0; }
.nav-subdropdown summary {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  list-style: none; cursor: pointer;
  padding: 10px 12px; border-radius: 8px; font-size: 13px; color: var(--text-muted);
  transition: background 0.25s ease, color 0.25s ease;
}
.nav-subdropdown summary::-webkit-details-marker { display: none; }
.nav-subdropdown summary:hover { background: rgba(217,63,143,0.12); color: var(--accent); }
.nav-subdropdown summary::after {
  content: ''; width: 6px; height: 6px; flex-shrink: 0;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  opacity: 0.6; transform: rotate(-45deg); transition: transform 0.25s ease;
}
.nav-subdropdown[open] summary::after { transform: rotate(45deg); }
.subdropdown-panel { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 4px 10px; }
.subdropdown-panel a {
  display: block; padding: 8px 12px; border-radius: 8px; font-size: 12.5px;
  color: var(--text-dim); text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease;
}
.subdropdown-panel a:hover { background: rgba(217,63,143,0.12); color: var(--accent); }
.subdropdown-panel a.subdropdown-view-all {
  color: var(--accent); font-weight: 500;
  border-bottom: 1px solid var(--border); margin-bottom: 4px; padding-bottom: 10px;
}
@media (min-width: 861px) {
  .dropdown-panel { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%); }
  /* second-level menus open sideways to the right, anchored to the top of the
     parent panel (not the triggering row) so long lists like Dynamics 365 stay
     on-screen instead of running past the viewport bottom */
  .subdropdown-panel {
    position: absolute; top: 0; left: calc(100% + 8px);
    min-width: 260px; padding: 10px;
    max-height: min(70vh, 480px); overflow-y: auto; overscroll-behavior: contain;
    background: var(--navy-card); border: 1px solid var(--border); border-radius: 14px;
    box-shadow: 0 20px 50px -20px rgba(0,0,0,0.6);
    z-index: 5;
  }
  .nav-subdropdown[open] summary::after { transform: rotate(-45deg); }
}
@media (max-width: 860px) {
  .nav-dropdown > summary { padding: 14px 10px; box-sizing: border-box; border-bottom: 1px solid var(--border); width: 100%; justify-content: space-between; border-radius: 8px; }
  .nav-dropdown > summary:hover { background: rgba(255,255,255,0.06); }
  .dropdown-panel { border: none; background: none; box-shadow: none; padding: 2px 0 8px 14px; }
  .nav-dropdown > .dropdown-panel > a { padding: 10px 14px; color: var(--text-muted); font-size: 13px; border-radius: 8px; }
  .nav-dropdown > .dropdown-panel > a:hover { background: rgba(217,63,143,0.12); color: var(--accent); }
}
.nav-menu { display: flex; align-items: center; gap: 22px; }
.nav-cta {
  font-size: 13px;
  font-weight: 500;
  background: var(--cta-yellow);
  color: var(--navy);
  padding: 8px 20px;
  border-radius: 6px;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s, transform 0.2s;
}
.nav-cta:hover { opacity: 0.9; transform: translateY(-1px); }
.nav-toggle {
  display: none;
  position: relative; z-index: 160;
  width: 26px; height: 20px; padding: 0; border: none; background: none; cursor: pointer;
  flex-direction: column; justify-content: space-between; align-items: center;
}
.nav-toggle span {
  display: block; width: 100%; height: 2px; border-radius: 2px;
  background: var(--text); transition: transform 0.3s ease, opacity 0.3s ease;
}
nav.nav-open .nav-toggle span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
nav.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
nav.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
.nav-backdrop {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(2,3,8,0.6); backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden; transition: opacity 0.35s ease;
}
nav.nav-open ~ .nav-backdrop { opacity: 1; visibility: visible; }
@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  .nav-menu {
    position: fixed; top: 0; right: 0; z-index: 150;
    height: 100vh; width: min(78vw, 320px);
    flex-direction: column; align-items: flex-start; justify-content: flex-start;
    gap: 6px;
    padding: 96px 28px 40px;
    background: linear-gradient(160deg, var(--navy-card), var(--navy));
    border-left: 1px solid var(--border);
    box-shadow: -30px 0 60px rgba(0,0,0,0.45);
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(.2,.8,.25,1);
    overflow-y: auto;
  }
  nav.nav-open .nav-menu { transform: translateX(0); }
  .nav-links { flex-direction: column; align-items: flex-start; gap: 0; width: 100%; }
  .nav-links li { width: 100%; }
  .nav-links a { display: block; width: 100%; box-sizing: border-box; padding: 14px 10px; border-bottom: 1px solid var(--border); border-radius: 8px; }
  .nav-links a:hover { background: rgba(255,255,255,0.06); color: var(--accent); }
  .nav-cta { margin-top: 22px; width: 100%; text-align: center; }
  .nav-dropdown { width: 100%; }
  .dropdown-panel { width: 100%; min-width: 0; box-sizing: border-box; }
}

/* TYPOGRAPHY & COMMON ELEMENTS */
.breadcrumb { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-dim); padding:14px 0; flex-wrap:wrap; }
.breadcrumb a { color:var(--text-dim); text-decoration:none; }
.breadcrumb a:hover { color:var(--text-muted); }
.section-label { display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:14px; }
.section-label::before { content:''; display:block; width:18px; height:1px; background:var(--accent); }
.hero-badge { display:inline-flex; align-items:center; gap:8px; background:rgba(217,63,143,.1); border:1px solid var(--border-accent); border-radius:100px; padding:5px 14px 5px 8px; margin-bottom:14px; animation:fadeUp .6s ease both; }
.hero-badge-dot { width:8px; height:8px; border-radius:50%; background:var(--accent); animation:pulse 2s ease infinite; }
.hero-badge span { font-size:12px; font-weight:500; color:var(--accent); letter-spacing:.04em; }
@keyframes pulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.6; transform:scale(.85); } }
h1 { font-family:var(--font-display); font-size:clamp(32px,4.5vw,56px); font-weight:800; line-height:1.07; letter-spacing:-1.8px; margin-bottom:22px; }
h2 { font-family:var(--font-display); font-size:clamp(22px,3vw,36px); font-weight:800; line-height:1.12; letter-spacing:-1px; margin-bottom:14px; }
.btn-primary { display:inline-flex; align-items:center; gap:8px; background:var(--accent); color:var(--navy); font-family:var(--font-body); font-size:15px; font-weight:500; padding:13px 26px; border-radius:8px; text-decoration:none; transition:transform .2s,box-shadow .2s; box-shadow:0 0 28px rgba(217,63,143,.2); }
.btn-primary:hover { transform:translateY(-2px); }
.btn-ghost { display:inline-flex; align-items:center; gap:8px; color:var(--text-muted); font-family:var(--font-body); font-size:14px; padding:12px 20px; border-radius:8px; text-decoration:none; border:1px solid var(--border); transition:color .2s,border-color .2s,background .2s; }
.btn-ghost:hover { color:var(--text); border-color:rgba(255,255,255,.18); background:rgba(255,255,255,.04); }
.reveal { opacity:0; transform:translateY(18px); transition:opacity .55s ease,transform .55s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
@keyframes fadeUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }

/* FOOTER */
footer {
  background: var(--navy-mid);
  border-top: 1px solid var(--border);
  padding: 56px 0 32px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 48px;
}
.footer-brand .logo { font-size: 20px; display: flex; margin-bottom: 12px; }
.footer-brand .logo svg { height: 20px; }
.footer-tagline { font-size: 13px; color: var(--text-muted); line-height: 1.65; margin-bottom: 20px; max-width: 280px; }
.footer-contact { font-size: 13px; color: var(--text-muted); display: flex; flex-direction: column; gap: 4px; }
.footer-contact a { color: var(--text-muted); text-decoration: none; transition: color 0.2s; }
.footer-contact a:hover { color: var(--accent); }
.footer-col-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.footer-links a { font-size: 13px; color: var(--text-muted); text-decoration: none; transition: color 0.2s; }
.footer-links a:hover { color: var(--text); }
.footer-bottom {
  padding-top: 24px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-copy { font-size: 12px; color: var(--text-dim); }
.footer-iso { display: flex; gap: 8px; flex-wrap: wrap; }
.iso-badge {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(217,63,143,0.08);
  border: 1px solid rgba(217,63,143,0.15);
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.05em;
}
@media(max-width:900px) { .footer-grid { grid-template-columns:1fr 1fr; } }
@media(max-width:640px) { .footer-grid { grid-template-columns:1fr; } .footer-bottom { flex-direction:column; align-items:flex-start; gap:16px; } }

/* CONTACT FORM SECTION */
.contact-section { padding:80px 0; background:var(--navy-mid); border-top:1px solid var(--border); }
.contact-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:56px; align-items:start; }
.contact-info-item { display:flex; gap:14px; align-items:flex-start; margin-bottom:22px; }
.contact-info-icon { width:38px; height:38px; border-radius:9px; background:rgba(217,63,143,.1); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.contact-info-label { font-size:12px; color:var(--text-muted); margin-bottom:2px; }
.contact-info-val { font-size:14px; color:var(--text); font-weight:500; }
.contact-info-val a { color:var(--text); text-decoration:none; }
.contact-info-val a:hover { color:var(--accent); }
.contact-form { background:var(--navy-card); border:1px solid var(--border); border-radius:16px; padding:36px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.form-field { display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.form-field label { font-size:12.5px; font-weight:500; color:var(--text-muted); }
.form-field input, .form-field textarea, .form-field select {
  background:var(--navy); border:1px solid var(--border); border-radius:8px;
  padding:12px 14px; font-family:var(--font-body); font-size:14px; color:var(--text);
  transition:border-color .2s; outline:none; resize:vertical;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { border-color:var(--border-accent); }
.form-field textarea { min-height:110px; }
.form-submit { display:flex; align-items:center; gap:14px; margin-top:6px; }
.form-note { font-size:12px; color:var(--text-dim); }
.form-success { display:none; align-items:center; gap:10px; padding:14px 16px; background:rgba(73,114,207,.08); border:1px solid rgba(73,114,207,.2); border-radius:8px; font-size:13.5px; color:var(--text); margin-top:16px; }
.form-success.visible { display:flex; }
@media(max-width:900px){ .contact-grid { grid-template-columns:1fr; gap:36px; } .form-row { grid-template-columns:1fr; gap:0; } }
@media(max-width:640px){ .wrap { padding:0 18px; } }

/* CONTACT MODAL - full-height panel sliding in from the right,
   matching the Leadership page's profile drawer pattern */
.modal-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(2,3,8,0.7);
  opacity: 0; visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.modal-overlay.open { opacity: 1; visibility: visible; }
.modal-card {
  position: fixed; top: 0; right: 0;
  height: 100vh; width: 50%;
  background: var(--navy-card);
  border-left: 1px solid var(--border);
  border-radius: 0;
  padding: 44px 40px;
  overflow-y: auto;
  box-shadow: -30px 0 70px -20px rgba(0,0,0,0.65);
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(.65,0,.35,1);
}
.modal-overlay.open .modal-card { transform: translateX(0); }
.modal-close {
  position: absolute; top: 16px; right: 16px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 8px;
  background: transparent; color: var(--text-muted);
  font-size: 20px; line-height: 1; cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.modal-close:hover { color: var(--text); border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.06); }
html.modal-open { overflow: hidden; }
body.modal-open { position: fixed; left: 0; right: 0; overflow: hidden; }
@media(max-width:900px){ .modal-card { width: 70%; } }
@media(max-width:640px){ .modal-card { width: 100%; padding: 32px 24px; } }

/* FAQ */
.faq-section{padding:64px 0 96px;}
.faq-list{display:flex;flex-direction:column;gap:12px;max-width:760px;}
.faq-item{background:var(--navy-card);border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:border-color .25s;}
.faq-item:hover{border-color:var(--border-accent);}
.faq-item summary{list-style:none;cursor:pointer;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-family:var(--font-display);font-size:15px;font-weight:700;color:var(--text);}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:'+';font-size:20px;font-weight:400;color:var(--accent);flex-shrink:0;transition:transform .25s ease;line-height:1;}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-answer{padding:0 24px 20px;font-size:14px;color:var(--text-muted);line-height:1.7;}

.logo-symbol { width:22px; height:auto; display:block; }

/* ==========================================================================
   TAG / BADGE SYSTEM
   Shared, nestable building blocks for the small inline labels scattered
   across the site (stack chips, capability tags, uppercase eyebrow badges,
   micro status badges in architecture diagrams). Compose with one shape
   class plus modifiers rather than writing a new one-off class per page -
   this is the one standard set, adopted directly in markup sitewide.

   Usage:
     <span class="tag tag--xs tag--filled">Spring Boot 3</span>
     <a href="#" class="tag tag--sm tag--outline">Case study</a>
     <span class="badge" style="--badge-bg:rgba(127,217,168,.09);
       --badge-border:rgba(127,217,168,.32);--badge-color:#7FD9A8;">Java</span>
     <span class="micro-badge micro-badge--bordered">v3.3</span>
   ========================================================================== */

/* -- .tag: neutral chip (tech stack pills, capability tags). This is
   the one standard class for every neutral tag/chip on the site -
   old page-specific names (.stack-tag, .icon-card-tag, .sol-tag,
   .cs-tech-tag, .tech-tag, .feat-tech-tag, the literal "tag" class
   scoped under .sc) have all been migrated onto it directly in the
   markup rather than kept as parallel CSS aliases. -- */
.tag {
  display: inline-block;
  border-radius: 4px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
a.tag:hover, .tag.active { color: var(--accent); border-color: var(--border-accent); background: rgba(217,63,143,0.12); }
/* size modifiers */
.tag--xs { font-size: 10px; padding: 2px 8px; }
.tag--sm { font-size: 10.5px; padding: 3px 9px; }
.tag--lg { font-size: 12px; padding: 4px 10px; border-radius: 5px; }
/* fill modifiers */
.tag--filled { background: rgba(255,255,255,0.05); }
.tag--outline { background: transparent; color: var(--text-dim); }
/* tinted variant - color supplied via custom properties on the element */
.tag--tint {
  background: var(--tag-bg, rgba(255,255,255,0.05));
  border-color: var(--tag-border, var(--border));
  color: var(--tag-color, var(--text-muted));
}
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.tag-row--lg { gap: 8px; margin-bottom: 0; }

/* -- .badge: uppercase eyebrow pill (page/case-study category badge).
   .cs-tag and .cs-badge markup has been migrated onto this class
   directly - color is set per instance via --badge-bg/--badge-border/
   --badge-color. -- */
.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 4px 12px;
  border-radius: 4px;
  margin-bottom: 20px;
  background: var(--badge-bg, rgba(217,63,143,0.1));
  border: 1px solid var(--badge-border, var(--border-accent));
  color: var(--badge-color, var(--accent));
  text-decoration: none;
  transition: filter 0.2s, background 0.2s, border-color 0.2s;
}
/* works with any page's custom --badge-* color since it just intensifies
   whatever is already set, rather than hardcoding a hover color */
a.badge:hover { filter: brightness(1.25); border-color: currentColor; }
.badge--tight { margin-bottom: 16px; }

/* -- .micro-badge: small status chip (architecture diagram labels) -- */
.micro-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 3px;
  background: var(--mb-bg, rgba(217,63,143,0.1));
  color: var(--mb-color, var(--accent));
  text-decoration: none;
  transition: filter 0.2s;
}
a.micro-badge:hover { filter: brightness(1.25); }
.micro-badge--bordered { border: 1px solid var(--mb-border, var(--border)); padding: 3px 8px; }
.micro-badge--eyebrow { letter-spacing: 0.07em; text-transform: uppercase; }

/* -- migrated: existing per-page tag classes, centralized here so their
   declarations aren't copy-pasted in every page's own <style> block.
   Kept under their original class names (no markup changes needed).
   A page whose value differs from the dominant one below keeps a small
   local override in its own <style>, which still wins via cascade since
   it loads after this file. -- */
.sc .tag--sm { margin: 0 4px 6px 0; }
.tech-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.tech-pill { display: flex; align-items: center; gap: 7px; padding: 8px 16px; background: var(--navy-card); border: 1px solid var(--border); border-radius: 8px; font-size: 13px; color: var(--text-muted); transition: border-color 0.2s, color 0.2s; }
.tech-pill:hover { border-color: var(--border-accent); color: var(--text); }

/* -- migrated: .page-header, the section wrapper for every solution/
   technology/case-study page hero - identical in 40 of 49 files; the
   other 9 add position:relative + overflow:hidden locally for a glow
   element and keep that as a small override. -- */
.page-header { padding: 20px 0 48px; border-bottom: 1px solid var(--border); }

/* -- migrated: bottom-of-page CTA band, identical across 49 of 50
   files using it. -- */
.cta-section { padding: 72px 0; position: relative; overflow: hidden; }
.cta-bg { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(217,63,143,0.07) 0%, rgba(73,114,207,0.04) 50%, transparent 100%); border-top: 1px solid rgba(217,63,143,0.12); border-bottom: 1px solid rgba(217,63,143,0.12); }
.cta-inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.cta-actions { display: flex; gap: 12px; flex-shrink: 0; flex-wrap: wrap; }

/* -- migrated: .rel-tag (case-study "related" eyebrow, 7 files - color
   is the only per-page override) and .arch-layer-tag + its 4 color
   modifiers (hero architecture-diagram row tags, 2 files, identical). -- */
.rel-tag { font-size: 10px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; padding: 3px 9px; border-radius: 3px; display: inline-block; margin-bottom: 12px; background: rgba(217,63,143,0.1); color: var(--accent); text-decoration: none; transition: background 0.2s, opacity 0.2s; }
a.rel-tag:hover { background: rgba(217,63,143,0.2); opacity: 0.9; }
.arch-layer-tag { font-size: 10px; padding: 2px 8px; border-radius: 3px; font-weight: 600; }
.arch-layer-tag.secure { background: rgba(73,114,207,0.15); color: var(--accent2); }
.arch-layer-tag.ai { background: rgba(160,110,255,0.15); color: var(--purple); }
.arch-layer-tag.fast { background: rgba(217,63,143,0.15); color: var(--accent); }
.arch-layer-tag.comp { background: rgba(255,138,61,0.1); color: var(--accent3); }

/* -- migrated: "results/outcomes" stat card, 12 files - box model
   shared, only accent color (border-left + number color) is
   page-specific. The 5 Java capability pages use a smaller variant
   (20px padding, 28px number) via a local override. -- */
.result-label { font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.result-card { background: var(--navy-card); border: 1px solid var(--border); border-radius: 12px; padding: 22px; transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s; }
.result-card:hover { border-color: var(--border-accent); box-shadow: 0 0 28px rgba(217,63,143,0.15); transform: translateY(-2px); }
.result-num { font-family: var(--font-display); font-weight: 800; line-height: 1; margin-bottom: 7px; font-size: 32px; }

/* whole-card click-through affordance - see [data-card-link] handler in common.js */
[data-card-link] { cursor: pointer; }