/* =========================================================
  REWORK — landing "strony-internetowe.html"
  Landing-specific components. Base system lives in style.css.
   ========================================================= */

/* ---------- Hero (landing) ---------- */
.lp-price{margin-top:1.5rem;display:inline-flex;align-items:center;gap:.55rem;font-family:var(--mono);font-size:.82rem;letter-spacing:.08em;color:var(--text);padding:.55rem 1rem;border-radius:999px;border:1px solid rgba(8,120,249,.35);background:rgba(8,120,249,.08)}
.lp-price strong{color:var(--accent);font-weight:700}
.stage--landing{aspect-ratio:1/1}
.stage--landing .stage__shot{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top center}
.stage--landing .stage__chip-a{right:0;top:0;width:46%;animation:float 7s ease-in-out infinite}
.stage--landing .stage__chip-b{left:-2%;bottom:-20%;width:48%;animation:float 8s ease-in-out 1s infinite}
.lp-chip{display:flex;align-items:center;gap:.7rem;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.97);color:var(--text);border:1px solid var(--line-2);box-shadow:0 20px 50px -20px rgba(11,31,55,.4)}
.lp-chip__ico{flex:none;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:rgba(8,120,249,.12);color:var(--accent);border:1px solid rgba(8,120,249,.22)}
.lp-chip__ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.lp-chip b{display:block;font-size:.9rem;font-weight:700;letter-spacing:-.01em}
.lp-chip small{display:block;font-size:.7rem;color:var(--muted);margin-top:.05rem}

/* ---------- Social proof (real clients) ---------- */
.social{padding-block:clamp(4rem,8vw,6rem);background:var(--bg-2);border-block:1px solid var(--line)}
.social__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.social__item a{position:relative;display:flex;flex-direction:column;gap:.35rem;height:100%;padding:1.3rem 1.35rem;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface);overflow:hidden;transition:transform .5s var(--ease),border-color .4s,box-shadow .5s var(--ease)}
.social__item a:hover{transform:translateY(-4px);border-color:rgba(8,120,249,.35);box-shadow:0 24px 50px -24px rgba(8,120,249,.45)}
.social__item b{font-size:1.08rem;letter-spacing:-.02em;font-weight:700;padding-right:1.4rem}
.social__item span:not(.social__arrow){font-size:.78rem;color:var(--muted)}
.social__arrow{position:absolute;right:1.1rem;top:1.2rem;color:var(--accent-2)}
.social__arrow svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.social__note{margin-top:1.6rem;font-size:.92rem;color:var(--muted);text-align:center}
.social__note a{color:var(--text);font-weight:650;text-decoration:underline;text-underline-offset:3px}
.social__note a:hover{color:var(--accent-2)}

