/* 
=============================================================
|  Tred-Mark Communications | Developed by Javorsky Studio  |
|   Viewing File: ~/public-site/assets/css/pages/about.css  |
| ---  Styling/CSS for `~/public-site/about/index.html  --- |
============================================================= 
*/

.page-about{
  min-height:100vh;
  color:var(--text);

  background:
    linear-gradient(
      180deg,
      rgba(5,8,14,.84) 0%,
      rgba(7,10,18,.91) 42%,
      rgba(7,10,18,.96) 100%
    ),
    linear-gradient(
      120deg,
      rgba(76,183,255,.10) 0%,
      transparent 34%,
      transparent 68%,
      rgba(138,92,255,.10) 100%
    ),
    url("/assets/media/about/page-bg.webp")
      center center / cover
      no-repeat
      fixed;
}

/* =========================================================
   Page Shell + Hero
   ========================================================= */

.about-page{
  padding:clamp(5rem, 9vw, 8rem) var(--space-5) var(--space-6);
}

.about-hero{
  width:min(1180px, 100%);
  margin:0 auto var(--space-5);
  padding:clamp(2.5rem, 6vw, 5rem);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius);
  background:
    linear-gradient(
      135deg,
      rgba(7,10,18,.86),
      rgba(13,28,48,.72)
    );
  box-shadow:0 24px 80px rgba(0,0,0,.34);
}

.about-hero h1{
  margin:0;
  max-width:900px;
  font-size:clamp(2.75rem, 6vw, 5.75rem);
  line-height:.95;
  letter-spacing:-.06em;
  background:linear-gradient(90deg, #fff, #7de3ff 56%, #8a5cff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  padding-bottom:.08em;
}

.about-hero p{
  margin:1.25rem 0 0;
  max-width:780px;
  color:var(--muted);
  font-size:1.1rem;
  line-height:1.75;
}

/* =========================================================
   Shared Section Layout
   ========================================================= */

.about-section,
.about-cta{
  width:min(1180px, 100%);
  margin:0 auto var(--space-5);
}

/* =========================================================
   Four-Card About Layout
   ========================================================= */

.about-content{
  display:grid;
  grid-template-columns:1fr .7fr 1fr;
  gap:var(--space-4);
  align-items:stretch;
}

.about-copy,
.about-highlight-card{
  min-height:0;
  padding:clamp(1.5rem, 3vw, 2.25rem);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius);
  backdrop-filter:blur(14px);
  box-shadow:0 20px 70px rgba(0,0,0,.28);
}

.about-copy{
  grid-column:1 / span 2;
  grid-row:1;
  background:
    linear-gradient(135deg, rgba(8,16,30,.88), rgba(7,10,18,.76)),
    radial-gradient(circle at top left, rgba(125,227,255,.10), transparent 38%);
}

.mission-mini-card{
  grid-column:3;
  grid-row:1;
  background:
    linear-gradient(135deg, rgba(9,18,34,.88), rgba(7,10,18,.78)),
    radial-gradient(circle at top right, rgba(76,183,255,.12), transparent 38%);
}

.vision-mini-card{
  grid-column:1;
  grid-row:2;
  padding:clamp(1.5rem, 3vw, 2.25rem);
  text-align:left;
  background:
    linear-gradient(135deg, rgba(18,16,42,.82), rgba(8,14,26,.82)),
    radial-gradient(circle at top left, rgba(138,92,255,.14), transparent 42%);
}

.capabilities-mini-card{
  grid-column:2 / span 2;
  grid-row:2;
  background:
    linear-gradient(135deg, rgba(8,18,32,.88), rgba(7,10,18,.78)),
    radial-gradient(circle at top right, rgba(47,227,194,.12), transparent 42%);
}

/* =========================================================
   Card Typography
   ========================================================= */

.about-copy h2,
.about-highlight-card h3{
  margin:0 0 1rem;
  font-weight:900;
  letter-spacing:-.04em;
}

