/* ==========================================================================
   Avarida Group — Home / shared section styles
   Reproduces routes/index.tsx and its components.
   Spacing follows the Tailwind scale used in the source (py-20 = 5rem, etc).
   ========================================================================== */

/* Header is fixed, so page content starts below it. */
.avarida-main {
  min-height: 100vh;
  /* Contain any inner horizontal-scroll widget (e.g. the CRM board) so the
     page itself never scrolls sideways. `clip` (not `hidden`) keeps the
     portfolio page's sticky filter working. */
  overflow-x: clip;
}

/* --------------------------------------------------------------------------
   Section shells
   -------------------------------------------------------------------------- */

.avarida-section {
  margin-inline: auto;
  max-width: var(--avarida-container);
  padding: 5rem 1.25rem;          /* py-20 px-5 */
}

@media (min-width: 1024px) {
  .avarida-section { padding-inline: 2rem; }
}

.avarida-section--trust { padding-block: 3rem; }   /* py-12 */
.avarida-section--narrow { max-width: 56rem; }     /* max-w-4xl */

.avarida-band {
  background: var(--lavender-soft);
  border-block: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
}

.avarida-center { margin-top: 2rem; text-align: center; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.avarida-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  padding: 0.875rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: box-shadow 280ms, color 150ms, border-color 150ms, background-color 150ms;
  white-space: nowrap;
}

.avarida-btn svg { height: 1rem; width: 1rem; flex: none; }

.avarida-btn--primary {
  background: var(--gradient-primary);
  color: var(--primary-foreground);
  box-shadow: var(--shadow-elegant);
}

.avarida-btn--primary:hover { box-shadow: var(--shadow-glow); }

.avarida-btn--outline {
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--ink);
}

.avarida-btn--outline:hover { border-color: var(--primary); color: var(--primary); }

.avarida-btn--onlight {
  background: var(--background);
  color: var(--primary);
}

.avarida-btn--onlight:hover { background: var(--lavender-soft); }

.avarida-btn--ghost {
  border: 1px solid color-mix(in oklab, var(--primary-foreground) 40%, transparent);
  color: var(--primary-foreground);
}

.avarida-btn--ghost:hover { background: color-mix(in oklab, var(--primary-foreground) 10%, transparent); }

/* --------------------------------------------------------------------------
   Section heading — SectionHeading.tsx
   -------------------------------------------------------------------------- */

.avarida-heading { max-width: 48rem; }                       /* max-w-3xl */
.avarida-heading--center { margin-inline: auto; text-align: center; }

.avarida-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  background: color-mix(in oklab, var(--accent) 70%, transparent);
  color: var(--primary);
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.avarida-eyebrow__dot {
  height: 0.375rem;
  width: 0.375rem;
  border-radius: 9999px;
  background: var(--primary);
}

.avarida-heading__title {
  margin-top: 1rem;
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.1;
}

@media (min-width: 640px) { .avarida-heading__title { font-size: 2.25rem; } }
@media (min-width: 1024px) { .avarida-heading__title { font-size: 3rem; } }

.avarida-heading__sub {
  margin-top: 1rem;
  font-size: 1rem;
  color: var(--muted-foreground);
  line-height: 1.625;
}

@media (min-width: 640px) { .avarida-heading__sub { font-size: 1.125rem; } }

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */

.avarida-hero {
  position: relative;
  overflow: hidden;
  padding-top: 8rem;      /* pt-32 */
  padding-bottom: 5rem;   /* pb-20 */
}

@media (min-width: 1024px) {
  .avarida-hero { padding-top: 10rem; padding-bottom: 7rem; }
}

.avarida-hero__blobs {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.avarida-hero__blob { position: absolute; border-radius: 9999px; }

.avarida-hero__blob--1 {
  top: -8rem;
  left: 33.333%;
  height: 520px;
  width: 520px;
  background: color-mix(in oklab, var(--primary) 15%, transparent);
  filter: blur(120px);
}

.avarida-hero__blob--2 {
  top: 10rem;
  right: -8rem;
  height: 420px;
  width: 420px;
  background: color-mix(in oklab, var(--primary-glow) 25%, transparent);
  filter: blur(120px);
}

.avarida-hero__blob--wash {
  inset-inline: 0;
  top: 0;
  height: 60vh;
  border-radius: 0;
  background: linear-gradient(to bottom, var(--lavender-soft), transparent);
}

.avarida-hero__inner {
  margin-inline: auto;
  max-width: var(--avarida-container);
  padding-inline: 1.25rem;
  display: grid;
  gap: 3.5rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .avarida-hero__inner {
    padding-inline: 2rem;
    grid-template-columns: 1.05fr 1fr;
  }
}

.avarida-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  padding: 0.375rem 0.875rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary);
}

