.about {
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-block: clamp(5rem, 10vw, 10rem);
  overflow: hidden;
  background: var(--color-background);
}

.about__aura {
  position: absolute;
  width: min(45vw, 44rem);
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--color-secondary) 35%, transparent);
  border-radius: 50%;
  pointer-events: none;
}

.about__aura--top {
  top: -26rem;
  right: -16rem;
}

.about__layout {
  display: grid;
  align-items: center;
  gap: clamp(3rem, 8vw, 9rem);
}

.about__content { max-width: 40rem; }

.about__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
  color: var(--color-secondary-strong);
  font-family: var(--font-accent);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.about__eyebrow::before { width: 2.75rem; height: 1px; background: currentColor; content: ""; }

.about__title {
  max-width: 12ch;
  margin: 0;
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: clamp(3rem, 5.5vw, 6.2rem);
  font-weight: 600;
  letter-spacing: -.055em;
  line-height: .92;
}

.about__copy { display: grid; gap: var(--space-4); margin-top: var(--space-6); color: var(--color-text-muted); font-size: var(--font-size-lg); line-height: 1.8; }
.about__copy p { margin: 0; }
.about__cta { margin-top: var(--space-6); }
.about__cta span { font-size: 1.15em; transition: transform var(--transition-default); }
.about__cta:hover span, .about__cta:focus-visible span { transform: translateX(.28rem); }

.about__visual { position: relative; margin: 0; }
.about__visual::before { position: absolute; z-index: 0; inset: 2.5rem -1.8rem -2.3rem 2.4rem; border: 1px solid color-mix(in srgb, var(--color-secondary) 70%, transparent); content: ""; }
.about__image-frame { position: relative; z-index: 1; overflow: hidden; aspect-ratio: .91; background: var(--color-surface); box-shadow: var(--shadow-strong); }
.about__image-frame::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 52%, color-mix(in srgb, var(--color-primary) 30%, transparent)); content: ""; pointer-events: none; }
.about__image-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

.about__experience { position: relative; z-index: 2; display: grid; gap: .35rem; width: min(17rem, 78%); margin: -4rem -1rem 0 auto; padding: 1.25rem 1.4rem; background: var(--color-primary); color: var(--color-surface); box-shadow: var(--shadow-medium); }
.about__experience strong { color: var(--color-secondary); font-family: var(--font-heading); font-size: clamp(2.5rem, 5vw, 4.1rem); font-weight: 600; line-height: .8; letter-spacing: -.06em; }
.about__experience span { max-width: 14ch; font-family: var(--font-accent); font-size: var(--font-size-sm); line-height: 1.15; }

@media (min-width: 768px) { .about__layout { grid-template-columns: minmax(0, .94fr) minmax(20rem, .76fr); } }
@media (max-width: 767.98px) { .about { padding-block: var(--space-8); } .about__content { max-width: 34rem; } .about__visual { width: min(88%, 30rem); margin: 0 0 0 auto; } .about__title { max-width: 11ch; } .about__copy { font-size: var(--font-size-base); } }
@media (prefers-reduced-motion: reduce) { .about__cta span { transition: none; } .about__cta:hover span, .about__cta:focus-visible span { transform: none; } }

.why-choose {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-block: clamp(5rem, 9vw, 9rem);
  background: var(--color-primary);
  color: var(--color-surface);
}

