/* ============================================================================
   GX, Premium-Sektionen-Baukasten
   Eigener Code. Abgeleitet aus der Analyse von 39 Referenz-Layouts
   (Grigoletto Templates Pack, 07.08.2026). Keine fremden Assets, keine Kopie.

   Aufbau
     1  Tokens        Farben, Schrift, Raster, Radien, Schatten
     2  Basis         Reset, Typo-Skala, Container, Sektionsrhythmus
     3  Atome         Label, Knopf, Pille, Spec-Karte, Siegel, Marquee
     4  Navigation    Glas-Pille, Minimal-Bar, Mobil-Schublade
     5  Heroes        8 Bauarten
     6  Sektionen     Features, Karten, Zahlen, Stimmen, Preise, FAQ, CTA, Story
     7  Footer        Editorial dunkel, minimal hell
     8  Bewegung      Reveal, Zähler, Parallax, reduced-motion
     9  Mobil         Ein Bruchpunkt-Block am Ende, damit nichts überschrieben wird

   Alle Klassen tragen den Präfix gx-, damit nichts mit bestehenden
   Portal- oder Website-Klassen kollidiert.
   ========================================================================= */

/* ---------------------------------------------------------------- 1 Tokens */
:root{
  /* Flächen: nie reines Schwarz, immer ein Hauch Farbe im Grund */
  --gx-bg:        #08090B;
  --gx-bg-2:      #0D0F12;
  --gx-bg-3:      #14171B;

  /* Schrift: nie reines Weiß, sonst kippt die Fläche ins Grelle */
  --gx-ink:       #F2EFE9;
  --gx-ink-2:     #A8AFB6;
  --gx-ink-3:     #6E767E;

  /* Genau ein Akzent pro Seite. Zweitakzent bleibt Nebenrolle. */
  --gx-accent:    #FF6711;
  --gx-accent-2:  #F5B400;
  --gx-accent-ink:#0A0A0A;

  /* Glas */
  --gx-glass:     rgba(255,255,255,.055);
  --gx-glass-2:   rgba(255,255,255,.09);
  --gx-line:      rgba(255,255,255,.12);
  --gx-line-soft: rgba(255,255,255,.06);
  --gx-blur:      22px;

  /* Schrift-Familien */
  --gx-display: "GX Display", "DM Serif Display", "Playfair Display", Georgia, "Times New Roman", serif;
  --gx-sans:    "GX Sans", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --gx-mono:    "GX Mono", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* Typo-Skala. clamp statt Bruchpunkte, damit nichts springt. */
  --gx-t-hero:  clamp(2.9rem, 7.2vw, 7.5rem);
  --gx-t-xxl:   clamp(2.4rem, 5.4vw, 5rem);
  --gx-t-xl:    clamp(1.9rem, 3.6vw, 3.1rem);
  --gx-t-l:     clamp(1.35rem, 2.1vw, 1.75rem);
  --gx-t-body:  clamp(.98rem, 1.05vw, 1.075rem);
  --gx-t-small: .875rem;
  --gx-t-label: .6875rem;

  /* Raster und Rhythmus */
  --gx-max:     1280px;
  --gx-pad:     clamp(1.25rem, 4vw, 3.5rem);
  --gx-gap:     clamp(1rem, 1.8vw, 1.75rem);
  --gx-section: clamp(4.5rem, 9vw, 9rem);

  /* Radien: Karten weich, Pillen ganz rund, Bilder mittel */
  --gx-r-card:  22px;
  --gx-r-soft:  14px;
  --gx-r-pill:  999px;
  --gx-r-img:   18px;

  /* Schatten: immer zwei Lagen, nah und fern */
  --gx-shadow:  0 2px 8px rgba(0,0,0,.28), 0 24px 60px rgba(0,0,0,.42);
  --gx-shadow-l:0 4px 14px rgba(0,0,0,.34), 0 40px 90px rgba(0,0,0,.5);

  /* Bewegung */
  --gx-ease:    cubic-bezier(.22,.61,.36,1);
  --gx-ease-io: cubic-bezier(.65,.05,.36,1);
  --gx-fast:    .22s;
  --gx-slow:    .8s;
}

/* Helle Variante. Nicht Schwarz gegen Weiß tauschen, sondern warme Elfenbein-
   Fläche gegen tiefes Tintenblau. Sonst wirkt es sofort nach Standardvorlage. */
.gx-light{
  --gx-bg:      #F6F3EC;
  --gx-bg-2:    #FFFFFF;
  --gx-bg-3:    #ECE7DC;
  --gx-ink:     #14161A;
  --gx-ink-2:   #4C545C;
  --gx-ink-3:   #858D95;
  --gx-glass:   rgba(255,255,255,.68);
  --gx-glass-2: rgba(255,255,255,.85);
  --gx-line:    rgba(20,22,26,.12);
  --gx-line-soft:rgba(20,22,26,.07);
  --gx-shadow:  0 2px 8px rgba(20,22,26,.06), 0 22px 50px rgba(20,22,26,.10);
  --gx-shadow-l:0 4px 14px rgba(20,22,26,.08), 0 40px 90px rgba(20,22,26,.14);
}

