/* Aizyl Asystent — klimat strony (glow, hero, cennik). */

/* ── HERO ─────────────────────────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(40px, 6vw, 66px) 0 clamp(26px, 4vw, 44px);
  isolation: isolate;
}

/* Poswiaty tla — sygnatura wizualna z aplikacji */
.hero-glow {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 130%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(42% 55% at 18% 22%, var(--glow-green) 0%, transparent 70%),
    radial-gradient(38% 50% at 82% 18%, var(--glow-blue) 0%, transparent 70%),
    radial-gradient(46% 55% at 72% 78%, var(--glow-rose) 0%, transparent 72%),
    radial-gradient(50% 60% at 28% 82%, var(--glow-coral) 0%, transparent 72%);
  filter: blur(8px);
}

.hero-inner {
  position: relative;
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-eyebrow {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--primary);
  background: var(--primary-soft);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-5);
}

.hero-title {
  font-size: clamp(2rem, 5vw, var(--fs-hero));
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  max-width: 16ch;
  margin-bottom: var(--space-5);
}

.hero-desc {
  font-size: var(--fs-md);
  color: var(--muted-foreground);
  line-height: var(--lh-normal);
  max-width: 60ch;
  margin-bottom: var(--space-6);
}

.hero-cta {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: var(--space-5);
}

.hero-trust {
  font-size: var(--fs-xs);
  color: var(--muted-foreground);
  letter-spacing: 0.01em;
}

@media (max-width: 768px) {
  .hero-cta { width: 100%; }
  .hero-cta .btn { flex: 1 1 auto; }
}

/* ── STOS / MINIAPKI ──────────────────────────────────────── */
.stack { padding: clamp(22px, 3.5vw, 44px) 0; }

.stack-head { text-align: center; max-width: 720px; margin: 0 auto clamp(36px, 6vw, 64px); }
.stack-eyebrow {
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  color: var(--primary); background: var(--primary-soft);
  display: inline-block; padding: 6px 14px; border-radius: var(--radius-pill);
  margin-bottom: var(--space-4);
}
.stack-title {
  font-size: clamp(1.6rem, 3.6vw, var(--fs-3xl));
  font-weight: var(--fw-bold); line-height: var(--lh-snug);
  letter-spacing: -0.02em; margin-bottom: var(--space-3);
}
.stack-title span { color: var(--danger); white-space: nowrap; }
.stack-sub { color: var(--muted-foreground); font-size: var(--fs-md); }

/* Karty konkurencji — chlodne, obce */
.stack-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.cat-card {
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  opacity: 0.92;
}
.cat-head {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  color: var(--muted-foreground);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-3);
}
.cat-head .ti { font-size: 18px; opacity: 0.7; }
.cat-tools { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.cat-tools li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  font-size: var(--fs-sm);
}
.cat-tools li span { color: var(--foreground); }
.cat-tools li b { color: var(--muted-foreground); font-weight: var(--fw-medium); white-space: nowrap; font-size: var(--fs-xs); }

/* Suma */
.stack-sum {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-align: center; margin-bottom: var(--space-4);
}
.stack-sum-label { font-size: var(--fs-xs); color: var(--muted-foreground); }
.stack-sum-amount {
  font-size: clamp(1.8rem, 4vw, var(--fs-2xl));
  font-weight: var(--fw-bold); color: var(--danger);
  letter-spacing: -0.02em;
}
.stack-sum-amount em { font-style: normal; font-size: 0.55em; color: var(--muted-foreground); font-weight: var(--fw-medium); }

/* Strzalka */
.stack-arrow { text-align: center; margin-bottom: var(--space-5); }
.stack-arrow .ti { font-size: 32px; color: var(--primary); opacity: 0.55; }

/* Karta Aizyl — cieplo, glow, fokal */
.aizyl-card {
  position: relative;
  max-width: 760px; margin: 0 auto;
}
.aizyl-card-glow { display: none; }
.aizyl-card-inner {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--surface-raised);
  border: 1.5px solid rgb(193 147 54 / 0.5);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hero);
  padding: clamp(32px, 5vw, 48px);
  text-align: center;
}
.aizyl-card-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(48% 52% at 12% 8%, var(--glow-green-strong) 0%, transparent 66%),
    radial-gradient(46% 50% at 90% 10%, var(--glow-blue) 0%, transparent 68%),
    radial-gradient(55% 55% at 88% 96%, var(--glow-rose) 0%, transparent 70%),
    radial-gradient(58% 58% at 8% 94%, var(--glow-coral) 0%, transparent 70%);
}
.aizyl-eyebrow {
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  color: var(--primary); margin-bottom: var(--space-2);
}
.aizyl-card-title {
  font-size: clamp(1.8rem, 4vw, var(--fs-2xl));
  font-weight: var(--fw-bold); letter-spacing: -0.02em;
  margin-bottom: var(--space-3);
}
.aizyl-card-price {
  display: flex; align-items: baseline; justify-content: center; gap: 8px;
  flex-wrap: wrap; margin-bottom: var(--space-5);
}
.aizyl-card-price strong { font-size: var(--fs-2xl); font-weight: var(--fw-bold); color: var(--primary); }
.aizyl-card-price span { font-size: var(--fs-sm); color: var(--muted-foreground); }

.aizyl-apps {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin-bottom: var(--space-6);
}
.app-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  color: var(--foreground);
  background: var(--card);
  border: 1px solid var(--border-soft);
  padding: 9px 16px; border-radius: var(--radius-pill);
}
.app-chip .ti { font-size: 17px; color: var(--primary); }
.app-chip--bonus { color: var(--muted-foreground); }
.app-chip--bonus .ti { color: var(--muted-foreground); }
.aizyl-cta { font-size: var(--fs-base); padding: 12px 28px; }

