/* ==========================================================================
   AS E-TECH — components.css
   Buttons, hero, cards, forms, and every reusable UI block.
   ========================================================================== */

/* ---------- Brand-Logo (Header/Footer) ------------------------------------ */
.brand-logo { height:2.6rem; width:auto; }
.footer-logo { height:2.9rem; width:auto; }

/* ---------- Buttons ------------------------------------------------------ */
.btn {
  --btn-bg:transparent;
  --btn-fg:var(--fg);
  --btn-border:transparent;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  min-height:3rem;
  padding:0 1.35rem;
  border:1px solid var(--btn-border);
  border-radius:var(--r-sm);
  background:var(--btn-bg);
  color:var(--btn-fg);
  font-size:var(--fs-sm);
  font-weight:600;
  letter-spacing:-.005em;
  text-align:center;
  cursor:pointer;
  transition:transform var(--dur-fast) var(--ease-out),
             box-shadow var(--dur) var(--ease-out),
             background var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out);
}
.btn:active { transform:translateY(1px); }
.btn svg { width:1.05rem; height:1.05rem; flex:none; }

.btn--primary {
  --btn-bg:linear-gradient(135deg, var(--accent), var(--accent-hot));
  --btn-fg:#17110a;
  box-shadow:var(--shadow-accent);
}
.btn--primary:hover { transform:translateY(-2px); box-shadow:0 18px 40px rgba(255,138,24,.30); }

.btn--secondary {
  --btn-bg:rgba(255,255,255,.04);
  --btn-border:var(--line-strong);
}
.btn--secondary:hover {
  --btn-bg:rgba(255,138,24,.07);
  --btn-border:var(--accent-line);
  transform:translateY(-2px);
}

.btn--ghost { --btn-fg:var(--fg-muted); padding-inline:.75rem; }
.btn--ghost:hover { --btn-fg:var(--fg); }