/* ----------------------------------------------------------------- 2 Basis */
.gx{
  background: var(--gx-bg);
  color: var(--gx-ink);
  font-family: var(--gx-sans);
  font-size: var(--gx-t-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.gx *,.gx *::before,.gx *::after{ box-sizing: border-box; }
.gx img,.gx video{ max-width:100%; display:block; }

.gx-wrap{ width:100%; max-width:var(--gx-max); margin-inline:auto; padding-inline:var(--gx-pad); }
.gx-wrap--wide{ max-width:1560px; }
.gx-wrap--narrow{ max-width:820px; }

.gx-section{ padding-block: var(--gx-section); position:relative; }
.gx-section--tight{ padding-block: calc(var(--gx-section)*.55); }
.gx-section--flush{ padding-block:0; }

/* Überschriften. Zeilenhöhe unter 1 bei Displaygrößen, sonst zerfällt der Block. */
.gx h1,.gx h2,.gx h3,.gx h4{ margin:0; font-weight:600; letter-spacing:-.02em; overflow-wrap:break-word; }
/* Deutsche Komposita sind länger als jede Spalte. Ohne diese Zeile schiebt ein
   einziges Wort wie "Generalunternehmer" die ganze Seite seitlich auf. */
.gx-h1,.gx-h2,.gx-h3,.gx-word{ overflow-wrap:break-word; }
/* Rasterkinder dürfen nie breiter werden als ihre Spalte */
.gx-head > *,.gx-story > *,.gx-hero__inner > *,.gx-features > *,.gx-cards > *,.gx-plans > *{ min-width:0; }
.gx-h1{ font-size:var(--gx-t-hero); line-height:.92; letter-spacing:-.035em; }
.gx-h2{ font-size:var(--gx-t-xxl);  line-height:1.0;  letter-spacing:-.03em; }
.gx-h3{ font-size:var(--gx-t-xl);   line-height:1.12; letter-spacing:-.02em; }
.gx-h4{ font-size:var(--gx-t-l);    line-height:1.25; letter-spacing:-.01em; }
.gx-serif{ font-family:var(--gx-display); font-weight:400; letter-spacing:-.015em; }
.gx-serif.gx-h1{ letter-spacing:-.02em; }
.gx-caps{ text-transform:uppercase; letter-spacing:.02em; }
.gx-lead{ font-size:clamp(1.05rem,1.35vw,1.25rem); line-height:1.6; color:var(--gx-ink-2); max-width:56ch; }
.gx-muted{ color:var(--gx-ink-2); }
.gx-dim{ color:var(--gx-ink-3); }
.gx p{ margin:0 0 1em; }
.gx p:last-child{ margin-bottom:0; }

/* Akzentwort in einer Überschrift. Nie ganze Zeilen einfärben. */
.gx-accent{ color:var(--gx-accent); }
.gx-outline{ color:transparent; -webkit-text-stroke:1px var(--gx-ink); }

/* ----------------------------------------------------------------- 3 Atome */

/* Sektionslabel: kurzer Strich, dann Versalien in Mikrogröße.
   Dieses eine Detail trägt die halbe Wertigkeit. */
.gx-label{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--gx-sans); font-size:var(--gx-t-label); font-weight:600;
  text-transform:uppercase; letter-spacing:.18em; color:var(--gx-ink-2);
  margin-bottom:1.15rem;
}
.gx-label::before{
  content:""; width:26px; height:1px; background:var(--gx-accent); flex:none;
}
.gx-label--plain::before{ display:none; }
.gx-label--boxed{
  border:1px solid var(--gx-line); border-radius:var(--gx-r-pill);
  padding:.42rem .85rem; background:var(--gx-glass);
  backdrop-filter:blur(var(--gx-blur)); -webkit-backdrop-filter:blur(var(--gx-blur));
}
.gx-label--boxed::before{ width:6px; height:6px; border-radius:50%; }

/* Knöpfe */
.gx-btn{
  --_bg: var(--gx-accent); --_ink: var(--gx-accent-ink);
  display:inline-flex; align-items:center; justify-content:center; gap:.65rem;
  padding:.95rem 1.6rem; border-radius:var(--gx-r-pill); border:1px solid transparent;
  background:var(--_bg); color:var(--_ink);
  font-family:var(--gx-sans); font-size:.9375rem; font-weight:600; letter-spacing:-.005em;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition: transform var(--gx-fast) var(--gx-ease), box-shadow var(--gx-fast) var(--gx-ease),
              background var(--gx-fast) var(--gx-ease), color var(--gx-fast) var(--gx-ease);
  box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 10px 26px -12px color-mix(in oklab, var(--_bg) 70%, transparent);
}
.gx-btn:hover{ transform:translateY(-2px); box-shadow:0 2px 4px rgba(0,0,0,.24), 0 18px 40px -14px color-mix(in oklab, var(--_bg) 80%, transparent); }
.gx-btn:active{ transform:translateY(0); }
.gx-btn:focus-visible{ outline:2px solid var(--gx-accent); outline-offset:3px; }
.gx-btn--ghost{ --_bg:transparent; --_ink:var(--gx-ink); border-color:var(--gx-line); background:var(--gx-glass); backdrop-filter:blur(var(--gx-blur)); -webkit-backdrop-filter:blur(var(--gx-blur)); box-shadow:none; }
.gx-btn--ghost:hover{ border-color:var(--gx-ink-2); background:var(--gx-glass-2); box-shadow:none; }
.gx-btn--quiet{ --_bg:transparent; --_ink:var(--gx-ink); padding-inline:.35rem; box-shadow:none; }
.gx-btn--quiet:hover{ color:var(--gx-accent); transform:none; }
.gx-btn--lg{ padding:1.15rem 2.1rem; font-size:1rem; }

/* Knopf mit Icon-Scheibe links. Kommt in den Referenzen ständig vor. */
.gx-btn--disc{ padding-left:.45rem; }
.gx-btn--disc .gx-disc{
  width:2.1rem; height:2.1rem; border-radius:50%; flex:none;
  display:grid; place-items:center; font-size:.8rem;
  background:color-mix(in oklab, var(--gx-accent-ink) 16%, transparent);
}
.gx-btn--ghost.gx-btn--disc .gx-disc{ background:var(--gx-glass-2); }

/* Pfeil, der beim Überfahren anspringt */
.gx-btn .gx-arrow{ transition:transform var(--gx-fast) var(--gx-ease); }
.gx-btn:hover .gx-arrow{ transform:translateX(3px); }

/* Runder Icon-Knopf */
.gx-icon-btn{
  width:2.75rem; height:2.75rem; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--gx-line); background:var(--gx-glass); color:var(--gx-ink);
  backdrop-filter:blur(var(--gx-blur)); -webkit-backdrop-filter:blur(var(--gx-blur));
  cursor:pointer; transition:all var(--gx-fast) var(--gx-ease);
}
.gx-icon-btn:hover{ background:var(--gx-ink); color:var(--gx-bg); border-color:var(--gx-ink); }

