/* landing.css — strona startowa ŁapKurs */

*,
*::before,
*::after {
    box-sizing: border-box;
}

.landing {
    margin: 0;
    font-family: Inter, system-ui, -apple-system, sans-serif;
    background: #09090b;
    color: #fafafa;
    line-height: 1.5;
    scroll-behavior: smooth;
}

.landing [id] {
    scroll-margin-top: 72px;
}

.landing a {
    color: inherit;
    text-decoration: none;
}

.landing-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ── Top bar ─────────────────────────────────────────────────────────── */
.landing-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 24px;
    background: rgba(9, 9, 11, 0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.landing-logo {
    font-weight: 800;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.landing-top-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.landing-top-nav a:not(.landing-btn) {
    font-size: 0.88rem;
    color: #a1a1aa;
    padding: 6px 8px;
}

.landing-top-nav a:not(.landing-btn):hover {
    color: #fff;
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.landing-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    border-radius: 16px;
    background: #10b981;
    color: #052e16;
    font-weight: 700;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
}

.landing-btn:hover {
    background: #059669;
}

.landing-btn--ghost {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.35);
}

.landing-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.08);
}

.landing-btn--sm {
    padding: 8px 16px;
    font-size: 0.85rem;
    border-radius: 12px;
}

.landing-btn--block {
    width: 100%;
    margin-top: auto;
}

.landing-btn--muted {
    background: #27272a;
    color: #fff;
}

.landing-btn--muted:hover {
    background: #3f3f46;
}

.landing-btn--accent {
    background: #10b981;
    color: #052e16;
}

/* ── Hero ────────────────────────────────────────────────────────────── */
.landing-hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 100px 24px 60px;
    background:
        linear-gradient(rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.88)),
        url('https://images.unsplash.com/photo-1436491865332-7a61a192b581?auto=format&fit=crop&w=1920&q=80') center/cover no-repeat;
}

.landing-hero-inner {
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
}

.landing-eyebrow {
    margin: 0 0 12px;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #6ee7b7;
    font-weight: 600;
}

.landing-hero h1 {
    margin: 0 0 20px;
    font-size: clamp(2.2rem, 6vw, 3.75rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.03em;
}

.landing-hero h1 span {
    color: #34d399;
}

.landing-lead {
    margin: 0 0 28px;
    max-width: 640px;
    font-size: clamp(1.05rem, 2.5vw, 1.35rem);
    color: #d4d4d8;
}

.landing-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.landing-proof {
    margin: 28px 0 0;
    font-size: 0.88rem;
    color: #71717a;
}

/* ── Sections ────────────────────────────────────────────────────────── */
.landing-section {
    padding: 80px 0;
    background: #18181b;
}

.landing-section--dark {
    background: #000;
}

.landing-section h2 {
    margin: 0 0 12px;
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    font-weight: 800;
    text-align: center;
}

.landing-sub {
    text-align: center;
    color: #a1a1aa;
    margin: 0 0 40px;
}

.landing-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 48px;
}

.landing-step {
    text-align: center;
}

.landing-step-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    display: grid;
    place-items: center;
    font-size: 1.75rem;
    background: rgba(16, 185, 129, 0.12);
    border-radius: 16px;
}

.landing-step h3 {
    margin: 0 0 8px;
    font-size: 1rem;
}

.landing-step p {
    margin: 0;
    font-size: 0.88rem;
    color: #a1a1aa;
}

/* ── Pricing ─────────────────────────────────────────────────────────── */
.landing-pricing {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
}

.pricing-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #18181b;
    border: 1px solid #3f3f46;
    border-radius: 24px;
    padding: 32px 28px;
}

