/* ============================================================
   MODAL — About page styles
   Hero (dark), then six light sections, mirroring the home-page
   visual language: mono eyebrow with leading rule, large sans
   headline with italic emphasis, restrained body copy.
   ============================================================ */

/* Body baseline override for this page (home uses dark globally) */
.page-about {
  background: var(--color-white);
  color: var(--color-ink);
}

.about-main {
  position: relative;
  z-index: 5;
}

/* Shared section wrap */
.ab-wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 6vw, 6rem);
  box-sizing: border-box;
}

.ab-section {
  position: relative;
  padding: clamp(6rem, 10vw, 10rem) 0;
  background: var(--color-white);
  color: var(--color-ink);
}

/* Subtle hairline between sections */
.ab-section + .ab-section {
  border-top: 1px solid rgba(var(--color-ink-rgb), 0.08);
}

/* ============================================================
   Eyebrow (shared)
   ============================================================ */
.ab-eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(0.72rem, 0.78vw, 0.82rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-green);
  margin: 0 0 var(--space-10) 0;
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
}
.ab-eyebrow::before {
  content: "";
  display: inline-block;
  width: 2.2rem;
  height: 1px;
  background: var(--color-green);
}
.ab-eyebrow--light {
  color: rgba(var(--color-white-rgb), 0.85);
}
.ab-eyebrow--light::before {
  background: rgba(var(--color-white-rgb), 0.85);
}

/* ============================================================
   Headline (shared)
   ============================================================ */
.ab-headline {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(2.4rem, 4.6vw, 5.2rem);
  line-height: 1.05;
  letter-spacing: -0.022em;
  color: var(--color-ink);
  margin: 0 0 clamp(2.5rem, 4vw, 4rem) 0;
  max-width: 22ch;
  text-wrap: balance;
}
.ab-headline em {
  font-family: var(--font-sans);
  font-style: italic;
  font-weight: 500;
  color: var(--color-green);
}

/* Closing line: italic, green */
.ab-closing {
  font-family: var(--font-sans);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.4rem, 2vw, 2rem);
  line-height: 1.3;
  color: var(--color-ink);
  letter-spacing: -0.012em;
  margin: clamp(2.5rem, 4vw, 4rem) 0 0 0;
  max-width: 32ch;
}
.ab-closing em {
  font-style: italic;
  color: var(--color-green);
}

.ab-lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.2vw, 1.2rem);
  line-height: 1.65;
  color: rgba(var(--color-ink-rgb), 0.78);
  max-width: 60ch;
  margin: 0 0 clamp(2.5rem, 4vw, 4rem) 0;
}

/* ============================================================
   SECTION 1 — Hero (green forest stage, scoped to .ab-hero)
   Forest road photograph as the backdrop, dark-green gradient
   tint, white type above. Replaces the previous black/earth
   space stage — reads as "rooted, hopeful, going somewhere".
   ============================================================ */
/* Hero stage — 200vh tall scroll range so the sticky hero pins for
   100vh of scroll while the next section's negative margin pulls it
   up to cover. Without this wrapper, position: sticky on the hero
   would stick through every section below it. */