/* Glasplatte. Grundmaterial für alles Schwebende.
   Wichtig: unter dem weißen Schleier liegt ein halbdeckender Grundton. Reines
   Weißglas über einem hellen Motiv (Gras, Himmel, Schnee) macht jeden Text unlesbar. */
.gx-glass{
  background:linear-gradient(180deg, var(--gx-glass-2), var(--gx-glass)), color-mix(in oklab, var(--gx-bg) 42%, transparent);
  border:1px solid var(--gx-line);
  border-radius:var(--gx-r-card);
  backdrop-filter:blur(var(--gx-blur)) saturate(160%);
  -webkit-backdrop-filter:blur(var(--gx-blur)) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), var(--gx-shadow);
}
/* Glanzkante oben. Ohne sie sieht Glas nach grauem Kasten aus. */
.gx-glass--edge{ position:relative; overflow:hidden; }
.gx-glass--edge::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  pointer-events:none;
}

/* Spec-Karte: eine Zahl, ein Mikro-Label. Nie mehr Text hineinschreiben. */
.gx-spec{
  display:flex; flex-direction:column; gap:.15rem;
  padding:1rem 1.15rem; min-width:8.5rem;
  background:linear-gradient(180deg, var(--gx-glass-2), var(--gx-glass)), color-mix(in oklab, var(--gx-bg) 48%, transparent);
  border:1px solid var(--gx-line);
  border-radius:var(--gx-r-soft);
  backdrop-filter:blur(var(--gx-blur)) saturate(160%);
  -webkit-backdrop-filter:blur(var(--gx-blur)) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), var(--gx-shadow);
}
.gx-spec__val{ font-family:var(--gx-sans); font-size:clamp(1.35rem,2.2vw,1.9rem); font-weight:650; line-height:1.05; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.gx-spec__key{ font-size:var(--gx-t-label); text-transform:uppercase; letter-spacing:.14em; color:var(--gx-ink-2); }
.gx-spec--accent .gx-spec__val{ color:var(--gx-accent); }

/* Rotierendes Siegel. Billig gebaut, große Wirkung. */
.gx-seal{ width:7.5rem; height:7.5rem; position:relative; color:var(--gx-ink-2); }
.gx-seal svg{ width:100%; height:100%; animation:gx-spin 22s linear infinite; }
.gx-seal__core{
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:1.1rem; color:var(--gx-accent);
}
@keyframes gx-spin{ to{ transform:rotate(360deg); } }

/* Laufband */
.gx-marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.gx-marquee__track{ display:flex; gap:3.5rem; width:max-content; animation:gx-marquee 34s linear infinite; }
.gx-marquee:hover .gx-marquee__track{ animation-play-state:paused; }
.gx-marquee__item{ display:flex; align-items:center; gap:.75rem; font-size:.95rem; color:var(--gx-ink-2); white-space:nowrap; }
@keyframes gx-marquee{ to{ transform:translateX(-50%); } }

/* Feines Rasterlinien-Overlay über Bild-Heroes. Sitzt in fast jeder Referenz. */
.gx-grid-lines{
  position:absolute; inset:0; pointer-events:none; z-index:2;
  background-image:linear-gradient(90deg, var(--gx-line-soft) 1px, transparent 1px);
  background-size: calc(100%/6) 100%;
}
.gx-grid-lines--dense{ background-size: calc(100%/12) 100%; }

/* Wasserzeichen-Wortmarke hinter dem Motiv */
.gx-watermark{
  position:absolute; left:50%; bottom:6%; transform:translateX(-50%);
  font-family:var(--gx-display); font-size:clamp(6rem,22vw,20rem); line-height:.8;
  color:var(--gx-ink); opacity:.055; letter-spacing:-.04em; white-space:nowrap;
  pointer-events:none; user-select:none; z-index:0;
}

/* Scroll-Hinweis, vertikal gesetzt */
.gx-scrollcue{
  position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.75rem; z-index:3;
  font-size:.625rem; letter-spacing:.34em; text-transform:uppercase; color:var(--gx-ink-3);
  writing-mode:vertical-rl;
}
.gx-scrollcue::after{ content:""; width:1px; height:4.5rem; background:linear-gradient(var(--gx-ink-3), transparent); }

/* Paginierung 01 / 04 */
.gx-pager{ display:flex; align-items:baseline; gap:.6rem; font-family:var(--gx-mono); font-size:.8rem; color:var(--gx-ink-3); }
.gx-pager__now{ font-size:1.6rem; color:var(--gx-ink); font-variant-numeric:tabular-nums; }
.gx-pager__bar{ width:4.5rem; height:1px; background:var(--gx-line); position:relative; align-self:center; }
.gx-pager__bar::after{ content:""; position:absolute; inset:0 auto 0 0; width:35%; background:var(--gx-accent); }

/* Freigestellter Körper aus reinem CSS. Ersatz für ein 3D-Rendering, solange
   keins da ist, und bereits für sich tragfähig. Immer in --gx-accent getönt. */
.gx-orb{
  --_s: clamp(12rem, 26vw, 26rem);
  width:var(--_s); height:var(--_s); border-radius:50%; position:relative; flex:none;
  background:
    radial-gradient(38% 34% at 32% 26%, rgba(255,255,255,.92), rgba(255,255,255,.18) 42%, transparent 62%),
    radial-gradient(70% 62% at 68% 74%, color-mix(in oklab, var(--gx-accent) 78%, black), transparent 72%),
    radial-gradient(120% 120% at 50% 50%, color-mix(in oklab, var(--gx-accent) 62%, black) 0%, #0b0c0e 78%);
  box-shadow:
    inset 0 -18px 40px color-mix(in oklab, var(--gx-accent) 45%, transparent),
    inset 0 14px 30px rgba(255,255,255,.16),
    0 30px 70px -20px color-mix(in oklab, var(--gx-accent) 55%, transparent),
    0 60px 90px rgba(0,0,0,.55);
  animation: gx-float 9s ease-in-out infinite;
}
/* Lichtring hinter dem Körper */
.gx-orb::after{
  content:""; position:absolute; inset:-14%; border-radius:50%; z-index:-1;
  border:1px solid color-mix(in oklab, var(--gx-accent) 55%, transparent);
  box-shadow:0 0 60px color-mix(in oklab, var(--gx-accent) 45%, transparent);
}
@keyframes gx-float{ 0%,100%{ transform:translateY(-1.2%); } 50%{ transform:translateY(1.2%); } }

/* Vertikale Nummernleiste am rechten Rand (Slide-Anzeige) */
.gx-rail{
  position:absolute; right:clamp(1rem,2.5vw,2.5rem); top:50%; transform:translateY(-50%); z-index:5;
  display:grid; gap:.9rem; font-family:var(--gx-mono); font-size:.8rem; color:var(--gx-ink-3);
}
.gx-rail button{ background:none; border:0; color:inherit; font:inherit; cursor:pointer; padding:0; letter-spacing:.05em; transition:color var(--gx-fast) var(--gx-ease), font-size var(--gx-fast) var(--gx-ease); }
.gx-rail .is-active{ color:var(--gx-ink); font-size:1.5rem; line-height:1; }

/* Gerahmte Bühne: die Seite sitzt als abgerundete Platte im Grund.
   Kommt in den Produkt-Referenzen ständig vor und wirkt sofort wertiger. */
.gx-frame{
  border-radius:clamp(18px,2vw,28px); border:1px solid var(--gx-line);
  overflow:hidden; position:relative; box-shadow:var(--gx-shadow-l);
  background:var(--gx-bg-2);
}
.gx-frame--inset{ margin:clamp(.75rem,1.6vw,1.5rem); }

/* Betonung innerhalb einer Überschrift: gleicher Grad, anderer Schnitt */
.gx-em{ font-style:italic; font-weight:700; }
.gx-em--serif{ font-family:var(--gx-display); font-style:italic; font-weight:400; }

/* Initiale (Drop Cap) für Editorial-Heroes */
.gx-dropcap::first-letter{
  font-family:var(--gx-display); float:left; font-size:4.2em; line-height:.78;
  padding:.06em .12em 0 0; color:var(--gx-accent);
}

/* ------------------------------------------------------------ 4 Navigation */
.gx-nav{
  position:sticky; top:0; z-index:60; width:100%;
  transition: background var(--gx-fast) var(--gx-ease), border-color var(--gx-fast) var(--gx-ease), padding var(--gx-fast) var(--gx-ease);
}
.gx-nav__inner{
  display:flex; align-items:center; gap:var(--gx-gap);
  max-width:var(--gx-max); margin-inline:auto; padding: 1.15rem var(--gx-pad);
}
.gx-nav__brand{ display:flex; align-items:center; gap:.6rem; font-weight:650; letter-spacing:-.02em; font-size:1.0625rem; color:var(--gx-ink); text-decoration:none; }
.gx-nav__brand img{ height:1.6rem; width:auto; }
.gx-nav__links{ display:flex; align-items:center; gap:.35rem; margin-inline:auto; list-style:none; padding:0; }
.gx-nav__links a{
  display:inline-block; padding:.55rem .95rem; border-radius:var(--gx-r-pill);
  font-size:.9rem; font-weight:500; color:var(--gx-ink-2); text-decoration:none;
  transition:color var(--gx-fast) var(--gx-ease), background var(--gx-fast) var(--gx-ease);
}
.gx-nav__links a:hover{ color:var(--gx-ink); }
.gx-nav__links a.is-active{ color:var(--gx-ink); background:var(--gx-glass-2); }
.gx-nav__end{ display:flex; align-items:center; gap:.6rem; }

/* Bauart A: Glas-Pille, schwebt frei über dem Hero */
.gx-nav--pill{ position:fixed; top:1.1rem; }
.gx-nav--pill .gx-nav__inner{
  margin-inline:auto; width:calc(100% - 2*var(--gx-pad));
  /* halbdeckender Grundton unter dem Glas, sonst verschwinden die Menüpunkte
     über einem hellen Hintergrundbild */
  background:linear-gradient(180deg, var(--gx-glass-2), var(--gx-glass)), color-mix(in oklab, var(--gx-bg) 84%, transparent);
  border:1px solid var(--gx-line);
  border-radius:var(--gx-r-pill);
  backdrop-filter:blur(var(--gx-blur)) saturate(180%);
  -webkit-backdrop-filter:blur(var(--gx-blur)) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), var(--gx-shadow);
  padding:.6rem .7rem .6rem 1.35rem;
}
/* Über einem Bild darf der ruhende Menüpunkt nicht zu leise werden:
   gemessen sonst nur 4,0:1 gegen ein helles Motiv. */
.gx-nav--pill .gx-nav__links a{ color:color-mix(in oklab, var(--gx-ink) 72%, var(--gx-ink-2)); }
.gx-nav--pill .gx-nav__links a:hover{ color:var(--gx-ink); }

/* Bauart B: minimal, Linie unten, wird beim Scrollen dicht */
.gx-nav--bar{ border-bottom:1px solid transparent; }
.gx-nav--bar.is-stuck{
  background:color-mix(in oklab, var(--gx-bg) 82%, transparent);
  border-bottom-color:var(--gx-line);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
}
.gx-nav--bar.is-stuck .gx-nav__inner{ padding-block:.85rem; }
/* Bauart C: Logo mittig, Links links und rechts */
.gx-nav--split .gx-nav__links{ margin-inline:0; }
.gx-nav--split .gx-nav__brand{ margin-inline:auto; }

.gx-burger{ display:none; width:2.75rem; height:2.75rem; border:1px solid var(--gx-line); background:var(--gx-glass); border-radius:var(--gx-r-pill); color:var(--gx-ink); cursor:pointer; }
.gx-burger span{ display:block; width:1.1rem; height:1px; background:currentColor; margin:.22rem auto; transition:transform var(--gx-fast) var(--gx-ease), opacity var(--gx-fast); }
.gx-nav.is-open .gx-burger span:nth-child(1){ transform:translateY(.22rem) rotate(45deg); }
.gx-nav.is-open .gx-burger span:nth-child(2){ opacity:0; }
.gx-nav.is-open .gx-burger span:nth-child(3){ transform:translateY(-.22rem) rotate(-45deg); }

/* --------------------------------------------------------------- 5 Heroes */
.gx-hero{ position:relative; overflow:clip; isolation:isolate; }
.gx-hero__inner{ position:relative; z-index:3; max-width:var(--gx-max); margin-inline:auto; padding:clamp(7rem,13vh,10rem) var(--gx-pad) clamp(4rem,8vh,6rem); }

/* Der Glow. Weich über mindestens 40 Prozent der Fläche, sonst wirkt es hart. */
.gx-glow{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.gx-glow::before{
  content:""; position:absolute; inset:-20%;
  background:radial-gradient(48% 44% at 74% 26%, color-mix(in oklab, var(--gx-accent) 40%, transparent), transparent 68%);
  filter:blur(30px);
}
.gx-glow--center::before{ background:radial-gradient(52% 48% at 50% 44%, color-mix(in oklab, var(--gx-accent) 32%, transparent), transparent 70%); }
.gx-glow--twin::after{
  content:""; position:absolute; inset:-20%;
  background:radial-gradient(40% 38% at 18% 76%, color-mix(in oklab, var(--gx-accent-2) 26%, transparent), transparent 68%);
  filter:blur(40px);
}
/* Vignette, damit Text über Bild immer trägt.
   Regel aus der Praxis: in der Textzone müssen mindestens 55 Prozent Grund liegen,
   sonst frisst ein helles Motiv (Gras, Himmel, Schnee) den Fließtext auf. */
.gx-veil{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--gx-bg) 88%, transparent) 0%,
                            color-mix(in oklab, var(--gx-bg) 40%, transparent) 34%,
                            color-mix(in oklab, var(--gx-bg) 42%, transparent) 58%,
                            color-mix(in oklab, var(--gx-bg) 96%, transparent) 100%); }