/* On light surfaces */
.section--paper .btn--secondary {
  --btn-bg:#fff;
  --btn-fg:var(--fg-ink);
  --btn-border:var(--line-ink-strong);
}
.section--paper .btn--secondary:hover { --btn-border:var(--accent); --btn-bg:#fff; }

.btn--lg { min-height:3.4rem; padding-inline:1.7rem; font-size:1rem; }
.btn--block { width:100%; }

/* The arrow nudge — one shared micro-interaction */
.btn .arrow, .arrow-link .arrow {
  transition:transform var(--dur) var(--ease-out);
}
.btn:hover .arrow, .arrow-link:hover .arrow { transform:translateX(.25rem); }

/* ---------- Arrow link --------------------------------------------------- */
.arrow-link {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-size:var(--fs-sm);
  font-weight:600;
  color:var(--accent);
  width:fit-content;
}
.arrow-link svg { width:1rem; height:1rem; flex:none; }

/* ---------- Icons (CSS mask -> external file, still themeable) ----------- */
.svc-icon {
  display:block;
  width:1.6rem;
  height:1.6rem;
  background-color:currentColor;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:contain;    mask-size:contain;
}
.svc-icon--elektroinstallation  { -webkit-mask-image:url(../assets/icons/elektroinstallation.svg);  mask-image:url(../assets/icons/elektroinstallation.svg); }
.svc-icon--gebaeudetechnik      { -webkit-mask-image:url(../assets/icons/gebaeudetechnik.svg);      mask-image:url(../assets/icons/gebaeudetechnik.svg); }
.svc-icon--netzwerk-smarthome   { -webkit-mask-image:url(../assets/icons/netzwerk-smarthome.svg);   mask-image:url(../assets/icons/netzwerk-smarthome.svg); }
.svc-icon--pv-anlagen           { -webkit-mask-image:url(../assets/icons/pv-anlagen.svg);           mask-image:url(../assets/icons/pv-anlagen.svg); }
.svc-icon--wallboxen            { -webkit-mask-image:url(../assets/icons/wallboxen.svg);            mask-image:url(../assets/icons/wallboxen.svg); }
.icon-badge {
  display:grid;
  place-items:center;
  width:3rem;
  height:3rem;
  flex:none;
  border-radius:var(--r-md);
  border:1px solid var(--accent-line);
  background:var(--accent-soft);
  color:var(--accent);
}
.icon-badge--lg { width:3.6rem; height:3.6rem; border-radius:var(--r-lg); }
.icon-badge--lg .svc-icon { width:2rem; height:2rem; }
.icon-badge svg { width:1.5rem; height:1.5rem; }

/* ---------- Hero --------------------------------------------------------- */
.hero {
  position:relative;
  isolation:isolate;
  display:grid;
  align-items:end;
  min-height:min(88svh, 780px);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.hero__media { position:absolute; inset:0; z-index:-2; }
.hero__media img { width:100%; height:100%; object-fit:cover; object-position:72% center; }
.hero__scrim {
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(100deg, rgba(6,8,11,.96) 0%, rgba(6,8,11,.90) 26%, rgba(6,8,11,.55) 50%, rgba(6,8,11,.12) 76%, rgba(6,8,11,.05) 100%),
    linear-gradient(180deg, rgba(6,8,11,.55) 0%, transparent 26%, transparent 55%, rgba(6,8,11,.72) 100%);
}
.hero__inner {
  display:grid;
  gap:var(--s-5);
  align-content:center;
  max-width:44rem;
  padding-block:clamp(4.5rem, 11vw, 8rem) clamp(9rem, 13vw, 10.5rem);
}
/* Zeilenumbrueche im Hero sind bewusst gesetzt (br + block) - kein balance */
.hero__title .line-accent { display:block; color:var(--fg); }
.hero__lead { max-width:36rem; color:#d7dde4; }
.hero__actions { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:.35rem; }
.hero__trust {
  display:flex;
  flex-wrap:wrap;
  gap:.6rem 1.5rem;
  margin-top:.5rem;
  font-size:var(--fs-sm);
  color:#c4ccd5;
}
.hero__trust li { display:flex; align-items:center; gap:.5rem; list-style:none; }
.hero__trust svg { width:1rem; height:1rem; color:var(--accent); flex:none; }

/* Credential strip — the factual band pinned to the hero edge */
.credential-strip {
  position:absolute;
  inset:auto 0 0 0;
  z-index:2;
  background:rgba(8,11,15,.86);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-top:1px solid var(--line-strong);
}
.credential-grid {
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
}
.credential {
  display:flex;
  align-items:center;
  gap:.85rem;
  min-height:5.5rem;
  padding:1rem 1.25rem;
  border-left:1px solid var(--line);
}
.credential:first-child { border-left:0; }
.credential svg { width:1.4rem; height:1.4rem; color:var(--accent); flex:none; }
.credential dt {
  font-size:var(--fs-xs);
  color:var(--fg-dim);
  letter-spacing:.04em;
}
.credential dd { margin:0; font-size:var(--fs-sm); font-weight:600; }
.credential dd small { display:block; font-weight:400; color:var(--fg-muted); font-size:var(--fs-xs); }

/* ---------- Page hero (subpages) ----------------------------------------- */
.page-hero {
  position:relative;
  isolation:isolate;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(46rem 26rem at 82% 4%, rgba(255,138,24,.13), transparent 62%),
    linear-gradient(180deg, var(--ink-900), var(--ink-950));
  padding-block:clamp(3.5rem, 8vw, 6rem) clamp(3rem, 6vw, 4.5rem);
}
.page-hero__inner { display:grid; gap:var(--s-4); max-width:52rem; }
.page-hero__lead { max-width:44rem; }

/* Breadcrumb */
.breadcrumb { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; font-size:var(--fs-xs); color:var(--fg-dim); }
.breadcrumb a:hover { color:var(--accent); }
.breadcrumb li { list-style:none; display:flex; align-items:center; gap:.5rem; }
.breadcrumb li + li::before { content:"/"; color:var(--fg-dim); opacity:.5; }
.breadcrumb [aria-current="page"] { color:var(--fg-muted); }

/* ---------- Cards -------------------------------------------------------- */
.card {
  position:relative;
  display:flex;
  flex-direction:column;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:linear-gradient(160deg, var(--ink-800), var(--ink-850));
  overflow:hidden;
  transition:transform var(--dur) var(--ease-out),
             border-color var(--dur) var(--ease-out),
             box-shadow var(--dur) var(--ease-out);
}
.section--paper .card {
  background:var(--paper-raised);
  border-color:var(--line-ink);
  box-shadow:0 1px 2px rgba(16,24,40,.04);
}

/* Service card */
.service-card { --pad:1.4rem; }
.service-card__media {
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  background:var(--ink-900);
  border-bottom:1px solid var(--line);
}
.service-card__media img {
  width:100%; height:100%;
  object-fit:cover;
  transition:transform var(--dur-slow) var(--ease-out);
}
.service-card__body {
  display:grid;
  gap:.6rem;
  padding:var(--pad);
  flex:1;
  align-content:start;
}
.service-card__head { display:flex; align-items:center; gap:.85rem; }
.service-card__head h3 { margin:0; }
.service-card__foot { margin-top:auto; padding-top:.4rem; }

a.card:hover, a.card:focus-visible {
  transform:translateY(-4px);
  border-color:var(--accent-line);
  box-shadow:var(--shadow-md);
}
a.card:hover .service-card__media img { transform:scale(1.05); }
.section--paper a.card:hover { box-shadow:0 18px 44px rgba(16,24,40,.10); }

/* Value card (the "why us" trio) */
.value-card { padding:1.6rem; gap:.85rem; display:grid; align-content:start; }
.value-card h3 { margin:0; }

/* CTA card — fills the 6th cell of the 3×2 service grid */
.cta-card {
  display:grid;
  align-content:center;
  gap:1rem;
  padding:1.6rem;
  border:1px solid var(--accent-line);
  border-radius:var(--r-lg);
  background:
    radial-gradient(24rem 14rem at 82% 8%, rgba(255,138,24,.14), transparent 66%),
    linear-gradient(160deg, rgba(255,138,24,.07), rgba(255,255,255,.012));
}
.cta-card h3 { margin:0; }

/* Project card */
.project-card__media {
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--ink-900);
}
.project-card__media img { width:100%; height:100%; object-fit:cover; transition:transform var(--dur-slow) var(--ease-out); }
.project-card__overlay {
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent 42%, rgba(6,8,11,.86) 100%);
}
.project-card__body { display:grid; gap:.5rem; padding:1.3rem; }
.project-card__meta { display:flex; flex-wrap:wrap; gap:.5rem 1rem; font-size:var(--fs-xs); color:var(--fg-dim); }
.project-card__meta span { display:flex; align-items:center; gap:.4rem; }
a.project-card:hover .project-card__media img { transform:scale(1.06); }

/* Placeholder state — used until real reference photos exist */
.project-card--placeholder .project-card__media {
  display:grid;
  place-items:center;
  background:
    linear-gradient(160deg, var(--ink-800), var(--ink-900)),
    var(--ink-900);
}
.placeholder-note {
  display:grid;
  justify-items:center;
  gap:.6rem;
  padding:1.5rem;
  text-align:center;
  color:var(--fg-dim);
  font-size:var(--fs-xs);
  letter-spacing:.06em;
  text-transform:uppercase;
}
.placeholder-note svg { width:1.75rem; height:1.75rem; opacity:.5; }

/* ---------- Tag / chip --------------------------------------------------- */
.tag {
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-size:var(--fs-xs);
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--accent);
}
.chip {
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.4rem .75rem;
  border:1px solid var(--line-strong);
  border-radius:var(--r-pill);
  font-size:var(--fs-xs);
  color:var(--fg-muted);
  background:rgba(255,255,255,.03);
}
.section--paper .chip { border-color:var(--line-ink); background:#fff; color:var(--fg-ink-muted); }

/* ---------- Fact band (real data, not invented metrics) ------------------ */
.fact-band {
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--ink-900);
}
.fact {
  display:grid;
  gap:.3rem;
  padding:1.5rem;
  border-left:1px solid var(--line);
}
.fact:first-child { border-left:0; }
.fact dt { font-size:var(--fs-xs); color:var(--fg-dim); letter-spacing:.05em; text-transform:uppercase; }
.fact dd { margin:0; font-size:1.2rem; font-weight:700; letter-spacing:-.02em; }

