/* ==========================================================================
   Szybkie Szkolenia — Design System
   Premium, light, mobile-first. Bootstrap 5 provides the grid/utilities;
   everything visual/brand-specific lives here.
   ========================================================================== */

:root{
  /* Color */
  --white:#FFFFFF;
  --ink:#1B2233;          /* primary text — dark navy-charcoal, never pure black */
  --ink-soft:#5B6478;     /* secondary text */
  --ink-faint:#8A93A6;    /* tertiary / captions */
  --tint-blue:#F3F6FD;    /* section tint — trust */
  --tint-amber:#FFF6E9;   /* section tint — energy */
  --tint-mint:#F0FAF6;    /* section tint — growth */
  --gold:#E8A400;         /* CTA fill */
  --gold-ink:#3A2600;     /* text on gold */
  --cobalt:#2946D6;       /* links / secondary accent */
  --line:#E7E9EF;         /* hairline borders on white */
  --line-soft:#EDF0F6;

  /* Type */
  --font-display:'Space Grotesk', 'Arial Narrow', sans-serif;
  --font-body:'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;
  --font-mono:'IBM Plex Mono', 'SFMono-Regular', monospace;

  /* Layout */
  --radius-sm:10px;
  --radius:16px;
  --radius-lg:22px;
  --maxw:1240px;
  --shadow-sm:0 2px 10px rgba(27,34,51,0.05);
  --shadow-md:0 12px 32px rgba(27,34,51,0.09);
  --shadow-lg:0 24px 60px rgba(27,34,51,0.14);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}

body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  font-display:swap;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--ink);
  line-height:1.12;
  letter-spacing:-0.01em;
  font-weight:600;
}

a{color:var(--cobalt); text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%; height:auto; display:block;}
:focus-visible{outline:3px solid var(--cobalt); outline-offset:3px;}

.container-xl{max-width:var(--maxw); margin:0 auto; padding:0 1.25rem;}
.section{padding:5.5rem 0;}
@media (max-width:768px){.section{padding:3.5rem 0;}}
.section-tint-blue{background:var(--tint-blue);}
.section-tint-amber{background:var(--tint-amber);}
.section-tint-mint{background:var(--tint-mint);}

.eyebrow{
  font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--cobalt); display:inline-flex; align-items:center; gap:9px; margin-bottom:14px; font-weight:500;
}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--gold); box-shadow:0 0 0 3px rgba(232,164,0,0.22);}

.section-head{max-width:660px; margin-bottom:3rem;}
.section-head p{color:var(--ink-soft); font-size:1.06rem; margin-top:0.75rem;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--font-body); font-weight:600; font-size:0.96rem; padding:0.85rem 1.6rem;
  border-radius:999px; border:1.5px solid transparent; display:inline-flex; align-items:center; gap:8px;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}
.btn:hover{transform:translateY(-2px); text-decoration:none;}
.btn-gold{background:var(--gold); color:var(--gold-ink); box-shadow:0 8px 22px rgba(232,164,0,0.28);}
.btn-gold:hover{box-shadow:0 12px 28px rgba(232,164,0,0.38); color:var(--gold-ink);}
.btn-outline-ink{border-color:var(--ink); color:var(--ink); background:transparent;}
.btn-outline-ink:hover{background:var(--ink); color:var(--white);}
.btn-ghost{border-color:var(--line); color:var(--ink); background:var(--white);}
.btn-ghost:hover{border-color:var(--cobalt); color:var(--cobalt);}
.btn-lg{padding:1rem 2rem; font-size:1.02rem;}
.btn-sm{padding:0.6rem 1.2rem; font-size:0.88rem;}

