:root{
      --bg: #0b0f1a;             /* ciemny styl jak na landingach konsultingowych */
      --surface: #0f1627;
      --panel: #121a2d;
      --ink: #e6eefc;
      --muted: #93a4c4;
      --brand: #3b82f6;          /* niebieski (ConQuest vibe) */
      --brand-2: #16a34a;        /* zielony (Decode vibe) */
      --accent: #a78bfa;         /* fiolet subtelnie */
      --border: rgba(255,255,255,0.08);
      --shadow: 0 14px 40px rgba(2,6,23,0.45);
      --radius: 14px;
      --radius-lg: 22px;
      --trans: 200ms ease;
      --container: 1160px;
      --glass: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    }
    *,*::before,*::after{ box-sizing: border-box; }
    html,body{ margin:0; padding:0; }
    body{
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
      color: var(--ink);
      background:
        radial-gradient(1000px 600px at 85% -10%, rgba(22,163,74,0.18), rgba(23,201,100,0) 60%),
        radial-gradient(800px 500px at 10% 10%, rgba(59,130,246,0.22), rgba(59,130,246,0) 60%),
        #0b0f1a;
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
    }
    a{ color: inherit; text-decoration: none; }
    img{ max-width: 100%; display: block; }
    .container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 20px; }

    /* Header */
    header{
      position: sticky; top:0; z-index:50; background: rgba(11,15,26,0.6); backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border);
    }
    .nav{ display:flex; align-items:center; justify-content:space-between; height:78px; }
    .logo{ display:inline-flex; align-items:center; gap:10px; font-weight:800; letter-spacing:0.1px; }
    .logo-mark{ width:34px; height:34px; border-radius:10px; background: linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow: 0 8px 22px rgba(59,130,246,0.35), inset 0 0 18px rgba(255,255,255,0.25); }
    .nav-links{ display:flex; gap:22px; font-weight:700; color: var(--muted); }
    .nav-links a{ padding:10px 10px; border-radius:10px; transition: background var(--trans), color var(--trans); }
    .nav-links a:hover{ background: rgba(255,255,255,0.06); color:#fff; }
    .menu-btn{ display:none; width:44px; height:44px; border-radius:12px; border:1px solid var(--border); background: var(--panel); color: var(--ink); align-items:center; justify-content:center; }
    .menu-icon{ width:20px; height:2px; background: var(--ink); position: relative; }
    .menu-icon::before,.menu-icon::after{ content:""; position:absolute; left:0; width:20px; height:2px; background: var(--ink); }
    .menu-icon::before{ top:-6px; } .menu-icon::after{ top:6px; }
    @media (max-width: 860px){ .nav-links{ display:none; } .menu-btn{ display:inline-flex; } }

    /* Hero */
  
    @media (max-width: 860px) {
  .hero { 
    padding: 40px 16px 30px 16px; /* top right bottom left */
  }
  .container {
    padding-left: 12px;
    padding-right: 12px;
  }
}

    .hero-grid{ display:grid; grid-template-columns: 1.2fr 1fr; gap:40px; align-items:center; }
    .eyebrow{ color: var(--brand); font-weight:800; font-size:13px; letter-spacing:0.3px; text-transform: uppercase; margin-bottom:12px; }
    h1{ font-size: clamp(36px, 5vw, 58px); line-height:1.06; margin:0 0 14px; letter-spacing:-0.6px; }
    .lead{ color: var(--muted); font-size: clamp(16px, 2vw, 18px); margin-bottom: 20px; }
    .cta-row{ display:flex; gap:14px; flex-wrap:wrap; }
    .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding: 12px 18px; border-radius: 12px; border:1px solid var(--border); background: var(--panel); color: var(--ink); font-weight:800; transition: transform var(--trans), box-shadow var(--trans), background var(--trans); box-shadow: var(--shadow); }
    .btn:hover{ transform: translateY(-1px); background: #0d1529; }
    .btn.primary{ background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; border: none; }
    .btn.primary:hover{ filter: brightness(1.06); transform: translateY(-1.5px); }
    .btn.ghost{ background: transparent; border-color: rgba(255,255,255,0.18); }

    /* Domyślny hero */
.hero-art {
  position: relative;
  height: 360px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.mesh {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(400px 220px at 20% 30%, rgba(59,130,246,0.25), transparent 60%),
    radial-gradient(340px 200px at 80% 70%, rgba(22,163,74,0.28), transparent 60%),
    conic-gradient(from 180deg at 50% 50%, #0f1627, #121a2d, #0e1526, #0f1627);
}

.floating {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.pane {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  box-shadow: var(--shadow);
  animation: float 8s ease-in-out infinite;
}

.pane strong { display: block; }
.pane:nth-child(2){ animation-delay: -2s; }
.pane:nth-child(3){ animation-delay: -4s; }

@keyframes float{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-8px) } }

/* === Dostosowanie do mobilnych ekranów === */
@media (max-width: 768px) {
  .hero-art {
    height: auto;           /* automatyczna wysokość */
    padding: 10px;          /* trochę przestrzeni wewnątrz */
  }

  .floating {
    display: grid;
    grid-template-columns: 1fr; /* jedna kolumna na mobilkach */
    gap: 6px;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 20px;
  }

  .pane {
    padding: 10px;
    font-size: 7px;
  }
}

    .pane:nth-child(2){ animation-delay: -2s; }
    .pane:nth-child(3){ animation-delay: -4s; }
    @keyframes float{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-8px) } }

    
    /* Sections */
    section{ padding: 68px 0; }
    .section-title{ font-size: 28px; margin: 0 0 10px; }
    .section-sub{ color: var(--muted); margin: 0 0 24px; }

    /* Trust */
    .trust{ display:flex; gap:24px; flex-wrap:wrap; align-items:center; opacity:0.9; }
    .trust .badge{ padding:10px 14px; border-radius:12px; border:1px dashed var(--border); background: rgba(255,255,255,0.03); font-weight:700; font-size:14px; color:#c9d7f2; }

    /* Feature grid */
    .grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px; }
    .card{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); transition: transform var(--trans), background var(--trans); }
    .card:hover{ transform: translateY(-4px); background: #111a2f; }
    .card h3{ margin:4px 0 6px; font-size: 18px; }
    .card p{ margin:0; color: var(--muted); font-size: 15px; }
    .pill{ display:inline-block; font-size:12px; font-weight:800; letter-spacing:0.2px; color:#06121f; background: linear-gradient(135deg, #60a5fa, #34d399); padding:6px 10px; border-radius: 999px; margin-bottom: 10px; }

    /* Split services */
    .services-wrap{ display:grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
    .stack{ display:grid; gap:14px; }
    .service{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
    .service h3{ margin:0 0 8px; }
    .service ul{ margin:0; padding-left: 18px; color: var(--muted); }

    /* Process */
    .steps{ display:grid; grid-template-columns: repeat(4,1fr); gap:16px; }
    .step{ background: var(--surface); border:1px solid var(--border); border-radius: 14px; padding:16px; }
    .step .num{ display:inline-grid; place-items:center; width:34px; height:34px; border-radius:10px; background: linear-gradient(135deg, var(--brand), var(--brand-2)); color:#fff; font-weight:800; margin-bottom:8px; }

    /* Case studies */
    .cases{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px; }
    .case{ background: var(--surface); border:1px solid var(--border); border-radius: 16px; overflow:hidden; box-shadow: var(--shadow); }
    .case .thumb{ height:160px; background: linear-gradient(45deg, rgba(59,130,246,0.25), rgba(22,163,74,0.25)); }
    .case .inner{ padding:16px; }
    .case .meta{ color: var(--muted); font-size:13px; }

    /* Technologies */
    .techs{ display:grid; grid-template-columns: repeat(6,1fr); gap:12px; }
    .tech{ background: var(--panel); border:1px solid var(--border); border-radius: 12px; padding:12px; text-align:center; font-weight:700; color:#cfe0ff; }

    /* Contact */
    .contact-wrap{ display:grid; grid-template-columns: 1.1fr 1fr; gap: 22px; align-items:start; }
    form{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
    .field{ display:grid; gap:8px; margin-bottom: 14px; }
    label{ font-weight: 600; font-size: 14px; color: var(--muted); }
    input, textarea, select{
      width:100%; padding:12px 14px; border-radius: 12px; background:#0f1627; border:1px solid var(--border); color: var(--ink);
      outline:none; transition: border-color var(--trans), box-shadow var(--trans);
    }
    input:focus, textarea:focus, select:focus{ border-color: rgba(59,130,246,0.6); box-shadow: 0 0 0 4px rgba(59,130,246,0.16); }
    textarea{ min-height: 120px; resize: vertical; }
    .contact-card{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
    .contact-item{ display:grid; gap:4px; margin-bottom:12px; }
    .contact-item span{ color: var(--muted); font-size:14px; }

    /* CTA bar */
    .sticky-cta{ position: sticky; bottom: 14px; z-index: 40; }
    .sticky-cta .bar{ display:flex; gap:12px; align-items:center; justify-content:space-between; background: var(--glass); border:1px solid var(--border); border-radius:16px; padding:12px 14px; box-shadow: var(--shadow); }
    .sticky-cta .txt{ font-weight:700; }

    /* Footer */
    footer{ padding: 34px 0 60px; color: var(--muted); text-align:center; }
    .footer-links{ display:flex; gap:14px; justify-content:center; margin-top:10px; }
    .footer-links a:hover{ color: #fff; }

    /* Reveal */
    .reveal{ opacity: 0; transform: translateY(12px); transition: opacity 600ms ease, transform 600ms ease; }
    .reveal.in{ opacity: 1; transform: translateY(0); }
    /* ukrywa honeypot dla ludzi, zostawia w DOM dla botów */
    .visually-hidden{
      position:absolute !important;
      left:-9999px !important;
      width:1px; height:1px;
      overflow:hidden;
      clip:rect(0 0 0 0);
      clip-path: inset(50%);
      white-space:nowrap;
      border:0; padding:0; margin:0;
    }
    /* Mega mocne, szybkie pulsowanie */
@keyframes pulse-mega {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.9);
  }
  60% {
    transform: scale(1.2);
    box-shadow: 0 0 0 100px rgba(59, 130, 246, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
  }
}

.chatbot-launcher {
  animation: pulse-mega 1.2s infinite;
}

    /* Responsive */
    @media (max-width: 1100px){ .grid{ grid-template-columns: repeat(2,1fr); } .services-wrap{ grid-template-columns: 1fr; } .steps{ grid-template-columns: repeat(2,1fr); } .cases{ grid-template-columns: repeat(2,1fr); } .techs{ grid-template-columns: repeat(3,1fr); } }
    @media (max-width: 860px){ .hero-grid, .contact-wrap{ grid-template-columns: 1fr; } .hero-art{ height: 300px; } }
    @media (max-width: 560px){ .grid{ grid-template-columns: 1fr; } .cases{ grid-template-columns: 1fr; } .btn{ width:100%; } }

    /* Skip link */
    .skip-link{ position:absolute; left:-999px; top:-999px; background:#000; color:#fff; padding:8px 12px; border-radius: 8px; }
    .skip-link:focus{ left:10px; top:10px; z-index:9999; }
    .visually-hidden{
  position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden;
}


    /* Chatbot */
    .chatbot-launcher{ position:fixed; right:20px; bottom:20px; width:56px; height:56px; border-radius:9999px; border:1px solid var(--border); background: linear-gradient(135deg, var(--brand), var(--brand-2)); color:#fff; box-shadow: var(--shadow); display:grid; place-items:center; cursor:pointer; z-index:60; }
    .chatbot-panel{ position:fixed; right:20px; bottom:90px; width:360px; max-height:70vh; display:none; flex-direction:column; background: var(--surface); border:1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); overflow:hidden; z-index:60; }
    .chatbot-panel.open{ display:flex; }
    .chatbot-header{ padding:12px 14px; display:flex; align-items:center; justify-content:space-between; background: var(--panel); border-bottom:1px solid var(--border); }
    .chatbot-title{ font-weight:800; }
    .chatbot-close{ background: transparent; border:1px solid var(--border); border-radius:10px; padding:6px 8px; color: var(--ink); cursor:pointer; }
    .chatbot-messages{ padding:12px; overflow:auto; flex:1; display:flex; flex-direction:column; gap:10px; }
    .msg{ padding:10px 12px; border-radius:12px; max-width:85%; line-height:1.5; }
    .msg.you{ background: rgba(59,130,246,0.15); align-self:flex-end; }
    .msg.ai{ background: rgba(255,255,255,0.06); border:1px solid var(--border); align-self:flex-start; }
    .chatbot-input{ padding:10px; border-top:1px solid var(--border); background: var(--panel); display:flex; gap:8px; }
    .chatbot-input textarea{ flex:1; resize:none; max-height:120px; min-height:42px; padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:#0f1627; color: var(--ink); }
    .chatbot-input button{ padding:10px 14px; border-radius:10px; border:1px solid var(--border); background: linear-gradient(135deg, var(--brand), var(--brand-2)); color:#fff; font-weight:800; cursor:pointer; }
    @media (max-width: 560px){ .chatbot-panel{ right:10px; left:10px; width:auto; } .chatbot-launcher{ right:10px; bottom:10px; } }
    .skip-link:focus{ left:10px; top:10px; z-index:9999; }