/* ===== webbuilder components ===== */
/* Material defines its palette variables on [data-md-color-scheme] (the body),
   not on :root — so the aliases must be re-declared there too, or dark mode
   would keep reading the light background forever. */
:root,
[data-md-color-scheme]{
  --wb-primary: var(--md-primary-fg-color, #2563eb);
  --wb-accent:  var(--md-accent-fg-color, #e11d48);
  --wb-bg:      var(--md-default-bg-color, #ffffff);
  --wb-fg:      var(--md-typeset-color, #374151);
  --wb-muted:   var(--md-default-fg-color--light, #6b7280);
}

/* --- line --- */
.wb-line{
  border: none; height: 2px; border-radius: 2px;
  width: var(--wb-width, 100%); margin: 2.2rem auto;
  background: linear-gradient(90deg, transparent,
              color-mix(in srgb, var(--wb-primary) 55%, transparent), transparent);
}

/* --- spacer --- */
.wb-spacer{ height: calc(var(--wb-lines, 1) * 1.4rem); }

/* --- badge --- */
.wb-badge{
  display: inline-block; vertical-align: middle;
  padding: .15em .7em; border-radius: 999px;
  font-size: .72em; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: color-mix(in srgb, var(--wb-primary) 14%, var(--wb-bg));
  color: var(--wb-primary);
  border: 1px solid color-mix(in srgb, var(--wb-primary) 30%, transparent);
}

/* --- button (grows on hover + shine sweep) --- */
/* .md-typeset a (Material) would override the text color (it sets
   --md-typeset-a-color, which matches the button background on amber/yellow
   themes in dark mode -> invisible label). Scoping under .md-typeset gives
   (0,2,0) specificity, beating the (0,1,1) link rule — same trick Material
   itself uses for .md-button. */
.md-typeset .wb-btn{
  display: inline-block; padding: .72rem 1.7rem; border-radius: 999px;
  background: var(--wb-primary); color: var(--md-primary-bg-color, #fff);
  font-weight: 600; text-decoration: none; position: relative; overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.md-typeset .wb-btn:hover{
  transform: scale(1.05);
  box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--wb-primary) 65%, transparent);
  color: var(--md-primary-bg-color, #fff);
}
.wb-btn::after{
  content: ""; position: absolute; top: 0; left: -150%; width: 55%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.38), transparent);
  transform: skewX(-20deg); transition: left .6s ease;
}
.wb-btn:hover::after{ left: 150%; }

/* --- box (grows slightly on hover) --- */
.wb-box{
  background: color-mix(in srgb, var(--wb-primary) 6%, var(--wb-bg));
  border: 1px solid color-mix(in srgb, var(--wb-primary) 18%, transparent);
  border-radius: 14px; padding: 1.4rem 1.6rem;
  transition: transform .25s ease, box-shadow .25s ease;
}
.wb-box:hover{
  transform: scale(1.02);
  box-shadow: 0 12px 30px -14px color-mix(in srgb, var(--wb-primary) 50%, transparent);
}

/* --- horizontal boxes --- */
.wb-boxes{
  display: grid; gap: 1.2rem; margin: 1.6rem 0;
  grid-template-columns: repeat(var(--wb-cols, 3), minmax(0, 1fr));
}
.wb-boxes .wb-box{ margin: 0; min-width: 0; }
@media (max-width: 560px){ .wb-boxes{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- section (auto-alternating rhythm) --- */
.wb-section{ padding: clamp(2rem, 6vw, 4.5rem) clamp(1rem, 4vw, 3rem); }
.wb-section:nth-of-type(even){
  background: color-mix(in srgb, var(--wb-fg) 4%, var(--wb-bg));
}

/* --- split (image + text) --- */
.wb-split{
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.2rem, 4vw, 2.5rem);
  align-items: center; margin: 2rem 0;
}
.wb-split-media{ margin: 0; }
.wb-split-text{ min-width: 0; }
.wb-split-media img{ width: 100%; height: 100%; object-fit: cover; border-radius: 16px; display: block; }
.wb-split-reverse .wb-split-media{ order: 2; }
@media (max-width: 820px){
  .wb-split{ grid-template-columns: 1fr; }
  .wb-split-reverse .wb-split-media{ order: 0; }
}

/* --- background image block --- */
.wb-background{
  position: relative; margin: 1.6rem 0; border-radius: 18px;
  padding: clamp(2.5rem, 8vw, 5rem) clamp(1.2rem, 5vw, 3rem);
  background-size: cover; background-position: center;
}
.wb-background::before{
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: color-mix(in srgb, var(--wb-bg) 80%, transparent);
}
.wb-background > *{ position: relative; }

/* --- banner family (background block) --- */
.wb-banner{
  margin: 1.6rem 0; border-radius: 18px;
  padding: clamp(1.8rem, 5vw, 3.5rem) clamp(1.2rem, 4vw, 2.5rem);
  background: color-mix(in srgb, var(--wb-primary) 10%, var(--wb-bg));
  border: 1px solid color-mix(in srgb, var(--wb-primary) 16%, transparent);
}
.wb-banner-gradient{
  background: linear-gradient(var(--wb-dir, to bottom),
              color-mix(in srgb, var(--wb-primary) 38%, var(--wb-bg)), var(--wb-bg));
}
.wb-banner-glow{
  background: radial-gradient(ellipse 85% 100% at 50% 35%,
              color-mix(in srgb, var(--wb-primary) 32%, var(--wb-bg)), var(--wb-bg) 75%);
}

/* --- typing --- */
.wb-typing{
  display: flex; align-items: center; gap: .12em;
  font-size: clamp(1.1rem, 2.6vw, 1.5rem); font-weight: 600; min-height: 1.6em;
}
.wb-caret{
  width: .09em; height: 1.1em; background: var(--wb-primary);
  animation: wb-blink 1s steps(1) infinite;
}
@keyframes wb-blink{ 50%{ opacity: 0; } }

/* --- rotating (vertical carousel, neighbours peeking) --- */
.wb-rotating{
  height: 2.6em; overflow: hidden; position: relative;
  mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent);
  -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent);
}
.wb-rotating-track{
  display: flex; flex-direction: column;
  transition: transform .6s cubic-bezier(.4, 0, .2, 1);
}
.wb-rotating-item{
  height: 2.6em; display: flex; align-items: center; justify-content: center;
  text-align: center; font-size: clamp(1.05rem, 2.4vw, 1.45rem); font-weight: 600;
  color: var(--wb-primary); padding: 0 .4em;
}

/* --- showcase (pinned image, text rises over it) --- */
.wb-showcase{ position: relative; margin: 2rem 0; }
.wb-showcase-media{ position: sticky; top: 0; height: 100svh; z-index: 0; }
.wb-showcase-media img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.wb-showcase-text{
  position: relative; z-index: 1; margin-top: 100svh;
  background: var(--wb-bg); border-radius: 26px 26px 0 0;
  padding: clamp(2rem, 6vw, 4rem) clamp(1.2rem, 5vw, 3rem);
}
.wb-showcase-title{ margin-top: 0; }

/* --- stats (big numbers, count up) --- */
.wb-stats{
  display: grid; gap: 1.6rem; text-align: center; margin: 2rem 0;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
}
.wb-stat-number{
  display: block; font-size: clamp(1.7rem, 4.5vw, 2.6rem); font-weight: 800;
  color: var(--wb-primary); line-height: 1.15; overflow-wrap: anywhere;
}
.wb-stat-label{ color: var(--wb-muted); font-size: clamp(.85rem, 2vw, 1rem); }

/* --- pricing (3 cards, middle highlighted) --- */
.wb-pricing{
  display: grid; gap: 1.5rem; align-items: stretch; margin: 2rem 0;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}
.wb-pricing-card{
  background: var(--wb-bg); border: 1px solid color-mix(in srgb, var(--wb-fg) 12%, transparent);
  border-radius: 18px; padding: 1.9rem 1.7rem; display: flex; flex-direction: column; gap: .7rem;
  min-width: 0;
  box-shadow: 0 8px 26px -16px color-mix(in srgb, var(--wb-fg) 40%, transparent);
}
.wb-pricing-card h3{ margin: 0; font-size: 1.25rem; }
.wb-pricing-price{ font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 800; color: var(--wb-primary); }
.wb-pricing-card ul{ margin: .3rem 0 0; padding-left: 1.2rem; }
.wb-pricing-featured{
  border: 2px solid var(--wb-primary); transform: scale(1.02);
  box-shadow: 0 16px 40px -18px color-mix(in srgb, var(--wb-primary) 60%, transparent);
}
.wb-pricing-featured::before{
  content: "Most popular"; position: absolute; top: -.85em; left: 50%; transform: translateX(-50%);
  background: var(--wb-primary); color: var(--md-primary-bg-color, #fff);
  font-size: .7em; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: .32em 1.1em; border-radius: 999px; white-space: nowrap;
}
.wb-pricing-card{ position: relative; }

/* --- timeline --- */
.wb-timeline{ position: relative; margin: 2rem 0; padding-left: 1.7rem; }
.wb-timeline::before{
  content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px;
  background: color-mix(in srgb, var(--wb-primary) 30%, transparent);
}
.wb-timeline-item{ position: relative; padding: 0 0 1.8rem 1.2rem; }
.wb-timeline-item:last-child{ padding-bottom: 0; }
.wb-timeline-dot{
  position: absolute; left: -1.7rem; top: .4em; width: 12px; height: 12px; border-radius: 50%;
  background: var(--wb-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--wb-primary) 20%, var(--wb-bg));
}
.wb-timeline-content h3{ margin: .1em 0 .4em; }

/* --- gallery --- */
.wb-gallery{
  display: grid; gap: 1rem; margin: 1.6rem 0;
  grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
}
.wb-gallery-item{
  margin: 0; position: relative; border-radius: 14px; overflow: hidden;
  background: color-mix(in srgb, var(--wb-fg) 6%, var(--wb-bg));
}
.wb-gallery-item img{
  width: 100%; height: clamp(140px, 22vw, 220px); object-fit: cover; display: block;
  transition: transform .35s ease;
}
.wb-gallery-item:hover img{ transform: scale(1.07); }
.wb-gallery-item figcaption{
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: .55rem .8rem; font-size: .8rem; color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, .65));
}

/* --- columns --- */
.wb-columns{
  display: grid; gap: 1.8rem; margin: 1.6rem 0;
  grid-template-columns: repeat(var(--wb-cols, 2), minmax(0, 1fr));
}
@media (max-width: 820px){ .wb-columns{ grid-template-columns: 1fr; } }

.wb-column{ min-width: 0; }

/* --- pull quote --- */
.wb-pullquote{
  margin: 2.4rem auto; max-width: 42rem; text-align: center;
  padding: 1.3rem 1rem 1rem; border-top: 3px solid var(--wb-primary);
  font-size: clamp(1.15rem, 3vw, 1.5rem); font-style: italic; color: var(--wb-fg);
}
.wb-pullquote p:last-child{ margin-bottom: 0; }

/* --- hero (full-screen first section) --- */
.wb-hero{
  min-height: 100svh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: clamp(2.5rem, 8vw, 5rem) clamp(1.2rem, 5vw, 3rem);
  background: radial-gradient(ellipse 95% 75% at 50% 0%,
              color-mix(in srgb, var(--wb-primary) 13%, var(--wb-bg)), var(--wb-bg) 72%);
}
.wb-hero h1{ font-size: clamp(2.4rem, 8vw, 4.2rem); line-height: 1.1; margin: 0 0 .6rem; }
.wb-hero p{ font-size: clamp(1rem, 2.6vw, 1.3rem); color: var(--wb-muted); max-width: 40rem; }

/* --- reveal / slide animations (hidden only when JS is on) --- */
/* pre-reveal transforms must never create a horizontal scrollbar; clip keeps
   position:sticky (the showcase) working, hidden is the old-browser fallback */
.md-content{ overflow-x: clip; }
@supports not (overflow: clip){ .md-content{ overflow-x: hidden; } }
html.wb-js .wb-reveal,
html.wb-js .wb-anim{ opacity: 0; }
html.wb-js .wb-slide-right{ transform: translateX(48px); }
html.wb-js .wb-slide-left{ transform: translateX(-48px); }
html.wb-js .wb-slide-up{ transform: translateY(32px); }
.wb-reveal, .wb-anim{
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .6, .2, 1);
}
html.wb-js .wb-reveal.wb-in,
html.wb-js .wb-anim.wb-in{ opacity: 1; transform: none; }

/* --- fallbacks for browsers without color-mix --- */
@supports not (color: color-mix(in srgb, red 10%, white)){
  .wb-box{ background: var(--wb-bg); }
  .wb-banner, .wb-banner-gradient, .wb-banner-glow, .wb-background::before{ background: var(--wb-bg); }
  .wb-hero{ background: var(--wb-bg); }
}

/* --- respect reduced motion --- */
@media (prefers-reduced-motion: reduce){
  html.wb-js .wb-reveal, html.wb-js .wb-anim{ opacity: 1; transform: none; transition: none; }
  .wb-caret{ animation: none; }
  .wb-box:hover, .wb-btn:hover{ transform: none; }
  .wb-gallery-item img{ transition: none; }
}