:root{
      --bg-0:#0c0f14;          /* page background */
      --nav-bg: rgba(10, 12, 16, .75);
      --text-0:#ffffff;
      --text-1:rgba(255,255,255,.85);
      --text-2:rgba(255,255,255,.65);

      --gold:#d2a024;
      --gold-2:#f2c84c;

      /* Mockup uses a green accent for LinkLord word + buttons */
      --accent:#6fd06a;
      --accent-2:#4fbf55;

      --card-bg:#f6f7f8;
      --card-border: rgba(0,0,0,.08);

      --shadow: 0 18px 60px rgba(0,0,0,.35);
      --shadow-soft: 0 16px 40px rgba(0,0,0,.18);

      --radius-xl: 22px;
      --radius-lg: 18px;
      --radius-md: 14px;
    }

     a.navbar-brand:hover {
      color: var(--accent) ! important;
    }

    .navbar-nav li.nav-item a.nav-link:hover {
        color: var(--ll-green) !important;
    }

    html, body {
      height: 100%;
      background: var(--bg-0);
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    }

    /* ====== Top Nav (dark, centered links, right CTA) ====== */
    .ll-navbar {
      position: absolute;
      top: 0; left: 0; right: 0;
      z-index: 10;
      padding: 18px 0;
    }
    .ll-navwrap {
      background: var(--nav-bg);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 18px;
      padding: 14px 18px;
    }
    .brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--text-0);
      text-decoration: none;
      font-weight: 800;
      letter-spacing: .06em;
    }
    .brand img {
      width: 48px;
      height: 48px;
      border-radius: 10px;
      object-fit: cover;
    }
    .nav-link-ll {
      color: var(--text-1) !important;
      font-weight: 600;
      padding: 10px 14px !important;
      border-radius: 12px;
    }
    .nav-link-ll:hover {
      background: rgba(255,255,255,.06);
      color: var(--text-0) !important;
    }
    .navbar-toggler {
  padding: 6px 10px;
}

.navbar-toggler-icon {
  background-image: none;
  width: 24px;
  height: 2px;
  background-color: white;
  position: relative;
}

.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
  content: "";
  position: absolute;
  width: 24px;
  height: 2px;
  background-color: white;
  left: 0;
}

.navbar-toggler-icon::before {
  top: -7px;
}