.avarida-hero__badge svg { height: 0.875rem; width: 0.875rem; }

.avarida-hero__title {
  margin-top: 1.25rem;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
}

@media (min-width: 640px) { .avarida-hero__title { font-size: 3rem; } }
@media (min-width: 1024px) { .avarida-hero__title { font-size: 64px; } }

.avarida-hero__lede {
  margin-top: 1.5rem;
  max-width: 36rem;
  font-size: 1rem;
  color: var(--muted-foreground);
  line-height: 1.625;
}

@media (min-width: 640px) { .avarida-hero__lede { font-size: 1.125rem; } }

.avarida-hero__actions {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.avarida-hero__stats {
  margin-top: 2.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.avarida-hero__stats p { margin: 0; }

.avarida-hero__stat-n {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
}

.avarida-hero__stat-rule { height: 2.5rem; width: 1px; background: var(--border); }

/* --------------------------------------------------------------------------
   Hero dashboard mockup
   -------------------------------------------------------------------------- */

.avarida-hero__dash { position: relative; }

.avarida-hero__dash-glow {
  position: absolute;
  inset: -1.5rem;
  background: var(--gradient-primary);
  opacity: 0.25;
  filter: blur(48px);
  border-radius: 9999px;
}

.avarida-browser {
  position: relative;
  border-radius: 1.5rem;
  background: var(--background);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-elegant);
  overflow: hidden;
}

.avarida-browser__bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  background: var(--lavender-soft);
  border-bottom: 1px solid var(--border);
}

.avarida-browser__dots { display: flex; gap: 0.375rem; }

.avarida-browser__dots span {
  height: 0.625rem;
  width: 0.625rem;
  border-radius: 9999px;
  display: block;
}

.avarida-browser__url {
  margin-left: 0.75rem;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 0.375rem;
  background: var(--background);
  border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.avarida-dash__body { padding: 1.25rem; display: flex; flex-direction: column; gap: 1.25rem; }

.avarida-dash__head { display: flex; align-items: center; justify-content: space-between; }
.avarida-dash__head p { margin: 0; }

.avarida-dash__muted { font-size: 0.75rem; color: var(--muted-foreground); }

.avarida-dash__big { font-size: 1.5rem; font-weight: 700; color: var(--ink); }

.avarida-dash__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 9999px;
  background: var(--accent);
  color: var(--primary);
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.avarida-dash__pill svg { height: 0.875rem; width: 0.875rem; }

/* Sparkline */
.avarida-spark {
  border-radius: 1rem;
  background: linear-gradient(to bottom right, var(--lavender-soft), var(--background));
  border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  padding: 1rem;
}

.avarida-spark__bars { display: flex; align-items: flex-end; gap: 0.375rem; height: 7rem; }

.avarida-spark__bar {
  flex: 1;
  border-radius: 0.25rem 0.25rem 0 0;
  background: linear-gradient(to top, var(--primary), var(--primary-glow));
}

.avarida-spark__axis {
  margin-top: 0.5rem;
  display: flex;
  justify-content: space-between;
  font-size: 0.625rem;
  color: var(--muted-foreground);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.avarida-dash__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }

.avarida-ministat {
  border-radius: 0.75rem;
  background: var(--lavender-soft);
  border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  padding: 0.75rem;
}

.avarida-ministat p { margin: 0; }

.avarida-ministat__l {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
  font-weight: 600;
}

.avarida-ministat__v {
  margin-top: 0.25rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}

/* Floating cards — hidden below md, matching `hidden md:flex` */
.avarida-float {
  position: absolute;
  display: none;
  align-items: center;
  gap: 0.75rem;
  border-radius: 1rem;
  box-shadow: var(--shadow-elegant);
  padding: 0.625rem 0.875rem;
  z-index: 2;
}

@media (min-width: 768px) { .avarida-float { display: flex; } }

.avarida-float p { margin: 0; }

.avarida-float__icon {
  display: flex;
  height: 2.25rem;
  width: 2.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  background: var(--gradient-primary);
  color: var(--primary-foreground);
  flex: none;
}

.avarida-float__icon svg { height: 1rem; width: 1rem; }

.avarida-float__t {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
  font-weight: 600;
}

.avarida-float__v { font-size: 0.875rem; font-weight: 700; color: var(--ink); }

.avarida-float--tl { left: -1.5rem; top: -1rem; }
.avarida-float--tr { right: -1.5rem; top: 33.333%; }
.avarida-float--bl { left: -1rem; bottom: 2.5rem; }
.avarida-float--br { right: -1rem; bottom: -1rem; }

/* --------------------------------------------------------------------------
   Trust bar / metric cards
   -------------------------------------------------------------------------- */

.avarida-trust__lead {
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
  margin: 0;
}

.avarida-trust__grid { margin-top: 2rem; display: grid; gap: 1rem; }

@media (min-width: 640px) { .avarida-trust__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .avarida-trust__grid { grid-template-columns: repeat(4, 1fr); } }

.avarida-metric {
  position: relative;
  border-radius: 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  padding: 1.5rem;
  overflow: hidden;
}

.avarida-metric__blob,
.avarida-service__blob,
.avarida-gsc__blob {
  position: absolute;
  border-radius: 9999px;
  background: color-mix(in oklab, var(--primary) 10%, transparent);
  pointer-events: none;
}

.avarida-metric__blob { top: -3rem; right: -3rem; height: 8rem; width: 8rem; filter: blur(32px); }

.avarida-metric__top { position: relative; display: flex; align-items: center; gap: 0.75rem; }

.avarida-metric__icon {
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  background: var(--accent);
  color: var(--primary);
  flex: none;
}

.avarida-metric__icon svg { height: 1.25rem; width: 1.25rem; }

.avarida-metric__label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
  font-weight: 600;
  margin: 0;
}