/* ---------- Process steps ------------------------------------------------ */
.process { counter-reset:step; display:grid; gap:var(--s-4); grid-template-columns:repeat(4, minmax(0,1fr)); }
.step {
  position:relative;
  display:grid;
  gap:.6rem;
  align-content:start;
  padding:1.5rem;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--ink-850);
}
.section--paper .step { background:var(--paper-raised); border-color:var(--line-ink); }
.step__num {
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:.14em;
  color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.step h3 { margin:0; font-size:1.05rem; }

/* ---------- Split media -------------------------------------------------- */
.media-frame {
  position:relative;
  border-radius:var(--r-xl);
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--ink-850);
  box-shadow:var(--shadow-lg);
}
.media-frame img { width:100%; height:100%; object-fit:cover; }

/* Owner / about panel */
.owner-panel {
  display:grid;
  gap:1.25rem;
  padding:clamp(1.5rem, 3vw, 2.25rem);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  background:
    radial-gradient(30rem 18rem at 88% 0%, rgba(10,95,196,.12), transparent 62%),
    linear-gradient(160deg, var(--ink-800), var(--ink-900));
}
.owner-quote {
  font-size:clamp(1.15rem, 1.9vw, 1.5rem);
  line-height:1.45;
  letter-spacing:-.02em;
  font-weight:500;
  text-wrap:pretty;
}
.owner-sign { display:flex; align-items:center; gap:.9rem; padding-top:.25rem; }
.owner-sign__avatar {
  display:grid;
  place-items:center;
  width:3rem; height:3rem;
  flex:none;
  border-radius:var(--r-pill);
  border:1px solid var(--accent-line);
  background:var(--accent-soft);
  color:var(--accent);
  font-weight:700;
  letter-spacing:-.02em;
}
.owner-sign__name { font-weight:600; }