.pricing-card--featured {
    background: linear-gradient(145deg, #059669, #0d9488);
    border-color: transparent;
    transform: scale(1.03);
    box-shadow: 0 24px 48px rgba(16, 185, 129, 0.25);
}

.pricing-badge {
    position: absolute;
    top: -12px;
    right: 20px;
    background: #facc15;
    color: #000;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 4px 14px;
    border-radius: 999px;
}
 
.pricing-badge--promo {
    background: #ef4444 !important;
    color: #ffffff !important;
}

.pricing-card h3 {
    margin: 0 0 8px;
    font-size: 1.5rem;
}

.pricing-price {
    margin: 0 0 24px;
    font-size: 2.8rem;
    font-weight: 800;
    line-height: 1;
}

.pricing-price span {
    font-size: 0.95rem;
    font-weight: 400;
    opacity: 0.75;
}

.pricing-card ul {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    flex: 1;
}

.pricing-card li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
    font-size: 0.92rem;
}

.pricing-card li i {
    margin-top: 3px;
    color: #34d399;
}

.pricing-card--featured li i {
    color: #fff;
}

.landing-note {
    text-align: center;
    margin: 32px 0 0;
    font-size: 0.82rem;
    color: #71717a;
}

/* ── Footer ──────────────────────────────────────────────────────────── */
.landing-footer {
    padding: 48px 24px;
    text-align: center;
    background: #000;
    color: #71717a;
    font-size: 0.88rem;
}

.landing-footer-brand {
    margin: 0 0 8px;
    font-size: 1.4rem;
    font-weight: 800;
    color: #fff;
}

.landing-footer a {
    color: #a1a1aa;
    text-decoration: underline;
}

/* ── Mobile ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .landing-steps {
        grid-template-columns: 1fr 1fr;
    }

    .landing-pricing {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin: 0 auto;
    }

    .pricing-card--featured {
        transform: none;
    }
}

@media (max-width: 600px) {
    .landing-top-nav a:not(.landing-btn) {
        display: none;
    }

    .landing-steps {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .landing-cta {
        flex-direction: column;
    }

    .landing-btn {
        width: 100%;
    }
}

/* ── Strona wyboru planu (plans.php) ─────────────────────────────────── */
.landing-plans-page {
    padding: 100px 0 60px;
    min-height: 70vh;
}

.landing-plans-page h1 {
    text-align: center;
    margin: 0 0 8px;
    font-size: clamp(1.75rem, 4vw, 2.25rem);
}

/* ── Banner promocji ─────────────────────────────────────────────────── */
.landing-promo-banner {
    background: linear-gradient(90deg, #0d9488 0%, #14b8a6 50%, #2dd4bf 100%);
    color: #042f2e;
    padding: 12px 0;
    margin-top: 56px;
}

.landing-promo-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px 20px;
    text-align: center;
}

.landing-promo-inner p {
    margin: 0;
    font-weight: 600;
    font-size: 0.95rem;
}

.landing-promo-tag {
    background: rgba(255, 255, 255, 0.25);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
}