/* Für Heroes mit Text nur auf einer Seite: dort wird zusätzlich quer abgedunkelt */
.gx-veil--left{ background:linear-gradient(90deg, color-mix(in oklab, var(--gx-bg) 92%, transparent) 0%, color-mix(in oklab, var(--gx-bg) 62%, transparent) 48%, color-mix(in oklab, var(--gx-bg) 22%, transparent) 78%, transparent 100%); }
.gx-veil--full{ background:color-mix(in oklab, var(--gx-bg) 68%, transparent); }

.gx-hero__bg{ position:absolute; inset:0; z-index:0; }
.gx-hero__bg img,.gx-hero__bg video{ width:100%; height:100%; object-fit:cover; }

/* A, Editorial: Serif-Display links, Fließtext rechts, alles auf einer Grundlinie */
.gx-hero--editorial .gx-hero__inner{ display:grid; grid-template-columns: 1.35fr .85fr; gap:clamp(2rem,5vw,5rem); align-items:end; min-height:78vh; }
.gx-hero--editorial .gx-h1{ font-family:var(--gx-display); font-weight:400; }

/* B, Overlap: XXL-Wort, das vom Motiv überlappt wird. Der Tiefeneffekt der Referenzen. */
.gx-hero--overlap .gx-hero__inner{ display:grid; place-items:center; min-height:88vh; text-align:center; }
.gx-hero--overlap .gx-stack{ display:grid; }
.gx-hero--overlap .gx-stack > *{ grid-area:1/1; }
.gx-hero--overlap .gx-word{ font-size:clamp(4rem,17vw,15rem); line-height:.8; font-weight:700; letter-spacing:-.05em; }
.gx-hero--overlap .gx-word--back{ opacity:.42; }
/* vordere Hälfte des Wortes liegt vor dem Motiv */
.gx-hero--overlap .gx-word--front{ -webkit-mask-image:linear-gradient(180deg, transparent 52%, #000 52%); mask-image:linear-gradient(180deg, transparent 52%, #000 52%); }
.gx-hero--overlap .gx-object{ position:relative; z-index:2; max-height:64vh; margin-inline:auto; filter: drop-shadow(0 40px 60px rgba(0,0,0,.55)); }

/* C, Split: zwei Hälften mit hartem Kontrast */
.gx-hero--split{ display:grid; grid-template-columns:1fr 1fr; min-height:92vh; }
.gx-hero--split > *{ position:relative; }
.gx-hero--split .gx-hero__pane{ display:flex; flex-direction:column; justify-content:center; padding:clamp(3rem,7vw,6rem); }
.gx-hero--split .gx-hero__pane--media{ padding:0; overflow:hidden; }
.gx-hero--split .gx-hero__pane--media img{ width:100%; height:100%; object-fit:cover; }
.gx-hero--split .gx-hero__pane--ink{ background:var(--gx-bg-2); }

/* D, Stats: Aussage links, schwebende Zahlenkarten rechts */
.gx-hero--stats .gx-hero__inner{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,4vw,4rem); align-items:center; min-height:84vh; }
.gx-hero__floats{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gx-gap); }
.gx-hero__floats .gx-spec:nth-child(odd){ transform:translateY(-.9rem); }
.gx-hero__floats .gx-spec:nth-child(3n){ transform:translateY(1.1rem); }

