/*==============================================================================
STATSCALAR ENTERPRISE - ABOUT US PAGE STYLES
Version: 2.0
Page: About Us (about.blade.php)
Framework: Laravel Blade + Bootstrap
Author: Balagali
Description: Consolidated styling for the About Us page — hero, company
overview, purpose, intelligence solutions, research methodology, trust
reasons, standards, platform video showcase, and closing CTA.

CONSOLIDATION NOTES (please read):
1. `.ss-about-cta-box` was defined THREE separate times across custom.css
   with three different background gradients and three different padding
   values (80px 70px → dark green; 30px → dark navy; plus a third partial
   override). The 30px padding in particular was too tight for a CTA box
   containing a heading, paragraph, two buttons and a 3-column stat grid.
   This file uses the dark navy gradient (consistent with the CTA boxes on
   your data and details pages) with a properly generous padding.
2. `.ss-about-platform` / `.ss-platform-grid` had a second, later block
   ("37. PLATFORM EXPERIENCE") that redefined the grid gap and introduced a
   `.ss-platform-item` component that is NEVER used in the actual blade
   markup (the page only uses `.ss-platform-feature`). That dead block has
   been dropped; only the styles the markup actually uses are kept.
3. CROSS-PAGE COLLISION FOUND: `.ss-trust-item` is used as a bare, unscoped
   class on BOTH this page (2-column "why organizations trust us" reasons,
   with a left accent bar and hover indent) AND on the homepage (3-column
   trust stats under the client-logo strip, plain centered text, no accent
   bar, no hover indent). Because custom.css is one shared file loaded on
   every page, whichever rule appears later in the file was silently
   winning on BOTH pages regardless of which page you were viewing. This
   file scopes the About page's version to `.ss-about-trust .ss-trust-item`
   so it can no longer leak into or be overridden by the homepage's version.
   index-blade.css's homepage version is likewise scoped, to
   `.ss-home .ss-trust-item` -- both sides of this collision are fixed.
4. CROSS-PAGE COLLISION FOUND: `.ss-solution-card` is also defined (bare,
   unscoped) in subscribe-blade.css with a persistent box-shadow this page
   never declared, and that file loads after this one, so every card here
   was showing an unwanted permanent shadow regardless of hover state.
   Scoped to `.ss-about-solutions .ss-solution-card` with an explicit
   box-shadow reset (specificity alone doesn't fix a property only one of
   the two rules ever declares).
==============================================================================*/

/*==============================================================================
01. ABOUT HERO
==============================================================================*/
.ss-about-hero {
  position: relative;
  overflow: hidden;
  padding: 60px 0 40px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbfa 100%);
}

.ss-about-hero::before {
  content: "";
  position: absolute;
  right: -220px;
  top: -180px;
  width: 760px;
  height: 760px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 168, 107, 0.08), transparent 70%);
}

.ss-about-content {
  position: relative;
  z-index: 2;
  padding-right: 50px;
}

.ss-about-content h1 {
  margin: 22px 0;
  font-size: 50px;
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--ss-heading);
}

.ss-about-content h1 span {
  display: block;
  font-size: 40px;
  color: var(--ss-primary);
}

.ss-about-content p {
  margin: 28px 0 34px;
  max-width: 620px;
  font-size: 17px;
  line-height: 1.9;
  color: var(--ss-muted);
}

.ss-about-actions {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

/* Hero Right: Company Panel */
.ss-about-hero .ss-company-panel {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: 42px;
  background: #fff;
  border: 1px solid var(--ss-border);
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.06);
  transition: 0.35s ease;
}

.ss-about-hero .ss-company-panel:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 70px rgba(15, 23, 42, 0.10);
}

