/* =========================================================
   OPEN//77 (Cyberpunk 2077 multiplayer) – klimat cyberpunk na bazie zw-ui.css
   Kolory z brand kitu OPEN//77: cyan #00F7FC, coral #FF5964, navy #080E19.
   ========================================================= */
.zw.cp77 { --acc: #00f7fc; --coral: #ff5964; --ice: #70f3f5; --navy: #080e19; --card: rgba(8, 20, 34, .62); --line: rgba(0, 247, 252, .14); --line-strong: rgba(0, 247, 252, .3); }
.zw.cp77 .zw-aurora { background:
        radial-gradient(34% 34% at 18% 24%, rgba(0,247,252,.22), transparent 70%),
        radial-gradient(32% 30% at 84% 20%, rgba(255,89,100,.2), transparent 70%),
        radial-gradient(30% 30% at 60% 88%, rgba(0,247,252,.14), transparent 70%); }
.zw.cp77 .zw-aurora::after { background: radial-gradient(36% 32% at 80% 72%, rgba(255,89,100,.2), transparent 70%), radial-gradient(34% 34% at 14% 84%, rgba(0,247,252,.18), transparent 70%); }
.zw.cp77 .zw-gridbg { background-size: 44px 44px; background-image: linear-gradient(rgba(0,247,252,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0,247,252,.05) 1px, transparent 1px); }

/* linie skanowania jak na monitorze CRT – tylko w hero, zeby nie nachodzily na stopke */
.zw.cp77 .cp-scan { position: absolute; inset: 0; z-index: 9; pointer-events: none; opacity: .35; mix-blend-mode: overlay;
    background: repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px); }
.zw.cp77 .cp-scan::after { content: ''; position: absolute; left: 0; right: 0; height: 120px; top: -120px; background: linear-gradient(180deg, transparent, rgba(0,247,252,.06), transparent);
    animation: cpSweep 7s linear infinite; }
@keyframes cpSweep { to { top: 110%; } }