/* E, Produkt: Motiv mittig, Spec-Karten frei darum verteilt */
.gx-hero--product .gx-hero__inner{ min-height:92vh; display:grid; place-items:center; text-align:center; }
.gx-hero--product .gx-float{ position:absolute; z-index:4; }
.gx-hero--product .gx-float--tl{ left:6%;  top:32%; }
.gx-hero--product .gx-float--tr{ right:7%; top:26%; }
.gx-hero--product .gx-float--bl{ left:11%; bottom:18%; }
.gx-hero--product .gx-float--br{ right:9%; bottom:22%; }

/* F, Museum: zentrierte Versal-Serif, Motiv freigestellt, viel Luft */
.gx-hero--museum{ background:var(--gx-bg); }
.gx-hero--museum .gx-hero__inner{ text-align:center; min-height:86vh; display:grid; align-content:center; gap:1.4rem; }
.gx-hero--museum .gx-h1{ font-family:var(--gx-display); font-weight:400; text-transform:uppercase; letter-spacing:.01em; line-height:.98; }

/* G, Beitrag: Blog- oder Berichtskopf mit Metazeile */
.gx-hero--post .gx-hero__inner{ max-width:900px; min-height:auto; padding-top:clamp(8rem,16vh,12rem); }
.gx-hero__meta{ display:flex; flex-wrap:wrap; gap:1.4rem; font-size:var(--gx-t-small); color:var(--gx-ink-2); margin-top:1.6rem; padding-top:1.2rem; border-top:1px solid var(--gx-line); }
.gx-hero__meta b{ color:var(--gx-ink); font-weight:600; }