.ss-panel-badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(0, 168, 107, 0.08);
  color: var(--ss-primary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ss-company-panel h3 {
  margin: 22px 0 18px;
  font-size: 30px;
  line-height: 1.3;
  color: var(--ss-heading);
}

.ss-company-panel p {
  margin: 0;
  color: var(--ss-muted);
  line-height: 1.8;
}

.ss-company-divider {
  margin: 32px 0;
  height: 1px;
  background: var(--ss-border);
}

.ss-company-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.ss-company-stat {
  text-align: center;
}

.ss-company-stat strong {
  display: block;
  font-size: 34px;
  line-height: 1;
  font-weight: 700;
  color: var(--ss-primary);
  margin-bottom: 10px;
}

.ss-company-stat span {
  display: block;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ss-muted);
}

.ss-company-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--ss-border);
  font-size: 14px;
  font-weight: 600;
  color: var(--ss-heading);
}

.ss-company-footer span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ss-primary);
  flex-shrink: 0;
}

/* Responsive - Hero */
@media (max-width: 991px) {
  .ss-about-hero {
    padding: 80px 0 60px;
  }

  .ss-about-content {
    padding-right: 0;
    text-align: center;
    margin-bottom: 40px;
  }

  .ss-about-content p {
    margin-left: auto;
    margin-right: auto;
  }

  .ss-about-actions {
    justify-content: center;
  }
}

@media (max-width: 767px) {
  .ss-about-content h1 {
    font-size: 38px;
    line-height: 1.2;
  }

  .ss-about-content h1 span {
    font-size: 32px;
  }

  .ss-about-actions {
    display: flex;
    flex-direction: column;
  }

  .ss-about-actions .ss-btn {
    width: 100%;
  }

  .ss-company-stats {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/*==============================================================================
02. WHO WE ARE (Company Overview)
==============================================================================*/
.ss-about-company {
  padding: 64px 0;
  background: #fcfdfb;
}

.ss-company-content {
  max-width: 680px;
}

.ss-company-content h2 {
  margin: 18px 0 24px;
  color: var(--ss-heading);
}

.ss-company-content p {
  margin-bottom: 18px;
  font-size: 17px;
  line-height: 1.9;
  color: var(--ss-muted);
}

/* Right-side panel reuses the shared .ss-panel/.ss-panel-padding foundation;
   only the heading spacing is page-specific */
.ss-about-panel h3 {
  margin: 22px 0 10px;
  font-size: 28px;
  line-height: 1.3;
  color: var(--ss-heading);
}

@media (max-width: 992px) {
  .ss-company-content {
    padding-right: 0;
    margin-bottom: 40px;
    text-align: center;
  }
}

@media (max-width: 768px) {
  .ss-company-content h2 {
    font-size: 32px;
  }
}

/*==============================================================================
03. OUR PURPOSE
==============================================================================*/
.ss-about-purpose {
  padding: 64px 0;
  background: #f8faf8;
}

.ss-purpose-content {
  max-width: 700px;
}

.ss-purpose-content h2 {
  margin: 18px 0 24px;
  color: var(--ss-heading);
}

.ss-purpose-content p {
  margin-bottom: 18px;
  font-size: 17px;
  line-height: 1.9;
  color: var(--ss-muted);
}

.ss-purpose-list {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.ss-purpose-item {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.ss-purpose-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0, 168, 107, 0.08);
  color: var(--ss-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  flex-shrink: 0;
}

.ss-purpose-item h4 {
  margin-bottom: 8px;
  font-size: 20px;
  color: var(--ss-heading);
}

.ss-purpose-item p {
  margin: 0;
  color: var(--ss-muted);
  line-height: 1.75;
}

@media (max-width: 992px) {
  .ss-purpose-content {
    text-align: center;
    margin-bottom: 40px;
    max-width: 100%;
  }
}

/*==============================================================================
04. OUR INTELLIGENCE SOLUTIONS
==============================================================================*/
.ss-about-solutions {
  padding: 64px 0;
  background: #fff;
}

/* .ss-about-solutions prefix (this component's own containing section, same
   pattern already used above for .ss-trust-item): subscribe-blade.css also
   defines a bare .ss-solution-card with a persistent box-shadow this page
   never declared, and loads after this file, so that shadow was leaking
   through on every card here regardless of hover state -- specificity alone
   can't fix a property only one of the two rules ever declares. */
.ss-about-solutions .ss-solution-card {
  position: relative;
  height: 100%;
  padding: 36px;
  background: #fff;
  border: 1px solid var(--ss-border);
  border-radius: 22px;
  overflow: hidden;
  transition: 0.35s ease;
  box-shadow: none;
}

.ss-about-solutions .ss-solution-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--ss-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: 0.35s ease;
}

.ss-about-solutions .ss-solution-card:hover {
  transform: translateY(-8px);
  border-color: rgba(0, 168, 107, 0.25);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
}

.ss-about-solutions .ss-solution-card:hover::before {
  transform: scaleX(1);
}

.ss-solution-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 26px;
}

.ss-solution-number {
  font-size: 46px;
  font-weight: 700;
  color: rgba(0, 168, 107, 0.15);
  line-height: 1;
}

.ss-solution-card h3 {
  margin-bottom: 18px;
  font-size: 22px;
  line-height: 1.35;
  color: var(--ss-heading);
}

.ss-solution-card p {
  margin-bottom: 30px;
  color: var(--ss-muted);
  line-height: 1.85;
}

.ss-solution-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ss-primary);
  text-decoration: none;
  transition: 0.3s ease;
}

