/*
 * Bauplan Abschnitt 07 ("Commerce & Admin" — Landing-Page-Verwaltung).
 * Phase 3 des Web-Standard-Plans: nach zwei Artifact-Mockup-Runden mit
 * echter Zustimmung ("Ja, so umsetzen") kam explizites Feedback, dass
 * Runde 2 zwar hell/dunkel-technisch stimmte, aber keinen Spaß vermittelt
 * hat ("fehlen sehr viele Faktoren die Spaß garantieren"). Runde 3
 * ("Fun-Pass", ebenfalls per Mockup zugestimmt: "jetzt hast du es fun
 * fun fun!!") fügt bewusst Mehrfarbigkeit pro Erlebnis-Karte, Pinnwand-
 * Winkel, Lade-Animation und lockerere Copy hinzu — keine neue,
 * ungeprüfte Designidee, sondern die reale Umsetzung des zugestimmten
 * dritten Mockups.
 *
 * Eigene Tokens statt design-tokens.css' --gf-*-Variablen (siehe deren
 * eigener Kommentar: über vier Flächen geteilt — Homepage, Gallery,
 * App/Host-Panel, Dash/Admin). Die Startseite ist als "Hauptwebseite"
 * bewusst eigenständig gestaltet.
 */
:root{
  --bg:#1D1319;
  --bg-tint:#241722;
  --card:#291B27;
  --border:#3B2634;
  --border-soft:#32212D;
  --ink:#FBF3F6;
  --ink-soft:#CBB7C4;
  --ink-faint:#8E7889;

  --rose:#F0729B;
  --rose-deep:#F9A9C2;
  --rose-solid:#E8497C;
  --rose-tint:#3A2230;

  --sun:#F5B940;
  --sun-tint:#3D2E14;
  --mint:#57D6A8;
  --mint-tint:#123128;
  --sky:#5FC4D2;
  --sky-tint:#0F2E32;
  --grape:#B892F0;
  --grape-tint:#251C3A;

  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-body:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --radius:14px;
  --radius-pill:9999px;
  --shadow-card:0 1px 2px rgba(0,0,0,.35), 0 10px 28px -14px rgba(0,0,0,.55);
  --shadow-lift:0 18px 44px -16px rgba(240,114,155,.4);
}
*{ box-sizing:border-box; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
[hidden]{ display:none!important; }
.wrap{ max-width:1180px; margin:0 auto; padding:0 2rem; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:var(--font-display); margin:0; text-wrap:balance; }
.accent{ font-style:italic; color:var(--rose-deep); }

.announcement{
  background:var(--card); color:var(--ink); border-bottom:1px solid var(--border-soft);
  text-align:center; font-size:13px; font-weight:600; padding:9px 1.5rem;
}

header{
  position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-soft);
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding:18px 0; }
.nav-brand{ display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:600; font-size:21px; }
.nav-brand .dot{ width:9px; height:9px; border-radius:50%; background:var(--rose); box-shadow:0 0 0 4px var(--rose-tint); }
.nav-links{ display:flex; align-items:center; gap:28px; font-size:14.5px; font-weight:600; color:var(--ink-soft); }
.nav-links a:hover{ color:var(--ink); }
.nav-cta{
  background:var(--rose-solid); color:#fff;
  padding:11px 22px; border-radius:8px; font-weight:700; font-size:14px; box-shadow:var(--shadow-lift);
}

/* ---------- Hero ---------- */
.hero{ padding:4rem 0 5rem; overflow:hidden; position:relative; }
.confetti-field{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0; }
.confetti-field span{
  position:absolute; top:-40px; left:0; width:8px; height:4px; border-radius:2px; opacity:.85;
  background:var(--rose); animation:fall linear infinite; animation-duration:13s; animation-delay:0s;
}
@keyframes fall{
  0%{ transform:translateY(-10vh) rotate(0deg); opacity:0; }
  8%{ opacity:.85; }
  100%{ transform:translateY(115vh) rotate(340deg); opacity:.85; }
}
/* Position/Farbe/Timing über nth-child statt style="…" (CSP-Grund siehe
   Mosaic-Kommentar oben) — 9 feste Profile, zweimal durchlaufen ergibt
   trotzdem sichtbare Varianz unter den 18 Spans. */
