:root{
    --blue:#00A3E0;
    --blue-deep:#0A5E7C;
    --pink:#FFB1BB;
    --pink-wash:#FCE7EC;
    --yellow:#FEDD00;
    --ink:#232A31;
    --muted:#6B757E;
    --line:#E3E9ED;
    --wash:#F3F6F8;
    --paper:#FFFFFF;
    --display:"Poppins",system-ui,sans-serif;
    --body:"Figtree",system-ui,sans-serif;
    --wrap:1160px;
  }
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{
    margin:0;
    font-family:var(--body);
    color:var(--ink);
    background:var(--paper);
    font-size:17px;
    line-height:1.65;
  }
  .wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
  a{color:var(--blue-deep)}
  a:focus-visible,button:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:2px}
  h1,h2,h3{font-family:var(--display);line-height:1.15;margin:0}

  /* ---------- pasek górny ---------- */
  .topbar{background:#9EA5AA;color:#fff;font-size:14px}
  .topbar .wrap{display:flex;justify-content:space-between;gap:16px;padding:9px 24px;flex-wrap:wrap}
  .topbar a{color:#fff;text-decoration:none;opacity:.9}
  .topbar a:hover{opacity:1;text-decoration:underline}
  .topbar nav{display:flex;gap:14px}

  /* ---------- pasek alertu ---------- */
  .alert-strip{
    background:var(--pink);
    color:#4A2530;
    font-family:var(--display);
    font-weight:600;
    font-size:15px;
    letter-spacing:.01em;
  }
  .alert-strip .wrap{padding:11px 24px;display:flex;align-items:center;gap:10px}
  .alert-strip .dot{
    width:9px;height:9px;border-radius:50%;background:#fff;flex:none;
    box-shadow:0 0 0 4px rgba(255,255,255,.35);
  }

  /* ---------- nagłówek ---------- */
  .masthead{border-bottom:1px solid var(--line);background:var(--paper)}
  .masthead .wrap{
    display:flex;align-items:center;justify-content:space-between;
    gap:32px;padding:22px 24px;flex-wrap:wrap;
  }
  .brand{display:inline-flex;align-items:center;text-decoration:none}
  .brand img{display:block;width:170px;height:auto}
  @media (max-width:620px){ .brand img{width:140px} }
  .mainnav{display:flex;gap:22px;flex-wrap:wrap;font-family:var(--display);font-weight:600;font-size:16px}
  .mainnav .off{color:#B7BFC5;cursor:not-allowed;position:relative}
  .mainnav .off::after{
    content:"";position:absolute;left:0;right:0;top:52%;height:2px;background:#DEE4E8;
  }
  .mainnav a{color:#3F4750;text-decoration:none}
  .mainnav a:hover{color:var(--blue)}

  /* ---------- hero ---------- */
  .hero{background:var(--wash);border-bottom:1px solid var(--line);overflow:hidden}
  .hero .wrap{
    display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;
    padding:76px 24px 84px;
  }
  .eyebrow{
    font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--blue-deep);margin:0 0 18px;
  }
  h1{font-size:clamp(34px,5.2vw,58px);font-weight:700;letter-spacing:-.02em}
  h1 em{font-style:normal;color:var(--blue)}
  .lede{font-size:clamp(18px,2.1vw,21px);color:#3F4750;margin:24px 0 0;max-width:34em}
  .lede strong{font-weight:600}
  .hero-note{
    margin-top:28px;padding:16px 20px;background:var(--paper);
    border-left:4px solid var(--yellow);border-radius:0 8px 8px 0;
    font-size:16px;color:#3F4750;
  }

  /* znak pauzy z klocków logo — element sygnaturowy */
  .pausemark{display:flex;justify-content:center}
  .pausemark svg{width:min(320px,80%);height:auto}
  .bar-a,.bar-b,.chip{transform-origin:center}
  @media (prefers-reduced-motion:no-preference){
    .bar-a{animation:slideL .7s cubic-bezier(.2,.8,.2,1) both}
    .bar-b{animation:slideR .7s cubic-bezier(.2,.8,.2,1) .08s both}
    .chip{animation:pop .5s cubic-bezier(.2,.8,.2,1) .42s both}
  }
  @keyframes slideL{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
  @keyframes slideR{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
  @keyframes pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}

  /* ---------- sekcje ---------- */
  section{padding:72px 0}
  .section-head{max-width:52ch;margin-bottom:40px}
  h2{font-size:clamp(26px,3.4vw,36px);font-weight:700;letter-spacing:-.015em}
  .section-head p{color:var(--muted);margin:14px 0 0}

  .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
  .card{
    border:1px solid var(--line);border-radius:14px;padding:30px 28px 32px;background:var(--paper);
  }
  .card h3{font-size:20px;font-weight:600;margin-bottom:12px}
  .card p{margin:0;color:#4A545C;font-size:16px}
  .card p + p{margin-top:12px}
  .card .tag{
    display:inline-block;font-family:var(--display);font-weight:600;font-size:12px;
    letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:20px;margin-bottom:16px;
  }
  .tag-pink{background:var(--pink-wash);color:#A2405A}
  .tag-blue{background:#E4F1F7;color:var(--blue-deep)}
  .tag-yellow{background:#FDF6C8;color:#7A6A05}

  /* ---------- pilna pomoc ---------- */
  .urgent{background:var(--blue-deep);color:#EAF4F9}
  .urgent .wrap{padding:60px 24px}
  .urgent h2{color:#fff}
  .urgent p{color:#C6DEEA;max-width:56ch}
  .urgent-list{
    list-style:none;padding:0;margin:34px 0 0;
    display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  }
  .urgent-list li{border-top:2px solid rgba(255,255,255,.25);padding-top:16px}
  .urgent-list .num{
    display:block;font-family:var(--display);font-weight:700;font-size:26px;color:#fff;margin-bottom:4px;
  }
  .urgent-list .num a{color:#fff;text-decoration:none}
  .urgent-list .num a:hover{text-decoration:underline}
  .urgent-list span.desc{font-size:15px;color:#C6DEEA;display:block}

  /* ---------- kontakt ---------- */
  .contact{background:var(--wash);border-top:1px solid var(--line)}
  .contact .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:36px}
  .contact h3{
    font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.12em;
    text-transform:uppercase;color:var(--blue-deep);margin-bottom:10px;
  }
  .contact p{margin:0;color:#4A545C;font-size:16px}
  .contact .muted-note{color:var(--muted);font-size:15px;margin-top:8px}
  .contact a{color:var(--blue-deep)}

  /* ---------- stopka ---------- */
  footer{background:#2B333A;color:#AEB8BF;font-size:15px}
  footer .wrap{padding:40px 24px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
  footer a{color:#DCE4E9}
  footer .links{display:flex;gap:18px;flex-wrap:wrap}

  time{font-weight:600;white-space:nowrap}

  /* ---------- responsywność ---------- */
  @media (max-width:960px){
    .hero .wrap{grid-template-columns:1fr;gap:44px;padding:56px 24px 64px}
    .pausemark{order:-1}
    .pausemark svg{width:200px}
    .cards,.urgent-list{grid-template-columns:1fr 1fr}
    .contact .grid{grid-template-columns:1fr 1fr}
    .mainnav{display:none}
  }
  @media (max-width:620px){
    body{font-size:16px}
    section{padding:52px 0}
    .cards,.urgent-list,.contact .grid{grid-template-columns:1fr}
    .topbar nav{gap:12px}
    .brand-name{font-size:20px}
  }

  /* ---------- stopka z danymi operatora ---------- */
  footer .wrap{
    display:grid;grid-template-columns:1.6fr 1fr;gap:28px;align-items:start;
  }
  .foot-op{line-height:1.6}
  .foot-op strong{color:#DCE4E9;font-weight:600}
  .foot-meta{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
  @media (min-width:721px){ .foot-meta{align-items:flex-end;text-align:right} }
  @media (max-width:720px){ footer .wrap{grid-template-columns:1fr} }

  /* ---------- polityka prywatności: rozwijany kafelek ---------- */
  .legal{border-top:1px solid var(--line);padding:72px 0 84px}
  .legal .wrap{max-width:880px}

  .tile{
    border:1px solid var(--line);border-radius:16px;background:var(--paper);
    transition:box-shadow .2s ease, border-color .2s ease;
  }
  .tile[open]{border-color:#CFDCE3;box-shadow:0 10px 34px rgba(10,94,124,.09)}
  .tile > summary{
    display:flex;align-items:center;justify-content:space-between;gap:24px;
    padding:26px 28px;cursor:pointer;list-style:none;border-radius:15px;
  }
  .tile > summary::-webkit-details-marker{display:none}
  .tile > summary:hover{background:var(--wash)}
  .tile > summary:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
  .tile-eyebrow{
    display:block;font-family:var(--display);font-weight:600;font-size:12px;
    letter-spacing:.14em;text-transform:uppercase;color:var(--blue-deep);margin-bottom:6px;
  }
  .tile-text h2{font-size:clamp(21px,2.6vw,27px);margin:0}
  .tile-sub{display:block;color:var(--muted);font-size:15px;margin-top:8px;max-width:52ch}

  /* strzałka z klocków marki */
  .tile-chev{
    flex:none;width:38px;height:38px;border-radius:50%;background:var(--wash);
    position:relative;transition:transform .25s ease, background .2s ease;
  }
  .tile > summary:hover .tile-chev{background:#E4F1F7}
  .tile-chev::after{
    content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;
    border-right:2.5px solid var(--blue-deep);border-bottom:2.5px solid var(--blue-deep);
    transform:translate(-50%,-65%) rotate(45deg);
  }
  .tile[open] .tile-chev{transform:rotate(180deg)}
  @media (prefers-reduced-motion:reduce){
    .tile-chev{transition:none}
  }

  .tile-body{padding:8px 28px 34px;border-top:1px solid var(--line);margin-top:2px}
  @media (prefers-reduced-motion:no-preference){
    .tile[open] .tile-body{animation:reveal .28s ease both}
  }
  @keyframes reveal{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

  .legal h3{
    font-family:var(--display);font-weight:600;font-size:clamp(19px,2.3vw,23px);
    margin:34px 0 14px;
  }
  .legal p{margin:0 0 18px;color:#3F4750}
  .legal .intro{
    font-size:18px;background:var(--wash);border-left:4px solid var(--blue);
    padding:22px 24px;border-radius:0 10px 10px 0;margin:24px 0 26px;
  }
  .legal .contact-box{
    margin-top:38px;border:1px solid var(--line);border-radius:14px;padding:26px 28px;
  }
  .legal .contact-box h3{margin-top:0}
  .legal .contact-box .last{margin-bottom:0}

  @media (max-width:620px){
    .tile > summary{padding:22px 20px;gap:14px}
    .tile-body{padding:8px 20px 28px}
    .legal .contact-box{padding:22px 20px}
  }

  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
  :target{scroll-margin-top:24px}