/* ===============================
   PlanMuzyczny — stała paleta (dracula) + stały układ
   =============================== */
:root{
  --bg-1:#0D0B17;
  --bg-2:#17122E;
  --text:#F5F2FF;
  --muted:#C0B7D9;
  --card:#161437;
  --card-2:#1E1A46;
  --accent:#78BE46;
  --accent-2:#A7D867;
  --accent-grad-2:#C0E383;
  --brand-warm:#FF79C6;
  --brand-warm-rgb:255 121 198;
  --brand-cool:#8BE9FD;
  --brand-cool-rgb:139 233 253;
  --link-c1:#C6A0FF;
  --link-c2:#9AD0FF;
  --shadow:0 10px 30px rgb(0 0 0 / 35%);
  --radius:16px;
  --radius-lg:26px;
  --orange: #FFA500; /* Kolor pomarańczowy */
  --red: #FF5733; /* Kolor czerwony */
}

/* Bazowe */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Figtree",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 80% -10%, #1b2350 0%, transparent 60%),
    radial-gradient(700px 400px at 0% 100%, #1b2a44 0%, transparent 70%),
    linear-gradient(180deg, var(--bg-1), var(--bg-2));
  overflow-x:hidden;
}
img.icon, svg.icon{width:1em; height:1em;}
.logo{width:min(380px,40vw)!important; height:auto!important; display:block;}
.container{width:min(1200px,90vw); margin-inline:auto}

/* Sekcje – ciaśniejsze odstępy globalnie */
.section{
  padding: clamp(.15rem, 1.2vw, .5rem) 0 clamp(.5rem, 1.5vw, 1.5rem); /* Jeszcze mniejsze odstępy w pionie */
}

