/* =====================================================================
   REAL FACILITY · ESG — BASE / DESIGN TOKENS
   ===================================================================== */
:root{
  /* anthracite base */
  --bg:        #070A12;
  --bg-2:      #0A0F1C;
  --bg-3:      #0E1424;
  --surface:   rgba(255,255,255,.035);
  --surface-2: rgba(255,255,255,.06);
  --border:    rgba(255,255,255,.09);
  --border-2:  rgba(255,255,255,.16);

  --text:      #EEF3F8;
  --text-dim:  #9DAAB9;
  --text-faint:#5E6C7D;

  /* brand + ESG accents */
  --brand:     #2C49FF;   /* brightened Real-Facility blue */
  --brand-deep:#0017D6;
  --eco:       #25E08A;   /* Hello Green — Environment */
  --eco-deep:  #0E9D60;
  --social:    #3F7BFF;   /* Soziales */
  --gov:       #9C86FF;   /* Governance */

  --accent: var(--eco);   /* per-section override */

  --maxw: 1240px;
  --pad: clamp(20px, 5vw, 72px);

  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, sans-serif;
  --font-serif: "Newsreader", Georgia, serif;

  --r-sm: 10px;
  --r: 16px;
  --r-lg: 24px;
  --r-xl: 34px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; }
html.lenis, html.lenis body { height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:18px;
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
::selection{ background:var(--eco); color:#031b10; }

h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; line-height:1.04; letter-spacing:-.02em; }
.serif{ font-family:var(--font-serif); }

a{ color:inherit; text-decoration:none; }

/* ---------- background ambience ---------- */
#bg-canvas{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none; opacity:.55;
}
.bg-aura{
  position:fixed; z-index:0; pointer-events:none; border-radius:50%;
  filter:blur(120px); opacity:.5; transition:background .8s var(--ease), opacity .8s;
}
.aura-1{ width:55vw; height:55vw; top:-15vw; right:-10vw; background:radial-gradient(circle, rgba(37,224,138,.20), transparent 70%); }
.aura-2{ width:50vw; height:50vw; bottom:-15vw; left:-15vw; background:radial-gradient(circle, rgba(44,73,255,.18), transparent 70%); }

/* grain */
body::after{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- layout ---------- */
main{ position:relative; z-index:2; }
.section{ position:relative; padding:clamp(96px,13vh,180px) var(--pad); }
.wrap{ max-width:var(--maxw); margin:0 auto; width:100%; }
.narrow{ max-width:820px; }

/* ---------- top progress + nav ---------- */
#progress{ position:fixed; top:0; left:0; height:3px; width:0%; z-index:60;
  background:linear-gradient(90deg, var(--eco), var(--social)); box-shadow:0 0 14px rgba(37,224,138,.6); }

#topbar{
  position:fixed; top:0; left:0; right:0; z-index:55;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--pad); transition:background .4s, backdrop-filter .4s, padding .4s;
}
#topbar.scrolled{ background:rgba(7,10,18,.72); backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--border); padding-top:13px; padding-bottom:13px; }
#topbar .brand{ display:flex; align-items:center; gap:13px; }
#topbar .brand img{ height:34px; width:34px; }
#topbar .brand .bn{ font-family:var(--font-display); font-weight:700; font-size:15px; letter-spacing:.02em; line-height:1.05; }
#topbar .brand .bn small{ display:block; font-family:var(--font-body); font-weight:500; font-size:11px; letter-spacing:.18em; color:var(--text-faint); text-transform:uppercase; }
.brand-mark circle{ stroke:#fff; }
.brand-mark path{ fill:var(--eco); }
#topbar .vsme-pill{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-dim);
  border:1px solid var(--border-2); border-radius:999px; padding:7px 15px; }
@media(max-width:720px){ #topbar .vsme-pill{ display:none; } }

/* side dot nav */
#dotnav{ position:fixed; right:26px; top:50%; transform:translateY(-50%); z-index:55;
  display:flex; flex-direction:column; gap:14px; }
#dotnav button{ all:unset; cursor:pointer; width:11px; height:11px; border-radius:50%;
  background:var(--border-2); position:relative; transition:transform .3s, background .3s; }
#dotnav button:hover{ transform:scale(1.3); }
#dotnav button.active{ background:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
#dotnav button .lbl{ position:absolute; right:22px; top:50%; transform:translateY(-50%) translateX(8px);
  white-space:nowrap; font-size:12px; letter-spacing:.04em; color:var(--text-dim);
  background:rgba(10,15,28,.9); padding:5px 11px; border-radius:8px; border:1px solid var(--border);
  opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; }
#dotnav button:hover .lbl{ opacity:1; transform:translateY(-50%) translateX(0); }
@media(max-width:900px){ #dotnav{ display:none; } }

/* ---------- shared bits ---------- */
.eyebrow{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-body);
  font-size:13px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent); margin-bottom:22px; }
.eyebrow::before{ content:""; width:30px; height:1px; background:var(--accent); opacity:.7; }
.eyebrow.center{ justify-content:center; }
.kicker-num{ font-family:var(--font-display); font-size:13px; color:var(--text-faint); letter-spacing:.2em; }

.sec-title{ font-size:clamp(2.1rem, 5.2vw, 4.1rem); margin-bottom:8px; }
.sec-lead{ font-size:clamp(1.05rem,1.6vw,1.3rem); color:var(--text-dim); max-width:60ch; margin-top:18px; }

.divider{ height:1px; background:linear-gradient(90deg, transparent, var(--border-2), transparent); margin:0 auto; max-width:var(--maxw); }

.tag{ display:inline-block; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); border:1px solid color-mix(in srgb,var(--accent) 40%, transparent);
  border-radius:999px; padding:5px 13px; background:color-mix(in srgb,var(--accent) 9%, transparent); }

.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:30px; position:relative; overflow:hidden; backdrop-filter:blur(8px);
  transition:transform .5s var(--ease), border-color .5s, background .5s; }
.card:hover{ border-color:var(--border-2); }
.glass{ background:linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border:1px solid var(--border); box-shadow:0 30px 60px -30px rgba(0,0,0,.7); }

.metric{ font-family:var(--font-display); font-weight:700; letter-spacing:-.03em; line-height:.95;
  background:linear-gradient(180deg,#fff, color-mix(in srgb,var(--accent) 55%, #fff));
  -webkit-background-clip:text; background-clip:text; color:transparent; }

/* reveal — default visible; JS adds .reveal to arm it */
.reveal{ opacity:0; transform:translateY(34px); }
.reveal.in{ opacity:1; transform:none; transition:opacity .9s var(--ease), transform .9s var(--ease); }
.no-js .reveal{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
  .lenis.lenis-smooth{ scroll-behavior:smooth !important; }
}

/* footer */
footer{ position:relative; z-index:2; padding:70px var(--pad) 54px; border-top:1px solid var(--border);
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.4)); }
footer .frow{ display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; align-items:flex-end; }
footer .muted{ color:var(--text-faint); font-size:14px; line-height:1.7; }