:root {
    --lime:        #9fe870;
    --lime-hover:  #cdffad;
    --lime-soft:   #e2f6d5;
    --ink:         #0e0f0c;
    --ink-soft:    #1a1c18;
    --sage:        #e8ebe6;
    --grey:        #454745;
    --grey-light:  #868685;
    --line:        #e0e4dd;
    --forest:      #163300;
    --white:       #ffffff;
    --radius:      24px;
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    font-family: Inter, system-ui, sans-serif;
    background: var(--ink);
    color: var(--white);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  ::selection { background: var(--lime); color: var(--ink); }
  a { color: inherit; }
  a:hover { color: var(--forest); }
  h1, h2, h3 { font-family: Manrope, sans-serif; margin: 0; }

  /* --- Bakgrund: blueprint-rutnät + mjuk lime-glöd -------------------- */
  .stage { position: relative; flex: 1; overflow: hidden; display: flex; flex-direction: column; }
  .stage::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image:
      linear-gradient(rgba(159,232,112,.07) 1px, transparent 1px),
      linear-gradient(90deg, rgba(159,232,112,.07) 1px, transparent 1px);
    background-size: 34px 34px;
    -webkit-mask-image: radial-gradient(circle at 50% 42%, #000 0%, transparent 78%);
            mask-image: radial-gradient(circle at 50% 42%, #000 0%, transparent 78%);
  }
  .stage::after {
    content: ""; position: absolute; z-index: 0; pointer-events: none;
    left: 50%; top: 46%; transform: translate(-50%,-50%);
    width: 900px; height: 900px; max-width: 130vw; border-radius: 9999px;
    background: radial-gradient(circle, rgba(159,232,112,.24) 0%, rgba(159,232,112,.09) 40%, rgba(159,232,112,0) 68%);
    filter: blur(4px);
  }

  /* --- Flankerande bilder --------------------------------------------- */
  .flank { position: absolute; z-index: 1; top: 42%; width: 300px; height: 400px; border-radius: 20px; overflow: hidden; pointer-events: none;
    border: 1px solid rgba(159,232,112,.16); box-shadow: 0 40px 80px -40px rgba(0,0,0,.7); }
  .flank .ph { position: absolute; inset: 0; background-size: cover; background-position: center; }
  .flank.left  .ph { background-image: url("img/landing_2.jpg"); }
  .flank.right .ph { background-image: url("img/landing_1.jpg"); }
  /* Inre kant fejdas till full transparens (verklig alfa-mask) */
  .flank.left  { left: 9%;  transform: translateY(-50%) perspective(1100px) rotateY(15deg) rotateZ(-5deg); transform-origin: right center; animation: floatL 11s ease-in-out infinite;
    -webkit-mask-image: linear-gradient(90deg, #000 30%, transparent 92%); mask-image: linear-gradient(90deg, #000 30%, transparent 92%); }
  .flank.right { right: 9%; transform: translateY(-50%) perspective(1100px) rotateY(-19deg) rotateZ(2.5deg); transform-origin: left center; animation: floatR 13s ease-in-out infinite;
    -webkit-mask-image: linear-gradient(270deg, #000 30%, transparent 92%); mask-image: linear-gradient(270deg, #000 30%, transparent 92%); }
  @keyframes floatL { 0%,100%{transform:translateY(-50%) perspective(1100px) rotateY(15deg) rotateZ(-5deg)} 50%{transform:translateY(calc(-50% - 26px)) perspective(1100px) rotateY(11deg) rotateZ(-3.5deg)} }
  @keyframes floatR { 0%,100%{transform:translateY(-50%) perspective(1100px) rotateY(-19deg) rotateZ(2.5deg)} 50%{transform:translateY(calc(-50% - 32px)) perspective(1100px) rotateY(-14deg) rotateZ(1.5deg)} }
  @media (prefers-reduced-motion: reduce) { .flank { animation: none !important; } }

  /* --- Header --------------------------------------------------------- */
  .top { position: relative; z-index: 2; padding: 32px 24px 24px; display: flex; justify-content: center; }
  .brand { display: inline-flex; flex-direction: column; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); }
  .brand-logo { height: 52px; width: auto; display: block; }
  .brand-tagline { font-size: 14px; font-weight: 600; color: #fff; letter-spacing: .01em; }

  /* --- Innehåll ------------------------------------------------------- */
  .content { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 32px 24px 72px; }
  .badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(159,232,112,.14); color: var(--lime); padding: 7px 15px; border-radius: 9999px; font-size: 13px; font-weight: 600; margin-bottom: 26px; }
  .badge .dot { width: 7px; height: 7px; border-radius: 9999px; background: #2ead4b; box-shadow: 0 0 0 0 rgba(46,173,75,.6); animation: pulse 1.9s infinite; }
  @keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(46,173,75,.55)} 70%{box-shadow:0 0 0 8px rgba(46,173,75,0)} 100%{box-shadow:0 0 0 0 rgba(46,173,75,0)} }

  h1 { font-weight: 800; font-size: 66px; line-height: 1.0; letter-spacing: -.03em; max-width: 12ch; margin: 0 auto 24px; text-wrap: balance; }
  h1 .accent { color: var(--lime); }
  .lead { font-size: 20px; line-height: 1.55; color: #b8c0b2; max-width: 560px; margin: 0 auto 14px; text-wrap: pretty; }
  .lead strong { color: var(--white); font-weight: 600; }

  /* --- Nyhetsbrev ----------------------------------------------------- */
  .signup { margin-top: 14px; width: 100%; max-width: 480px; }
  .signup-label { font-size: 14px; font-weight: 600; color: var(--white); margin-bottom: 12px; }
  form.news { display: flex; gap: 10px; background: var(--ink-soft); border: 1px solid #2f322c; border-radius: var(--radius); padding: 7px 7px 7px 8px; box-shadow: 0 20px 50px -20px rgba(0,0,0,.6); }
  form.news input {
    flex: 1; min-width: 0; border: none; outline: none; background: transparent;
    font-family: Inter, sans-serif; font-size: 16px; color: var(--white); padding: 12px 14px;
  }
  form.news input::placeholder { color: var(--grey-light); }
  .btn {
    display: inline-flex; align-items: center; justify-content: center;
    font-family: Inter, sans-serif; font-size: 16px; font-weight: 600; text-decoration: none;
    padding: 14px 26px; border-radius: 18px; border: none; cursor: pointer; white-space: nowrap;
    background: var(--lime); color: var(--ink);
    transition: transform .15s ease, background-color .15s ease;
  }
  .btn:hover { background: var(--lime-hover); transform: translateY(-1px); }
  .consent { font-size: 12.5px; color: var(--grey-light); margin-top: 14px; line-height: 1.5; }
  .consent a { text-decoration: underline; text-underline-offset: 2px; }
  .consent a:hover { color: var(--lime); }

  .success { display: none; align-items: center; gap: 12px; justify-content: center; background: var(--ink-soft); border: 1px solid #2f322c; border-radius: var(--radius); padding: 18px 22px; box-shadow: 0 20px 50px -20px rgba(0,0,0,.6); }
  .success .check { flex-shrink: 0; width: 34px; height: 34px; border-radius: 9999px; background: var(--lime); color: var(--ink); display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 800; }
  .success p { margin: 0; text-align: left; font-size: 15px; line-height: 1.45; color: var(--white); }
  .success p span { color: #b8c0b2; }
  .signup.done form.news, .signup.done .signup-label, .signup.done .consent { display: none; }
  .signup.done .success { display: flex; }

  /* --- Footer --------------------------------------------------------- */
  footer { position: relative; z-index: 2; padding: 24px; text-align: center; font-size: 13px; color: var(--grey-light); }
  footer a { text-decoration: none; }
  footer a:hover { color: var(--lime); }

  @media (max-width: 640px) {
    .top { padding-bottom: 14px; }
    h1 { font-size: 44px; }
    .lead { font-size: 18px; }
    form.news { flex-direction: column; padding: 10px; }
    form.news input { padding: 12px; }
    .btn { width: 100%; padding: 15px; }
    .content { padding-bottom: 0; }
  }
  @media (max-width: 1160px) { .flank { display: none; } }