.ab-hero-stage {
  position: relative;
  height: 200vh;
  z-index: 0;
}
.ab-hero {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 100vh;
  box-sizing: border-box;
  background: var(--color-deep-green);
  color: var(--color-white);
  /* Shared with .pj-hero across About / Team / Projects. The eyebrow +
     headline + sub group is centred vertically so it sits in the middle
     of the 100vh hero rather than clustering at the top and leaving the
     lower half of the image empty. Symmetric padding clears the fixed
     nav and gives top/bottom breathing room. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(6rem, 9vw, 9rem) 0 clamp(5rem, 8vw, 8rem);
  overflow: hidden;
}

/* The first .ab-section after the hero slides up over the sticky
   hero — same overlap pattern as the home page's manifesto over
   the factory video. Z-index keeps it above .ab-hero, negative
   margin-top pulls it into the stage's last 100vh of scroll. */
.ab-section--cover {
  position: relative;
  z-index: 2;
  margin-top: -100vh;
}

/* Layer 0 — deep-green underlay */
.ab-hero-bg {
  position: absolute;
  inset: 0;
  background: var(--color-deep-green);
  z-index: 0;
}

/* Layer 1 — forest road photograph drifting slowly. Higher
   opacity so the trees and the road are clearly visible through
   the vignette. */
.ab-hero-earth {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: max(100%, 100vw);
  height: 100%;
  max-width: none;
  object-fit: cover;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  opacity: 0.95;
  filter: saturate(1.15) contrast(1.05);
  animation: ab-hero-earth-drift 60s linear infinite alternate;
}
@keyframes ab-hero-earth-drift {
  from { transform: translate(calc(-50% - 14px), -50%) scale(1.02); }
  to   { transform: translate(calc(-50% + 14px), calc(-50% - 6px)) scale(1.05); }
}

/* Layer 2 — very light vignette. The forest road / trees do the
   talking; we add just a hint of darkening at the bottom-corners
   so the white headline at the bottom of the hero still reads. */
.ab-hero-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 70% at 50% 140%, transparent 0%, rgba(1, 13, 5, 0.0) 55%, rgba(1, 13, 5, 0.22) 85%, rgba(1, 13, 5, 0.40) 100%),
    radial-gradient(ellipse 70% 50% at 50% 18%, rgba(1, 13, 5, 0.08) 0%, transparent 70%),
    linear-gradient(180deg, rgba(1, 13, 5, 0.05) 0%, transparent 50%, rgba(1, 13, 5, 0.16) 100%);
}

/* Atmospheric mono micro-text — fixed to the viewport so they stay
   visible past the hero. Text colour flips with body[data-nav-theme]
   so they read white on the hero and dark on the white sections. */
.ab-hero-overlay-tl,
.ab-hero-overlay-tr {
  position: fixed;
  top: clamp(1.6rem, 2.2vw, 2.4rem);
  z-index: 30;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(var(--color-white-rgb), 0.62);
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  pointer-events: none;
  transition: color 0.4s ease;
}
body[data-nav-theme="light"] .ab-hero-overlay-tl,
body[data-nav-theme="light"] .ab-hero-overlay-tr {
  color: rgba(var(--color-ink-rgb), 0.55);
}
body[data-nav-theme="light"] .ab-hero-overlay-tr .dash {
  background: rgba(var(--color-ink-rgb), 0.55);
  transition: background 0.4s ease;
}
.ab-hero-overlay-tr .dash {
  transition: background 0.4s ease;
}
.ab-hero-overlay-tl { left: clamp(1.4rem, 2.5vw, 2.4rem); }
.ab-hero-overlay-tr { right: clamp(1.4rem, 2.5vw, 2.4rem); }
.ab-hero-overlay-tl .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #1cd07c;
  box-shadow: 0 0 14px rgba(28, 208, 124, 0.85);
  animation: ab-hero-pulse 2.4s ease-in-out infinite;
}
.ab-hero-overlay-tr .dash {
  width: 1.4rem;
  height: 1px;
  background: rgba(var(--color-white-rgb), 0.6);
}
@keyframes ab-hero-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.15); }
}
@media (max-width: 760px) {
  /* Hide right-side text on mobile, keep the signal indicator on the left */
  .ab-hero-overlay-tr { display: none; }
  .ab-hero-overlay-tl {
    top: 0.55rem;
    left: 1.1rem;
    font-size: 0.55rem;
    letter-spacing: 0.18em;
    gap: 0.4rem;
  }
  .ab-hero-overlay-tl .dot { width: 6px; height: 6px; }
}

/* Content sits above all backdrop layers */
.ab-hero-inner {
  position: relative;
  z-index: 3;
  /* Stretch to the full content column (capped by .ab-wrap's max-width)
     so the wrap doesn't shrink-to-content inside the centred flex hero.
     Without this, a short headline (Team) lets the auto-margined wrap
     collapse to its content width and re-centre, while a long headline
     (About) fills the column — leaving the eyebrow/headline/sub at
     different left edges across pages. */
  width: 100%;
}

