:root{
      --brand-1: #0d6efd;
      --brand-2: #66b2ff;
      --accent: #08306b;
      --ink:#0b1220;
      --ink-soft:#3a475a;
      --panel:#ffffff;
      --line:rgba(15,23,42,0.08);
      --bg-1:#f7f3ee;
      --bg-2:#eef2fb;
      --nav-h: 92px;
    }
    
    body{
      font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      color: var(--ink);
      background: linear-gradient(180deg, var(--bg-1), var(--bg-2));
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: cover;
      overflow-x: hidden;
      margin: 0;
    }

    /* Animacja do logo */
    .logo-images{display:flex;align-items:center;position:relative}
    nav.navbar{
      --logo2-opacity: 1;
      --logo1-x: 0px;
      --logo1-y: 0px;
      --logo1-scale: 1;
      background: var(--panel);
      z-index: 1030;
    }
    nav.navbar {
      padding-top: 10px; 
      padding-bottom: 10px;
      background: var(--panel);
      z-index: 1030;
    }
    .logo-images img.logo1 {
      width: 70px;
      height: auto;
      z-index: 2;
      border-radius: 8px;
      margin-right: -10px;
      transform-origin: left center;
      transform: translate3d(var(--logo1-x), var(--logo1-y), 0) scale(var(--logo1-scale));
      will-change: transform;
      image-rendering: -webkit-optimize-contrast;
      backface-visibility: hidden;
    }
    .logo-images img.logo2{
      width:120px;height:auto;margin-left:-18px;margin-top:15px;z-index:1;
      transform:none;
      opacity:var(--logo2-opacity);
      will-change:opacity
    }
    .navbar .nav-link{font-weight:500;color:var(--ink)}
    .navbar .nav-link:hover{color:var(--brand-1)}

    /* Role switcher */
    .role-switch{ position:relative; display:inline-flex; align-items:center; }
    .role-switch-input{ position:absolute; opacity:0; width:0; height:0; }
    .role-switch-track{
      position:relative; width:56px; height:28px; border-radius:999px; padding:0 6px;
      display:flex; align-items:center; justify-content:space-between;
      background:linear-gradient(180deg,#f4f7fb,#e3ecf8);
      box-shadow: inset 0 3px 6px rgba(11,18,32,0.18), inset 0 -2px 4px rgba(255,255,255,0.9);
      cursor:pointer; transition:background 160ms ease; overflow:hidden;
    }
    .role-switch-thumb{
      position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%;
      background:linear-gradient(180deg,#ffffff,#dbe7ff);
      box-shadow:0 6px 14px rgba(11,18,32,0.2);
      transition:transform 160ms ease;
      z-index:2;
    }
    .role-icon{ font-size:0.7rem; color:#7b879a; transition:color 160ms ease; position:relative; z-index:1; }
    .role-switch-input:focus-visible + .role-switch-track{ outline:2px solid rgba(13,110,253,0.6); outline-offset:2px; }
    .role-switch-input:checked + .role-switch-track .role-switch-thumb{ transform:translateX(28px); }
    .role-switch-input:checked + .role-switch-track .role-icon-right{ color:var(--brand-1); }
    .role-switch-input:not(:checked) + .role-switch-track .role-icon-left{ color:var(--brand-1); }

    /* Animacje do strony */
    html.has-js body{ opacity:0; transform:translateY(8px); transition:opacity 260ms ease, transform 260ms ease; }
    html.has-js body.page-ready{ opacity:1; transform:translateY(0); }
    html.has-js body.page-leave{ opacity:0; transform:translateY(-8px); pointer-events:none; }

    /* Sekcja hero */
    .hero {
      background: linear-gradient(135deg, rgba(11, 18, 32, 0.85), rgba(11, 18, 32, 0.6)), 
                  url('https://images.unsplash.com/photo-1519389950473-47ba0277781c?q=80&w=2070&auto=format&fit=crop');
      background-size: cover;
      background-position: center;
      background-attachment: fixed;
      padding: 8rem 0 6rem;
      position: relative;
      overflow: hidden;
      color: #ffffff;
    }

    .hero h1 { color: #ffffff; font-size: clamp(2.2rem, 5vw, 3.8rem); }
    .hero p.lead { color: rgba(255, 255, 255, 0.9) !important; }

    /* Karuzela kart usług telefon */
    @media (max-width: 768px) {
      .hero { padding: 4rem 0 3rem; text-align: center; }
      .hero-deck {
        --card-width: 230px;
        --card-height: 340px;
        margin-top: 30px;
        height: calc(var(--card-height) + 40px);
      }
      .hero-deck-card {
        padding: 16px;
        gap: 8px;
      }
      .hero-deck-card h3 { font-size: 1rem; }
      .hero-deck-card p { font-size: 0.8rem; }
      .pricing-board { 
        display: flex; 
        overflow-x: auto; 
        gap: 12px; 
        padding: 10px 20px 30px; 
        margin: 0 -15px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
      }
      .price-block { flex: 0 0 85%; scroll-snap-align: center; }
    }
    
    /* Karuzela kart */
    .hero-deck{
      --card-width: 280px;
      --card-height: 420px;
      --deck-offset: 30%;
      position:relative;
      z-index:1;
      height: calc(var(--card-height) + 60px);
      display:flex;
      align-items:center;
      justify-content:center;
      margin-top: 20px;
      perspective: 1000px;
      touch-action: pan-y;
      touch-action: none;
      cursor: grab;
    }
    .hero-deck:active {
      cursor: grabbing;
    }

    @media (min-width: 992px) {
        .hero-deck { --card-width: 300px; --card-height: 450px; }
    }
    @media (min-width: 1200px) {
        .hero-deck { --card-width: 320px; --deck-offset: 280px; }
    }

    .hero-deck-card{
      width:var(--card-width);
      height:var(--card-height);
      border-radius:22px;
      padding:24px;
      background:linear-gradient(160deg, rgba(11,18,32,0.98), rgba(20,30,48,0.98));
      border:1px solid rgba(255,255,255,0.1);
      box-shadow:0 18px 40px rgba(11,18,32,0.35);
      color:#f8fafc;
      display:flex;
      flex-direction:column;
      gap:12px;
      position:absolute;
      left:50%;
      top:0;
      transform:translate3d(-50%, 0, 0) scale(1);
      overflow:hidden;
      transition:transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 600ms;
      user-select: none;
    }
    .hero-deck.is-dragging .hero-deck-card{ transition:none; }
    .hero-deck-card::before{
      content:""; position:absolute; inset:-30% auto auto -20%;
      width:260px; height:260px;
      background:radial-gradient(circle, var(--card-glow), transparent 70%);
      opacity:0.8; pointer-events: none;
    }
    .hero-deck-card h3{ font-size:1.1rem; margin-top: 10px; position:relative; z-index:1; font-weight: 600; }
    .hero-deck-card p{ font-size: 0.9rem; color:rgba(248,250,252,0.7); position:relative; z-index:1; line-height: 1.5; }
    .hero-deck-card .service-icon{
      background:rgba(255,255,255,0.12); width: 48px; height: 48px;
      display: flex; align-items: center; justify-content: center;
      border-radius: 12px; position:relative; z-index:1;
    }
    .hero-deck-card .service-icon svg { stroke: #fff; }
    .hero-deck-card .service-tags{ position:relative; z-index:1; margin-top:auto; display: flex; gap: 6px; flex-wrap: wrap; }
    .hero-deck-card .tag{
      font-size: 0.7rem; padding: 4px 8px; border-radius: 99px;
      background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.15);
      color:rgba(248,250,252,0.9);
    }

    /* Cennik i sekcje */
    html{scroll-padding-top: 100px;}
    section[id]{scroll-margin-top: 100px;}

    .section-title{ font-size:2rem; font-weight: 700; margin-bottom: 0.5rem; }
    .section-subtitle{ color:var(--ink-soft); margin-bottom: 2rem; }
    .pricing-board{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:20px; }
    
    .price-block{
      grid-column:span 4;
      background:var(--panel);
      border-radius:22px;
      border:1px solid var(--line);
      padding:24px;
      box-shadow:0 10px 30px rgba(15,23,42,0.05);
      position:relative;
      overflow:hidden;
      transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    }
    .price-block:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(15,23,42,0.1); }
    .price-block.highlight{
      border: 2px solid var(--brand-1);
      box-shadow: 0 0 0 4px rgba(13,110,253,0.15);
    }
    .price-block.tone-blue{--accent-block:#5eb8ff;--accent-soft:rgba(94,184,255,0.18)}
    .price-block.tone-amber{--accent-block:#ffb454;--accent-soft:rgba(255,180,84,0.2)}
    .price-block.tone-orange{--accent-block:#ff6b2c;--accent-soft:rgba(255,107,44,0.2)}
    .price-block.tone-mint{--accent-block:#4dd7b3;--accent-soft:rgba(77,215,179,0.2)}
    .price-block.tone-violet{--accent-block:#8b7bff;--accent-soft:rgba(139,123,255,0.2)}
    .price-block.tone-slate{--accent-block:#64748b;--accent-soft:rgba(100,116,139,0.18)}
    .price-block::before{
      content:""; position:absolute; inset:0 auto 0 0; width:4px;
      background:linear-gradient(180deg, var(--accent-block), transparent);
    }
    .price-block-head{ display:flex; justify-content:space-between; gap:10px; margin-bottom: 1rem; }
    .price-block-title{ font-size:1.25rem; font-weight:700; margin:0; }
    .price-block-note{ font-size:0.85rem; color:var(--ink-soft); }
    .price-pill{ padding:4px 10px; border-radius:99px; background:var(--bg-2); font-size:0.8rem; font-weight:600; color:var(--brand-1); height: fit-content; white-space: nowrap; }
    .price-lines{ list-style:none; padding:0; margin:0 0 1rem; }
    .price-lines li{ display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px dashed var(--line); font-size:0.95rem; }
    .price-lines li:last-child{ border-bottom:0; }
    .price-range{ font-weight:600; }
    .price-meta{ font-size:0.8rem; color:var(--ink-soft); font-style: italic; }

    .pricing-summary{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-top:28px; }
    .summary-card{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:16px; box-shadow:0 5px 15px rgba(0,0,0,0.03); }
    .summary-card strong{ display:block; color:var(--brand-1); margin-bottom: 4px; }
    .summary-card span{ font-size: 0.9rem; color: var(--ink-soft); }

    .pricing-callout{
      margin-top:32px; border-radius:20px; padding:24px;
      background: #0b1220; color:#fff;
      display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap: 20px;
    }

    /* Nasze projekty timeline */
    .projects-timeline{
      --timeline-gap: 44px;
      position:relative;
      margin-top: 12px;
      padding: 10px 0 0;
    }
    .projects-timeline::before{
      content:"";
      position:absolute;
      left:50%;
      top:0;
      bottom:0;
      width:2px;
      transform: translateX(-1px);
      background:linear-gradient(180deg, rgba(13,110,253,0.6), rgba(13,110,253,0.16), rgba(13,110,253,0.05));
      z-index:0;
    }
    .project-item{
      --project-accent: var(--brand-1);
      --project-accent-soft: rgba(13,110,253,0.16);
      position:relative;
      width: calc(50% - var(--timeline-gap));
      padding:22px 24px;
      margin: 0 0 28px;
      border-radius:22px;
      background:linear-gradient(135deg, rgba(255,255,255,0.7), rgba(255,255,255,0.35));
      border:1px solid rgba(255,255,255,0.6);
      box-shadow:0 16px 40px rgba(15,23,42,0.12), inset 0 1px 0 rgba(255,255,255,0.7);
      backdrop-filter: blur(16px) saturate(160%);
      -webkit-backdrop-filter: blur(16px) saturate(160%);
      z-index:1;
    }
    .project-item::before{
      content:"";
      position:absolute;
      top:26px;
      width:16px;
      height:16px;
      border-radius:50%;
      background:linear-gradient(180deg, var(--project-accent), rgba(255,255,255,0.5));
      box-shadow:0 0 0 8px var(--project-accent-soft), 0 6px 18px rgba(15,23,42,0.18);
    }
    .project-item:nth-child(odd){
      margin-right: auto;
    }
    .project-item:nth-child(even){
      margin-left: auto;
    }
    .project-item:nth-child(odd)::before{
      right: calc(-1 * var(--timeline-gap) - 8px);
    }
    .project-item:nth-child(even)::before{
      left: calc(-1 * var(--timeline-gap) - 8px);
    }
    .project-head{
      display:flex;
      align-items:center;
      gap:10px;
      margin-bottom: 8px;
      flex-wrap:wrap;
    }
    .project-year{
      font-size:0.85rem;
      font-weight:600;
      color: var(--project-accent);
      background: var(--project-accent-soft);
      padding:4px 10px;
      border-radius:999px;
    }
    .project-pill{
      font-size:0.72rem;
      font-weight:600;
      text-transform:uppercase;
      letter-spacing:0.04em;
      color: var(--ink-soft);
      background: var(--bg-2);
      padding:4px 10px;
      border-radius:999px;
    }
    .project-item h3{
      font-size:1.1rem;
      margin-bottom: 6px;
    }
    .project-item p{
      color: var(--ink-soft);
      margin-bottom: 12px;
    }
    .project-tags{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
    }
    .project-tag{
      font-size:0.75rem;
      padding:4px 10px;
      border-radius:999px;
      background:rgba(255,255,255,0.6);
      border:1px solid rgba(255,255,255,0.6);
      color: var(--ink-soft);
    }

    [data-reveal]{ opacity:0; transform:translateY(20px); transition:opacity 0.6s ease, transform 0.6s ease; transition-delay:var(--delay, 0ms); }
    .page-ready [data-reveal]{ opacity:1; transform:translateY(0); }

    /* Animacja pulsowanie */
    @keyframes pulse-card {
      0% { box-shadow: 0 0 0 0 rgba(13, 110, 253, 0.7); transform: scale(1); }
      50% { transform: scale(1.02); }
      70% { box-shadow: 0 0 0 20px rgba(13, 110, 253, 0); transform: scale(1.02); }
      100% { box-shadow: 0 0 0 0 rgba(13, 110, 253, 0); transform: scale(1); }
    }
    
    /* Zapętlenie */
    @keyframes pulse-infinite {
      0% { box-shadow: 0 0 0 0 rgba(13, 110, 253, 0.7); transform: scale(1); }
      50% { transform: scale(1.02); box-shadow: 0 0 20px 5px rgba(13, 110, 253, 0.3); }
      100% { box-shadow: 0 0 0 0 rgba(13, 110, 253, 0.7); transform: scale(1); }
    }

    .loop-highlight {
      animation: pulse-infinite 2s infinite ease-in-out !important;
      border: 2px solid var(--brand-1) !important;
      z-index: 5;
      position: relative;
    }

    /* Do telefonów */
    @media (max-width:992px){
      .price-block{ grid-column:span 6; }
    }
    @media (max-width:768px){
      .hero{ padding: 4rem 0; text-align: center; }
      .hero h1{ font-size: 2rem; }
      .hero-deck{ margin-top: 40px; transform: scale(0.9); }
      .pricing-board{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom: 20px; gap: 16px; }
      .price-block{ flex: 0 0 85%; scroll-snap-align: center; grid-column: auto; }
      .pricing-summary{ grid-template-columns: 1fr; }
      .pricing-callout{ flex-direction: column; text-align: left; align-items: flex-start; }
      .hero .col-lg-5 { display: block !important; margin-top: 2rem;} 
      .projects-timeline{ padding-left: 26px; }
      .projects-timeline::before{ left:12px; transform: none; }
      .project-item{
        width: 100%;
        margin-left: 0;
        margin-right: 0;
      }
      .project-item::before{
        left: -22px;
        right: auto;
      }
      .project-item:nth-child(even)::before,
      .project-item:nth-child(odd)::before{
        left: -22px;
        right: auto;
      }
      .project-item:nth-child(even),
      .project-item:nth-child(odd){
        margin-left: 0;
        margin-right: 0;
      }
    }