.section.muted{
  background: linear-gradient(180deg, transparent, #0c1430 30%, #0c1430 70%, transparent 100%);
}
.grid-2{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(1.25rem,3vw,3rem); align-items:center}
@media (max-width:980px){ .grid-2{grid-template-columns:1fr} }

/* Header */
.site-header{position:sticky; top:0; backdrop-filter:blur(10px); background:rgb(10 14 30 / 55%); border-bottom:1px solid rgb(255 255 255 / 8%); z-index:10}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:12px 0;}
.brand{font-family:"Outfit",sans-serif; font-weight:700; color:#fff; text-decoration:none; font-size:1.35rem; letter-spacing:.2px}
.main-nav{display:flex; gap:1.1rem; align-items:center}
.main-nav a{color:var(--text); text-decoration:none; opacity:.9}
.main-nav a:hover{opacity:1}
.btn{display:inline-block; padding:.78rem 1.05rem; background:linear-gradient(135deg, var(--accent), var(--accent-grad-2)); color:#1c1f2e; font-weight:700; text-decoration:none; border-radius:10px; box-shadow:var(--shadow);}
.btn:hover{transform:translateY(-1px)}
.btn-outline{background:transparent; color:var(--text); border:1px solid rgb(255 255 255 / 14%); box-shadow:none}
.btn-block{display:block; text-align:center; width:100%}
.nav-toggle{display:none; background:none; border:0; width:40px; height:36px; position:relative}
.nav-toggle span{position:absolute; left:8px; right:8px; height:2px; background:#fff; border-radius:2px; transition:.3s}
.nav-toggle span:nth-child(1){top:10px}
.nav-toggle span:nth-child(2){top:17px}
.nav-toggle span:nth-child(3){top:24px}
@media (max-width:860px){
  .nav-toggle{display:block}
  .main-nav{
    position:fixed; inset:64px 16px auto 16px; display:grid; gap:12px; padding:14px;
    background:#0e142f; border:1px solid rgb(255 255 255 / 10%); border-radius:12px;
    transform:translateY(-10px); opacity:0; pointer-events:none; transition:.25s; box-shadow:var(--shadow);
  }
  .main-nav.open{transform:translateY(0); opacity:1; pointer-events:auto}
}

/* Tła dekoracyjne */
.bg{position:fixed; inset:0; z-index:-2; pointer-events:none;}
.bg-gradient{position:absolute; inset:0; background:
  radial-gradient(700px 400px at 85% 10%, var(--brand-cool) 0%, transparent 60%),
  radial-gradient(700px 400px at 20% 80%, var(--brand-warm) 0%, transparent 55%);
  opacity:.25; filter:saturate(120%);
}
.bg-shape{position:absolute; filter:blur(60px); opacity:.45;}
.bg-shape-1{width:40vw; height:40vw; background:var(--brand-warm); left:-10vw; top:10vh; border-radius:50%}
.bg-shape-2{width:45vw; height:45vw; background:var(--brand-cool); right:-15vw; bottom:-10vh; border-radius:50%}
.bg-noise{position:absolute; inset:-50%; background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="900"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.04"/></svg>'); mix-blend-mode:overlay; opacity:.3;}

/* HERO – bliżej góry, odrobina luftu nad zdjęciem */
.hero{position:relative;}
.hero.section{padding-top:clamp(.25rem,1.5vw,.9rem);}
.kicker{color:var(--accent); font-weight:700; letter-spacing:.3px; margin-bottom:.5rem}
.hero h1{font-size:clamp(2rem,1.2rem + 2.6vw,3.05rem); line-height:1.15; margin:0 0 .85rem}
.lead{color:var(--muted); max-width:65ch}
.cta{display:flex; gap:.7rem; margin-top:.9rem; flex-wrap:wrap}
.hero .grid-2{grid-template-columns:.95fr 1.05fr; align-items:start}
.hero-copy{order:2; align-self:start; margin-top:-4px; position: relative;  z-index: 3;}
.hero-visual{order:1; align-self:start; min-height:360px; margin-top:.35rem;}
.hero-person{
  width:min(560px,78vw);
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.45));
  isolation:isolate;
  z-index:2;
  transform:translate(-4%, -4%);
}
.glow{
  position:absolute; inset:auto 0 0 0; height:65%; border-radius:50%;
  background:
    radial-gradient(closest-side, rgb(var(--brand-warm-rgb) / .35), transparent 60%),
    radial-gradient(closest-side, rgb(var(--brand-cool-rgb) / .25), transparent 70%);
  filter:blur(30px); z-index:1;
}
@media (max-width:980px){
  .hero.section{padding-top:clamp(.5rem,2.5vw,1.25rem);}
  .hero-copy{order:1; margin-top:0; }
  .hero-visual{order:2; min-height:unset; margin-top:.25rem;}
  .hero-person{transform:none; width:min(520px,75vw);}
}

/* Karty */
.card{
  background:linear-gradient(180deg, var(--card), var(--card-2));
  border:1px solid rgb(255 255 255 / 10%);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:clamp(.85rem,1.5vw,1.1rem);
}
.card--interactive{
  background:linear-gradient(180deg, color-mix(in oklab, var(--card) 92%, transparent), color-mix(in oklab, var(--card-2) 92%, transparent));
  border:1px solid rgb(255 255 255 / 12%);
  backdrop-filter:saturate(120%) blur(4px);
  transition:background .25s ease, box-shadow .25s ease, transform .15s ease;
  will-change:transform, background, box-shadow;
}
@media (hover:hover){
  .card--interactive:hover,.card--interactive:focus-within{
    background:linear-gradient(180deg, color-mix(in oklab, var(--card) 80%, transparent), color-mix(in oklab, var(--card-2) 78%, transparent));
    box-shadow:inset 0 6px 18px rgb(0 0 0 / 22%), inset 0 -4px 12px rgb(0 0 0 / 16%), 0 8px 24px rgb(0 0 0 / 28%);
    transform:translateY(1px);
  }
}
a.card--interactive{color:inherit; text-decoration:none; display:block;}
.feature h3{margin-top:0; color:var(--muted)  }

/* Link z animowanym podkreśleniem (używany też jako .feature-toggle) */
.link{
  --c1:var(--link-c1);
  --c2:var(--link-c2);
  color:#1f6feb;
  font-weight:600;
  text-decoration:none;
  display:inline-block;
  padding:.1rem .2rem;
  border-radius:.5rem;
  background-image:linear-gradient(90deg, var(--c1), var(--c2));
  background-repeat:no-repeat;
  background-size:0 2px;
  background-position:0 100%;
  transition:color .2s ease, background-size .25s ease, transform .15s ease;
}
.link:hover{color:#0b7ddc; background-size:100% 2px;}
.link:active{transform:translateY(1px);}
.link:focus-visible{outline:none; box-shadow:0 0 0 4px color-mix(in oklab, var(--link-c1) 35%, transparent);}
@media (prefers-color-scheme:dark){.link{color:#8ab4ff;} .link:hover{color:#a9c7ff;}}
@media (prefers-reduced-motion:reduce){.link{transition:none;}}

/* Rozwijane „Dowiedz się więcej” */
.feature-more{overflow:hidden; max-height:0; opacity:0; transition:max-height .5s cubic-bezier(.47,1.64,.41,.8), opacity .3s; margin-top:.6em; pointer-events:none;}
.card .feature-more:not([hidden]){max-height:500px; opacity:1; pointer-events:auto;}

/* FEATURES – 4 kolumny + responsywność, mniejsze odstępy */
.features{
  margin-top:.75rem;
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:clamp(.75rem,1.5vw,1rem);
}
@media (max-width:1200px){ .features{grid-template-columns:repeat(3,1fr);} }
@media (max-width:900px){ .features{grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .features{grid-template-columns:1fr;} }

/* Cennik – „podium”, ciaśniej */
.pricing{
  display:grid;
  grid-template-columns:1fr 1.15fr 1fr;
  grid-template-areas:"basic featured premium" "addons featured premium";
  gap:clamp(.75rem,1.6vw,1.1rem);
  margin-top:.75rem;
}
.price{display:flex; flex-direction:column}
.price ul{margin:.9rem 0; padding-left:1.05rem; line-height:1.85; flex:1 1 auto}
.price .btn{margin-top:auto}
.pricing > article:nth-child(2){grid-area:basic;}
.pricing > article:nth-child(3){grid-area:featured;}
.pricing > article:nth-child(4){grid-area:premium;}
.pricing > article:nth-child(1){grid-area:addons;}
@media (max-width:1100px){ .pricing{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){
  .pricing{grid-template-columns:1fr; grid-template-areas:"featured" "basic" "premium" "addons";}
}
.price h3{margin:.2rem 0 .5rem}
.price-tag{font-size:2rem; font-weight:700}
.price-tag span{font-size:.9rem; color:var(--muted); font-weight:400}
.price.featured{position:relative; border-color:color-mix(in oklab, var(--brand-warm) 35%, transparent); box-shadow:0 15px 40px color-mix(in oklab, var(--brand-warm) 20%, transparent)}
.price .badge{position:absolute; top:-12px; right:16px; background:linear-gradient(135deg,#ffd29c,var(--brand-warm)); color:#201b16; font-weight:700; padding:.35rem .6rem; border-radius:999px; font-size:.8rem}

/* FAQ – mniejsza typografia, ciaśniejsze przerwy */
.faq{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(.75rem,1.2vw,1rem);
  margin-top:.5rem;
  font-family:'Figtree','Outfit',system-ui,sans-serif;
  font-size:1.05rem;
  line-height:1.75;
  letter-spacing:.02em;
}
.faq details{
  padding:1rem 1.2rem;
  margin-bottom:.85rem;
  background:linear-gradient(90deg,#121c3a 60%,#101833 100%);
  border-radius:18px;
  box-shadow:0 4px 24px rgb(0 0 0 / 12%);
  border:1px solid rgb(255 255 255 / 10%);
  transition:background .2s, box-shadow .2s;
}
.faq details[open]{outline:1px solid rgb(255 255 255 / 10%); background:linear-gradient(90deg,#16244c 70%,#0b1020 100%); box-shadow:0 8px 40px rgb(0 0 0 / 20%);}
.faq details > summary{cursor:pointer; font-weight:700; font-size:1.02em; outline:none; transition:color .2s; color:#a5b6d7; margin-bottom:.45em; letter-spacing:.01em;}
.faq details > p, .faq details li{font-size:.96em; margin:.45em 0 .2em 0;}
@media (max-width:600px){ .faq{font-size:.98rem;} .faq details{padding:.85em 1em;} }

/* Kontakt */
.contact-list{list-style:none; padding:0; margin:1rem 0; line-height:1.9}
.contact-card{align-self:start}

/* Stopka */
.site-footer{border-top:1px solid rgb(255 255 255 / 10%); background:#0a0f25; padding:1.05rem 0; color:var(--muted)}
.site-footer .container{display:flex; gap:.75rem; align-items:center; justify-content:space-between; flex-wrap:wrap}
.footer-nav{display:flex; gap:1rem; flex-wrap:wrap}
.footer-nav a{color:var(--muted); text-decoration:none}
.footer-nav a:hover{color:#fff}

/* Ticker (marquee) */
.ticker{position:sticky; inset:0 0 auto 0; z-index:20; background:rgb(10 14 30 / 10%); border-bottom:1px solid rgb(255 255 255 / 10%); color:var(--text); font:600 .95rem/1.6 "Figtree",system-ui,sans-serif; letter-spacing:.01em; width:100%; backdrop-filter:none;}
.ticker__viewport{overflow:hidden; position:relative;}
.ticker__track{display:inline-flex; align-items:center; gap:2.2rem; padding-block:.5rem; padding-inline:1rem; white-space:nowrap; will-change:transform; transform:translateX(0);}
.ticker__item{display:inline-flex; align-items:center; gap:.5rem; opacity:.95;}
.ti{display:inline-grid; place-items:center; width:1.2rem;}
.ticker{ transition: transform .25s ease, opacity .2s ease; will-change: transform, opacity; }
.ticker.is-hidden{ transform: translateY(-100%); opacity:0; pointer-events:none; }

@media (max-width: 860px){
  .ticker{ display:none !important; }
}

/* Dostępność */
:focus-visible{outline:2px solid #fff; outline-offset:2px}


/* Link "Dowiedz się więcej →" – kolor z akcentu + własny gradient podkreślenia */
.features .feature .link.feature-toggle{
  color: var(--accent);
  --link-c1: color-mix(in oklab, var(--accent) 85%, #ffffff 15%);
  --link-c2: color-mix(in oklab, var(--accent-2) 85%, #ffffff 15%);
}
.features .feature .link.feature-toggle:hover{
  color: color-mix(in oklab, var(--accent) 92%, #ffffff 8%);
}
.features .feature .link.feature-toggle:focus-visible{
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 35%, transparent);
}





.offer-text { max-width: 800px; }
.offer-text { margin: 0 auto; }
.offer-text { padding: 1.2rem 1rem; }
.offer-text { color: var(--text, #F5F2FF); }

.offer-text h2 { color: var(--accent, #78BE46); }
.offer-text h2 { font-size: 1.9rem; }
.offer-text h2 { margin-bottom: 1rem; }

.offer-text h3 { color: var(--brand-warm, #FF79C6); }
.offer-text h3 { font-size: 1.4rem; }
.offer-text h3 { margin-top: 2rem; }
.offer-text h3 { margin-bottom: 1rem; }

.offer-text p { font-size: 1.05rem; }
.offer-text p { line-height: 1.7; }
.offer-text p { margin-bottom: 1rem; }
.offer-text p { color: var(--muted, #C0B7D9); }

.offer-text ul { list-style: disc; }
.offer-text ul { padding-left: 1.2rem; }
.offer-text ul { margin-top: 0.5rem; }

.offer-text li { margin-bottom: 0.8rem; }
.offer-text li { line-height: 1.6; }
.offer-text li { color: var(--text, #F5F2FF); }


.red-text { color: var(--red);}
.orange-text { color: var(--orange);}