.ab-hero-headline {
  font-family: var(--font-sans);
  font-weight: 400;
  /* Slightly reduced from clamp(2.6rem, 5vw, 5.4rem) so the longer
     About headline ("Housing is the largest…") collapses to fewer
     wrap-lines and fits the same vertical envelope as Team's shorter
     headline. Still scales with viewport for narrower screens. */
  font-size: clamp(2.2rem, 4.2vw, 4.4rem);
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--color-white);
  margin: 0 0 clamp(1.5rem, 2.6vw, 2.6rem) 0;
  max-width: 30ch;
  text-wrap: balance;
}
.ab-hero-headline em {
  font-style: italic;
  font-weight: 500;
  color: rgba(var(--color-white-rgb), 0.78);
}

.ab-hero-sub {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(1rem, 1.15vw, 1.2rem);
  line-height: 1.7;
  color: rgba(var(--color-white-rgb), 0.72);
  max-width: 64ch;
  margin: 0;
}
.ab-hero-sub em {
  font-style: italic;
  color: var(--color-white);
}

/* ============================================================
   SECTION 2 — Worldview (numbered points)
   ============================================================ */
.ab-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 5vw, 5rem);
  row-gap: clamp(2.5rem, 4vw, 4rem);
  max-width: 1100px;
}
.ab-points li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: clamp(1rem, 1.6vw, 1.6rem);
}
.ab-point-num {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(0.78rem, 0.9vw, 0.95rem);
  letter-spacing: 0.18em;
  color: var(--color-green);
  white-space: nowrap;
  padding-top: 0.35rem;
}
.ab-points li p {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.3vw, 1.3rem);
  line-height: 1.55;
  color: var(--color-ink);
  margin: 0;
  max-width: 45ch;
}

/* ============================================================
   SECTION 3, 5 — Block grids (shared)
   ============================================================ */
.ab-blocks {
  display: grid;
  gap: clamp(2.5rem, 4vw, 4rem);
}
.ab-blocks--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ab-blocks--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.5rem, 5vw, 5rem);
}

.ab-block {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(var(--color-ink-rgb), 0.18);
}
.ab-block-label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin: 0;
}
.ab-block-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(1rem, 1.1vw, 1.1rem);
  line-height: 1.6;
  color: rgba(var(--color-ink-rgb), 0.78);
  margin: 0;
  max-width: 42ch;
}

/* Inline arrow link */
.ab-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.4rem;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--color-green);
  text-decoration: none;
  transition: opacity .2s ease, gap .2s ease;
  align-self: flex-start;
}
.ab-link:hover { opacity: 0.78; gap: 0.75rem; }
.ab-arrow { display: inline-block; }

/* ============================================================
   SECTION 4 — Future (3 sub-blocks: Factory / Roadmap / Standard)
   ============================================================ */
.ab-future-stack {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}
.ab-sub {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(var(--color-ink-rgb), 0.18);
}
.ab-sub-label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-green);
  margin: 0;
}
.ab-sub-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(1rem, 1.1vw, 1.1rem);
  line-height: 1.6;
  color: rgba(var(--color-ink-rgb), 0.78);
  margin: 0;
  max-width: 42ch;
}
.ab-sub-body--display {
  font-weight: 500;
  font-size: clamp(1.2rem, 1.5vw, 1.5rem);
  line-height: 1.4;
  color: var(--color-ink);
  letter-spacing: -0.012em;
  max-width: none;
}
.ab-sub-meta {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(0.92rem, 1vw, 1rem);
  line-height: 1.55;
  color: rgba(var(--color-ink-rgb), 0.65);
  margin: 0;
  max-width: 38ch;
}

/* Roadmap rows */
.ab-roadmap {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.ab-roadmap li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 1.2rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(var(--color-ink-rgb), 0.10);
}
.ab-roadmap li:last-child { border-bottom: 0; padding-bottom: 0; }
.ab-year {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 1.8vw, 1.8rem);
  letter-spacing: -0.01em;
  color: var(--color-ink);
  line-height: 1;
}
.ab-where {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(1rem, 1.1vw, 1.1rem);
  color: rgba(var(--color-ink-rgb), 0.78);
}

/* ============================================================
   SECTION 6 — CTA
   ============================================================ */