/* H, Portfolio: Kuratorenkopf, Werk zuerst */
.gx-hero--folio .gx-hero__inner{ display:grid; gap:2.4rem; min-height:80vh; align-content:center; }
.gx-hero--folio .gx-h1{ max-width:16ch; }

/* ------------------------------------------------------------ 6 Sektionen */

/* Sektionskopf: Label, Überschrift, optional Beitext rechts */
.gx-head{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(1.5rem,4vw,4rem); align-items:end; margin-bottom:clamp(2.2rem,4vw,3.5rem); }
.gx-head--center{ grid-template-columns:1fr; text-align:center; justify-items:center; }
.gx-head--center .gx-lead{ margin-inline:auto; }
.gx-head--solo{ grid-template-columns:1fr; }

/* Merkmalsraster */
.gx-features{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gx-gap); }
.gx-features--4{ grid-template-columns:repeat(4,1fr); }
.gx-feature{
  padding:clamp(1.5rem,2.2vw,2.1rem);
  border:1px solid var(--gx-line); border-radius:var(--gx-r-card);
  background:linear-gradient(180deg, var(--gx-glass), transparent);
  transition:border-color var(--gx-fast) var(--gx-ease), transform var(--gx-fast) var(--gx-ease), background var(--gx-fast) var(--gx-ease);
}
.gx-feature:hover{ border-color:color-mix(in oklab, var(--gx-accent) 45%, var(--gx-line)); transform:translateY(-3px); }
.gx-feature__icon{
  width:2.9rem; height:2.9rem; border-radius:12px; display:grid; place-items:center;
  background:color-mix(in oklab, var(--gx-accent) 16%, transparent);
  color:var(--gx-accent); margin-bottom:1.15rem; font-size:1.15rem;
}
.gx-feature__num{ font-family:var(--gx-mono); font-size:.8rem; color:var(--gx-ink-3); margin-bottom:.9rem; }
.gx-feature h3{ font-size:1.1875rem; margin-bottom:.5rem; letter-spacing:-.015em; }
.gx-feature p{ color:var(--gx-ink-2); font-size:.9375rem; }

/* Redaktionelle Leistungskarten: dünne Linien, Magazinsatz, kein Kasten */
.gx-services{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--gx-line); }
.gx-service{ padding:clamp(1.8rem,3vw,2.6rem) clamp(1.2rem,2vw,2rem); border-bottom:1px solid var(--gx-line); border-right:1px solid var(--gx-line); position:relative; transition:background var(--gx-fast) var(--gx-ease); }
.gx-service:nth-child(3n){ border-right:0; }
.gx-service:hover{ background:var(--gx-glass); }
.gx-service__idx{ font-family:var(--gx-mono); font-size:.75rem; color:var(--gx-accent); letter-spacing:.1em; }
.gx-service h3{ font-family:var(--gx-display); font-weight:400; font-size:clamp(1.4rem,2vw,1.75rem); margin:.9rem 0 .6rem; }
.gx-service p{ color:var(--gx-ink-2); font-size:.9375rem; }
.gx-service__more{ display:inline-flex; align-items:center; gap:.4rem; margin-top:1.1rem; font-size:.875rem; color:var(--gx-ink); text-decoration:none; border-bottom:1px solid var(--gx-accent); padding-bottom:.15rem; }

/* Produktkarten in Glas */
.gx-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gx-gap); }
.gx-card{ position:relative; overflow:hidden; border-radius:var(--gx-r-card); border:1px solid var(--gx-line); background:var(--gx-glass); backdrop-filter:blur(var(--gx-blur)) saturate(160%); -webkit-backdrop-filter:blur(var(--gx-blur)) saturate(160%); box-shadow:inset 0 1px 0 rgba(255,255,255,.12), var(--gx-shadow); transition:transform var(--gx-slow) var(--gx-ease), box-shadow var(--gx-slow) var(--gx-ease); }
.gx-card:hover{ transform:translateY(-6px); box-shadow:inset 0 1px 0 rgba(255,255,255,.16), var(--gx-shadow-l); }
.gx-card__media{ aspect-ratio:4/3; overflow:hidden; }
.gx-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--gx-ease); }
.gx-card:hover .gx-card__media img{ transform:scale(1.045); }
.gx-card__body{ padding:1.35rem 1.4rem 1.5rem; }
.gx-card__kicker{ font-size:var(--gx-t-label); text-transform:uppercase; letter-spacing:.16em; color:var(--gx-ink-3); }
.gx-card h3{ font-size:1.15rem; margin:.45rem 0 .5rem; }
.gx-card p{ font-size:.9375rem; color:var(--gx-ink-2); }
.gx-card__foot{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1.25rem; padding-top:1rem; border-top:1px solid var(--gx-line-soft); }
.gx-card__price{ font-size:1.15rem; font-weight:650; letter-spacing:-.02em; }

/* Zahlenband */
.gx-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-block:1px solid var(--gx-line); }
.gx-stat{ padding:clamp(1.6rem,3vw,2.4rem) 1.2rem; border-right:1px solid var(--gx-line); }
.gx-stat:last-child{ border-right:0; }
.gx-stat__val{ font-size:clamp(2rem,4vw,3.2rem); font-weight:650; letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums; }
.gx-stat__key{ margin-top:.6rem; font-size:var(--gx-t-label); text-transform:uppercase; letter-spacing:.16em; color:var(--gx-ink-2); }