.ss-solution-link span {
  transition: 0.3s ease;
}

.ss-solution-card:hover .ss-solution-link span {
  transform: translateX(4px);
}

/*==============================================================================
05. RESEARCH METHODOLOGY
==============================================================================*/
.ss-about-methodology {
  padding: 64px 0;
  background: linear-gradient(180deg, #FCFDFB 0%, #F7FAF8 100%);
}

.ss-methodology-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  margin-top: 70px;
}

.ss-method-card {
  position: relative;
  text-align: center;
}

.ss-method-circle {
  width: 88px;
  height: 88px;
  margin: 0 auto 26px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(0, 168, 107, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  color: var(--ss-primary);
  transition: 0.35s ease;
}

.ss-method-card:hover .ss-method-circle {
  background: var(--ss-primary);
  color: #fff;
  border-color: var(--ss-primary);
  transform: translateY(-6px);
}

.ss-method-card h3 {
  margin-bottom: 16px;
  font-size: 22px;
  color: var(--ss-heading);
}

.ss-method-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ss-muted);
}

.ss-method-arrow {
  position: absolute;
  right: -30px;
  top: 36px;
  font-size: 34px;
  color: rgba(0, 168, 107, 0.25);
  font-weight: 300;
}

.ss-method-note {
  max-width: 760px;
  margin: 50px auto 0;
  padding-top: 40px;
  border-top: 1px solid var(--ss-border);
  text-align: center;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ss-muted);
}

/* Responsive - Methodology */
@media (max-width: 991px) {
  .ss-methodology-flow {
    grid-template-columns: repeat(2, 1fr);
    gap: 50px 30px;
  }

  .ss-method-arrow {
    display: none;
  }
}

@media (max-width: 576px) {
  .ss-methodology-flow {
    grid-template-columns: 1fr;
    gap: 50px;
  }
}

/*==============================================================================
06. WHY ORGANIZATIONS TRUST STATSCALAR
   (scoped to .ss-about-trust to prevent collision with the homepage's
   own bare .ss-trust-item — see consolidation note at top of file)
==============================================================================*/
.ss-about-trust {
  padding: 64px 0;
  background: #fff;
}

.ss-about-trust .ss-trust-item {
  height: 100%;
  padding: 36px;
  border-bottom: 1px solid var(--ss-border);
  transition: 0.35s ease;
}

.ss-about-trust .ss-trust-item:hover {
  padding-left: 46px;
  border-color: var(--ss-primary);
}