.ab-cta {
  background: var(--color-bg);
  color: var(--color-white);
  border-top: 0;
  padding: clamp(7rem, 12vw, 12rem) 0;
}
.ab-cta-headline {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(2.4rem, 4.6vw, 5rem);
  line-height: 1.05;
  letter-spacing: -0.022em;
  /* Inherits ink from .ab-section. The previous explicit white was
     a stale leftover that rendered the headline as white-on-white
     against the cta section's solid-white background — invisible. */
  color: inherit;
  margin: 0 0 clamp(2.5rem, 4vw, 4rem) 0;
  text-wrap: balance;
}
.ab-cta-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.ab-cta-links li {
  border-top: 1px solid rgba(var(--color-ink-rgb), 0.18);
}
.ab-cta-links li:last-child {
  border-bottom: 1px solid rgba(var(--color-ink-rgb), 0.18);
}
.ab-cta-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.1rem, 1.5vw, 1.5rem) 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(1.2rem, 1.7vw, 1.75rem);
  letter-spacing: -0.012em;
  color: var(--color-ink);
  text-decoration: none;
  transition: padding .25s ease, color .25s ease;
}
.ab-cta-links a:hover {
  color: var(--color-green);
  padding-left: 0.4rem;
}
.ab-cta-links .ab-arrow {
  font-family: var(--font-sans);
  color: rgba(var(--color-ink-rgb), 0.55);
  transition: transform .25s ease, color .25s ease;
}
.ab-cta-links a:hover .ab-arrow {
  color: var(--color-green);
  transform: translateX(0.3rem);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 960px) {
  .ab-blocks--3 { grid-template-columns: 1fr; gap: 2.5rem; }
  .ab-future-stack { grid-template-columns: 1fr; gap: 2.5rem; }
}
@media (max-width: 760px) {
  .ab-points { grid-template-columns: 1fr; }
  .ab-blocks--2 { grid-template-columns: 1fr; gap: 2.5rem; }
  .ab-headline { font-size: clamp(2rem, 9vw, 3rem); }
  .ab-hero-headline { font-size: clamp(2rem, 9vw, 3rem); }
}

/* ============================================================
   Section visuals — feature images placed inside .ab-section.
   All scoped so they don't bleed into adjacent sections.
   ============================================================ */

/* Sketch concept — line-art cross-section of the housing-as-product
   idea. Sits at the bottom of the Worldview section as a literal
   illustration of "What we see". Quantized WebP keeps it light. */
.ab-sketch {
  margin: clamp(3rem, 5vw, 5rem) 0 0;
  text-align: center;
}
.ab-sketch-img {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 1100px;
  height: auto;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.08));
  user-select: none;
  -webkit-user-drag: none;
}

/* Roadmap truck — futuristic MODAL fleet, anchors the "2030 / 2040 /
   2050" roadmap card in the Future section. */
.ab-roadmap-feature {
  margin: 1.5rem 0 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  /* Subtle glow + lift so it reads as a feature, not a placeholder. */
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
}
.ab-roadmap-feature img {
  display: block;
  width: 100%;
  height: auto;
}

/* Tree band — full-width foggy forest that climbs into the CTA
   section above. The image's misty white top blends into the CTA's
   white background invisibly; the green canopy emerges around /
   below the link list, so the link clicks read as if set against
   the forest. line-height: 0 stops the <img>'s baseline gap from
   leaving a sliver of white between trees and footer. */