.why-choose__intro { max-width: 44rem; }
.why-choose__intro .about__eyebrow { color: var(--color-secondary); }
.why-choose__title { max-width: 11ch; margin: 0; font-family: var(--font-heading); font-size: clamp(2.7rem, 5vw, 5.5rem); font-weight: 600; letter-spacing: -.05em; line-height: .94; }
.why-choose__grid { display: grid; gap: var(--space-4); margin-top: clamp(3rem, 6vw, 5rem); }
.why-choose__card { position: relative; display: flex; min-height: 100%; flex-direction: column; padding: clamp(1.75rem, 3vw, 2.5rem); overflow: hidden; border: 1px solid color-mix(in srgb, var(--color-surface) 18%, transparent); background: color-mix(in srgb, var(--color-surface) 5%, transparent); transition: transform var(--transition-default), background-color var(--transition-default), border-color var(--transition-default), box-shadow var(--transition-default); }
.why-choose__card::after { position: absolute; inset: auto 0 0; height: .18rem; background: var(--color-secondary); content: ""; transform: scaleX(0); transform-origin: left; transition: transform var(--transition-default); }
.why-choose__icon { display: grid; width: 3.1rem; height: 3.1rem; place-items: center; border: 1px solid color-mix(in srgb, var(--color-secondary) 70%, transparent); border-radius: 50%; color: var(--color-secondary); transition: transform var(--transition-default), background-color var(--transition-default), color var(--transition-default); }
.why-choose__icon svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.why-choose__card h3 { margin: var(--space-5) 0 var(--space-3); font-family: var(--font-heading); font-size: clamp(1.55rem, 2vw, 2rem); font-weight: 600; line-height: 1.1; }
.why-choose__card p { margin: 0; color: color-mix(in srgb, var(--color-surface) 72%, transparent); line-height: 1.75; }
.why-choose__card:hover, .why-choose__card:focus-within { border-color: color-mix(in srgb, var(--color-secondary) 72%, transparent); background: color-mix(in srgb, var(--color-surface) 10%, transparent); box-shadow: 0 1.6rem 3rem color-mix(in srgb, var(--color-primary-strong) 35%, transparent); transform: translateY(-.5rem); }
.why-choose__card:hover::after, .why-choose__card:focus-within::after { transform: scaleX(1); }
.why-choose__card:hover .why-choose__icon, .why-choose__card:focus-within .why-choose__icon { background: var(--color-secondary); color: var(--color-primary); transform: rotate(-7deg) scale(1.08); }

@media (min-width: 640px) { .why-choose__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; } }
@media (min-width: 1100px) { .why-choose__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .why-choose__card, .why-choose__card::after, .why-choose__icon { transition: none; } .why-choose__card:hover, .why-choose__card:focus-within, .why-choose__card:hover .why-choose__icon, .why-choose__card:focus-within .why-choose__icon { transform: none; } }

.about-statistics { width: 100vw; margin-inline: calc(50% - 50vw); padding-block: clamp(5rem, 9vw, 9rem); background: var(--color-surface); }
.about-statistics__intro { max-width: 38rem; text-align: center; margin-inline: auto; }
.about-statistics__intro .about__eyebrow { justify-content: center; }
.about-statistics__title { margin: 0; color: var(--color-primary); font-family: var(--font-heading); font-size: clamp(2.7rem, 5vw, 5.5rem); font-weight: 600; letter-spacing: -.05em; line-height: .94; }
.about-statistics__grid { display: grid; gap: var(--space-4); margin-top: clamp(3rem, 6vw, 5rem); perspective: 1200px; }
.about-statistics__item { position: relative; display: grid; place-items: center; min-height: 14rem; padding: var(--space-5); overflow: hidden; text-align: center; border: 1px solid color-mix(in srgb, var(--color-primary) 13%, transparent); background: var(--color-background); box-shadow: var(--shadow-soft); transform-style: preserve-3d; transition: transform 480ms cubic-bezier(.16, 1, .3, 1), box-shadow 480ms cubic-bezier(.16, 1, .3, 1), border-color 480ms ease; will-change: transform; }
.about-statistics__item::before { position: absolute; inset: 0; background: linear-gradient(135deg, color-mix(in srgb, var(--color-secondary) 15%, transparent), transparent 46%); content: ""; opacity: .6; transform: translateZ(1px); pointer-events: none; }
.about-statistics__item:hover { border-color: color-mix(in srgb, var(--color-secondary) 55%, transparent); box-shadow: var(--shadow-strong); transform: translateY(-.55rem) translateZ(1.8rem); }
.about-statistics__icon { display: grid; width: 3rem; height: 3rem; place-items: center; border: 1px solid color-mix(in srgb, var(--color-secondary) 70%, transparent); border-radius: 50%; color: var(--color-secondary-strong); transform: translateZ(2.5rem); }
.about-statistics__icon svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.about-statistics__value { margin: var(--space-4) 0 var(--space-2); color: var(--color-primary); font-family: var(--font-heading); font-size: clamp(3.2rem, 5vw, 5rem); font-weight: 600; letter-spacing: -.06em; line-height: .8; transform: translateZ(3rem); }
.about-statistics__label { margin: 0; color: var(--color-text-muted); font-family: var(--font-accent); font-size: var(--font-size-sm); font-weight: 600; transform: translateZ(2rem); }
@media (min-width: 600px) { .about-statistics__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .about-statistics__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .about-statistics__item { transition: none; } .about-statistics__item:hover { transform: none; } }