.avarida-metric__value {
  position: relative;
  margin: 1rem 0 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--ink);
}

@media (min-width: 640px) { .avarida-metric__value { font-size: 2.25rem; } }

/* --------------------------------------------------------------------------
   Service cards
   -------------------------------------------------------------------------- */

.avarida-services__grid { margin-top: 3.5rem; display: grid; gap: 1.5rem; }

@media (min-width: 768px) { .avarida-services__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .avarida-services__grid { grid-template-columns: repeat(4, 1fr); } }

.avarida-service {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 1.5rem;
  border: 1px solid var(--border);
  background: var(--card);
  padding: 1.75rem;
  overflow: hidden;
}

@media (min-width: 1024px) { .avarida-service { padding: 2.25rem; } }

.avarida-service__blob { top: -5rem; right: -5rem; height: 12rem; width: 12rem; filter: blur(48px); }

.avarida-service__top { position: relative; display: flex; align-items: center; gap: 0.75rem; }

.avarida-service__icon {
  display: flex;
  height: 3rem;
  width: 3rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  background: var(--gradient-primary);
  color: var(--primary-foreground);
  box-shadow: var(--shadow-elegant);
  flex: none;
}

.avarida-service__icon svg { height: 1.5rem; width: 1.5rem; }

.avarida-service__index {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--primary);
}

.avarida-service__title {
  position: relative;
  margin-top: 1.25rem;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
}

.avarida-service__desc {
  position: relative;
  margin-top: 0.75rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
  line-height: 1.625;
}

.avarida-service__list {
  position: relative;
  margin-top: 1.5rem;
  margin-bottom: 2rem;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 0.5rem;
  column-gap: 1rem;
  list-style: none;
  padding: 0;
}

@media (min-width: 640px) { .avarida-service__list { grid-template-columns: repeat(2, 1fr); } }

.avarida-service__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--ink);
}

.avarida-service__list svg {
  margin-top: 0.125rem;
  height: 1rem;
  width: 1rem;
  color: var(--primary);
  flex: none;
  stroke-width: 3;
}

.avarida-service__cta {
  position: relative;
  margin-top: auto;
  display: inline-flex;
  width: 100%;
  height: 3.75rem;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 9999px;
  background: var(--ink);
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  color: var(--background);
  text-decoration: none;
  transition: background-color 150ms;
}

.avarida-service__cta:hover { background: var(--primary); }
.avarida-service__cta svg { height: 1rem; width: 1rem; }

/* --------------------------------------------------------------------------
   Portfolio
   -------------------------------------------------------------------------- */

.avarida-band__head {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .avarida-band__head { flex-direction: row; align-items: flex-end; }
}

.avarida-portfolio__grid { margin-top: 3rem; display: grid; gap: 2rem; }

@media (min-width: 768px) { .avarida-portfolio__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .avarida-portfolio__grid { grid-template-columns: repeat(3, 1fr); } }

.avarida-pcard { display: flex; flex-direction: column; gap: 1rem; }

.avarida-pcard__browser {
  border-radius: 1rem;
  transition: box-shadow 280ms;
}