.ss-about-trust .ss-trust-item h3 {
  position: relative;
  margin-bottom: 18px;
  padding-left: 18px;
  font-size: 24px;
  color: var(--ss-heading);
}

.ss-about-trust .ss-trust-item h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 4px;
  height: 24px;
  border-radius: 10px;
  background: var(--ss-primary);
}

.ss-about-trust .ss-trust-item p {
  margin: 0;
  line-height: 1.85;
  color: var(--ss-muted);
}

/*==============================================================================
07. OUR STANDARDS
==============================================================================*/
.ss-about-standards {
  padding: 64px 0;
  background: #fcfdfb;
}

.ss-standard-card {
  position: relative;
  height: 100%;
  padding: 42px;
  background: #fff;
  border: 1px solid var(--ss-border);
  border-radius: 22px;
  overflow: hidden;
  transition: 0.35s ease;
}

.ss-standard-card:hover {
  transform: translateY(-8px);
  border-color: rgba(0, 168, 107, 0.20);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
}

.ss-standard-number {
  display: block;
  margin-bottom: 22px;
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  color: rgba(0, 168, 107, 0.12);
}

.ss-standard-card h3 {
  margin-bottom: 18px;
  font-size: 24px;
  color: var(--ss-heading);
}

.ss-standard-card p {
  margin: 0;
  line-height: 1.85;
  color: var(--ss-muted);
}

/*==============================================================================
08. THE STATSCALAR PLATFORM (Video Showcase)
   NOTE: an unused `.ss-platform-item` component and a second conflicting
   `.ss-platform-grid` gap value were dropped here — see consolidation note.
==============================================================================*/
.ss-about-platform {
  padding: 64px 0;
  background: #fff;
}

.ss-platform-video {
  position: relative;
  overflow: hidden;
  border-radius: var(--ss-radius-xl);
  box-shadow: var(--ss-shadow-lg);
}

.ss-platform-video video {
  display: block;
  width: 100%;
  height: auto;
}

.ss-video-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: var(--ss-transition);
}

.ss-video-btn:hover {
  transform: translate(-50%, -50%) scale(1.08);
}

.ss-video-btn img {
  width: 90px;
  height: 90px;
}

.ss-platform-content {
  max-width: 620px;
}

.ss-platform-content h2 {
  margin: 18px 0 24px;
  font-size: 36px;
  line-height: 1.2;
  font-weight: 800;
  color: var(--ss-heading);
}

.ss-platform-content p {
  margin-bottom: 34px;
  font-size: 16px;
  line-height: 1.9;
  color: var(--ss-muted);
}

.ss-platform-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.ss-platform-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--ss-border);
  border-radius: 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ss-heading);
  transition: 0.35s ease;
}

.ss-platform-feature::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ss-primary);
  flex-shrink: 0;
}

.ss-platform-feature:hover {
  border-color: var(--ss-primary);
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
}

/* Responsive - Platform */
@media (max-width: 991px) {
  .ss-platform-content {
    margin-top: 40px;
    text-align: center;
  }

  .ss-platform-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .ss-platform-content h2 {
    font-size: 30px;
  }

  .ss-video-btn img {
    width: 72px;
    height: 72px;
  }

  .ss-platform-video {
    margin-bottom: 30px;
  }
}

/*==============================================================================
09. ABOUT CTA (Closing Call to Action)
   Consolidated from 3 conflicting blocks — see note at top of file.
==============================================================================*/
.ss-about-cta {
  padding: 72px 0;
  background: var(--ss-bg);
}

.ss-about-cta-box {
  position: relative;
  overflow: hidden;
  padding: 70px 60px;
  text-align: center;
  border-radius: var(--ss-radius-xl);
  background: linear-gradient(135deg, #0F172A, #182128);
  box-shadow: var(--ss-shadow-lg);
}

.ss-about-cta-box::before {
  content: "";
  position: absolute;
  right: -180px;
  top: -180px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.08), transparent 70%);
}