/* Stimmen */
.gx-quotes{ columns:3; column-gap:var(--gx-gap); }
.gx-quote{ break-inside:avoid; margin-bottom:var(--gx-gap); padding:clamp(1.4rem,2.2vw,1.9rem); border:1px solid var(--gx-line); border-radius:var(--gx-r-card); background:var(--gx-glass); position:relative; }
.gx-quote::before{ content:"\201C"; position:absolute; top:.2rem; right:1rem; font-family:var(--gx-display); font-size:5rem; line-height:1; color:var(--gx-accent); opacity:.25; }
.gx-quote p{ font-size:1rem; }
.gx-quote__who{ display:flex; align-items:center; gap:.75rem; margin-top:1.2rem; }
.gx-quote__who img{ width:2.4rem; height:2.4rem; border-radius:50%; object-fit:cover; }
.gx-quote__name{ font-size:.9rem; font-weight:600; }
.gx-quote__role{ font-size:.8125rem; color:var(--gx-ink-3); }

/* Geschichte, dunkel */
.gx-story{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,5vw,5rem); align-items:center; }
.gx-story__media{ position:relative; border-radius:var(--gx-r-card); overflow:hidden; }
.gx-story__media img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
/* Der Aufkleber liegt auf einem Foto: er braucht eigenen Grund, sonst wird er unlesbar */
.gx-story__badge{ position:absolute; left:1.2rem; bottom:1.2rem; margin:0;
  background:color-mix(in oklab, var(--gx-bg) 74%, transparent); color:var(--gx-ink); }
.gx-timeline{ list-style:none; margin:2rem 0 0; padding:0; }
.gx-timeline li{ position:relative; padding:0 0 1.6rem 1.9rem; border-left:1px solid var(--gx-line); }
.gx-timeline li:last-child{ padding-bottom:0; border-left-color:transparent; }
.gx-timeline li::before{ content:""; position:absolute; left:-4.5px; top:.45rem; width:8px; height:8px; border-radius:50%; background:var(--gx-accent); }
.gx-timeline b{ display:block; font-size:.8125rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gx-ink-3); margin-bottom:.3rem; }

/* Preise */
.gx-plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gx-gap); align-items:start; }
.gx-plan{ padding:clamp(1.6rem,2.4vw,2.2rem); border:1px solid var(--gx-line); border-radius:var(--gx-r-card); background:var(--gx-glass); }
.gx-plan--hero{ border-color:color-mix(in oklab, var(--gx-accent) 55%, transparent); background:linear-gradient(180deg, color-mix(in oklab, var(--gx-accent) 10%, transparent), var(--gx-glass) 55%); box-shadow:var(--gx-shadow-l); transform:translateY(-.85rem); }
.gx-plan__name{ font-size:.8125rem; text-transform:uppercase; letter-spacing:.16em; color:var(--gx-ink-2); }
.gx-plan__price{ font-size:clamp(2.2rem,3.4vw,2.9rem); font-weight:650; letter-spacing:-.04em; margin:.7rem 0 .2rem; line-height:1; }
.gx-plan__price small{ font-size:.9rem; font-weight:500; color:var(--gx-ink-2); letter-spacing:0; }
.gx-plan ul{ list-style:none; margin:1.4rem 0; padding:0; display:grid; gap:.7rem; }
.gx-plan li{ display:flex; gap:.65rem; font-size:.9375rem; color:var(--gx-ink-2); }
.gx-plan li::before{ content:"✓"; color:var(--gx-accent); font-weight:700; flex:none; }
.gx-plan .gx-btn{ width:100%; }

/* Fragen und Antworten */
.gx-faq{ border-top:1px solid var(--gx-line); }
.gx-faq details{ border-bottom:1px solid var(--gx-line); }
.gx-faq summary{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:1.4rem 0; cursor:pointer; list-style:none; font-size:clamp(1.05rem,1.5vw,1.2rem); font-weight:550; letter-spacing:-.015em; }
.gx-faq summary::-webkit-details-marker{ display:none; }
.gx-faq summary::after{ content:"+"; font-size:1.5rem; color:var(--gx-accent); transition:transform var(--gx-fast) var(--gx-ease); }
.gx-faq details[open] summary::after{ transform:rotate(45deg); }
.gx-faq details p{ padding:0 0 1.5rem; color:var(--gx-ink-2); max-width:70ch; }

/* Schluss-Aufruf mit Glühen */
.gx-cta{ position:relative; overflow:hidden; border-radius:clamp(24px,3vw,34px); border:1px solid var(--gx-line); background:var(--gx-bg-2); padding:clamp(2.8rem,6vw,5rem); text-align:center; isolation:isolate; }
.gx-cta::before{ content:""; position:absolute; inset:-45% -12% auto -12%; height:135%; z-index:0; pointer-events:none;
  background:radial-gradient(52% 58% at 50% 4%, color-mix(in oklab, var(--gx-accent) 55%, transparent), transparent 68%); filter:blur(26px); }
.gx-cta > *{ position:relative; z-index:1; }
.gx-cta .gx-h2{ max-width:20ch; margin-inline:auto; }
.gx-cta__row{ display:flex; gap:.85rem; justify-content:center; flex-wrap:wrap; margin-top:2rem; }

/* Logo-Reihe */
.gx-logos{ display:flex; align-items:center; justify-content:space-between; gap:2.5rem; flex-wrap:wrap; opacity:.62; }
.gx-logos img{ height:1.6rem; width:auto; filter:grayscale(1) brightness(1.8); }