/* ---------- header / nav ---------- */
.site-header{position:sticky; top:0; z-index:60; background:rgba(255,255,255,0.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
.site-nav{display:flex; align-items:center; justify-content:space-between; padding:0.9rem 0;}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:1.1rem; color:var(--ink);}
.brand:hover{text-decoration:none; color:var(--ink);}
.brand-mark{width:26px;height:26px;border-radius:8px;background:var(--ink); position:relative; flex:none;}
.brand-mark::before{content:"";position:absolute; inset:5px; border-left:2px solid var(--gold); border-bottom:2px solid var(--gold); transform:rotate(45deg); border-radius:2px;}

.nav-links{position:fixed; inset:60px 0 0 0; background:var(--white); z-index:50;
  display:flex; flex-direction:column; padding:1.75rem 1.5rem; gap:1.1rem; font-size:1.08rem; font-weight:500;
  transform:translateY(-8px); opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease, visibility .25s ease;}
.nav-links a{color:var(--ink); text-decoration:none;}
.nav-links.open{transform:translateY(0); opacity:1; visibility:visible; pointer-events:auto;}
.nav-cta{display:flex; align-items:center; gap:12px;}
.nav-cta .btn{display:none;}
.navburger{display:flex; align-items:center; justify-content:center; background:none; border:none; cursor:pointer; width:38px; height:38px; padding:8px;}
.navburger span{display:block; width:22px; height:2px; background:var(--ink); margin:5px 0; transition:transform .2s ease, opacity .2s ease;}
.navburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.navburger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.navburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media (min-width:992px){
  .nav-links{position:static; inset:auto; background:none; z-index:auto; flex-direction:row; padding:0; gap:2rem; font-size:0.95rem;
    transform:none; opacity:1; visibility:visible; pointer-events:auto;}
  .nav-links a{opacity:0.82;}
  .nav-links a:hover{opacity:1;}
  .nav-cta .btn{display:inline-flex;}
  .navburger{display:none;}
}

/* ---------- hero ---------- */
.hero{padding:3.5rem 0 4.5rem; position:relative; overflow:hidden;}
.hero::before{
  content:""; position:absolute; inset:-15% -10% auto -10%; height:130%; z-index:0;
  background:radial-gradient(45% 55% at 15% 10%, rgba(41,70,214,0.08), transparent 70%),
             radial-gradient(45% 55% at 90% 20%, rgba(232,164,0,0.14), transparent 70%);
}
.hero .container-xl{position:relative; z-index:1;}
.hero h1{font-size:clamp(2.1rem, 4.6vw, 3.4rem); font-weight:700;}
.hero h1 .accent{color:var(--gold);}
.hero .lead{font-size:1.15rem; color:var(--ink-soft); max-width:56ch; margin-top:1.25rem;}
.hero .cta-row{display:flex; gap:14px; flex-wrap:wrap; margin-top:2rem;}

.social-proof{display:flex; flex-wrap:wrap; gap:1.75rem 2.25rem; align-items:center; margin-top:2.75rem; padding-top:1.75rem; border-top:1px solid var(--line);}
.social-proof .stat{display:flex; flex-direction:column;}
.social-proof .stat b{font-family:var(--font-display); font-size:1.5rem; color:var(--ink);}
.social-proof .stat span{font-size:0.85rem; color:var(--ink-soft);}

/* ---------- ticket card (signature element, light variant) ---------- */
.ticket{background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow-lg); overflow:hidden; border:1px solid var(--line);}
.ticket-top{height:6px; background:linear-gradient(90deg, var(--gold), var(--cobalt));}
.ticket-head{display:flex; justify-content:space-between; align-items:center; padding:1.1rem 1.3rem 0.4rem; font-family:var(--font-mono); font-size:0.74rem; letter-spacing:0.08em; color:var(--ink-soft);}
.ticket-head .status{display:flex; align-items:center; gap:8px; color:var(--gold-ink); font-weight:600;}
.status .pulse{width:7px;height:7px;border-radius:50%;background:var(--gold); animation:pulse 1.8s ease-in-out infinite;}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(232,164,0,.5);} 50%{box-shadow:0 0 0 6px rgba(232,164,0,0);}}
.ticket-body{padding:1rem 1.3rem; display:grid; grid-template-columns:1fr 1fr; gap:1.1rem 1.2rem;}
.ticket-body .field small{display:block; font-family:var(--font-mono); font-size:0.65rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:4px;}
.ticket-body .field strong{font-family:var(--font-display); font-size:0.98rem; font-weight:600;}
.ticket-stub{position:relative; margin-top:0.4rem; padding:1rem 1.3rem 1.2rem; border-top:2px dashed var(--line); font-family:var(--font-mono); font-size:0.8rem; color:var(--ink-soft);}
.ticket-stub::before, .ticket-stub::after{content:""; position:absolute; top:-11px; width:22px; height:22px; border-radius:50%; background:var(--white); border:1px solid var(--line);}
.ticket-stub::before{left:-11px; border-right:none; background:var(--white);}
.ticket-stub::after{right:-11px; border-left:none; background:var(--white);}

/* ---------- generic cards ---------- */
.card-flat{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:1.75rem; transition:transform .2s ease, box-shadow .2s ease;}
.card-flat:hover{transform:translateY(-4px); box-shadow:var(--shadow-md);}
.icon-chip{width:44px;height:44px;border-radius:12px; background:var(--tint-blue); color:var(--cobalt); display:flex; align-items:center; justify-content:center; margin-bottom:1.1rem;}

/* ---------- course card ---------- */
.course-card{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; height:100%; transition:transform .25s ease, box-shadow .25s ease;}
.course-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-md);}
.course-card .top{height:5px; background:linear-gradient(90deg, var(--cobalt), var(--gold));}
.course-card .code{font-family:var(--font-mono); font-size:0.72rem; color:var(--cobalt); background:var(--tint-blue); padding:3px 9px; border-radius:6px; letter-spacing:0.08em;}
.course-card h3{font-size:1.1rem; margin:0.9rem 0 0.6rem;}
.course-card p{color:var(--ink-soft); font-size:0.93rem;}
.course-card .meta{display:flex; gap:14px; margin-top:1rem; font-family:var(--font-mono); font-size:0.74rem; color:var(--ink-faint); flex-wrap:wrap;}
.course-card .foot{margin-top:auto; padding-top:1.1rem; border-top:1px dashed var(--line); display:flex; justify-content:space-between; align-items:center;}
.course-card .body{padding:1.4rem;}

