/* Kolory z brandu:
   - Podstawowy Wiśniowy: #820031
   - Kremowa Biel:        #FFF8FA
   - Pudrowy Róż:         #FFD0E2
   - Jasny Fiolet:        #AA8090
   - Ciemny Fiolet:       #593946
   - Ciemny Burgund:      #53001F
*/

:root{
    --bg0:#53001F;
    --bg1:#820031;
    --ink:#FFF8FA;
    --muted: rgba(255,248,250,.78);
    --muted2: rgba(255,248,250,.62);
  
    --pink:#FFD0E2;
    --mauve:#AA8090;
    --plum:#593946;
  
    --shadow: 0 18px 50px rgba(0,0,0,.35);
  }
  
  *{ box-sizing: border-box; }
  html,body{ height:100%; }
  
  body{
    margin:0;
    font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: var(--ink);
    overflow:hidden;
  
    /* burgund jak na okładce + subtelne światło */
    background:
      radial-gradient(1200px 800px at 18% 62%, rgba(130,0,49,.32), transparent 60%),
      radial-gradient(900px 700px at 70% 30%, rgba(255,208,226,.10), transparent 65%),
      linear-gradient(135deg, var(--bg0), var(--bg1) 45%, var(--bg0));
  }
  
  /* Canvas fraktali */
  #fractal{
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    display:block;
    z-index: 0;
    pointer-events:none;
  }
  
  /* Lekka ziarnistość bez obrazków */
  body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:
      radial-gradient(circle at 20% 30%, rgba(255,208,226,.05), transparent 55%),
      radial-gradient(circle at 80% 70%, rgba(170,128,144,.06), transparent 60%),
      repeating-linear-gradient(
        0deg,
        rgba(255,248,250,.018) 0px,
        rgba(255,248,250,.018) 1px,
        transparent 2px,
        transparent 4px
      );
    mix-blend-mode: screen;
    opacity: .35;
  }
  
  .shell{
    position:relative;
    z-index:2;
    height:100%;
    width:100%;
  }
  
  .hero{
    height:100%;
    width:min(1100px, 100%);
    margin:0 auto;
    padding: clamp(24px, 4vw, 64px);
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    gap: 18px;
  }
  
  .brand{
    width:min(760px, 100%);
  }
  
  .brandRow{
    display:flex;
    align-items:flex-end;
    gap: 18px;
  }
  
  .logo{
    height: clamp(54px, 8vw, 96px);
    width:auto;
    filter: drop-shadow(0 10px 28px rgba(0,0,0,.35));
  }
  
  .meta{
    margin-bottom: 10px;
    padding-left: 12px;
    border-left: 1px solid rgba(255,248,250,.35);
  }
  
  .metaTitle{
    font-size: 14px;
    letter-spacing: .02em;
    color: var(--muted);
  }
  
  .metaSub{
    font-size: 14px;
    letter-spacing: .02em;
    color: rgba(255,208,226,.85);
  }
  
  .lead{
    margin: 18px 0 10px 0;
    font-size: clamp(15px, 2.2vw, 18px);
    line-height: 1.6;
    color: var(--muted);
    max-width: 62ch;
  }
  
  .ctaRow{
    display:flex;
    flex-wrap:wrap;
    gap: 12px;
    margin-top: 10px;
  }
  
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height: 44px;
    padding: 0 16px;
    border-radius: 999px;
    text-decoration:none;
    font-weight: 600;
    letter-spacing: .01em;
    transition: transform .12s ease, background .12s ease, border-color .12s ease, opacity .12s ease;
    user-select:none;
  }
  
  .btn:active{ transform: translateY(1px); }
  
  .btn.primary{
    color: #2a0010;
    background: linear-gradient(135deg, rgba(255,208,226,.95), rgba(255,248,250,.92));
    box-shadow: var(--shadow);
  }
  
  .btn.ghost{
    color: var(--ink);
    background: rgba(255,248,250,.06);
    border: 1px solid rgba(255,248,250,.18);
    backdrop-filter: blur(8px);
  }
  
  .btn:hover{
    opacity: .95;
    border-color: rgba(255,208,226,.35);
  }
  
  .fineprint{
    margin: 12px 0 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted2);
  }
  
  .foot{
    display:flex;
    flex-wrap:wrap;
    gap: 10px;
    align-items:center;
    margin-top: 22px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,248,250,.14);
    color: rgba(255,248,250,.70);
    font-size: 12px;
  }
  
  .dot{ opacity: .55; }
  .muted{ opacity: .8; }
  
  @media (max-width: 520px){
    .brandRow{ align-items:flex-start; }
    .meta{ margin-bottom: 0; }
  }
  
  /* Szanujemy użytkowników, co nie lubią ruchu */
  @media (prefers-reduced-motion: reduce){
    body{ overflow:auto; }
    #fractal{ display:none; }
    body::before{ opacity: .25; }
  }