.ss-about-cta-box > * {
  position: relative;
  z-index: 2;
}

.ss-about-cta .ss-badge {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.ss-about-cta .ss-badge::before {
  background: #fff;
}

.ss-about-cta h2 {
  margin: 26px auto;
  max-width: 760px;
  font-size: 40px;
  line-height: 1.18;
  font-weight: 800;
  color: #fff;
}

.ss-about-cta p {
  max-width: 760px;
  margin: 0 auto 30px;
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
}

.ss-about-cta-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 50px;
}

.ss-about-cta-actions .ss-btn-light {
  background: #fff;
  color: var(--ss-primary);
}

.ss-about-cta-actions .ss-btn-light:hover {
  background: #f0f9f6;
  transform: translateY(-3px);
}

.ss-about-cta-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.ss-about-cta-stats strong {
  display: block;
  margin-bottom: 8px;
  font-size: 36px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}

.ss-about-cta-stats span {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
}

/* Responsive - CTA */
@media (max-width: 991px) {
  .ss-about-cta {
    padding: 56px 0;
  }

  .ss-about-cta-box {
    padding: 48px 36px;
  }

  .ss-about-cta h2 {
    font-size: 36px;
  }
}

@media (max-width: 767px) {
  .ss-about-cta {
    padding: 44px 0;
  }

  .ss-about-cta-box {
    padding: 45px 24px;
  }

  .ss-about-cta h2 {
    font-size: 28px;
  }

  .ss-about-cta-actions {
    display: flex;
    flex-direction: column;
    margin-bottom: 40px;
  }

  .ss-about-cta-actions .ss-btn {
    width: 100%;
  }

  .ss-about-cta-stats {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-top: 30px;
  }

  .ss-about-cta-stats strong {
    font-size: 28px;
  }
}

/*==============================================================================
10. SHARED RESPONSIVE POLISH (large headings across the page)
==============================================================================*/
@media (max-width: 1200px) {
  .ss-about-content h1 {
    font-size: 44px;
  }

  .ss-company-content h2,
  .ss-purpose-content h2 {
    font-size: 34px;
  }
}

/* These 7 sections shared one flat 110px padding with no responsive tier at
   all before this fix -- scaling them down together here rather than
   duplicating a media query under each section above. */
@media (max-width: 991px) {
  .ss-about-company,
  .ss-about-purpose,
  .ss-about-solutions,
  .ss-about-methodology,
  .ss-about-trust,
  .ss-about-standards,
  .ss-about-platform {
    padding: 52px 0;
  }
}

@media (max-width: 767px) {
  .ss-about-company,
  .ss-about-purpose,
  .ss-about-solutions,
  .ss-about-methodology,
  .ss-about-trust,
  .ss-about-standards,
  .ss-about-platform {
    padding: 40px 0;
  }
}

/*==============================================================================
11. ACCESSIBILITY & UTILITIES
==============================================================================*/
@media (prefers-reduced-motion: reduce) {
  .ss-about-hero .ss-company-panel,
  .ss-solution-card,
  .ss-solution-card::before,
  .ss-solution-link span,
  .ss-method-circle,
  .ss-about-trust .ss-trust-item,
  .ss-standard-card,
  .ss-video-btn,
  .ss-platform-feature,
  .ss-about-cta-actions .ss-btn-light {
    transition: none;
  }

  .ss-about-hero .ss-company-panel:hover,
  .ss-solution-card:hover,
  .ss-method-card:hover .ss-method-circle,
  .ss-standard-card:hover,
  .ss-video-btn:hover,
  .ss-platform-feature:hover,
  .ss-about-cta-actions .ss-btn-light:hover {
    transform: none;
  }
}

.ss-solution-link:focus-visible,
.ss-about-actions .ss-btn:focus-visible,
.ss-about-cta-actions .ss-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 168, 107, 0.18);
}