/* Consolidated extracted styles from about.html & solutions.html
   - Dedupe overlaps and keep consistent variants
   - Loaded after main style.css so it can extend/override where needed
*/

/* Page hero (solutions) */
.page-hero {
    position: relative;
    min-height: 380px;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    padding-top: 6rem;
}
.page-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(15, 23, 42, 0.92), rgba(79, 94, 175, 0.7));
    z-index: 0;
}
.page-hero .container-xxl { position: relative; z-index: 1; }
.page-hero h1 { font-size: clamp(2.25rem, 5vw, 3.25rem); font-weight:800; color:#fff; letter-spacing:-0.02em; margin-bottom:1rem; }
.page-hero p { color:#d1d5db; font-size:1.125rem; max-width:38rem; line-height:1.7; margin-bottom:1.5rem; }

/* Breadcrumb utils used across pages */
.breadcrumb-custom { display:flex; gap:0.5rem; align-items:center; font-size:0.85rem; }
.breadcrumb-custom a { color: rgba(255,255,255,0.7); transition: color .2s ease; }
.breadcrumb-custom a:hover { color:#fff; }
.breadcrumb-custom span { color: var(--brand-orange); font-weight:600; }
.breadcrumb-custom .separator { color: rgba(255,255,255,0.4); }

/* Filter bar (solutions) */
.filter-bar { padding-block:2rem; border-bottom:1px solid #f3f4f6; background:#fff; }
.filter-pills { display:flex; flex-wrap:wrap; gap:0.65rem; justify-content:center; }
.filter-pill { display:inline-block; padding:0.5rem 1.25rem; border-radius:999px; font-size:0.85rem; font-weight:600; border:1px solid #e5e7eb; color:#4b5563; background:#fff; cursor:pointer; transition:all .25s ease; }
.filter-pill:hover, .filter-pill.active { background: var(--brand-indigo); color:#fff; border-color:var(--brand-indigo); }

/* Solutions grid */
.solutions-section { background: linear-gradient(to bottom,#f8fafc,#fff); }
.solution-card { background:#fff; border:1px solid #f3f4f6; border-radius: var(--radius-lg); overflow:hidden; height:100%; transition: all .35s ease; display:flex; flex-direction:column; }
.solution-card:hover { transform: translateY(-0.5rem); box-shadow:0 25px 50px -12px rgba(79,94,175,0.18); border-color: rgba(79,94,175,0.2); }
.solution-card-img { position:relative; overflow:hidden; }
.solution-card-img img { width:100%; height:220px; object-fit:cover; transition: transform .5s ease; }
.solution-card:hover .solution-card-img img { transform: scale(1.05); }
.solution-card-img .solution-icon-badge { position:absolute; bottom:1.25rem; right:1.25rem; width:3.25rem; height:3.25rem; border-radius: var(--radius-md); background:var(--brand-indigo); color:#fff; display:grid; place-items:center; box-shadow:0 8px 20px rgba(79,94,175,0.35); z-index:2; }
.solution-card-body { padding:1.75rem 1.5rem 1.5rem; flex-grow:1; display:flex; flex-direction:column; }
.solution-category-tag { display:inline-block; padding:0.3rem 0.75rem; border-radius:999px; font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:0.85rem; width:fit-content; }
.tag-cloud { background: rgba(59,130,246,0.1); color:#3b82f6; }
.tag-security { background: rgba(239,68,68,0.1); color:#ef4444; }
.tag-infrastructure { background: rgba(16,185,129,0.1); color:#059669; }
.tag-enterprise { background: rgba(139,92,246,0.1); color:#8b5cf6; }
.solution-card-body h3 { font-size:1.2rem; font-weight:700; color:var(--ink-dark); margin-bottom:0.65rem; line-height:1.35; }
.solution-card-body .solution-desc { color:#4b5563; font-size:0.9rem; line-height:1.65; margin-bottom:1rem; }
.solution-features { list-style:none; padding:0; margin:0 0 1.5rem 0; flex-grow:1; }
.solution-features li { color:#374151; font-size:0.85rem; padding:0.35rem 0; display:flex; align-items:center; gap:0.5rem; }
.solution-features li svg { width:1rem; height:1rem; color:var(--brand-indigo); flex-shrink:0; }
.btn-learn-more { display:inline-flex; align-items:center; gap:0.5rem; color:var(--brand-indigo); font-weight:600; font-size:0.9rem; padding:0.6rem 0; border:none; background:none; transition:all .25s ease; }
.btn-learn-more svg { width:1.1rem; height:1.1rem; transition: transform .25s ease; }
.btn-learn-more:hover { color: var(--brand-orange); }
.btn-learn-more:hover svg { transform: translateX(4px); }

/* Consolidated Why-Choose styles (merged from both pages) */
.why-choose-section { background: linear-gradient(135deg, #0f172a 0%, var(--brand-indigo) 50%, #2563eb 100%); color:#fff; position:relative; overflow:hidden; }
.why-choose-section::before { content:""; position:absolute; inset:0; opacity:0.03; background-image: repeating-linear-gradient(45deg,#fff 0,#fff 1px,transparent 0,transparent 50%); background-size:20px 20px; }
.why-choose-card { background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12); backdrop-filter: blur(12px); border-radius: var(--radius-lg); padding:2.25rem; height:100%; transition:all .3s ease; text-align:center; }
.why-choose-card:hover { transform: translateY(-0.375rem); background: rgba(255,255,255,0.15); }
.why-choose-card .icon-chip-light { width:4rem; height:4rem; margin:0 auto 1.5rem; border-radius:50%; background: rgba(255,255,255,0.15); display:grid; place-items:center; color:#fff; }
.why-choose-card .icon-chip-light svg { width:1.75rem; height:1.75rem; }
.why-choose-card h3 { font-size:1.3rem; font-weight:700; margin-bottom:0.75rem; }
.why-choose-card p { opacity:0.85; font-size:0.9rem; margin:0; line-height:1.6; }

/* CTA banner */
.cta-banner { background: linear-gradient(135deg, var(--brand-orange), #e64d00); padding-block:5rem; text-align:center; color:#fff; position:relative; overflow:hidden; }
.cta-banner::before { content:""; position:absolute; inset:0; background: repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0, rgba(255,255,255,0.03) 1px, transparent 0, transparent 50%); background-size:16px 16px; }
.cta-banner h2 { font-size: clamp(1.75rem,4vw,2.5rem); font-weight:800; margin-bottom:1rem; letter-spacing:-0.02em; }
.cta-banner p { font-size:1.1rem; opacity:0.92; max-width:36rem; margin:0 auto 2rem; line-height:1.65; }
.btn-cta-white { display:inline-flex; align-items:center; gap:0.6rem; background:#fff; color:var(--brand-orange); font-weight:700; padding:0.9rem 2rem; border-radius: var(--radius-md); border:none; font-size:1rem; transition:all .3s ease; box-shadow:0 10px 30px rgba(0,0,0,0.15); }
.btn-cta-white:hover { background:var(--ink-dark); color:#fff; transform: translateY(-2px); }
.btn-cta-white svg { width:1.15rem; height:1.15rem; }


/* Utility patterns and responsive tweaks reused */
.pattern-dots { position:absolute; inset:0; background-image: radial-gradient(rgba(79,94,175,0.15) 1px, transparent 1px); background-size:28px 28px; pointer-events:none; }
.pattern-grid { position:absolute; inset:0; background-image: linear-gradient(rgba(79,94,175,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(79,94,175,0.06) 1px, transparent 1px); background-size:40px 40px; pointer-events:none; }

@media (max-width: 991.98px) {
    .ceo-content-col { padding:2rem; }
    .overview-badge { bottom:1rem; right:1rem; }
    .overview-exp-card { left:1rem; top:1rem; }
    .partner-logo-grid { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 767.98px) {
    .about-hero { min-height:auto; padding:7rem 0 3rem; }
    .ceo-photo-wrap { min-height:300px; }
    .ceo-photo-wrap img { min-height:300px; }
    .partner-logo-grid { grid-template-columns: repeat(2,1fr); }
}
/* Headings & badges extracted from inline styles */

.section-head-h2 { font-size: clamp(2rem, 4vw, 2.75rem); font-weight:800; color: var(--ink-dark); letter-spacing: -0.02em; margin-top: 0.5rem; margin-bottom:1rem; line-height:1.2; }
.section-head-h2--small { font-size: clamp(1.8rem, 3.5vw, 2.4rem); margin: 0.75rem 0 1rem; }
.section-head-h2--light { color: #fff; }

.section-badge--muted { background: rgba(79,94,175,0.15); border-color: rgba(79,94,175,0.4); color:#9fa8da; display:inline-block; padding:0.35rem 0.85rem; border-radius:999px; font-weight:700; }
.section-badge--accent { background: rgba(255,84,0,0.12); border-color: rgba(255,84,0,0.3); color: var(--brand-orange); display:inline-block; padding:0.35rem 0.85rem; border-radius:999px; font-weight:700; }

.badge-chip-row { display:flex; gap:0.75rem; flex-wrap:wrap; }

/* z-index helpers */
.z-front-1 { z-index: 1; }
.z-front-2 { z-index: 2; }

/* nav active utility */
.nav-link-item.nav-active { color: var(--brand-indigo); font-weight:700; }

/* ============================================================
   VIEWPORT OPTIMISATION — 1340px display
   ============================================================ */
@media (max-width: 1440px) and (min-width: 992px) {

  /* Page hero */
  .page-hero { min-height: 320px; padding-top: 5rem; }
  .page-hero h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
  .page-hero p { font-size: 1rem; }

  /* Solutions cards */
  .solution-card-img img { height: 185px; }
  .solution-card-body { padding: 1.4rem 1.25rem 1.25rem; }
  .solution-card-body h3 { font-size: 1.05rem; }

  /* Filter bar */
  .filter-bar { padding-block: 1.5rem; }

  /* Why choose (solutions variant) */
  .why-choose-card { padding: 1.75rem 1.5rem; }
  .why-choose-card h3 { font-size: 1.1rem; }
  .why-choose-card .icon-chip-light { width: 3.25rem; height: 3.25rem; }

  /* CTA banner */
  .cta-banner { padding-block: 4rem; }
  .cta-banner h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); }
  .cta-banner p { font-size: 1rem; }
  .btn-cta-white { padding: 0.8rem 1.75rem; font-size: 0.92rem; }
}