/* Checklist */
.checklist { display:grid; gap:.7rem; }
.checklist li { display:flex; align-items:flex-start; gap:.7rem; list-style:none; font-size:var(--fs-sm); }
.checklist svg { width:1.1rem; height:1.1rem; color:var(--accent); flex:none; margin-top:.22rem; }

/* ---------- Service detail rows (leistungen.html) ------------------------ */
.service-detail {
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(1.5rem, 4vw, 3rem);
  align-items:center;
  padding:clamp(1.25rem, 2.5vw, 1.75rem);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  background:linear-gradient(160deg, var(--ink-800), var(--ink-850));
  scroll-margin-top:calc(var(--header-h) + 2rem);
}
.service-detail:nth-child(even) .service-detail__media { order:2; }
.service-detail__media { border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); background:var(--ink-900); }
.service-detail__media img { width:100%; aspect-ratio:16/10; object-fit:cover; }
.service-detail__body { display:grid; gap:1rem; align-content:start; }
.service-detail__head { display:flex; align-items:center; gap:.9rem; }
.service-detail__head h2 { margin:0; font-size:clamp(1.35rem,2.2vw,1.75rem); letter-spacing:-.025em; }

/* ---------- CTA band ----------------------------------------------------- */
.cta-band {
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:1.5rem;
  padding:clamp(1.4rem, 3vw, 2rem);
  border:1px solid var(--accent-line);
  border-radius:var(--r-xl);
  background:
    radial-gradient(34rem 18rem at 8% 0%, rgba(255,138,24,.12), transparent 62%),
    linear-gradient(120deg, rgba(255,138,24,.07), rgba(255,255,255,.015));
}
.cta-band__icon {
  display:grid; place-items:center;
  width:3.5rem; height:3.5rem;
  flex:none;
  border-radius:var(--r-lg);
  border:1px solid var(--accent-line);
  background:var(--accent-soft);
  color:var(--accent);
}
.cta-band__icon svg { width:1.75rem; height:1.75rem; }
.cta-band h2 { margin:0 0 .25rem; font-size:clamp(1.2rem,2vw,1.45rem); }
.cta-band p { margin:0; }