.pricing-old {
    text-decoration: line-through;
    opacity: 0.55;
    font-size: 0.85em;
    font-weight: 600;
    margin-right: 4px;
}
/* Wspolne logo ŁapKurs — identyczne jak w aplikacji i na mapach. */
.gp-app-brand { display:inline-flex; align-items:center; gap:10px; color:inherit; text-decoration:none; white-space:nowrap; }
.gp-app-brand:hover { text-decoration:none; }
.gp-app-brand__mark { position:relative; display:grid; place-items:center; width:36px; height:36px; flex:0 0 auto; border:1px solid rgba(86,216,255,.45); border-radius:11px; background:linear-gradient(145deg,rgba(86,216,255,.21),rgba(77,140,255,.16)); color:#56d8ff; box-shadow:0 0 28px rgba(86,216,255,.16),inset 0 1px 0 rgba(255,255,255,.17); }
.gp-app-brand__mark::after { content:''; position:absolute; inset:4px; border:1px solid rgba(255,255,255,.13); border-radius:7px; }
.gp-app-brand__mark svg { width:19px; height:19px; }
.gp-app-brand__copy { display:grid; min-width:0; line-height:1; }
.gp-app-brand__name { font-size:19px; font-weight:800; letter-spacing:-.5px; }
.gp-app-brand__name em { color:#56d8ff; font-style:normal; }
.gp-app-brand__copy small { margin-top:4px; color:#94a3b8; font-size:8px; }
@media (max-width:720px) { .gp-app-brand__mark{width:33px;height:33px}.gp-app-brand__name{font-size:17px} }


/* 6.1.53 — wyraźna drabina Free → Pro → Premium */
.pricing-card--recommended{
    border-color:rgba(56,189,248,.72);
    box-shadow:0 20px 46px rgba(14,165,233,.13);
}
.pricing-badge--pro{background:#38bdf8;color:#082f49}
.plan-card-copy{min-height:58px;margin:3px 0 14px;color:#a8bacd;font-size:.82rem;line-height:1.55}
.plan-feature-locked{opacity:.68}
.pricing-card--premium .pricing-price{letter-spacing:-.05em}
@media(max-width:900px){.plan-card-copy{min-height:0}}


/* 6.1.55 — pojedyncza kompozycja produktu zamiast galerii screenów */
.gp-showcase--single{
    position:relative;
    overflow:hidden;
    padding:94px 0 100px;
    border-top:1px solid rgba(86,216,255,.12);
    border-bottom:1px solid rgba(86,216,255,.11);
    background:
        radial-gradient(circle at 50% 48%,rgba(32,156,255,.13),transparent 34%),
        radial-gradient(circle at 76% 58%,rgba(126,87,255,.10),transparent 30%),
        linear-gradient(180deg,rgba(6,21,36,.58),rgba(6,18,32,.90));
}
.gp-showcase--single::before{
    content:'';
    position:absolute;
    inset:0;
    pointer-events:none;
    background-image:
        linear-gradient(rgba(135,192,228,.028) 1px,transparent 1px),
        linear-gradient(90deg,rgba(135,192,228,.028) 1px,transparent 1px);
    background-size:44px 44px;
    mask-image:linear-gradient(to bottom,transparent,black 18%,black 84%,transparent);
}
.gp-showcase--single .gp-container{position:relative;z-index:1}
.gp-showcase__head{max-width:820px;margin-bottom:16px}
.gp-showcase__head h2{max-width:800px}
.gp-showcase__single-wrap{
    position:relative;
    width:min(1180px,100%);
    margin:4px auto 0;
    padding:26px 12px 6px;
    isolation:isolate;
}
.gp-showcase__single-wrap::before{
    content:'';
    position:absolute;
    z-index:-1;
    left:10%;
    right:10%;
    top:15%;
    bottom:8%;
    border-radius:50%;
    background:radial-gradient(ellipse at center,rgba(53,159,255,.18),rgba(124,84,255,.08) 46%,transparent 72%);
    filter:blur(28px);
}
.gp-showcase__single-badge{
    position:absolute;
    z-index:3;
    right:4%;
    top:34px;
    display:inline-flex;
    align-items:center;
    min-height:34px;
    padding:8px 13px;
    border:1px solid rgba(83,224,186,.34);
    border-radius:999px;
    background:rgba(5,28,45,.84);
    color:#8af0d4;
    box-shadow:0 12px 32px rgba(0,0,0,.22);
    backdrop-filter:blur(10px);
    font:900 10px/1 'DM Mono',monospace;
    letter-spacing:.10em;
}
.gp-showcase__single-image{
    display:block;
    width:100%;
    height:auto;
    object-fit:contain;
    filter:drop-shadow(0 34px 42px rgba(0,0,0,.28));
    transform:translateZ(0);
}
.gp-showcase__single-points{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:9px;
    max-width:1000px;
    margin:12px auto 0;
}
.gp-showcase__single-points span{
    display:inline-flex;
    align-items:center;
    gap:7px;
    min-height:34px;
    padding:8px 11px;
    border:1px solid rgba(149,198,233,.15);
    border-radius:999px;
    background:rgba(12,35,58,.70);
    color:#b8cce0;
    font-size:10px;
    font-weight:700;
}
.gp-showcase__single-points i{color:var(--gp-cyan)}
.gp-showcase__note{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:18px;
    max-width:1050px;
    margin:28px auto 0;
    padding-top:19px;
    border-top:1px solid rgba(173,211,238,.13);
    color:#8ea8bf;
    font-size:11px;
}
.gp-showcase__note span{display:flex;align-items:center;gap:8px}
.gp-showcase__note i{color:var(--gp-cyan)}
.gp-showcase__note a{
    color:var(--gp-cyan);
    font-weight:800;
    text-decoration:none;
    white-space:nowrap;
}
@media(max-width:900px){
    .gp-showcase--single{padding:72px 0 78px}
    .gp-showcase__single-wrap{padding:18px 0 4px}
    .gp-showcase__single-badge{right:2%;top:22px;font-size:9px}
}
@media(max-width:620px){
    .gp-showcase--single{padding:56px 0 62px}
    .gp-showcase__head{margin-bottom:8px}
    .gp-showcase__head .gp-section__lead{font-size:13px}
    .gp-showcase__single-wrap{
        width:calc(100% + 18px);
        margin-left:-9px;
        padding-top:14px;
    }
    .gp-showcase__single-badge{
        position:relative;
        right:auto;
        top:auto;
        margin:0 0 8px 11px;
        min-height:30px;
        padding:7px 10px;
        font-size:8px;
    }
    .gp-showcase__single-image{
        width:108%;
        max-width:none;
        margin-left:-4%;
        filter:drop-shadow(0 22px 26px rgba(0,0,0,.24));
    }
    .gp-showcase__single-points{
        justify-content:flex-start;
        gap:7px;
        margin-top:5px;
    }
    .gp-showcase__single-points span{
        min-height:30px;
        padding:7px 9px;
        font-size:9px;
    }
    .gp-showcase__note{
        align-items:flex-start;
        flex-direction:column;
        gap:9px;
        margin-top:18px;
        font-size:10px;
    }
}
@media(prefers-reduced-motion:reduce){
    .gp-showcase__single-image{transform:none}
}

/* 6.1.56 — narracyjne grafiki produktu między sekcjami */
.gp-story-visual{
    position:relative;
    overflow:hidden;
    padding:72px 0;
}
.gp-story-visual::before{
    content:'';
    position:absolute;
    inset:10% 0;
    pointer-events:none;
    background:radial-gradient(circle at 55% 50%,rgba(49,165,255,.095),transparent 40%);
}
.gp-story-visual--map::before{
    background:radial-gradient(circle at 40% 48%,rgba(83,224,186,.09),transparent 42%);
}
.gp-story-visual--operations::before{
    background:radial-gradient(circle at 62% 48%,rgba(130,89,255,.10),transparent 42%);
}
.gp-story-visual__layout{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:minmax(260px,.72fr) minmax(0,1.55fr);
    align-items:center;
    gap:clamp(34px,5vw,74px);
}
.gp-story-visual__layout--reverse{
    grid-template-columns:minmax(0,1.55fr) minmax(260px,.72fr);
}
.gp-story-visual__layout--reverse .gp-story-visual__copy{order:2}
.gp-story-visual__layout--reverse .gp-story-visual__media{order:1}
.gp-story-visual__copy{max-width:430px}
.gp-story-visual__copy h2{
    margin:8px 0 15px;
    font-size:clamp(27px,3.2vw,46px);
    line-height:1.04;
    letter-spacing:-.035em;
}
.gp-story-visual__copy p:not(.gp-eyebrow){
    margin:0;
    color:#9bb1c5;
    font-size:14px;
    line-height:1.72;
}
.gp-story-visual__pill{
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin-top:16px;
    padding:8px 11px;
    border:1px solid rgba(83,224,186,.22);
    border-radius:999px;
    background:rgba(18,92,91,.16);
    color:#83e8cd;
    font-size:10px;
    font-weight:800;
}
.gp-story-visual__media{
    position:relative;
    margin:0;
    min-width:0;
}
.gp-story-visual__media::before{
    content:'';
    position:absolute;
    z-index:-1;
    left:8%;
    right:8%;
    bottom:4%;
    height:25%;
    border-radius:50%;
    background:rgba(34,138,255,.12);
    filter:blur(32px);
}
.gp-story-visual__media img{
    display:block;
    width:100%;
    height:auto;
    object-fit:contain;
    filter:drop-shadow(0 28px 34px rgba(0,0,0,.24));
    transform:translateZ(0);
}
.gp-story-visual--dashboard .gp-story-visual__media img{transform:rotate(.35deg)}
.gp-story-visual--map .gp-story-visual__media img{transform:rotate(-.45deg)}
.gp-story-visual--operations .gp-story-visual__media img{transform:rotate(.35deg)}

.gp-pricing-visual{
    position:relative;
    display:grid;
    grid-template-columns:minmax(260px,.65fr) minmax(0,1.55fr);
    align-items:center;
    gap:clamp(26px,4vw,56px);
    margin:52px 0 26px;
    padding:28px 30px;
    overflow:hidden;
    border:1px solid rgba(83,224,186,.17);
    border-radius:26px;
    background:
        radial-gradient(circle at 78% 45%,rgba(65,183,255,.09),transparent 38%),
        linear-gradient(135deg,rgba(9,42,52,.73),rgba(9,26,45,.78));
}
.gp-pricing-visual__copy{position:relative;z-index:2}
.gp-pricing-visual__copy h3{
    margin:8px 0 13px;
    font-size:clamp(24px,2.7vw,38px);
    line-height:1.06;
    letter-spacing:-.03em;
}
.gp-pricing-visual__copy p:not(.gp-eyebrow){
    margin:0;
    color:#9fb4c7;
    font-size:13px;
    line-height:1.67;
}
.gp-pricing-visual__media{
    position:relative;
    margin:0 -18px -18px 0;
}
.gp-pricing-visual__media img{
    display:block;
    width:100%;
    height:auto;
    filter:drop-shadow(0 22px 30px rgba(0,0,0,.24));
}

@media(max-width:900px){
    .gp-story-visual{padding:54px 0}
    .gp-story-visual__layout,
    .gp-story-visual__layout--reverse{
        grid-template-columns:1fr;
        gap:24px;
    }
    .gp-story-visual__layout--reverse .gp-story-visual__copy,
    .gp-story-visual__layout--reverse .gp-story-visual__media{order:initial}
    .gp-story-visual__copy{max-width:690px}
    .gp-story-visual__media{width:calc(100% + 24px);margin-left:-12px}
    .gp-pricing-visual{
        grid-template-columns:1fr;
        padding:25px 22px 10px;
    }
    .gp-pricing-visual__media{margin:0 -10px -6px}
}
@media(max-width:620px){
    .gp-story-visual{padding:42px 0}
    .gp-story-visual__copy h2{font-size:29px}
    .gp-story-visual__copy p:not(.gp-eyebrow){font-size:13px}
    .gp-story-visual__media{
        width:calc(100% + 34px);
        margin-left:-17px;
    }
    .gp-story-visual__media img{
        filter:drop-shadow(0 18px 22px rgba(0,0,0,.20));
    }
    .gp-pricing-visual{
        margin:34px 0 20px;
        padding:22px 16px 7px;
        border-radius:20px;
    }
    .gp-pricing-visual__copy h3{font-size:27px}
    .gp-pricing-visual__media{
        width:calc(100% + 18px);
        margin-left:-9px;
        margin-right:-9px;
    }
}
@media(prefers-reduced-motion:reduce){
    .gp-story-visual__media img{transform:none!important}
}