:root{
      --bg: #f6f7fb;
      --card: #ffffff;
      --ink: #0f172a;
      --muted: #475569;

      --brand: #2f5f8f;
      --brand-2: #1f3f63;
      --slate: #3b4453;
      --accent: #b98b6d;

      --radius: 18px;
      --shadow: 0 10px 30px rgba(15,23,42,.10);
      --shadow-soft: 0 8px 18px rgba(15,23,42,.08);
      --focus: 0 0 0 3px rgba(47,95,143,.25);
    }

    *{ box-sizing:border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color: var(--ink);
      background: var(--bg);
      line-height:1.55;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }

    site-header, site-footer { display: block; }
    #app-content { flex: 1; display: flex; flex-direction: column; }

    a{ color: var(--brand); text-decoration:none; }
    a:hover{ text-decoration:underline; }
    a:focus{ outline:none; box-shadow: var(--focus); border-radius: 12px; }

    .container{
      width: min(1100px, calc(100% - 32px));
      margin: 0 auto;
    }

    /* ===== HEADER (biały) ===== */
    header{
      background: #fff;
      border-bottom: 1px solid rgba(15,23,42,.08);
    }

    .topbar{
      padding: 18px 0 16px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      flex-wrap: wrap;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:14px;
      min-width: 0;
    }

    .logo{
      width:76px;
      height:76px;
      border-radius: 18px;
      background:#fff;
      border: 1px solid rgba(15,23,42,.08);
      box-shadow: var(--shadow-soft);
      display:grid;
      place-items:center;
      overflow:hidden;
      flex: 0 0 auto;
    }

    .logo img{
      width:100%;
      height:100%;
      object-fit: contain;
      padding: 10px;
    }

    .brand h1{
      margin:0;
      font-size: clamp(20px, 2.3vw, 28px);
      line-height: 1.15;
      letter-spacing: .2px;
    }

    /* usunięty adres pod nazwą */

    .krs-pill{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding: 12px 16px;
      border-radius: 999px;
      background: #fff;
      color: var(--brand-2);
      font-weight: 800;
      border: 1px solid rgba(15,23,42,.12);
      box-shadow: var(--shadow-soft);
      white-space: nowrap;
    }

    /* ===== HERO ===== */
    .hero{
      margin: 18px auto 0;
      background: linear-gradient(135deg, rgba(47,95,143,.96), rgba(31,63,99,.96));
      border-radius: var(--radius);
      color:#fff;
      box-shadow: var(--shadow);
      overflow:hidden;
      position: relative;
    }

    .hero::after{
      content:"";
      position:absolute;
      inset:-40% -30% auto auto;
      width: 560px;
      height: 560px;
      background: radial-gradient(circle at 30% 30%, rgba(185,139,109,.65), transparent 60%);
      transform: rotate(12deg);
      pointer-events:none;
      opacity: .9;
    }

    .hero-inner{
      padding: clamp(18px, 3vw, 30px);
      display:grid;
      grid-template-columns: 1fr;
      gap: 16px;
      align-items:start;
      position: relative;
      z-index:1;
    }

    .hero h2{
      margin: 0 0 12px;
      font-size: clamp(26px, 3.4vw, 42px);
      line-height: 1.08;
      letter-spacing: .2px;
      max-width: 24ch;
    }

    .hero p{
      margin: 0 0 16px;
      color: rgba(255,255,255,.92);
      max-width: 70ch;
      font-size: 16px;
    }

    .cta{
      display:flex;
      gap:12px;
      flex-wrap: wrap;
      margin-top: 12px;
    }

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      padding: 12px 14px;
      border-radius: 14px;
      font-weight: 800;
      border: 1px solid rgba(255,255,255,.25);
      background: rgba(255,255,255,.12);
      color: #fff;
      text-decoration:none;
      transition: transform .08s ease, background .2s ease;
      white-space: nowrap;
    }
    .btn:hover{ background: rgba(255,255,255,.18); text-decoration:none; }
    .btn:active{ transform: translateY(1px); }

    .btn.primary{
      background: linear-gradient(135deg, rgba(185,139,109,.98), rgba(185,139,109,.82));
      border-color: rgba(255,255,255,.18);
      color: #111827;
    }
    .btn.primary:hover{
      background: linear-gradient(135deg, rgba(201,150,121,.99), rgba(185,139,109,.88));
    }

    /* ===== SEKCJA POD HERO ===== */
    main{ padding: 18px 0 0; }

    .cards{
      display:grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14px;
      margin: 18px 0 22px;
    }

    .card{
      background: #fff;
      border-radius: var(--radius);
      border: 1px solid rgba(15,23,42,.08);
      box-shadow: var(--shadow);
      padding: 16px;
      min-height: 120px;
    }

    .card h3{
      margin:0 0 8px;
      font-size: 14px;
      letter-spacing: .5px;
      color: var(--brand-2);
      text-transform: uppercase;
    }

    .card p{
      margin:0;
      color: var(--muted);
      font-weight: 500;
    }

    .doclist{
      display:flex;
      flex-direction:column;
      gap:10px;
      margin-top: 6px;
    }

    .doclink{
      display:inline-flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding: 12px 12px;
      border-radius: 14px;
      border: 1px solid rgba(15,23,42,.10);
      background: rgba(47,95,143,.04);
      font-weight: 800;
      text-decoration:none;
      color: var(--brand-2);
    }
    .doclink:hover{ background: rgba(47,95,143,.07); text-decoration:none; }

    .doclink.disabled{
      background: rgba(15,23,42,.04);
      color: rgba(15,23,42,.45);
      border-color: rgba(15,23,42,.08);
      pointer-events: none;
      cursor: not-allowed;
      filter: grayscale(10%);
    }
    .badge{
      font-size: 12px;
      font-weight: 900;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid rgba(15,23,42,.12);
      background:#fff;
      color: rgba(15,23,42,.65);
      white-space: nowrap;
    }

    /* ===== FOOTER ===== */
    footer{
      margin-top: 24px;
      padding: 22px 0 34px;
      color: rgba(255,255,255,.90);
      background: linear-gradient(135deg, var(--slate), #2f3746);
      border-top: 6px solid rgba(185,139,109,.85);
    }

    .footer-inner{
      display:flex;
      flex-wrap: wrap;
      gap: 14px;
      align-items:flex-start;
      justify-content:space-between;
    }

    .footer-block{
      min-width: 240px;
      flex: 1 1 240px;
    }

    .footer-title{
      margin:0 0 8px;
      color:#fff;
      font-weight: 900;
      letter-spacing: .2px;
    }

    .footer-links{
      display:flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 10px;
    }

    .footer-links a{
      color: #fff;
      background: rgba(255,255,255,.10);
      border: 1px solid rgba(255,255,255,.14);
      padding: 10px 12px;
      border-radius: 999px;
      text-decoration:none;
      font-weight: 800;
    }
    .footer-links a:hover{
      background: rgba(255,255,255,.16);
      text-decoration:none;
    }

    .small{
      margin-top: 10px;
      color: rgba(255,255,255,.78);
      font-size: 13px;
    }

    @media (max-width: 980px){
      .cards{ grid-template-columns: 1fr; }
      .krs-pill{ width: fit-content; }
      .hero h2{ max-width: none; }
    }