.avarida-pcard:hover .avarida-pcard__browser {
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--primary) 40%, transparent), var(--shadow-elegant);
}

/* 16/10 preview, iframe rendered at 200% and scaled to 50% */
.avarida-pcard__frame {
  position: relative;
  aspect-ratio: 16 / 10;
  width: 100%;
  background: var(--lavender-soft);
  overflow: hidden;
}

.avarida-pcard__frame iframe {
  position: absolute;
  inset: 0;
  height: 200%;
  width: 200%;
  transform: scale(0.5);
  transform-origin: top left;
  border: 0;
  pointer-events: none;
}

.avarida-pcard__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.25rem;
  text-align: center;
  color: var(--ink);
  background:
    linear-gradient(135deg, color-mix(in oklab, var(--primary) 10%, transparent), transparent),
    var(--lavender-soft);
}

.avarida-pcard__placeholder span {
  max-width: 100%;
  overflow-wrap: anywhere;
  font-size: 0.875rem;
  font-weight: 600;
}

.avarida-pcard__preview {
  min-height: 2.5rem;
  border: 0;
  border-radius: 9999px;
  padding: 0.625rem 1rem;
  cursor: pointer;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--primary-foreground);
  background: var(--gradient-primary);
  box-shadow: var(--shadow-soft);
}

.avarida-pcard__preview:focus-visible {
  outline: 3px solid color-mix(in oklab, var(--primary) 40%, transparent);
  outline-offset: 3px;
}

.avarida-pcard__meta {
  padding-inline: 0.25rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.avarida-pcard__text { min-width: 0; }
.avarida-pcard__text p { margin: 0; }

.avarida-pcard__cat {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--primary);
  font-weight: 600;
}

.avarida-pcard__name {
  margin: 0.25rem 0 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.avarida-pcard__desc {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.avarida-pcard__link {
  flex: none;
  display: inline-flex;
  height: 2.25rem;
  width: 2.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: var(--accent);
  color: var(--primary);
  transition: background 150ms, color 150ms;
}

.avarida-pcard__link:hover {
  background: var(--gradient-primary);
  color: var(--primary-foreground);
}

.avarida-pcard__link svg { height: 1rem; width: 1rem; }

/* --------------------------------------------------------------------------
   GSC proof cards
   -------------------------------------------------------------------------- */

.avarida-gsc__grid { margin-top: 3rem; display: grid; gap: 1.25rem; }

@media (min-width: 640px) { .avarida-gsc__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .avarida-gsc__grid { grid-template-columns: repeat(5, 1fr); } }

.avarida-gsc {
  position: relative;
  border-radius: 1rem;
  border: 1px solid var(--border);
  background: var(--card);
  padding: 1.25rem;
  overflow: hidden;
}

.avarida-gsc p { margin: 0; }
.avarida-gsc__blob { top: -2.5rem; right: -2.5rem; height: 6rem; width: 6rem; filter: blur(32px); }

.avarida-gsc__label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--primary);
  font-weight: 700;
}

.avarida-gsc__clicks {
  margin-top: 0.75rem !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--ink);
}

.avarida-gsc__sub { font-size: 0.75rem; color: var(--muted-foreground); }

.avarida-gsc__meta {
  margin-top: 1rem;
  display: flex;
  gap: 0.75rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

/* --------------------------------------------------------------------------
   Process timeline
   -------------------------------------------------------------------------- */

.avarida-process__wrap { margin-top: 3.5rem; }
.avarida-process { position: relative; }

.avarida-process__line { display: none; }

@media (min-width: 1024px) {
  .avarida-process__line {
    display: block;
    position: absolute;
    top: 1.75rem;
    left: 1.75rem;
    right: 1.75rem;
    height: 1px;
    background: linear-gradient(to right, transparent, color-mix(in oklab, var(--primary) 40%, transparent), transparent);
  }
}

.avarida-process__grid { display: grid; gap: 2rem; }

@media (min-width: 1024px) { .avarida-process__grid { grid-template-columns: repeat(5, 1fr); } }

.avarida-process__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

@media (min-width: 1024px) {
  .avarida-process__step { align-items: center; text-align: center; }
}

.avarida-process__n {
  position: relative;
  z-index: 1;
  display: flex;
  height: 3.5rem;
  width: 3.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: var(--gradient-primary);
  color: var(--primary-foreground);
  font-weight: 700;
  box-shadow: var(--shadow-elegant);
}

.avarida-process__title {
  margin-top: 1.25rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ink);
}

.avarida-process__body {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
  line-height: 1.625;
  max-width: 20rem;
}