.about-copy h2{
  font-size:clamp(2rem, 3.5vw, 3rem);
  background:linear-gradient(90deg, #fff, #7de3ff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.mission-mini-card h3{
  font-size:clamp(1.45rem, 2.2vw, 2rem);
  background:linear-gradient(-90deg, #fff, #4cb7ff 95%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.vision-mini-card h3{
  font-size:clamp(1.45rem, 2.2vw, 2rem);
  background:linear-gradient(90deg, #fff, #8a5cff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.capabilities-mini-card h3{
  font-size:clamp(1.45rem, 2.2vw, 2rem);
  background:linear-gradient(-90deg, #fff 75%, #2fe3c2);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.about-copy p,
.about-highlight-card p{
  margin:0;
  color:var(--muted);
  line-height:1.65;
}

.about-copy p + p{
  margin-top:1rem;
}

.vision-mini-card .eyebrow{
  margin:0 0 1rem;
  color:#7de3ff;
  font-size:.88rem;
  font-weight:850;
  letter-spacing:.08em;
  line-height:1.55;
  text-transform:none;
}

.vision-mini-card p:last-child{
  max-width:none;
  margin:0;
  color:var(--muted);
  line-height:1.65;
}

/* =========================================================
   Compact Capabilities List
   ========================================================= */

.capabilities-mini-card{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.capabilities-mini-card::after{
  content:"";
  position:absolute;
  right:clamp(1rem, 3vw, 2rem);
  bottom:clamp(1rem, 3vw, 2rem);
  width:clamp(140px, 20vw, 260px);
  aspect-ratio:1;
  background:
    radial-gradient(circle at 50% 50%, transparent 52%, currentColor 53% 55%, transparent 56%),
    repeating-conic-gradient(from 15deg, currentColor 0 1deg, transparent 1deg 30deg);
  opacity:.055;
  pointer-events:none;
}

.capabilities-grid{
  margin-top:1.25rem;

  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
}

.capability-item{
  display:flex;
  align-items:center;
  gap:.9rem;

  padding:.75rem 1rem;

  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.05),
      rgba(255,255,255,.02)
    );

  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease;
}

.capability-item:hover{
  transform:translateY(-2px);

  border-color:rgba(125,227,255,.22);

  background:
    linear-gradient(
      135deg,
      rgba(125,227,255,.08),
      rgba(255,255,255,.03)
    );
}

.capability-item img{
  width:22px;
  height:22px;
  flex-shrink:0;

  opacity:.9;
}

.capability-item span{
  color:rgba(244, 226, 245, 0.88);
  font-weight:600;
  line-height:1.2;
}

/* =========================================================
   CTA
   ========================================================= */

.cta-card{
  padding:clamp(2rem, 5vw, 3.25rem);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius);
  background:
    linear-gradient(135deg, rgba(8,18,32,.86), rgba(7,10,18,.76)),
    radial-gradient(circle at right, rgba(76,183,255,.12), transparent 42%);
  box-shadow:0 20px 70px rgba(0,0,0,.28);
}

.cta-card h2{
  margin:0;
  font-size:clamp(2rem, 4vw, 3rem);
  letter-spacing:-.04em;
  background:linear-gradient(90deg, #fff, #7de3ff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.cta-card p{
  max-width:700px;
  margin:1rem 0 2rem;
  color:var(--muted);
}

.cta-actions{
  display:flex;
  gap:1rem;
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width:900px){
  .about-content{
    grid-template-columns:1fr;
  }

  .about-copy,
  .mission-mini-card,
  .vision-mini-card,
  .capabilities-mini-card{
    grid-column:auto;
    grid-row:auto;
  }
}

@media (max-width:640px){
  .about-page{
    padding:6rem 1rem 3rem;
  }

  .about-copy,
  .about-highlight-card,
  .cta-card{
    padding:1.35rem;
  }

  .capabilities-list{
    grid-template-columns:1fr;
  }

  .cta-actions{
    flex-direction:column;
  }
}