/* Home screen. Only what this page adds on top of tokens.css and style.css: the hero,
   the mounting-type cards, the product range, the selection steps, the documentation
   panel and the quote panel. Shared classes are used, never redefined, and every block
   below is scoped to its own home section so the sheet cannot leak to another screen. */

/* ---------------------------------------------------------------- Hero ---- */
.home-hero{
  position:relative;
  overflow:hidden;
  border-bottom:var(--border);
  background:linear-gradient(180deg,var(--color-water-wash) 0%,#F1FAFC 58%,var(--color-background) 100%);
}
.home-hero__inner{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(28px,4vw,64px);
  align-items:center;
  padding-block:clamp(44px,6.5vw,92px);
}
.home-hero__title{margin:0 0 .42em;max-width:15ch}
.home-hero__lede{
  font-size:var(--text-xl);
  line-height:1.4;
  color:var(--color-muted);
  max-width:30ch;
  margin:0 0 var(--space-lg);
}
.home-hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-sm)}

/* The decorative water panel: rings and light, no image and no empty frame. */
.home-hero__water{
  position:relative;
  min-height:clamp(220px,30vw,380px);
  border-radius:calc(var(--radius-card) * 1.6);
  overflow:hidden;
  background:radial-gradient(120% 95% at 76% 16%,#C3E8F6 0%,var(--color-water-wash) 48%,#F4F9F8 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.75),var(--shadow-card);
}
.home-hero__water::before,
.home-hero__water::after{content:"";position:absolute;pointer-events:none}
.home-hero__water::before{
  inset:-34%;
  border-radius:50%;
  background:repeating-radial-gradient(circle at 48% 58%,rgba(58,182,222,.30) 0 1.5px,rgba(58,182,222,0) 1.5px 28px);
  animation:ge-water 16s ease-in-out infinite;
}
.home-hero__water::after{
  inset:0;
  background:
    radial-gradient(58% 42% at 26% 18%,rgba(255,255,255,.9),rgba(255,255,255,0) 62%),
    linear-gradient(205deg,rgba(46,155,79,.10),rgba(26,140,180,.16));
}
@keyframes ge-water{
  0%,100%{transform:scale(1) rotate(0deg);opacity:.85}
  50%{transform:scale(1.07) rotate(1.5deg);opacity:1}
}
@media (prefers-reduced-motion:reduce){.home-hero__water::before{animation:none}}
@media (max-width:900px){
  .home-hero__inner{grid-template-columns:minmax(0,1fr)}
  .home-hero__water{min-height:170px;border-radius:var(--radius-card)}
}

/* ------------------------------------------------------- Mounting types ---- */
/* The card is the shared .card; here it only takes the number above the title. */
.home-mounting .card{height:100%}
.home-mounting .mount-card{display:flex;flex-direction:column}
.home-mounting .card__meta{color:var(--color-water);letter-spacing:.2em;margin-bottom:.9em}
.home-mounting .card__title{font-size:var(--text-lg);margin-bottom:.45em}
.home-mounting .card__text{margin-top:auto}

/* -------------------------------------------------------- Product range --- */
.home-range .range-card{display:flex;flex-direction:column}
.home-range .card__meta{margin-bottom:.9em}
.home-range .card__title{margin-bottom:.5em}
.home-range .card__text{margin-top:auto;max-width:38ch}

/* -------------------------------------------------- How selection works --- */
.home-steps .steps{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(20px,2.4vw,36px);
  counter-reset:ge-step;
}
.home-steps .step{position:relative;padding-top:var(--space-md);border-top:2px solid var(--color-line)}
.home-steps .step::before{
  counter-increment:ge-step;
  content:counter(ge-step,decimal-leading-zero);
  display:block;
  margin-bottom:.85em;
  font-family:var(--font-display);
  font-size:var(--text-xs);
  font-weight:700;
  letter-spacing:.2em;
  color:var(--color-accent);
}
.home-steps .step__title{margin:0 0 .4em;font-size:var(--text-lg)}
.home-steps .step__text{margin:0;font-size:var(--text-sm);color:var(--color-muted)}
@media (max-width:1000px){.home-steps .steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.home-steps .steps{grid-template-columns:minmax(0,1fr)}}

/* -------------------------------------------------------- Documentation --- */
.home-docs .docs-panel{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  gap:clamp(24px,3vw,52px);
  align-items:start;
  background:var(--color-background);
  border:var(--border);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
  padding:clamp(24px,3.4vw,48px);
}
.home-docs .docs-panel h2{font-size:var(--text-2xl);margin-bottom:.5em;max-width:26ch}
.home-docs .docs-panel__text{margin:0;color:var(--color-muted);max-width:62ch}
.home-docs .docs-panel__aside{display:grid;gap:var(--space-md);justify-items:start}
.home-docs .docs-panel__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.6em;
  font-size:var(--text-sm);
  color:var(--color-muted);
}
.home-docs .docs-panel__list li{display:flex;align-items:flex-start;gap:.65em}
.home-docs .docs-panel__list li::before{
  content:"";
  flex:0 0 auto;
  width:6px;
  height:6px;
  margin-top:.62em;
  border-radius:50%;
  background:var(--color-water);
}
@media (max-width:860px){.home-docs .docs-panel{grid-template-columns:minmax(0,1fr)}}

/* --------------------------------------------------------- Quote panel ---- */
.cta-band .cta-panel{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);
  gap:clamp(24px,3vw,48px);
  align-items:center;
  padding:clamp(28px,4vw,56px);
  border-radius:calc(var(--radius-card) * 1.3);
  background:var(--color-ink);
  color:#D8E7E2;
}
.cta-band .cta-panel::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:repeating-radial-gradient(circle at 94% 6%,rgba(58,182,222,.22) 0 1px,rgba(58,182,222,0) 1px 30px);
}
.cta-band .cta-panel>*{position:relative;z-index:1}
.cta-band .cta-panel h2{color:#fff;font-size:var(--text-2xl);margin-bottom:.42em;max-width:24ch}
.cta-band .cta-panel__eyebrow{color:var(--color-water)}
.cta-band .cta-panel__lede{margin:0;color:#A9C2BB;max-width:52ch;font-size:var(--text-base)}
.cta-band .cta-panel__actions{display:grid;gap:var(--space-sm);justify-items:stretch}
.cta-band .button--ghost{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
.cta-band .button--ghost:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}
@media (max-width:860px){.cta-band .cta-panel{grid-template-columns:minmax(0,1fr)}}