/* --------------------------------------------------------------------------
   CTA block
   -------------------------------------------------------------------------- */

.avarida-ctablock {
  position: relative;
  overflow: hidden;
  border-radius: 1.5rem;
  background: var(--gradient-primary);
  padding: 2.5rem;
  box-shadow: var(--shadow-elegant);
}

@media (min-width: 1024px) { .avarida-ctablock { padding: 4rem; } }

.avarida-ctablock__glow {
  position: absolute;
  inset: 0;
  opacity: 0.3;
  mix-blend-mode: overlay;
  background-image:
    radial-gradient(circle at 20% 20%, white, transparent 40%),
    radial-gradient(circle at 80% 70%, white, transparent 40%);
}

.avarida-ctablock__grid { position: relative; display: grid; gap: 2.5rem; align-items: center; }

@media (min-width: 1024px) { .avarida-ctablock__grid { grid-template-columns: 1.4fr 1fr; } }

.avarida-ctablock__title {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--primary-foreground);
  line-height: 1.25;
  margin: 0;
}

@media (min-width: 640px) { .avarida-ctablock__title { font-size: 2.25rem; } }
@media (min-width: 1024px) { .avarida-ctablock__title { font-size: 3rem; } }

.avarida-ctablock__lede {
  margin-top: 1rem;
  color: color-mix(in oklab, var(--primary-foreground) 85%, transparent);
  font-size: 1rem;
  max-width: 36rem;
}

@media (min-width: 640px) { .avarida-ctablock__lede { font-size: 1.125rem; } }

.avarida-ctablock__actions { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }

.avarida-ctablock__aside { display: none; }

@media (min-width: 1024px) { .avarida-ctablock__aside { display: block; } }

.avarida-ctablock__card {
  border-radius: 1rem;
  background: color-mix(in oklab, var(--background) 95%, transparent);
  padding: 1.5rem;
  box-shadow: var(--shadow-elegant);
}

.avarida-ctablock__card-eyebrow {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--primary);
  font-weight: 700;
  margin: 0;
}

.avarida-ctablock__card ul {
  margin-top: 1rem;
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: var(--ink);
}

.avarida-ctablock__card li { display: flex; align-items: center; gap: 0.5rem; }

.avarida-dot {
  height: 0.375rem;
  width: 0.375rem;
  border-radius: 9999px;
  background: var(--primary);
  flex: none;
}

.avarida-ctablock__link {
  margin-top: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
}

.avarida-ctablock__link svg { height: 0.875rem; width: 0.875rem; }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.avarida-faq__wrap { margin-top: 3rem; }

.avarida-faq { display: flex; flex-direction: column; gap: 0.75rem; }

.avarida-faq__item {
  border-radius: 1rem;
  border: 1px solid var(--border);
  background: var(--card);
  transition: border-color 200ms, box-shadow 200ms;
}

.avarida-faq__item.is-open {
  border-color: color-mix(in oklab, var(--primary) 50%, transparent);
  box-shadow: var(--shadow-elegant);
}

.avarida-faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
}

@media (min-width: 640px) {
  .avarida-faq__q { padding-inline: 1.5rem; font-size: 1.125rem; }
}

.avarida-faq__item.is-open .avarida-faq__q { color: var(--primary); }

.avarida-faq__chev {
  height: 1.25rem;
  width: 1.25rem;
  flex: none;
  color: var(--muted-foreground);
  transition: transform 200ms, color 200ms;
}

.avarida-faq__item.is-open .avarida-faq__chev { transform: rotate(180deg); color: var(--primary); }

.avarida-faq__a p {
  padding: 0 1.25rem 1.25rem;
  margin: 0;
  font-size: 0.875rem;
  color: var(--muted-foreground);
  line-height: 1.625;
}

@media (min-width: 640px) {
  .avarida-faq__a p { padding-inline: 1.5rem; font-size: 1rem; }
}

/* --------------------------------------------------------------------------
   Logo placeholder — remove once the real avarida-logo.png is supplied.
   -------------------------------------------------------------------------- */

.avarida-logo-placeholder { display: inline-flex; align-items: center; gap: 0.5rem; }

.avarida-logo-placeholder__mark {
  height: 1.75rem;
  width: 1.75rem;
  border-radius: 0.5rem;
  background: var(--gradient-primary);
  flex: none;
}

.avarida-logo-placeholder__text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.02em;
}

.avarida-logo-placeholder__text span {
  display: block;
  font-size: 0.5rem;
  letter-spacing: 0.2em;
  color: var(--muted-foreground);
  font-weight: 600;
}