.navbar-toggler-icon::after {
  top: 7px;
}

    .btn-ll-signup {
      background: var(--accent);
      border: 0;
      color: #0b150d;
      font-weight: 800;
      padding: 10px 18px;
      border-radius: 14px;
      box-shadow: 0 10px 20px rgba(79,191,85,.22);
    }
    .btn-ll-signup:hover { background: var(--accent-2); }

    /* ====== Hero / top section ====== */
    .hero {
      position: relative;
      padding-top: 110px; /* space for navbar */
      padding-bottom: 0;
      overflow: hidden;
    }

    /* Dark city + golden glow background (approx to mockup) */
    .hero-bg {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(1200px 520px at 60% 45%, rgba(242,200,76,.42), rgba(242,200,76,0) 62%),
        radial-gradient(900px 380px at 70% 55%, rgba(210,160,36,.30), rgba(210,160,36,0) 60%),
        linear-gradient(180deg, rgba(12,15,20,.10), rgba(12,15,20,.60)),
        /* fallback dark */
        linear-gradient(180deg, #0c0f14 0%, #0c0f14 100%);
      background-image: url("../img/bg_linklord_start.jpg");
      background-repeat: no-repeat;
      background-size: 100% auto;   /* Breite an Viewport anpassen */
      background-position: top center;
      filter: saturate(1.05);
    }

    /* Golden “link chain” hint (decor) */
    .hero-chain {
      position: absolute;
      left: 30%;
      top: 34%;
      width: 72%;
      height: 220px;
      
      opacity: .95;
      transform: rotate(-4deg);
      pointer-events: none;
      mix-blend-mode: screen;
      filter: blur(0.2px);
    }

    /* subtle floating particles */
    .hero-sparkles{
      position:absolute;
      inset:0;
      background-image:
        radial-gradient(circle at 12% 25%, rgba(242,200,76,.18) 0 2px, transparent 3px),
        radial-gradient(circle at 22% 55%, rgba(242,200,76,.14) 0 2px, transparent 3px),
        radial-gradient(circle at 68% 35%, rgba(242,200,76,.16) 0 2px, transparent 3px),
        radial-gradient(circle at 86% 62%, rgba(242,200,76,.12) 0 2px, transparent 3px),
        radial-gradient(circle at 78% 22%, rgba(242,200,76,.10) 0 2px, transparent 3px);
      opacity: .7;
      pointer-events:none;
    }

    .hero-inner {
      position: relative;
      z-index: 2;
    }

    .hero-title {
      font-size: clamp(2.1rem, 3.3vw, 3.3rem);
      line-height: 1.07;
      font-weight: 800;
      letter-spacing: -0.02em;
      color: var(--text-0);
      margin: 0 0 10px 0;
    }
    .hero-title .accent {
      color: var(--accent);
      font-weight: 900;
    }

    .hero-actions {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      margin-top: 20px;
      z-index: 1;
    }

    .btn-ll-primary {
      background: linear-gradient(180deg, var(--accent), var(--accent-2));
      border: 0;
      color: #08110a;
      font-weight: 900;
      padding: 14px 22px;
      border-radius: 14px;
      letter-spacing: .02em;
      box-shadow: 0 12px 22px rgba(79,191,85,.24);
    }
    .btn-ll-primary:hover { filter: brightness(.98); }

    .btn-ll-ghost {
      background: rgba(0,0,0,.18);
      border: 1px solid rgba(255,255,255,.28);
      color: var(--text-0);
      font-weight: 800;
      padding: 14px 22px;
      border-radius: 14px;
      letter-spacing: .02em;
    }
    .btn-ll-ghost:hover { background: rgba(255,255,255,.06); }

    /* Right hero image block */
    .hero-figure {
      position: relative;
      height: 520px;
      display: flex;
      align-items: flex-end;
      justify-content: flex-end;
    }
    .hero-figure img {
      max-height: 520px;
      width: auto;
      filter: drop-shadow(0 26px 60px rgba(0,0,0,.45));
    }

    /* ====== Bottom wave section (light) ====== */
    .wave-wrap{
      position: relative;
      z-index: 3;
      margin-top: -65px; /* overlap like mockup */
      background: transparent;
    }
    .wave-top{
      position: relative;
      height: 120px;
      overflow: hidden;
    }
    .wave-top:before{
      content:"";
      position:absolute;
      left:-10%;
      right:-10%;
      top:20px;
      height: 160px;
      background: #efefef;
      border-top-left-radius: 60% 120px;
      border-top-right-radius: 60% 120px;
      transform: rotate(-1.2deg);
      box-shadow: 0 -12px 40px rgba(0,0,0,.25);
    }

    .features {
      position: relative;
      background: #efefef;
      padding: 30px 0 56px 0;
    }

    .feature-card{
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: var(--radius-xl);
      padding: 26px 26px;
      box-shadow: var(--shadow-soft);
      height: 100%;
    }
    .feature-head{
      display:flex;
      align-items:center;
      gap: 12px;
      margin-bottom: 10px;
      font-weight: 800;
      color: #111827;
      font-size: 1.2rem;
    }
    .feature-desc{
      color: rgba(17,24,39,.70);
      margin: 0;
      font-weight: 500;
    }

    .feat-ico{
      width: 34px;
      height: 34px;
      border-radius: 12px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      background: rgba(0,0,0,.04);
      border: 1px solid rgba(0,0,0,.06);
    }
    .feat-ico svg { width: 18px; height: 18px; }

    /* Small mascot in bottom right, like mockup */
    .mascot-corner{
      position:absolute;
      right: 36px;
      bottom: 20px;
      width: 210px;
      max-width: 28vw;
      filter: drop-shadow(0 18px 30px rgba(0,0,0,.25));
      opacity: .98;
      pointer-events:none;
    }

    /* Responsive tweaks */
    @media (max-width: 991.98px){
      .hero-figure{ height: 150px; }
      .hero-figure img{ max-height: 240px; }
      .hero-chain{ left: 10%; top: 46%; width: 95%; }
      .ll-navbar{ position: relative; padding: 14px 0; }
      .hero{ padding-top: 22px; }
      
    }
    @media (max-width: 575.98px){
      .hero-figure-col {z-index: 2;}
      .hero-figure{ height: 40px; z-index: 2;}
      .hero-figure img{ max-height: 180px; z-index: 2;}
      .hero-title{ font-size: 2.05rem; }
      .wave-wrap{ margin-top: -45px; }
      .mascot-corner{ right: 14px; bottom: 10px; width: 160px; }
    }