.brico-page {
  --ink: #153a30;
  --muted: #62746e;
  --violet: #176c51;
  --violet-bright: #24936f;
  --mint: #d8f0e5;
  --cream: #f3e8d8;
  --sand: #ead6bb;
  background: #fcfaf5;
}

.brico-page .language-switcher button[aria-pressed="true"] { color: #176c51; }
.brico-page .brico-hero { background: #143e33; }
.brico-page .brico-hero .hero-bg { object-position: 60% center; filter: saturate(.82); }
.brico-page .brico-hero .hero-shade { background: linear-gradient(90deg, rgba(15,61,48,.98) 0%, rgba(20,79,61,.94) 48%, rgba(20,62,51,.48) 77%, rgba(14,47,38,.3) 100%); }
.brico-page h1 em { color: #c6f1df; }
.brico-page .eyebrow { color: #c6f1df; }
.brico-page .eyebrow > span:first-child { background: #8de0bd; }
.brico-page .play-mark { color: #176c51; }
.brico-page .hero-phone { width: min(360px, 27vw); }
.brico-page .measure-badge { position: absolute; left: -30%; bottom: 19%; display: grid; gap: 2px; min-width: 148px; padding: 13px 16px; color: #153a30; background: rgba(255,255,255,.96); border-radius: 14px; box-shadow: 0 18px 45px rgba(7,42,31,.24); transform: rotate(-3deg); }
.brico-page .measure-badge b { font: 800 1rem "Manrope", sans-serif; }
.brico-page .measure-badge span { color: #62746e; font-size: .7rem; }

.brico-page .brico-features { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.brico-page .brico-features .feature { min-height: 330px; }
.brico-page .feature-green { color: #fff; background: #176c51; }
.brico-page .feature-sand { background: var(--sand); }
.brico-page .feature-green .feature-icon { background: rgba(255,255,255,.16); }
.brico-page .feature-icon { font-size: 1.5rem; }

.brico-page .showcase { background: #12372d; }
.brico-page .showcase .kicker { color: #9ce5c6; }
.brico-page .showcase li > span:first-child { color: #baf2da; background: #24634f; }
.brico-page .brico-stage { position: relative; height: 720px; align-self: end; }
.brico-page .brico-poster { position: absolute; width: min(520px, 40vw); right: 2%; top: 120px; overflow: hidden; border-radius: 28px; box-shadow: 0 30px 80px rgba(4,29,22,.35); transform: rotate(3deg); }
.brico-page .brico-poster img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.brico-page .brico-screen { position: absolute; z-index: 2; width: min(275px, 22vw); left: 3%; top: 60px; transform: rotate(-5deg); }
.brico-page .proof { background: #f3e8d8; }
.brico-page .download { background: linear-gradient(125deg, #15533f, #278364); }
.brico-page .download-icon { border-radius: 46px; }

@media (max-width: 1100px) {
  .brico-page .brico-features { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .brico-page .brico-hero .hero-bg { object-position: 70% center; }
  .brico-page .brico-hero .hero-shade { background: linear-gradient(180deg, rgba(17,73,55,.99) 0%, rgba(20,82,62,.96) 60%, rgba(20,62,51,.76) 100%); }
  .brico-page .hero-phone { width: 270px; }
  .brico-page .brico-stage { height: 640px; }
  .brico-page .brico-poster { width: 72%; right: 0; top: 140px; }
  .brico-page .brico-screen { width: 245px; left: 2%; top: 45px; }
}

@media (max-width: 560px) {
  .brico-page .brico-features { grid-template-columns: 1fr; }
  .brico-page .brico-features .feature { min-height: 280px; }
  .brico-page .hero-phone { width: 220px; }
  .brico-page .measure-badge { left: -25%; min-width: 126px; padding: 10px 12px; }
  .brico-page .brico-stage { height: 490px; margin-left: -10px; margin-right: -10px; }
  .brico-page .brico-poster { width: 86%; top: 145px; }
  .brico-page .brico-screen { width: 185px; top: 25px; }
}