/* ---------- Contact ------------------------------------------------------ */
.contact-grid {
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(1.5rem, 3.5vw, 2.5rem);
  align-items:start;
}
.panel {
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  background:var(--ink-850);
  padding:clamp(1.4rem, 3vw, 2rem);
}
.section--paper .panel { background:var(--paper-raised); border-color:var(--line-ink); }

/* Phone-first contact block */
.contact-primary {
  display:grid;
  gap:.9rem;
  padding:clamp(1.3rem, 3vw, 1.75rem);
  border:1px solid var(--accent-line);
  border-radius:var(--r-lg);
  background:var(--accent-soft);
}
.contact-primary__label { font-size:var(--fs-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--accent); font-weight:600; }
.contact-primary__number {
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  font-size:clamp(1.5rem, 3vw, 2rem);
  font-weight:700;
  letter-spacing:-.03em;
  color:var(--fg);
  width:fit-content;
}
.contact-primary__number svg { width:1.5rem; height:1.5rem; color:var(--accent); flex:none; }
.contact-primary__number:hover { color:var(--accent); }

.contact-line {
  display:grid;
  grid-template-columns:2.75rem 1fr;
  gap:.9rem;
  align-items:start;
  padding-block:1rem;
  border-bottom:1px solid var(--line);
}
.section--paper .contact-line { border-bottom-color:var(--line-ink); }
.contact-line:last-child { border-bottom:0; padding-bottom:0; }
.contact-line__icon {
  display:grid; place-items:center;
  width:2.75rem; height:2.75rem;
  border-radius:var(--r-sm);
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  color:var(--accent);
}
.section--paper .contact-line__icon { border-color:var(--line-ink); background:var(--paper); }
.contact-line__icon svg { width:1.15rem; height:1.15rem; }
.contact-line dt { font-size:var(--fs-xs); color:var(--fg-dim); }
.contact-line dd { margin:0; font-weight:500; }
.contact-line dd a:hover { color:var(--accent); }