.confetti-field span:nth-child(9n+1){ left:4%;  width:10px; background:var(--rose);  animation-duration:12s; animation-delay:-1s; }
.confetti-field span:nth-child(9n+2){ left:15%; width:7px;  background:var(--sun);   animation-duration:16s; animation-delay:-6s; }
.confetti-field span:nth-child(9n+3){ left:28%; width:9px;  background:var(--mint);  animation-duration:11s; animation-delay:-3s; }
.confetti-field span:nth-child(9n+4){ left:41%; width:6px;  background:var(--sky);   animation-duration:15s; animation-delay:-9s; }
.confetti-field span:nth-child(9n+5){ left:54%; width:8px;  background:var(--grape); animation-duration:13s; animation-delay:-5s; }
.confetti-field span:nth-child(9n+6){ left:66%; width:10px; background:var(--rose);  animation-duration:17s; animation-delay:-11s; }
.confetti-field span:nth-child(9n+7){ left:78%; width:7px;  background:var(--sun);   animation-duration:12s; animation-delay:-2s; }
.confetti-field span:nth-child(9n+8){ left:89%; width:9px;  background:var(--mint);  animation-duration:14s; animation-delay:-8s; }
.confetti-field span:nth-child(9n+9){ left:96%; width:6px;  background:var(--sky);   animation-duration:16s; animation-delay:-4s; }
@media (prefers-reduced-motion: reduce){ .confetti-field{ display:none; } }

.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:3.5rem; align-items:center; position:relative; z-index:1; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:800;
  letter-spacing:.04em; color:var(--sun); background:var(--sun-tint);
  padding:7px 14px; border-radius:var(--radius-pill); margin-bottom:1.3rem; transform:rotate(-2deg);
}
.hero h1{ font-size:clamp(30px,4.1vw,50px); font-weight:600; line-height:1.12; letter-spacing:-.01em; }
.hero p{ max-width:470px; margin:1.2rem 0 2rem; font-size:17px; color:var(--ink-soft); }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }
.btn-primary{
  position:relative; background:var(--rose-solid); color:#fff;
  padding:15px 28px; border-radius:9px; font-weight:700; font-size:15px;
  box-shadow:var(--shadow-lift); border:none; cursor:pointer; font-family:var(--font-body);
  display:inline-block; transition:transform .15s;
}
.btn-primary:hover{ transform:translateY(-2px) rotate(-1deg); }
.btn-secondary{
  background:var(--card); color:var(--ink); border:1px solid var(--border);
  padding:14px 26px; border-radius:9px; font-weight:700; font-size:15px;
  display:inline-flex; align-items:center; gap:8px;
}
.btn-secondary .play{
  width:20px; height:20px; border-radius:50%; background:var(--rose-tint); color:var(--rose-deep);
  display:inline-flex; align-items:center; justify-content:center; font-size:10px;
}
.badges{ display:flex; gap:10px; flex-wrap:wrap; margin-top:2.4rem; }
.badge{
  font-size:12.5px; font-weight:700; color:var(--ink-soft); background:var(--bg-tint);
  border:1px solid var(--border-soft); padding:7px 13px; border-radius:var(--radius-pill);
}