.zw.cp77 .cp-font, .zw.cp77 h1, .zw.cp77 .zw-h2, .zw.cp77 .zw-plan h3, .zw.cp77 .cp-mode b, .zw.cp77 .zw-stat b, .zw.cp77 .zw-cta h2 { font-family: 'Orbitron', 'Poppins', sans-serif; letter-spacing: .01em; }
.zw.cp77 .zw-grad { background: linear-gradient(100deg, #f2f6f8 0%, var(--ice) 30%, var(--acc) 55%, var(--coral) 85%, #f2f6f8 100%); background-size: 220% auto;
    -webkit-background-clip: text; background-clip: text; color: transparent; }
.zw.cp77 .zw-eyebrow { border-radius: 4px; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); font-family: 'Orbitron', sans-serif; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; }
.zw.cp77 .zw-btn { border-radius: 4px; clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); font-family: 'Orbitron', sans-serif; font-size: 13.5px; letter-spacing: .06em; text-transform: uppercase; }
.zw.cp77 .zw-btn-coral { color: #fff; background: linear-gradient(135deg, #ff7a83, var(--coral)); box-shadow: 0 12px 40px -12px var(--coral); }

/* ---------- glitch w naglowku ---------- */
.zw.cp77 .cp-glitch { position: relative; display: inline-block; }
.zw.cp77 .cp-glitch::before, .zw.cp77 .cp-glitch::after { content: attr(data-text); position: absolute; inset: 0; pointer-events: none; }
.zw.cp77 .cp-glitch::before { color: var(--coral); transform: translate(-2px, 0); clip-path: inset(0 0 60% 0); animation: cpGlitchA 3.2s infinite steps(1); mix-blend-mode: screen; }
.zw.cp77 .cp-glitch::after { color: var(--acc); transform: translate(2px, 0); clip-path: inset(55% 0 0 0); animation: cpGlitchB 2.7s infinite steps(1); mix-blend-mode: screen; }
@keyframes cpGlitchA { 0%, 88%, 100% { transform: translate(0); opacity: 0; } 89% { transform: translate(-4px, -2px); opacity: 1; clip-path: inset(10% 0 70% 0); } 92% { transform: translate(3px, 1px); opacity: 1; clip-path: inset(40% 0 30% 0); } 95% { transform: translate(-2px, 2px); opacity: 1; clip-path: inset(70% 0 5% 0); } }
@keyframes cpGlitchB { 0%, 84%, 100% { transform: translate(0); opacity: 0; } 85% { transform: translate(4px, 2px); opacity: 1; clip-path: inset(60% 0 10% 0); } 90% { transform: translate(-3px, -1px); opacity: 1; clip-path: inset(20% 0 55% 0); } }

/* ---------- HERO ---------- */
.zw.cp77 .cp-hero { position: relative; padding: 20px 0 0; overflow: hidden; }
.zw.cp77 .cp-hero h1 { font-size: clamp(34px, 5.2vw, 70px); font-weight: 900; line-height: 1.04; text-transform: uppercase; margin: 22px 0 20px; }
.zw.cp77 .cp-logo { display: block; width: min(420px, 90%); height: auto; margin-bottom: 6px; filter: drop-shadow(0 0 24px rgba(0,247,252,.35)); }
.zw.cp77 .cp-alpha { display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; padding: 5px 10px; border-radius: 3px; font: 700 11px 'Orbitron', sans-serif; letter-spacing: .14em; color: var(--navy); background: var(--coral); box-shadow: 0 0 20px rgba(255,89,100,.5); vertical-align: middle; }
.zw.cp77 .cp-visual { position: relative; display: grid; place-items: center; min-height: 480px; }
.zw.cp77 .cp-hud { position: absolute; width: 86%; aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--line-strong); }
.zw.cp77 .cp-hud::before { content: ''; position: absolute; inset: 8%; border-radius: 50%; border: 2px dashed rgba(0,247,252,.35); animation: zwRot 30s linear infinite; }
.zw.cp77 .cp-hud::after { content: ''; position: absolute; inset: -4%; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--coral); border-right-color: var(--coral); animation: zwRot 9s linear infinite reverse; filter: drop-shadow(0 0 8px var(--coral)); }
.zw.cp77 .cp-mark { position: relative; width: 108%; max-width: 640px; filter: drop-shadow(0 0 30px rgba(0,247,252,.55)) drop-shadow(0 0 80px rgba(0,247,252,.25)); animation: cpFlicker 6s infinite, zwFloat 8s ease-in-out infinite; }
@keyframes cpFlicker { 0%, 100% { opacity: 1; } 92% { opacity: 1; } 93% { opacity: .55; } 94% { opacity: 1; } 96% { opacity: .75; } 97% { opacity: 1; } }
.zw.cp77 .cp-tags { position: absolute; inset: 0; pointer-events: none; }
.zw.cp77 .cp-tag { position: absolute; padding: 8px 12px; font: 600 11px 'Orbitron', sans-serif; letter-spacing: .1em; color: var(--acc); background: rgba(8,14,25,.85); border: 1px solid var(--line-strong);
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); animation: zwFloat 6s ease-in-out infinite; }
.zw.cp77 .cp-tag small { display: block; margin-top: 2px; font: 400 10.5px 'Poppins', sans-serif; letter-spacing: 0; color: #9fb5c4; }
.zw.cp77 .cp-tag.coral { color: var(--coral); border-color: rgba(255,89,100,.45); }

/* panorama miasta */
.zw.cp77 .cp-skyline { position: relative; display: block; width: 100%; height: 190px; margin-top: 40px; }
.zw.cp77 .cp-skyline .win { animation: cpWin 4s infinite; }
@keyframes cpWin { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* pasek z przewijajacym sie tekstem */
.zw.cp77 .cp-ticker { position: relative; z-index: 3; overflow: hidden; padding: 14px 0; background: var(--acc); transform: rotate(-1.2deg); margin: -26px -2% 0; box-shadow: 0 0 40px rgba(0,247,252,.35); }
.zw.cp77 .cp-ticker + .cp-ticker { background: var(--coral); transform: rotate(1deg); margin-top: -6px; box-shadow: 0 0 40px rgba(255,89,100,.35); }
.zw.cp77 .cp-ticker-track { display: flex; gap: 40px; width: max-content; animation: cpMarq 38s linear infinite; font: 800 15px 'Orbitron', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); white-space: nowrap; }
.zw.cp77 .cp-ticker + .cp-ticker .cp-ticker-track { animation-direction: reverse; color: #fff; }
.zw.cp77 .cp-ticker-track span::after { content: '//'; margin-left: 40px; opacity: .55; }
@keyframes cpMarq { to { transform: translateX(-50%); } }

/* ---------- karty z sciętymi rogami i ramka HUD ---------- */
.zw.cp77 .cp-cut { border-radius: 0; clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px); }
.zw.cp77 .cp-corners { position: relative; }
.zw.cp77 .cp-corners::after { content: ''; position: absolute; inset: 8px; pointer-events: none; opacity: .7;
    background:
        linear-gradient(var(--acc), var(--acc)) top left / 18px 2px no-repeat, linear-gradient(var(--acc), var(--acc)) top left / 2px 18px no-repeat,
        linear-gradient(var(--coral), var(--coral)) bottom right / 18px 2px no-repeat, linear-gradient(var(--coral), var(--coral)) bottom right / 2px 18px no-repeat; }

/* status alpha */
.zw.cp77 .cp-status { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; padding: 26px 30px; background: linear-gradient(110deg, rgba(255,89,100,.14), rgba(0,247,252,.07)); border: 1px solid rgba(255,89,100,.4); }
.zw.cp77 .cp-status-ico { width: 58px; height: 58px; display: grid; place-items: center; color: var(--navy); background: var(--coral); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.zw.cp77 .cp-status-ico svg { width: 26px; height: 26px; }
.zw.cp77 .cp-status b { display: block; font: 700 17px 'Orbitron', sans-serif; margin-bottom: 4px; }
.zw.cp77 .cp-status p { color: #b8c6d1; font-size: 14.5px; line-height: 1.65; }
.zw.cp77 .cp-status a { color: var(--acc); }

/* plany */
.zw.cp77 .zw-plans { grid-template-columns: repeat(3, 1fr); }
.zw.cp77 .zw-plan { border-radius: 0; padding: 26px 24px; clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px); }
.zw.cp77 .zw-plan.is-hot { background: linear-gradient(#0a1626, #0a1626) padding-box, conic-gradient(from var(--ang, 0deg), var(--acc), var(--coral), #0a1626, var(--acc)) border-box; }
.zw.cp77 .cp-plan-tag { font: 700 12px 'Orbitron', sans-serif; letter-spacing: .14em; color: var(--acc); }
.zw.cp77 .cp-plan-for { min-height: 46px; margin-top: 6px; color: #9fb5c4; font-size: 13px; line-height: 1.6; }
.zw.cp77 .zw-plan .zw-price b { font-family: 'Orbitron', sans-serif; font-size: 34px; }
.zw.cp77 .zw-plan .zw-btn { width: 100%; }
.zw.cp77 .zw-plan-badge { border-radius: 0; color: #fff; background: var(--coral); font-family: 'Orbitron', sans-serif; box-shadow: 0 6px 18px -6px var(--coral); }

/* tryby gry */
.zw.cp77 .cp-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.zw.cp77 .cp-mode { position: relative; padding: 26px 24px; overflow: hidden; background: var(--card); border: 1px solid var(--line); transition: transform .35s, border-color .3s, box-shadow .3s; }
.zw.cp77 .cp-mode:hover { transform: translateY(-5px); border-color: var(--line-strong); box-shadow: 0 26px 60px -30px var(--acc); }
.zw.cp77 .cp-mode .num { position: absolute; top: 14px; right: 18px; font: 900 44px 'Orbitron', sans-serif; color: rgba(0,247,252,.08); }
.zw.cp77 .cp-mode .ico { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 16px; color: var(--acc); background: rgba(0,247,252,.1); border: 1px solid var(--line-strong);
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.zw.cp77 .cp-mode .ico svg { width: 24px; height: 24px; }
.zw.cp77 .cp-mode:nth-child(even) .ico { color: var(--coral); background: rgba(255,89,100,.1); border-color: rgba(255,89,100,.4); }
.zw.cp77 .cp-mode b { display: block; font-size: 16px; font-weight: 700; margin-bottom: 8px; text-transform: uppercase; }
.zw.cp77 .cp-mode p { color: #9fb5c4; font-size: 14px; line-height: 1.65; }

/* narzedzia deweloperskie */
.zw.cp77 .cp-dev { display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px; }
.zw.cp77 .cp-code { margin: 0; padding: 22px 24px; font: 13px/1.85 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #d6e6f0; background: rgba(0,0,0,.45); border: 1px solid var(--line); white-space: pre; overflow-x: auto; }
.zw.cp77 .cp-code .k { color: var(--coral); } .zw.cp77 .cp-code .s { color: var(--ice); } .zw.cp77 .cp-code .c { color: #5f7a8a; } .zw.cp77 .cp-code .f { color: var(--acc); }
.zw.cp77 .cp-dev-list { display: grid; gap: 12px; }
.zw.cp77 .cp-dev-item { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; padding: 18px; background: var(--card); border: 1px solid var(--line); }
.zw.cp77 .cp-dev-item svg { width: 44px; height: 44px; padding: 10px; color: var(--acc); background: rgba(0,247,252,.1); }
.zw.cp77 .cp-dev-item b { display: block; font-size: 15px; margin-bottom: 3px; }
.zw.cp77 .cp-dev-item span { color: #9fb5c4; font-size: 13.5px; line-height: 1.6; }

/* terminal startu serwera */
.zw.cp77 .cp-term { background: rgba(4,9,17,.92); border: 1px solid var(--line-strong); box-shadow: 0 40px 100px -40px rgba(0,247,252,.45); }
.zw.cp77 .cp-term-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--line); font: 11.5px ui-monospace, monospace; color: #6f8a9a; }
.zw.cp77 .cp-term-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--coral); } .zw.cp77 .cp-term-bar i:nth-child(2) { background: #febc2e; } .zw.cp77 .cp-term-bar i:nth-child(3) { background: var(--acc); }
.zw.cp77 .cp-term-body { padding: 18px 20px; min-height: 230px; font: 13px/1.8 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #cfe2ec; white-space: pre-wrap; word-break: break-all; }
.zw.cp77 .cp-term-body .p { color: var(--acc); } .zw.cp77 .cp-term-body .ok { color: #37f5a5; } .zw.cp77 .cp-term-body .m { color: #6f8a9a; } .zw.cp77 .cp-term-body .w { color: var(--coral); }
.zw.cp77 .cp-caret { display: inline-block; width: 8px; height: 14px; vertical-align: -2px; background: var(--acc); animation: zwBlink 1s steps(1) infinite; }

/* wymagania i kroki */
.zw.cp77 .cp-setup { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }
.zw.cp77 .cp-steps { display: grid; gap: 12px; counter-reset: cpstep; }
.zw.cp77 .cp-step { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: start; padding: 18px; background: var(--card); border: 1px solid var(--line); }
.zw.cp77 .cp-step::before { counter-increment: cpstep; content: '0' counter(cpstep); display: grid; place-items: center; height: 52px; font: 900 18px 'Orbitron', sans-serif; color: var(--navy); background: var(--acc);
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); box-shadow: 0 0 20px rgba(0,247,252,.5); }
.zw.cp77 .cp-step b { display: block; font-size: 15px; margin-bottom: 4px; }
.zw.cp77 .cp-step span { color: #9fb5c4; font-size: 13.5px; line-height: 1.6; }
.zw.cp77 .cp-step code { padding: 2px 6px; font-size: 12px; color: var(--ice); background: rgba(0,247,252,.1); }
.zw.cp77 .cp-req { padding: 26px; }
.zw.cp77 .cp-req h3 { font: 700 17px 'Orbitron', sans-serif; text-transform: uppercase; margin-bottom: 16px; }
.zw.cp77 .cp-req ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.zw.cp77 .cp-req li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: #cfe2ec; line-height: 1.55; }
.zw.cp77 .cp-req li::before { content: ''; flex: none; width: 10px; height: 10px; margin-top: 6px; background: var(--coral); transform: rotate(45deg); box-shadow: 0 0 10px var(--coral); }

/* ---------- dol strony w standardowym stylu ZenWay (FAQ, inne uslugi, CTA) ---------- */
.zw.cp77 .cp-std .zw-eyebrow { border-radius: 999px; clip-path: none; font: 500 13px 'Poppins', sans-serif; letter-spacing: normal; text-transform: none; }
.zw.cp77 .cp-std .zw-btn { border-radius: 14px; clip-path: none; font: 600 15px 'Poppins', sans-serif; letter-spacing: normal; text-transform: none; }
.zw.cp77 .cp-std .zw-h2, .zw.cp77 .cp-std .zw-cta h2 { font-family: 'Poppins', sans-serif; letter-spacing: -.025em; }
.zw.cp77 .cp-std .zw-grad { background-image: linear-gradient(100deg, #fff 0%, #c9b8ff 30%, var(--acc) 62%, #fff 92%); background-size: 200% auto; }

/* FAQ – jak na stronie VPS */
.zw.cp77 .cp-faq { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; align-items: start; }
.zw.cp77 .cp-faq details { border-radius: 18px; background: var(--card); border: 1px solid var(--line); transition: border-color .3s, background .3s; }
.zw.cp77 .cp-faq details[open] { border-color: var(--line-strong); background: rgba(0,247,252,.04); }
.zw.cp77 .cp-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 22px 26px; font-weight: 500; font-size: 16.5px; }
.zw.cp77 .cp-faq summary::-webkit-details-marker { display: none; }
.zw.cp77 .cp-faq summary::after { content: '+'; flex: none; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; font-size: 20px; font-weight: 400; background: rgba(255,255,255,.05); transition: transform .3s, background .3s; }
.zw.cp77 .cp-faq details[open] summary::after { transform: rotate(45deg); background: var(--acc); color: #04121a; }
.zw.cp77 .cp-faq details p { padding: 0 26px 24px; color: var(--muted); font-size: 15px; line-height: 1.75; }
.zw.cp77 .cp-faq a { color: var(--acc); }

.zw.cp77 .cp-legal { margin-top: 30px; text-align: center; font-size: 12px; line-height: 1.7; color: #6f8a9a; }

@media (max-width: 1100px) {
    .zw.cp77 .zw-plans { grid-template-columns: 1fr 1fr; }
    .zw.cp77 .cp-modes { grid-template-columns: 1fr 1fr; }
    .zw.cp77 .cp-dev, .zw.cp77 .cp-setup { grid-template-columns: 1fr; }
    .zw.cp77 .cp-visual { min-height: 380px; }
}
@media (max-width: 760px) {
    .zw.cp77 .zw-plans, .zw.cp77 .cp-modes, .zw.cp77 .cp-faq { grid-template-columns: 1fr; }
    .zw.cp77 .cp-status { grid-template-columns: 1fr; text-align: center; justify-items: center; padding: 22px 18px; }
    .zw.cp77 .cp-tag { display: none; }
    .zw.cp77 .cp-visual { min-height: 300px; }
    .zw.cp77 .cp-skyline { height: 120px; }
    .zw.cp77 .cp-ticker-track { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .zw.cp77 .cp-scan::after { display: none; }
}