/* ---------- Opinions (Google reviews) ---------- */
.reviews{background:var(--bg-2);border-block:1px solid var(--line)}
.reviews__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.review{display:flex;flex-direction:column;gap:1rem;padding:1.5rem 1.5rem;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface);transition:transform .5s var(--ease),border-color .4s,box-shadow .5s var(--ease)}
.review:hover{transform:translateY(-4px);border-color:rgba(8,120,249,.35);box-shadow:0 24px 50px -24px rgba(8,120,249,.45)}
.review__head{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.review__stars{font-size:1.1rem;letter-spacing:.14em;color:#f7a400;line-height:1;text-shadow:0 0 14px rgba(247,164,0,.4)}
.review__g{flex:none;width:28px;height:28px;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:0 2px 8px rgba(11,31,55,.1);display:grid;place-items:center}
.review__g svg{width:17px;height:17px}
.review__text{font-size:1rem;line-height:1.6;color:var(--text)}
.review__meta{display:flex;align-items:center;gap:.85rem;margin-top:auto;padding-top:.4rem}
.review__avatar{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:1.05rem;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.review__meta b{display:block;font-size:.96rem;letter-spacing:-.01em}
.review__meta small{display:block;color:var(--muted);font-size:.78rem;margin-top:.1rem}
.review__meta small.review__guide{font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;color:var(--muted-2)}
.reviews__note{margin-top:1.8rem;text-align:center;font-size:.92rem;color:var(--muted)}
.reviews__note a{color:var(--text);font-weight:650;text-decoration:underline;text-underline-offset:3px}
.reviews__note a:hover{color:var(--accent-2)}

/* ---------- Problems → answer ---------- */
.lp-problems__list{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}
.lp-problem{display:flex;align-items:flex-start;gap:.85rem;padding:1.05rem 1.15rem;border-radius:var(--r-md);border:1px solid var(--line);background:rgba(255,255,255,.015);transition:border-color .35s,background .35s,transform .5s var(--ease)}
.lp-problem:hover{border-color:rgba(255,93,93,.35);background:rgba(255,93,93,.045);transform:translateX(6px)}
.lp-problem__x{flex:none;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font-size:.75rem;font-weight:700;color:var(--err);background:rgba(255,93,93,.1);border:1px solid rgba(255,93,93,.22)}
.lp-problem h3{font-size:1.02rem;font-weight:700;letter-spacing:-.015em;line-height:1.3}
.lp-problem p{color:var(--muted);font-size:.9rem;margin-top:.25rem}
.lp-turn{position:relative;overflow:hidden;margin-top:clamp(2.5rem,5vw,3.5rem);text-align:center;padding:clamp(2.4rem,5vw,3.5rem) var(--gutter);border-radius:var(--r-xl);border:1px solid var(--line-2);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01))}
.lp-turn__glow{position:absolute;left:50%;bottom:-45%;width:70%;aspect-ratio:2/1;transform:translateX(-50%);background:radial-gradient(ellipse at center,rgba(8,120,249,.32),transparent 60%);filter:blur(30px);pointer-events:none}
.lp-turn h3{position:relative;font-size:clamp(1.5rem,3.2vw,2.3rem);letter-spacing:-.03em;font-weight:700;line-height:1.15;max-width:24ch;margin-inline:auto}
.lp-turn p{position:relative;color:var(--muted);margin:0 auto;max-width:56ch;font-size:1.05rem;line-height:1.65}
.lp-turn .btn{position:relative;margin-top:1.8rem}

/* ---------- Features (what you get) ---------- */
.feats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.feat{position:relative;display:flex;flex-direction:column;gap:.7rem;padding:1.5rem 1.4rem;border-radius:var(--r-md);border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));overflow:hidden;transition:transform .5s var(--ease),border-color .4s,box-shadow .5s var(--ease)}
.feat:hover{transform:translateY(-4px);border-color:rgba(8,120,249,.4);box-shadow:0 26px 55px -28px var(--accent-glow)}
.feat__num{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;color:var(--accent)}
.feat__ico{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:rgba(8,120,249,.1);color:var(--accent);border:1px solid rgba(8,120,249,.2);transition:background .35s,color .35s,transform .5s var(--ease)}
.feat:hover .feat__ico{background:var(--accent);color:#fff;transform:translateY(-3px)}
.feat__ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.feat h3{font-size:1.08rem;letter-spacing:-.02em;font-weight:700;line-height:1.2}
.feat p{font-size:.9rem;color:var(--muted);line-height:1.55}

/* ---------- Realizations (real cases, compact) ---------- */
.rp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem}
.rp-card{display:flex;flex-direction:column;border-radius:var(--r-lg);border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));overflow:hidden;transition:transform .55s var(--ease),border-color .4s,box-shadow .55s var(--ease)}
.rp-card:hover{transform:translateY(-6px);border-color:rgba(8,120,249,.4);box-shadow:0 40px 80px -40px rgba(8,120,249,.5)}
.rp-card__media{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--surface)}
.rp-card__media img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .8s var(--ease)}
.rp-card:hover .rp-card__media img{transform:scale(1.04)}
.rp-card__body{padding:1.2rem 1.35rem 1.35rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.rp-card__meta{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap}
.rp-card__meta h3{font-size:1.2rem;letter-spacing:-.02em;font-weight:700}
.rp-card__industry{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.rp-card p{font-size:.92rem;color:var(--muted);line-height:1.6}
.rp-card__links{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:auto;padding-top:.4rem;flex-wrap:wrap}

/* ---------- Pricing ---------- */
.pricing__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;align-items:stretch}
.price{position:relative;display:flex;flex-direction:column;gap:.9rem;padding:clamp(1.5rem,2.4vw,2rem);border-radius:var(--r-lg);border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));transition:transform .5s var(--ease),border-color .4s,box-shadow .5s var(--ease)}
.price:hover{transform:translateY(-4px);border-color:rgba(8,120,249,.4);box-shadow:0 30px 60px -30px var(--accent-glow)}
.price--mid{border-color:rgba(8,120,249,.45);background:linear-gradient(180deg,rgba(8,120,249,.07),rgba(255,255,255,.012));box-shadow:0 30px 60px -35px var(--accent-glow)}
.price__tag{position:absolute;top:-.8rem;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;padding:.4rem .8rem;border-radius:999px;background:var(--accent);color:#fff;box-shadow:0 8px 22px -10px var(--accent-glow)}
.price__name{font-family:var(--mono);font-size:.74rem;letter-spacing:.2em;color:var(--muted);font-weight:700}
.price__price{font-size:clamp(1.9rem,3.4vw,2.5rem);font-weight:750;letter-spacing:-.04em;line-height:1}
.price__price small{font-size:.62em;color:var(--muted);font-weight:600;letter-spacing:0}
.price__desc{font-size:.95rem;color:var(--muted);line-height:1.6;min-height:3.2em}
.price .btn{margin-top:auto;width:100%}
.price__fine{margin-top:1.6rem;text-align:center;font-size:.82rem;color:var(--muted-2)}

/* Pricing benefit list (neutral, replaces default problem-list hover) */
.price .plist{display:grid;gap:.55rem}
.price .plist__item{padding:.75rem 1rem .75rem 2.4rem;position:relative;border:1px solid var(--line);background:rgba(255,255,255,.015);border-radius:var(--r-sm);font-size:.92rem;color:var(--text);transition:border-color .35s,background .35s,transform .5s var(--ease)}
.price .plist__item::before{content:"";position:absolute;left:1rem;top:50%;width:14px;height:14px;transform:translateY(-50%);border-radius:50%;background:rgba(61,220,151,.16);border:1px solid rgba(61,220,151,.4)}
.price .plist__item::after{content:"";position:absolute;left:1.42rem;top:50%;width:4px;height:7px;transform:translateY(-60%) rotate(45deg);border:solid var(--ok);border-width:0 1.6px 1.6px 0}
.price .plist__item:hover{border-color:rgba(8,120,249,.3);background:rgba(8,120,249,.04);transform:none}

/* ---------- Process (4 steps, minimal) ---------- */
.land-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.land-step{position:relative;text-align:left;padding:1.4rem 1.35rem;border-radius:var(--r-md);border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));transition:transform .5s var(--ease),border-color .4s}
.land-step:hover{transform:translateY(-4px);border-color:rgba(8,120,249,.4)}
.land-step__num{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;color:var(--accent)}
.land-step::after{content:"";position:absolute;right:-.75rem;top:50%;width:.5rem;height:.5rem;border-top:1.5px solid var(--muted-2);border-right:1.5px solid var(--muted-2);transform:translateY(-50%) rotate(45deg);opacity:.5}
.land-step:last-child::after{display:none}
.land-step h3{font-size:1.08rem;letter-spacing:-.02em;font-weight:700;margin-top:.4rem}
.land-step p{font-size:.9rem;color:var(--muted);line-height:1.55;margin-top:.25rem}