.collage{ position:relative; height:440px; z-index:1; }
.photo{
  position:absolute; border-radius:16px; box-shadow:var(--shadow-card);
  border:6px solid var(--card); overflow:hidden;
}
.p1{ width:220px; height:280px; top:0; left:20px; background:linear-gradient(160deg,#F4B4C6,#E14C7C);
  animation:drop1 .7s cubic-bezier(.2,1.4,.4,1) both, float1 6s ease-in-out .7s infinite; }
.p2{ width:180px; height:230px; top:36px; right:0; background:linear-gradient(160deg,var(--sun),#C98A1F);
  animation:drop2 .7s .12s cubic-bezier(.2,1.4,.4,1) both, float2 7s ease-in-out .82s infinite; }
.p3{ width:200px; height:160px; bottom:0; left:90px; background:linear-gradient(160deg,var(--mint),#0D8F65);
  animation:drop3 .7s .24s cubic-bezier(.2,1.4,.4,1) both, float3 6.5s ease-in-out .94s infinite; }
@keyframes drop1{ 0%{ transform:translateY(-60px) rotate(-16deg); opacity:0; } 100%{ transform:translateY(0) rotate(-8deg); opacity:1; } }
@keyframes drop2{ 0%{ transform:translateY(-60px) rotate(15deg); opacity:0; } 100%{ transform:translateY(0) rotate(7deg); opacity:1; } }
@keyframes drop3{ 0%{ transform:translateY(-60px) rotate(13deg); opacity:0; } 100%{ transform:translateY(0) rotate(5deg); opacity:1; } }
@keyframes float1{ 0%,100%{ transform:rotate(-8deg) translateY(0); } 50%{ transform:rotate(-5deg) translateY(-10px); } }
@keyframes float2{ 0%,100%{ transform:rotate(7deg) translateY(0); } 50%{ transform:rotate(9deg) translateY(-14px); } }
@keyframes float3{ 0%,100%{ transform:rotate(5deg) translateY(0); } 50%{ transform:rotate(3deg) translateY(-8px); } }
@media (prefers-reduced-motion: reduce){ .p1,.p2,.p3,.live-dot{ animation:none!important; } }
.live-pill{
  position:absolute; top:16px; left:-6px; z-index:3; background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius-pill); padding:8px 14px 8px 10px; display:flex; align-items:center; gap:7px;
  font-size:12.5px; font-weight:700; box-shadow:var(--shadow-card); transform:rotate(-3deg);
}
.live-dot{ width:8px; height:8px; border-radius:50%; background:#F04D6B; animation:pulse 1.6s infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.3; } }
.qr-card{
  position:absolute; bottom:16px; right:6px; z-index:3; width:130px; background:var(--card); border:1px solid var(--border);
  border-radius:12px; padding:12px; box-shadow:var(--shadow-card); text-align:center; transform:rotate(4deg);
}
.qr-grid{
  width:100%; aspect-ratio:1; border-radius:6px; margin-bottom:8px;
  background-image:
    linear-gradient(var(--ink) 22%, transparent 0), linear-gradient(90deg, var(--ink) 22%, transparent 0);
  background-size:20% 20%; background-color:var(--bg-tint);
}
.qr-card p{ margin:0; font-size:10.5px; font-weight:700; color:var(--ink-soft); }

section{ padding:4.5rem 0; }
section.tint{ background:var(--bg-tint); }
.section-head{ max-width:620px; margin:0 auto 2.8rem; text-align:center; }
.section-eyebrow{
  font-size:12px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color:var(--rose-deep); margin-bottom:.6rem;
}
.section-head h2{ font-size:clamp(24px,3.2vw,34px); font-weight:600; letter-spacing:-.01em; }
.section-head p{ color:var(--ink-soft); margin:.7rem 0 0; font-size:16px; }

/* ---------- Erlebnisse — pinboard, own colors per card, hover lift ---------- */
.experience-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.75rem 1.5rem; padding:0 .5rem; }
.experience-card{
  background:var(--card); border:1px solid var(--border-soft); border-radius:16px;
  padding:1.75rem; box-shadow:var(--shadow-card); position:relative;
  transition:transform .25s cubic-bezier(.2,1,.3,1), box-shadow .25s;
}
.experience-card:hover{ transform:translateY(-6px) scale(1.02); box-shadow:0 24px 48px -20px rgba(0,0,0,.5); z-index:2; }
.experience-card:nth-child(1){ transform:rotate(-2deg); }
.experience-card:nth-child(2){ transform:rotate(1.5deg); }
.experience-card:nth-child(3){ transform:rotate(-1deg); }
.experience-card:nth-child(4){ transform:rotate(2deg); }
.experience-card:nth-child(5){ transform:rotate(-1.5deg); }
.experience-card:nth-child(6){ transform:rotate(1deg); }
.pin{
  position:absolute; top:-10px; left:50%; transform:translateX(-50%);
  width:16px; height:16px; border-radius:50%; box-shadow:var(--shadow-card);
}
.experience-icon{
  width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-size:21px; margin-bottom:1rem;
}
.experience-card h3{ font-family:var(--font-body); font-size:16.5px; font-weight:800; margin-bottom:.4rem; }
.experience-card p{ margin:0; font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
.experience-tag{
  position:absolute; top:1.5rem; right:1.5rem; font-size:9.5px; font-weight:800; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink-faint); background:var(--bg-tint); border:1px solid var(--border-soft);
  padding:3px 8px; border-radius:var(--radius-pill);
}
.c-rose .pin{ background:var(--rose); } .c-rose .experience-icon{ background:var(--rose-tint); color:var(--rose-deep); }
.c-sun .pin{ background:var(--sun); } .c-sun .experience-icon{ background:var(--sun-tint); color:var(--sun); }
.c-mint .pin{ background:var(--mint); } .c-mint .experience-icon{ background:var(--mint-tint); color:var(--mint); }
.c-sky .pin{ background:var(--sky); } .c-sky .experience-icon{ background:var(--sky-tint); color:var(--sky); }
.c-grape .pin{ background:var(--grape); } .c-grape .experience-icon{ background:var(--grape-tint); color:var(--grape); }

.mosaic-swatch{
  display:grid; grid-template-columns:repeat(8,1fr); gap:2px;
  border-radius:8px; overflow:hidden; margin-bottom:1rem; aspect-ratio:8/3;
}
.mosaic-swatch div{ animation:tilePulse 3s ease-in-out infinite; }
/* Farbe + Verzögerung über nth-child statt style="…" (CSP-Grund siehe oben). */
.mosaic-swatch div:nth-child(6n+1){ background:var(--rose); animation-delay:0s; }
.mosaic-swatch div:nth-child(6n+2){ background:var(--sun); animation-delay:.3s; }
.mosaic-swatch div:nth-child(6n+3){ background:var(--mint); animation-delay:.6s; }
.mosaic-swatch div:nth-child(6n+4){ background:var(--sky); animation-delay:.9s; }
.mosaic-swatch div:nth-child(6n+5){ background:var(--grape); animation-delay:1.2s; }
.mosaic-swatch div:nth-child(6n+6){ background:#F4B4C6; animation-delay:1.5s; }
@keyframes tilePulse{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }
@media (prefers-reduced-motion: reduce){ .mosaic-swatch div{ animation:none; } }

/* ---------- Showcase (Vorher/Nachher-Beispielbilder) ---------- */
.showcase-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2rem; }
.showcase-pair{ display:flex; flex-direction:column; gap:1.1rem; }
.showcase-images{ display:flex; align-items:center; gap:.75rem; }
.showcase-figure{
  flex:1; margin:0; position:relative; border-radius:14px; overflow:hidden;
  border:1px solid var(--border-soft); box-shadow:var(--shadow-card); aspect-ratio:1/1;
}
.showcase-figure.wide{ aspect-ratio:4/3; }
.showcase-figure img{ width:100%; height:100%; object-fit:cover; display:block; }
.showcase-label{
  position:absolute; top:10px; left:10px; z-index:2; font-size:10.5px; font-weight:800;
  letter-spacing:.05em; text-transform:uppercase; color:var(--ink);
  background:rgba(29,19,25,.72); backdrop-filter:blur(4px);
  padding:4px 10px; border-radius:var(--radius-pill);
}
.showcase-arrow{ flex:none; font-size:20px; color:var(--rose-deep); font-weight:700; }
.showcase-pair h3{ font-family:var(--font-body); font-size:16px; font-weight:800; margin:0; }
.showcase-pair > p{ margin:0; font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
.showcase-tag{
  display:inline-block; margin-top:.5rem; font-size:10.5px; font-weight:700; letter-spacing:.02em;
  color:var(--ink-faint); background:var(--bg-tint); border:1px solid var(--border-soft);
  padding:3px 9px; border-radius:var(--radius-pill);
}

/* ---------- Ablauf (guest journey timeline) ---------- */
.timeline{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.step{ background:var(--card); border:1px solid var(--border-soft); border-radius:var(--radius); padding:1.8rem 1.5rem; box-shadow:var(--shadow-card); }
.step-num{
  font-family:var(--font-display); font-size:13px; font-weight:700; color:var(--bg);
  background:var(--sun); width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; margin-bottom:1rem;
}
.step-time{ font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:.55rem; }
.step h3{ font-family:var(--font-body); font-size:16px; font-weight:800; margin-bottom:.4rem; }
.step p{ margin:0; font-size:13.5px; color:var(--ink-soft); line-height:1.6; }

/* ---------- Warum QR-Code (moved after Erlebnisse/Ablauf, quieter) ---------- */
.why-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:3rem; align-items:center; }
.why-copy h2{ font-size:clamp(22px,2.6vw,30px); font-weight:600; margin-bottom:1rem; }
.why-copy p{ color:var(--ink-soft); font-size:15px; line-height:1.7; margin:0 0 1rem; }
.why-copy strong{ color:var(--ink); }
.why-source{ font-size:12px; color:var(--ink-faint); margin-top:1rem; }
.compare{ background:var(--card); border:1px solid var(--border-soft); border-radius:var(--radius); padding:1.7rem; box-shadow:var(--shadow-card); }
.compare-row{ margin-bottom:1.2rem; }
.compare-row:last-child{ margin-bottom:0; }
.compare-label{ display:flex; justify-content:space-between; font-size:13px; font-weight:700; margin-bottom:.5rem; }
.compare-label span:last-child{ font-variant-numeric:tabular-nums; color:var(--ink-soft); font-weight:600; }
.compare-track{ height:9px; border-radius:var(--radius-pill); background:var(--bg-tint); overflow:hidden; }
.compare-fill{ height:100%; border-radius:var(--radius-pill); background:var(--ink-faint); opacity:.5; }
.compare-row.win .compare-label span:first-child{ color:var(--rose-deep); }
.compare-row.win .compare-fill{ background:linear-gradient(90deg,var(--rose-solid),var(--rose-deep)); opacity:1; }
/* Feste Breiten-Klassen statt style="width:…" — die echte CSP auf
   demo.gaestefotos.com hat kein 'unsafe-inline' in style-src, siehe
   Sitzungsnotiz (48 blockierte Inline-Styles beim ersten Live-Test). */
.fill-25{ width:25%; }
.fill-30{ width:30%; }
.fill-80{ width:80%; }

/* ---------- admin-driven sections (unchanged structure) ---------- */
.features-grid, .testimonials-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; text-align:center; }

.feature-card, .testimonial-card{
  background:var(--card); border:1px solid var(--border-soft); border-radius:var(--radius); padding:1.75rem;
}
.feature-icon{
  width:40px; height:40px; border-radius:10px;
  background:var(--rose-tint); color:var(--rose-deep);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; margin-bottom:1rem;
}
.feature-card h3{ font-size:16px; font-weight:700; margin:0 0 6px; }
.feature-card p{ font-size:13.5px; color:var(--ink-soft); margin:0; line-height:1.55; }

.testimonial-card p{ font-size:14px; margin:0 0 1rem; }
.testimonial-author{ font-size:13px; color:var(--ink-soft); }
.testimonial-author b{ color:var(--ink); }

.stat-value{ font-family:var(--font-display); font-size:clamp(26px,3.2vw,34px); font-weight:600; color:var(--rose-deep); font-variant-numeric:tabular-nums; }
.stat-label{ font-size:11.5px; color:var(--ink-soft); margin-top:4px; text-transform:uppercase; letter-spacing:.04em; }

.pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; align-items:stretch; }
.pricing-card{
  background:var(--card); border:1px solid var(--border-soft); border-radius:var(--radius);
  padding:1.75rem; position:relative; display:flex; flex-direction:column;
}
.pricing-card.highlighted{ border-color:var(--rose); box-shadow:0 0 0 1.5px var(--rose), var(--shadow-lift); }
.pricing-badge{
  position:absolute; top:-11px; right:1.5rem; background:var(--rose-solid); color:#fff;
  font-size:11px; font-weight:700; letter-spacing:.03em; padding:3px 12px; border-radius:var(--radius-pill);
}
.pricing-card h3{ font-size:16.5px; font-weight:700; margin:0 0 10px; }
.pricing-value{ font-family:var(--font-display); font-size:clamp(24px,2.8vw,30px); font-weight:600; font-variant-numeric:tabular-nums; }
.pricing-unit{ font-size:11.5px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.04em; margin:2px 0 14px; }
.pricing-card p{ font-size:13.5px; color:var(--ink-soft); margin:0; line-height:1.55; }

.faq-list{ max-width:680px; margin:0 auto; display:flex; flex-direction:column; gap:0; }
.faq-item{ border-bottom:1px solid var(--border-soft); padding:1.25rem 0; }
.faq-item summary{
  display:flex; justify-content:space-between; align-items:center; cursor:pointer;
  font-weight:600; font-size:15px; list-style:none;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; font-size:20px; color:var(--rose); font-weight:400; }
.faq-item[open] summary::after{ content:"\2013"; }
.faq-item p{ margin:.75rem 0 0; color:var(--ink-soft); font-size:14px; }

.cta-band{
  background:linear-gradient(155deg, var(--rose-tint), var(--sun-tint));
  border:1px solid var(--border-soft); border-radius:1.25rem; padding:3.5rem 2rem; text-align:center;
}
.cta-band h2{ font-size:clamp(22px,3vw,30px); font-weight:600; margin:0 0 10px; }
.cta-band p{ color:var(--ink-soft); margin:0 0 1.75rem; }

footer{ padding:2.5rem 0 3rem; border-top:1px solid var(--border-soft); }
.footer-bottom{ text-align:center; color:var(--ink-faint); font-size:12.5px; }

/* Konfetti-Burst bei Klick auf einen Haupt-Button: als Kind des Buttons
   angehängt (position:absolute, mittig über eine feste Klasse), Bewegung
   ausschließlich über Element.animate() (Web Animations API) — die ist
   von der 'style-src'-CSP nicht betroffen, im Gegensatz zu style="…"
   oder el.style.xyz = …, siehe Kommentare oben im Warum-/Mosaic-Bereich. */
.confetti-piece{
  position:absolute; top:50%; left:50%; width:8px; height:8px; margin:-4px;
  border-radius:2px; pointer-events:none; z-index:5;
}
.confetti-c0{ background:var(--rose); }
.confetti-c1{ background:var(--sun); }
.confetti-c2{ background:var(--mint); }
.confetti-c3{ background:var(--sky); }
.confetti-c4{ background:var(--grape); }

@media (max-width:980px){
  .hero-grid{ grid-template-columns:1fr; }
  .collage{ height:360px; margin-top:1rem; }
  .why-grid{ grid-template-columns:1fr; }
  .experience-grid, .timeline{ grid-template-columns:1fr 1fr; }
  .features-grid, .testimonials-grid, .pricing-grid{ grid-template-columns:1fr 1fr; }
  .stats-grid{ grid-template-columns:1fr 1fr; }
  .nav-links{ display:none; }
}
@media (max-width:560px){
  .experience-grid, .timeline, .features-grid, .testimonials-grid, .stats-grid, .pricing-grid{ grid-template-columns:1fr; }
}