/* ---------- Forms -------------------------------------------------------- */
.form { display:grid; gap:1rem; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.field { display:grid; gap:.45rem; }
.field > label { font-size:var(--fs-sm); font-weight:600; }
.field .hint { font-size:var(--fs-xs); color:var(--fg-dim); }

.input, .textarea, .select {
  width:100%;
  min-height:3.1rem;
  padding:.8rem .95rem;
  border:1px solid var(--line-strong);
  border-radius:var(--r-sm);
  background:var(--ink-900);
  color:var(--fg);
  transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.section--paper .input,
.section--paper .textarea,
.section--paper .select { background:var(--paper); border-color:var(--line-ink-strong); color:var(--fg-ink); }
.textarea { min-height:9rem; resize:vertical; }
.select { appearance:none; padding-right:2.5rem; background-image:none; cursor:pointer; }
.select-wrap { position:relative; }
.select-wrap::after {
  content:"";
  position:absolute;
  right:1rem; top:50%;
  width:.5rem; height:.5rem;
  border-right:2px solid var(--fg-muted);
  border-bottom:2px solid var(--fg-muted);
  transform:translateY(-70%) rotate(45deg);
  pointer-events:none;
}
.input::placeholder, .textarea::placeholder { color:var(--fg-dim); }
.input:focus, .textarea:focus, .select:focus {
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color:var(--danger); }
.field__error { font-size:var(--fs-xs); color:var(--danger); min-height:1rem; }

/* Consent row */
.consent { display:flex; align-items:flex-start; gap:.7rem; font-size:var(--fs-sm); color:var(--fg-muted); }
.consent input { width:1.15rem; height:1.15rem; margin-top:.28rem; flex:none; accent-color:var(--accent); }
.consent a { color:var(--accent); text-decoration:underline; text-underline-offset:2px; }

.form-note { font-size:var(--fs-xs); color:var(--fg-dim); }

/* ---------- Toast -------------------------------------------------------- */
.toast {
  position:fixed;
  right:1.25rem; bottom:1.25rem;
  z-index:140;
  width:min(24rem, calc(100% - 2.5rem));
  display:flex;
  align-items:flex-start;
  gap:.8rem;
  padding:1rem 1.15rem;
  border:1px solid var(--accent-line);
  border-radius:var(--r-md);
  background:var(--ink-750);
  box-shadow:var(--shadow-lg);
  opacity:0;
  transform:translateY(1rem);
  pointer-events:none;
  transition:opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.toast.is-visible { opacity:1; transform:none; pointer-events:auto; }
.toast svg { width:1.25rem; height:1.25rem; color:var(--accent); flex:none; margin-top:.1rem; }
.toast strong { display:block; }
.toast p { margin:0; font-size:var(--fs-sm); color:var(--fg-muted); }

/* ---------- Legal pages -------------------------------------------------- */
.legal { max-width:52rem; display:grid; gap:1.25rem; }
.legal h2 { font-size:1.4rem; margin-top:1.5rem; }
.legal h3 { font-size:1.05rem; margin-top:.75rem; }
.legal p, .legal li { color:var(--fg-muted); }
.legal ul { padding-left:1.15rem; display:grid; gap:.4rem; }
.legal li { list-style:disc; }
.legal a { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.legal address { font-style:normal; color:var(--fg-muted); }
.legal-todo {
  padding:1rem 1.15rem;
  border:1px dashed var(--accent-line);
  border-radius:var(--r-sm);
  background:var(--accent-soft);
  color:var(--fg-muted);
  font-size:var(--fs-sm);
}

/* ---------- Scroll reveal ------------------------------------------------ */
.reveal { opacity:0; transform:translateY(1.25rem); }
.js .reveal { will-change:opacity, transform; }
.reveal.is-visible {
  opacity:1;
  transform:none;
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);
  transition-delay:var(--reveal-delay, 0ms);
}
/* No JS -> everything visible */
html:not(.js) .reveal { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) { .reveal { opacity:1; transform:none; } }

/* ---------- Back to top -------------------------------------------------- */
.to-top {
  position:fixed;
  right:1.25rem; bottom:1.25rem;
  z-index:90;
  display:grid;
  place-items:center;
  width:2.9rem; height:2.9rem;
  border:1px solid var(--line-strong);
  border-radius:var(--r-pill);
  background:rgba(16,20,26,.9);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  color:var(--fg);
  opacity:0;
  visibility:hidden;
  transform:translateY(.5rem);
  transition:opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility var(--dur);
}
.to-top.is-visible { opacity:1; visibility:visible; transform:none; }
.to-top.is-hidden { opacity:0; visibility:hidden; transform:translateY(.5rem); }
.to-top:hover { border-color:var(--accent-line); color:var(--accent); }
.to-top svg { width:1.1rem; height:1.1rem; }