/* ---------- pricing / packages ---------- */
.price-card{background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:2rem 1.75rem; height:100%; display:flex; flex-direction:column;}
.price-card.featured{border-color:var(--gold); box-shadow:var(--shadow-md); position:relative;}
.price-card.featured::before{content:"Najczęściej wybierany"; position:absolute; top:-13px; left:1.75rem; background:var(--gold); color:var(--gold-ink); font-size:0.72rem; font-weight:700; padding:4px 12px; border-radius:999px; font-family:var(--font-mono); letter-spacing:0.04em;}
.price-card h3{font-size:1.2rem;}
.price-card .price{font-family:var(--font-display); font-size:2rem; margin:0.6rem 0;}
.price-card .price small{font-family:var(--font-body); font-size:0.85rem; color:var(--ink-soft); font-weight:400;}
.price-card ul{list-style:none; padding:0; margin:1.2rem 0; display:flex; flex-direction:column; gap:0.75rem; flex:1;}
.price-card li{display:flex; gap:10px; font-size:0.93rem; align-items:flex-start;}
.price-card li::before{content:"✓"; color:var(--cobalt); font-weight:700; flex:none;}

/* ---------- testimonials ---------- */
.testimonial{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:1.75rem; height:100%;}
.testimonial .quote{font-size:1.02rem; color:var(--ink);}
.testimonial .who{display:flex; align-items:center; gap:12px; margin-top:1.4rem;}
.testimonial .avatar{width:42px;height:42px;border-radius:50%; background:var(--tint-amber); color:var(--gold-ink); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700;}
.testimonial .who b{display:block; font-size:0.92rem;}
.testimonial .who span{font-size:0.82rem; color:var(--ink-soft);}
.stars{color:var(--gold); letter-spacing:2px; margin-bottom:0.6rem;}

/* ---------- FAQ accordion ---------- */
.faq-item{background:var(--white); border:1px solid var(--line); border-radius:12px; margin-bottom:0.8rem; padding:0 1.4rem;}
.faq-item summary{cursor:pointer; padding:1.1rem 0; font-weight:600; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+"; font-family:var(--font-mono); font-size:1.3rem; color:var(--cobalt); flex:none;}
.faq-item[open] summary::after{content:"–";}
.faq-item p{padding:0 0 1.2rem; color:var(--ink-soft); margin:0;}

/* ---------- blog cards ---------- */
.blog-card{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--white); height:100%; display:flex; flex-direction:column;}
.blog-card .thumb{aspect-ratio:16/9; background:linear-gradient(135deg, var(--tint-blue), var(--tint-amber)); display:flex; align-items:center; justify-content:center; color:var(--cobalt); font-family:var(--font-mono); font-size:0.8rem;}
.blog-card .body{padding:1.4rem; display:flex; flex-direction:column; flex:1;}
.blog-card .tag{font-family:var(--font-mono); font-size:0.72rem; color:var(--cobalt); text-transform:uppercase; letter-spacing:0.06em;}
.blog-card h3{font-size:1.05rem; margin:0.6rem 0;}
.blog-card p{color:var(--ink-soft); font-size:0.92rem; flex:1;}
.blog-card .read-more{margin-top:1rem; font-weight:600; font-size:0.9rem;}

/* ---------- sticky mobile CTA ---------- */
.sticky-cta{position:fixed; left:0; right:0; bottom:0; z-index:55; background:var(--white); border-top:1px solid var(--line);
  padding:0.75rem 1.1rem; box-shadow:0 -8px 24px rgba(27,34,51,0.08); display:flex; gap:10px;
  transform:translateY(100%); transition:transform .3s ease;}
.sticky-cta.show{transform:translateY(0);}
.sticky-cta .btn{flex:1; justify-content:center;}
@media (min-width:992px){.sticky-cta{display:none;}}

/* ---------- footer ---------- */
.site-footer{background:var(--ink); color:rgba(244,245,241,0.72); padding:3.5rem 0 2rem; font-size:0.9rem;}
.site-footer a{color:rgba(244,245,241,0.72);}
.site-footer a:hover{color:#fff;}
.site-footer h4{color:#fff; font-size:0.95rem; margin-bottom:1rem;}
.site-footer .foot-cols{display:grid; grid-template-columns:1.4fr repeat(3, 1fr); gap:2.5rem;}
@media (max-width:860px){.site-footer .foot-cols{grid-template-columns:1fr 1fr;}}
.site-footer ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:0.6rem;}
.site-footer .bottom{margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid rgba(244,245,241,0.14); display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; font-size:0.82rem;}

/* ---------- reveal (fallback if AOS unavailable) ---------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in-view{opacity:1; transform:translateY(0);}

/* ---------- utility ---------- */
.text-cobalt{color:var(--cobalt);}
.bg-line{background:var(--line);}
.divider-dashed{border-top:1px dashed var(--line);}