/* ---------- Final CTA phone ---------- */
.final__phone{display:inline-flex;align-items:center;gap:.6rem;margin-top:1.4rem;font-size:1.15rem;font-weight:700;letter-spacing:-.01em;color:var(--text)}
.final__phone svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;color:var(--accent)}
.final__phone:hover{color:var(--accent-2)}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .social__grid{grid-template-columns:repeat(2,1fr)}
  .feats{grid-template-columns:repeat(2,1fr)}
  .pricing__grid{grid-template-columns:1fr}
  .pricing__grid .price{max-width:520px;margin-inline:auto;width:100%}
  .land-steps{grid-template-columns:repeat(2,1fr)}
  .land-step::after{display:none}
}
@media (max-width:720px){
  .stage--landing{aspect-ratio:1/.98}
  .stage--landing .stage__chip-a{width:52%;right:0;top:-1%}
  .stage--landing .stage__chip-b{width:56%;left:-1%;bottom:2%}
}
@media (max-width:640px){
  .social__grid{grid-template-columns:1fr}
  .reviews__grid{grid-template-columns:1fr}
  .lp-problems__list{grid-template-columns:1fr}
  .feats{grid-template-columns:1fr}
  .rp-grid{grid-template-columns:1fr}
  .land-steps{grid-template-columns:1fr}
  .lp-price{width:100%;justify-content:center}
  .social__note{text-align:left}
}

/* Dark-stage chips on very small screens keep readable contrast */
@media (prefers-reduced-motion:reduce){
  .lp-chip,.stage--landing .stage__chip-a,.stage--landing .stage__chip-b{animation:none}
}