/* -------------------------------------------------------------- 7 Footer */
.gx-footer{ border-top:1px solid var(--gx-line); background:var(--gx-bg); }
.gx-footer__top{ display:grid; grid-template-columns:1.3fr repeat(3,.9fr); gap:clamp(1.5rem,4vw,3.5rem); padding-block:clamp(3rem,6vw,5rem); }
.gx-footer h4{ font-size:var(--gx-t-label); text-transform:uppercase; letter-spacing:.18em; color:var(--gx-ink-3); margin-bottom:1.1rem; }
.gx-footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.gx-footer a{ color:var(--gx-ink-2); text-decoration:none; font-size:.9375rem; transition:color var(--gx-fast) var(--gx-ease); }
.gx-footer a:hover{ color:var(--gx-ink); }
.gx-footer__bottom{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; padding-block:1.6rem; border-top:1px solid var(--gx-line-soft); font-size:.8125rem; color:var(--gx-ink-3); }
/* Editorial-Variante: riesige Wortmarke als Abschluss */
.gx-footer--editorial .gx-footer__mark{
  font-family:var(--gx-display); font-size:clamp(3.5rem,13vw,11rem); line-height:.82;
  letter-spacing:-.045em; color:var(--gx-ink); opacity:.14; padding-bottom:1rem; white-space:nowrap; overflow:hidden;
}

/* ------------------------------------------------------------- 8 Bewegung */
.gx-reveal{ opacity:0; transform:translateY(22px); transition:opacity .9s var(--gx-ease), transform .9s var(--gx-ease); }
.gx-reveal.is-in{ opacity:1; transform:none; }
.gx-reveal--d1{ transition-delay:.09s; } .gx-reveal--d2{ transition-delay:.18s; }
.gx-reveal--d3{ transition-delay:.27s; } .gx-reveal--d4{ transition-delay:.36s; }

/* Zeilenweiser Texteinzug für Displayzeilen */
.gx-lines span{ display:block; overflow:hidden; }
.gx-lines span > i{ display:block; font-style:normal; transform:translateY(105%); transition:transform 1s var(--gx-ease); }
.gx-lines.is-in span > i{ transform:none; }
.gx-lines.is-in span:nth-child(2) > i{ transition-delay:.1s; }
.gx-lines.is-in span:nth-child(3) > i{ transition-delay:.2s; }

/* Zeiger-Licht, folgt der Maus (setzt --gx-mx/--gx-my per JS) */
.gx-spot{ position:relative; }
.gx-spot::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:5; opacity:0;
  transition:opacity .4s var(--gx-ease);
  background:radial-gradient(220px circle at var(--gx-mx,50%) var(--gx-my,50%), color-mix(in oklab, var(--gx-accent) 20%, transparent), transparent 62%);
}
.gx-spot:hover::after{ opacity:1; }

/* Tiefenversatz beim Scrollen */
.gx-parallax{ will-change:transform; }

@media (prefers-reduced-motion: reduce){
  .gx *,.gx *::before,.gx *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .gx-reveal{ opacity:1; transform:none; }
  .gx-lines span > i{ transform:none; }
}

/* ---------------------------------------------------------------- 9 Mobil */
@media (max-width: 1080px){
  .gx-features,.gx-cards,.gx-plans,.gx-services{ grid-template-columns:repeat(2,1fr); }
  .gx-features--4{ grid-template-columns:repeat(2,1fr); }
  .gx-service:nth-child(3n){ border-right:1px solid var(--gx-line); }
  .gx-service:nth-child(2n){ border-right:0; }
  .gx-quotes{ columns:2; }
  .gx-stats{ grid-template-columns:repeat(2,1fr); }
  .gx-stat:nth-child(2n){ border-right:0; }
  .gx-stat:nth-child(-n+2){ border-bottom:1px solid var(--gx-line); }
  .gx-footer__top{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 820px){
  /* Die Leiste klappt in sich auf, statt ein zweites Feld darüberzulegen.
     Sonst ragen Marke, Aktionen und Menüknopf zusammen über den Rand hinaus. */
  .gx-nav__inner{ flex-wrap:wrap; row-gap:.2rem; }
  .gx-nav__links,.gx-nav__end{ display:none; }
  .gx-burger{ display:block; margin-left:auto; }
  .gx-nav.is-open .gx-nav__links,
  .gx-nav.is-open .gx-nav__end{
    display:flex; flex-direction:column; align-items:stretch; width:100%;
    gap:.35rem; margin:0; padding:0; list-style:none;
  }
  .gx-nav.is-open .gx-nav__links{ order:3; margin-top:.7rem; padding-top:.7rem; border-top:1px solid var(--gx-line-soft); }
  .gx-nav.is-open .gx-nav__end{ order:4; margin-top:.5rem; padding-bottom:.3rem; }
  .gx-nav.is-open .gx-nav__links a{ padding:.7rem .9rem; color:var(--gx-ink); }
  /* Aufgeklappt braucht die Leiste einen deckenden Grund, sonst scheint das
     Hintergrundbild durch die Menüpunkte und nichts ist mehr lesbar. */
  .gx-nav--pill.is-open .gx-nav__inner{ border-radius:var(--gx-r-card); background:color-mix(in oklab, var(--gx-bg) 94%, transparent); }
  .gx-nav.is-open{ background:transparent; }
  .gx-nav--split .gx-nav__brand{ margin-inline:0; }
  .gx-hero--editorial .gx-hero__inner,
  .gx-hero--stats .gx-hero__inner,
  .gx-story,.gx-head{ grid-template-columns:1fr; align-items:start; }
  .gx-hero--split{ grid-template-columns:1fr; }
  .gx-hero--split .gx-hero__pane--media{ min-height:46vh; order:-1; }
  .gx-hero--product .gx-float{ position:static; margin:.5rem auto 0; }
  .gx-hero--product .gx-floats-mobile{ display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center; }
  .gx-watermark{ font-size:clamp(4rem,30vw,9rem); }
}
@media (max-width: 560px){
  .gx-features,.gx-cards,.gx-plans,.gx-services,.gx-stats{ grid-template-columns:1fr; }
  .gx-service{ border-right:0 !important; }
  .gx-stat{ border-right:0; border-bottom:1px solid var(--gx-line); }
  .gx-stat:last-child{ border-bottom:0; }
  .gx-quotes{ columns:1; }
  .gx-footer__top{ grid-template-columns:1fr; }
  .gx-hero__floats{ grid-template-columns:1fr 1fr; }
  .gx-btn{ width:100%; }
  .gx-cta__row .gx-btn{ width:auto; }
}