/* =========================================================================
   DigiDors — About page (about.html)
   Loads after styles.css, portfolio.css and home.css, reusing the dark theme.
   ========================================================================= */

.ab-page .px-hero--compact .px-hero-copy { max-width: 760px; }

/* Intro: who we are */
.ab-intro-copy { display: flex; flex-direction: column; gap: 20px; }
.ab-intro-copy .lead { color: #DCE8FA; font-size: clamp(17px, 1.3vw, 19px); }

/* Why we do it — big statement */
.ab-statement { max-width: 920px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 28px; }
.ab-statement blockquote {
  margin: 0; font-family: var(--font-display); font-size: clamp(24px, 3vw, 40px); font-weight: 700;
  line-height: 1.25; letter-spacing: -0.03em; color: #fff;
}
.ab-statement blockquote .serif { font-size: 1.12em; font-weight: 400; }
.ab-statement > p { max-width: 640px; font-size: 16.5px; }
.ab-statement .ab-mark {
  display: block; font-family: "Instrument Serif", Georgia, serif; font-size: 130px; line-height: 1; margin: -10px 0 -64px;
  background: linear-gradient(135deg, var(--accent-light), var(--px-violet)); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Mission & vision */
.ab-mv { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ab-card {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; gap: 18px; padding: clamp(32px, 4vw, 52px);
  border-radius: 28px; border: 1px solid var(--px-border);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
  transition: transform 400ms var(--ease), border-color 300ms;
}
.ab-card:hover { transform: translateY(-6px); border-color: rgba(124, 200, 255, 0.45); }
.ab-card::before {
  content: ""; position: absolute; z-index: -1; right: -120px; top: -120px; width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(30, 155, 255, 0.35), transparent 65%);
}
.ab-card--vision::before { background: radial-gradient(circle, rgba(109, 91, 255, 0.38), transparent 65%); }
.ab-card .ab-icon {
  width: 56px; height: 56px; padding: 14px; border-radius: 16px; color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--accent)); box-shadow: 0 14px 30px -12px rgba(30, 155, 255, 0.8);
}
.ab-card--vision .ab-icon { background: linear-gradient(135deg, #3B2FB8, var(--px-violet)); box-shadow: 0 14px 30px -12px rgba(109, 91, 255, 0.8); }
.ab-card h3 { font-size: clamp(24px, 2.4vw, 34px); font-weight: 800; line-height: 1.1; letter-spacing: -0.035em; }
.ab-card h3 .serif { font-size: 1.1em; font-weight: 400; }
.ab-card p { font-size: 16px; }
.ab-card strong { color: #fff; }

/* What we believe */
.ab-values { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.ab-value {
  position: relative; display: flex; flex-direction: column; gap: 14px; padding: 30px 24px;
  border-radius: 22px; border: 1px solid var(--px-border); background: rgba(255, 255, 255, 0.035);
  transition: transform 400ms var(--ease), border-color 300ms, background 300ms;
}
.ab-value:hover { transform: translateY(-6px); border-color: rgba(124, 200, 255, 0.45); background: rgba(30, 155, 255, 0.07); }
.ab-value .n { position: absolute; top: 24px; right: 22px; font-family: var(--font-display); font-weight: 800; font-size: 14px; color: #5F7396; }
.ab-value svg {
  width: 52px; height: 52px; padding: 13px; border-radius: 14px; color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--accent)); box-shadow: 0 14px 30px -12px rgba(30, 155, 255, 0.8);
}
.ab-value h3 { font-size: 18px; letter-spacing: -0.02em; }
.ab-value p { font-size: 15px; }

/* Closing */
.ab-page .px-cta h2 { max-width: 900px; }
.ab-tagline { font-family: var(--font-display); font-weight: 700; color: #fff; letter-spacing: -0.01em; }

/* Responsive */
@media (max-width: 1080px) {
  .ab-values { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .ab-mv { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ab-values { grid-template-columns: 1fr; }
}