@media (max-width: 900px) {
  .stack-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .stack-grid { grid-template-columns: 1fr; }
}

/* CENNIK */
.pricing { padding: clamp(22px, 3.5vw, 44px) 0; }
.pricing-head { text-align: center; max-width: 640px; margin: 0 auto clamp(28px, 4vw, 44px); }
.pricing-title { font-size: clamp(1.6rem, 3.4vw, var(--fs-2xl)); font-weight: var(--fw-bold); letter-spacing: -0.02em; margin-bottom: var(--space-3); }
.pricing-note { font-size: var(--fs-sm); color: var(--muted-foreground); }

.pricing-toggle-wrap {
  display: flex; justify-content: center; gap: 4px;
  background: var(--surface-sunken); border: 1px solid var(--border);
  border-radius: var(--radius-pill); padding: 4px;
  width: fit-content; margin: 0 auto clamp(28px, 4vw, 40px);
}
.pricing-toggle-btn {
  font-family: inherit; font-size: var(--fs-sm); font-weight: var(--fw-medium);
  color: var(--muted-foreground); background: transparent; border: none;
  border-radius: var(--radius-pill); padding: 8px 18px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background-color .14s ease, color .14s ease;
}
.pricing-toggle-btn.is-active { background: var(--surface-raised); color: var(--foreground); box-shadow: var(--shadow-soft); }
.pricing-toggle-badge { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--primary); background: var(--primary-soft); padding: 2px 8px; border-radius: var(--radius-pill); }

.pricing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); max-width: 760px; margin: 0 auto; align-items: stretch; }

.price-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 32px);
}
.price-card--featured {
  overflow: hidden; isolation: isolate;
  background: var(--surface-raised);
  border: 1.5px solid rgb(193 147 54 / 0.5);
  box-shadow: var(--shadow-hero);
}
.price-card--featured::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(50% 45% at 12% 6%, var(--glow-green-strong) 0%, transparent 68%),
    radial-gradient(50% 45% at 90% 8%, var(--glow-blue) 0%, transparent 70%),
    radial-gradient(55% 50% at 88% 98%, var(--glow-rose) 0%, transparent 72%),
    radial-gradient(55% 50% at 6% 96%, var(--glow-coral) 0%, transparent 72%);
}
.price-badge {
  position: absolute; top: 16px; right: 16px;
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: #fff;
  background: var(--primary); padding: 4px 10px; border-radius: var(--radius-pill);
}
.price-card-name { font-size: var(--fs-md); font-weight: var(--fw-semibold); margin-bottom: var(--space-3); }
.price-amount { display: flex; align-items: baseline; gap: 6px; margin-bottom: var(--space-2); }
.price-amount strong { font-size: var(--fs-3xl); font-weight: var(--fw-bold); letter-spacing: -0.02em; }
.price-amount span { font-size: var(--fs-sm); color: var(--muted-foreground); }
.price-desc { font-size: var(--fs-sm); color: var(--muted-foreground); margin-bottom: var(--space-5); }
.price-feats { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: var(--space-6); flex: 1; text-align: left; }
.price-feats li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-sm); }
.price-feats .ti { color: var(--primary); font-size: 18px; flex-shrink: 0; }
.price-cta { width: 100%; }
.price-cta[disabled] { opacity: .55; cursor: default; pointer-events: none; }

.pricing-grid[data-cycle="monthly"] .price-amount--annual,
.pricing-grid[data-cycle="monthly"] .price-cta--annual { display: none; }
.pricing-grid[data-cycle="annual"] .price-amount--monthly,
.pricing-grid[data-cycle="annual"] .price-cta--monthly { display: none; }

@media (max-width: 640px) { .pricing-grid { grid-template-columns: 1fr; } }

/* FAQ */
.faq { padding: clamp(22px, 3.5vw, 44px) 0; }
.faq-head { text-align: center; margin-bottom: clamp(28px, 4vw, 44px); }
.faq-title { font-size: clamp(1.6rem, 3.4vw, var(--fs-2xl)); font-weight: var(--fw-bold); letter-spacing: -0.02em; }
.faq-list { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-family: inherit; font-size: var(--fs-md); font-weight: var(--fw-medium); text-align: left;
  color: var(--foreground); background: transparent; border: none; cursor: pointer;
  padding: 20px 22px;
}
.faq-icon { color: var(--primary); font-size: 20px; flex-shrink: 0; transition: transform .2s ease; }
.faq-item.is-open .faq-icon { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .28s ease; }
.faq-a p { padding: 0 22px 20px; color: var(--muted-foreground); font-size: var(--fs-sm); line-height: var(--lh-normal); }
.faq-item.is-open .faq-a { max-height: 320px; }

/* KAFEL FAKTURY */
.price-invoice {
  grid-column: 1 / -1;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 32px);
  text-align: left;
}
.price-invoice-label { font-weight: var(--fw-semibold); font-size: var(--fs-sm); margin-bottom: var(--space-2); }
.price-invoice-title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--primary); margin-bottom: var(--space-3); }
.price-invoice-title span { color: var(--muted-foreground); font-weight: var(--fw-regular); font-size: var(--fs-sm); }
.price-invoice-desc { font-size: var(--fs-sm); color: var(--muted-foreground); line-height: var(--lh-normal); margin-bottom: var(--space-5); max-width: 72ch; }
.price-invoice-cta {
  background: transparent;
  border: 1px solid var(--primary);
  color: var(--primary);
}
.price-invoice-cta:hover { background: var(--primary); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-lift); }