.ab-tree-band {
  position: relative;
  margin: clamp(-22rem, -22vw, -8rem) calc(50% - 50vw) 0;
  width: 100vw;
  background: transparent;
  line-height: 0;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.ab-tree-band img {
  display: block;
  width: 100%;
  height: auto;
}

/* Factory drone accent — small inline-floated drone next to the
   Factory sub copy in the Future section. */
.ab-factory-drone {
  display: block;
  width: clamp(120px, 14vw, 180px);
  height: auto;
  margin: 1.25rem 0 0 auto;
  filter:
    drop-shadow(0 10px 18px rgba(0, 0, 0, 0.18))
    drop-shadow(0 0 24px rgba(22, 112, 74, 0.08));
  user-select: none;
  -webkit-user-drag: none;
}

/* Standard tree mini-band — small tree silhouette next to the
   "Net positive" pillar in the Future section. */
.ab-standard-trees {
  display: block;
  width: 100%;
  max-width: 540px;
  height: auto;
  margin: 1.5rem 0 0;
  opacity: 0.85;
  user-select: none;
  -webkit-user-drag: none;
}

/* Platform section emblem — slowly-rotating green MODAL mark
   anchored to the top-right of the section. Sits behind the copy
   as quiet brand punctuation. */
.ab-platform {
  position: relative;
  overflow: hidden;
}
.ab-platform-mark {
  position: absolute;
  right: clamp(-4rem, -3vw, -2rem);
  top: clamp(3rem, 6vw, 6rem);
  width: clamp(180px, 22vw, 320px);
  height: auto;
  z-index: 0;
  opacity: 0.18;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  animation: ab-platform-mark-spin 60s linear infinite;
}
.ab-platform .ab-wrap { position: relative; z-index: 1; }
@keyframes ab-platform-mark-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .ab-platform-mark { animation: none; }
}
@media (max-width: 760px) {
  /* Keep the spinning brand mark visible on mobile, shrunk and
     pulled in a touch so it sits as a subtle accent at the top-right
     of the section rather than running off the edge. */
  .ab-platform-mark {
    width: clamp(120px, 38vw, 180px);
    right: clamp(-3rem, -6vw, -1.5rem);
    top: clamp(1.5rem, 4vw, 3rem);
  }
}

/* CTA section — white stage at the top fading to transparent at
   the bottom so the .ab-tree-band below visually overlaps with
   the link list. The link rows sit on solid white; the lower
   ~40% of the section dissolves into the forest behind. */
.ab-cta {
  position: relative;
  z-index: 1;
  /* Smoothed multi-stop fade — many gradient stops eliminate the
     hard "knee" where the previous two-stop gradient transitioned
     from solid white to a fade, which read as a faint horizontal
     banding line where it met the tree band. */
  background:
    linear-gradient(
      to bottom,
      var(--color-white) 0%,
      var(--color-white) 38%,
      rgba(255, 255, 255, 0.95) 50%,
      rgba(255, 255, 255, 0.78) 62%,
      rgba(255, 255, 255, 0.52) 74%,
      rgba(255, 255, 255, 0.25) 86%,
      rgba(255, 255, 255, 0) 100%
    );
  color: var(--color-ink);
  /* Bottom padding capped tighter at ultra-wide so the section
     doesn't grow excessively when 12vw shoots past 14rem — keeps the
     CTA-to-tree-band rhythm comparable to desktop. */
  padding: clamp(2.5rem, 4.5vw, 4.5rem) 0 clamp(7rem, 9vw, 11rem);
}
.ab-cta-headline {
  margin-bottom: clamp(1.5rem, 2.5vw, 2.5rem);
}
.ab-cta-links a {
  padding: clamp(0.85rem, 1.1vw, 1.15rem) 0;
}

/* ============================================================
   Team page hero variant — full-bleed truck-night urban backdrop.
   Lives in about.css because team.html shares the .ab-hero stage.
   ============================================================ */
.ab-hero--team {
  background: #0a0c10;
}
.ab-hero--team .ab-hero-earth {
  opacity: 0.95;
  filter: saturate(1.05) contrast(1.05);
}
/* Very light vignette — just a touch of darkening at the bottom so
   the white headline reads. The truck-night urban photo carries the
   scene; over-darkening washes out the urban detail. */
.ab-hero--team .ab-hero-vignette {
  background:
    radial-gradient(ellipse 90% 65% at 50% 145%, transparent 0%, rgba(0,0,0,0.0) 55%, rgba(0,0,0,0.18) 85%, rgba(0,0,0,0.32) 100%),
    radial-gradient(ellipse 70% 50% at 50% 16%, rgba(0,0,0,0.08) 0%, transparent 65%),
    linear-gradient(180deg, rgba(0,0,0,0.06) 0%, transparent 45%, rgba(0,0,0,0.12) 100%);
}