
:root{
 --bg:#050509;--panel:#0b0b12;--panel2:#10101a;--text:#f7f7fb;--muted:#9696a8;
 --white:rgba(255,255,255,.92);--line:rgba(255,255,255,.10);
 --cyan:#44efff;--pink:#ff35bd;--violet:#8e63ff;--green:#42f5b5;
 --max:1240px
}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden}
body:before{content:"";position:fixed;z-index:-3;inset:0;background:
 radial-gradient(circle at 15% 8%,rgba(255,31,178,.12),transparent 28%),
 radial-gradient(circle at 84% 16%,rgba(34,231,255,.10),transparent 30%),
 radial-gradient(circle at 50% 80%,rgba(118,67,255,.07),transparent 35%)}
body:after{content:"";position:fixed;z-index:-2;inset:0;opacity:.035;background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);background-size:70px 70px;mask-image:linear-gradient(to bottom,black,transparent 80%)}
a{color:inherit;text-decoration:none}.wrap{width:min(var(--max),calc(100% - 44px));margin:auto}
.nav{position:fixed;top:15px;left:50%;transform:translateX(-50%);z-index:50;width:min(1180px,calc(100% - 28px));height:64px;padding:7px 9px 7px 12px;border:1px solid var(--line);border-radius:18px;background:rgba(5,5,9,.72);backdrop-filter:blur(22px);display:flex;align-items:center;justify-content:space-between;box-shadow:0 20px 70px rgba(0,0,0,.35)}
.brand{display:flex;align-items:center;gap:10px;font-weight:850;letter-spacing:-.04em}.brand img{width:45px;height:45px;border-radius:12px;object-fit:cover}.brand .p{color:#fff}.brand .c{color:var(--cyan)}
.links{display:flex;gap:27px;font-size:13px;color:#aaaabd}.links a{transition:.2s}.links a:hover{color:#fff}
.navbtn{padding:11px 15px;border:1px solid rgba(255,255,255,.13);border-radius:12px;background:rgba(255,255,255,.05);font-weight:750;font-size:13px}
.navbtn:hover{background:rgba(255,255,255,.10)}
.hero{min-height:100vh;padding:150px 0 80px;display:grid;align-items:center;position:relative}
.hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:70px;align-items:center}
.badge{display:inline-flex;align-items:center;gap:9px;padding:8px 12px;border:1px solid var(--line);background:rgba(255,255,255,.035);border-radius:999px;color:#c8c8d4;font-size:12px}
.badge i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 16px var(--green)}
h1{font-size:clamp(55px,7.3vw,98px);line-height:.91;letter-spacing:-.075em;margin:25px 0}
.gradient{background:linear-gradient(105deg,#fff 0%,#9ffbff 30%,#4deaff 45%,#ff5bc9 75%,#fff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:18px;line-height:1.7;color:var(--muted);max-width:650px}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:31px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 18px;border-radius:13px;border:1px solid rgba(255,255,255,.13);font-weight:800;font-size:14px;transition:.25s}
.btn.primary{background:linear-gradient(100deg,#fff,#bafcff);color:#07070b;border-color:transparent;box-shadow:0 0 40px rgba(68,239,255,.12)}
.btn.secondary{background:rgba(255,255,255,.035);color:#ddd}
.btn:hover{transform:translateY(-3px)}
.hero-art{min-height:600px;display:grid;place-items:center;position:relative;border:1px solid var(--line);border-radius:38px;background:
 radial-gradient(circle at 50% 45%,rgba(99,51,255,.13),transparent 42%),rgba(255,255,255,.025);overflow:hidden;box-shadow:inset 0 0 100px rgba(255,255,255,.025),0 35px 100px rgba(0,0,0,.4)}
.hero-art:before{content:"";position:absolute;width:430px;height:430px;border-radius:50%;background:conic-gradient(from 0deg,transparent,#ff2fb7,#4cf6ff,#7d5cff,transparent);filter:blur(80px);opacity:.22;animation:spin 12s linear infinite}
.hero-art img{position:relative;width:min(82%,560px);border-radius:34px;mix-blend-mode:screen;filter:drop-shadow(0 0 35px rgba(54,235,255,.18));animation:float 6s ease-in-out infinite}
.orb{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.16)}.o1{width:90px;height:90px;right:10%;top:12%}.o2{width:30px;height:30px;left:10%;bottom:17%}.o3{width:55px;height:55px;right:19%;bottom:12%}
@keyframes float{50%{transform:translateY(-12px) rotate(.5deg)}}@keyframes spin{to{transform:rotate(360deg)}}
section{padding:115px 0}.topline{display:flex;align-items:end;justify-content:space-between;gap:35px;margin-bottom:42px}.eyebrow{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#58efff;font-weight:850}.topline h2{font-size:clamp(38px,5vw,65px);line-height:.98;letter-spacing:-.06em;margin:10px 0 0}.topline p{max-width:430px;color:var(--muted);line-height:1.7;margin:0}
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.service{padding:30px;min-height:310px;border:1px solid var(--line);border-radius:27px;background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.018));position:relative;overflow:hidden;transition:.3s}.service:hover{transform:translateY(-7px);border-color:rgba(69,239,255,.3);box-shadow:0 25px 70px rgba(0,0,0,.25)}.service:after{content:"";position:absolute;width:180px;height:180px;right:-80px;bottom:-100px;border-radius:50%;background:radial-gradient(circle,rgba(255,50,188,.18),transparent 65%);transition:.3s}.service:hover:after{transform:scale(1.6)}
.num{font-size:12px;color:#777789}.service .icon{font-size:28px;margin:35px 0 22px}.service h3{font-size:24px;letter-spacing:-.035em;margin:0 0 10px}.service p{color:var(--muted);font-size:14px;line-height:1.7;margin:0}
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:18px 0;white-space:nowrap}.track{display:flex;width:max-content;animation:move 24s linear infinite;will-change:transform;color:#777783;font-weight:750;letter-spacing:.12em;text-transform:uppercase;font-size:12px}.marquee-group{display:flex;align-items:center;flex-shrink:0}.track span{margin:0 28px;color:#3e3e49}@keyframes move{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.split{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px}.bigcopy{font-size:clamp(30px,4vw,51px);line-height:1.05;letter-spacing:-.055em;margin:15px 0}.muted{color:var(--muted);line-height:1.75}.checklist{display:grid;gap:13px}.check{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid var(--line);color:#ddd}.check b{color:var(--cyan)}
.projects{display:grid;grid-template-columns:1.3fr .7fr;gap:14px}.project{min-height:390px;border:1px solid var(--line);border-radius:29px;padding:29px;display:flex;flex-direction:column;justify-content:end;position:relative;overflow:hidden;background:linear-gradient(135deg,#12111c,#08080e)}.project:before{content:"";position:absolute;inset:-20%;background:conic-gradient(from 210deg,transparent 0 35%,rgba(48,241,255,.17),rgba(255,49,188,.17),transparent 70%);filter:blur(35px);transform:rotate(-10deg)}.project.small{min-height:188px}.project>*{position:relative}.tag{display:inline-block;width:max-content;padding:6px 9px;border:1px solid var(--line);border-radius:999px;color:#bbb;font-size:10px;margin-bottom:13px}.project h3{font-size:32px;letter-spacing:-.05em;margin:0 0 4px}.project p{color:#9696a8;margin:0;font-size:13px}
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.step{padding:28px 22px 34px;border-right:1px solid var(--line)}.step:last-child{border:0}.step strong{font-size:11px;color:var(--cyan)}.step h3{font-size:20px;margin:35px 0 8px}.step p{color:var(--muted);font-size:13px;line-height:1.7;margin:0}
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.price{border:1px solid var(--line);border-radius:27px;padding:28px;background:rgba(255,255,255,.025)}.price.featured{background:linear-gradient(145deg,rgba(68,239,255,.10),rgba(255,53,189,.07));border-color:rgba(68,239,255,.27);box-shadow:0 25px 80px rgba(68,239,255,.06)}.price h3{margin:0;font-size:20px}.price .desc{color:var(--muted);font-size:13px;min-height:45px}.amount{font-size:40px;font-weight:850;letter-spacing:-.05em;margin:22px 0}.amount small{font-size:13px;color:#777}.features{display:grid;gap:9px;color:#c7c7d0;font-size:13px}.features span:before{content:"✓";color:var(--green);margin-right:9px}
.cta{padding:80px 40px;text-align:center;border:1px solid rgba(70,239,255,.18);border-radius:36px;background:radial-gradient(circle at 50% 0,rgba(68,239,255,.12),transparent 42%),radial-gradient(circle at 20% 100%,rgba(255,53,189,.11),transparent 32%),rgba(255,255,255,.025)}.cta h2{font-size:clamp(43px,6vw,78px);line-height:.95;letter-spacing:-.065em;margin:12px 0}.cta p{max-width:620px;color:var(--muted);margin:18px auto 27px}
footer{border-top:1px solid var(--line);padding:30px 0 45px;color:#777784;font-size:12px}.foot{display:flex;justify-content:space-between;gap:20px}
.reveal{opacity:0;transform:translateY(20px)}.reveal.show{opacity:1;transform:none;transition:.75s cubic-bezier(.2,.75,.2,1)}
.mobile{display:none}
@media(max-width:900px){.links{display:none}.hero-grid,.split{grid-template-columns:1fr}.hero-art{min-height:440px}.services,.pricing{grid-template-columns:1fr}.projects{grid-template-columns:1fr}.process{grid-template-columns:1fr 1fr}.step:nth-child(2){border-right:0}.step:nth-child(-n+2){border-bottom:1px solid var(--line)}.topline{display:block}.topline p{margin-top:17px}.hero{padding-top:125px}}
@media(max-width:560px){.wrap{width:calc(100% - 26px)}.nav{height:58px}.brand img{width:40px;height:40px}.brand{font-size:15px}.navbtn{display:none}section{padding:82px 0}.hero{padding-top:105px}.hero-art{min-height:320px;border-radius:27px}.hero-art img{width:85%}.lead{font-size:16px}.process{grid-template-columns:1fr}.step{border-right:0!important;border-bottom:1px solid var(--line)!important}.step:last-child{border-bottom:0!important}.cta{padding:55px 20px}.foot{display:block}.foot div+div{margin-top:8px}}

/* PEPSCODE RESPONSIVE FINAL */
.premium-menu-toggle{display:none;width:44px;height:44px;border:1px solid rgba(255,255,255,.13);border-radius:12px;background:rgba(255,255,255,.045);align-items:center;justify-content:center;flex-direction:column;gap:5px;cursor:pointer}
.premium-menu-toggle span{width:19px;height:2px;background:#fff;border-radius:3px;transition:.22s}
.premium-menu-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.premium-menu-toggle.open span:nth-child(2){opacity:0}
.premium-menu-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.premium-mobile-menu{display:none;position:absolute;top:calc(100% + 9px);left:0;right:0;padding:9px;flex-direction:column;gap:4px;background:rgba(5,5,9,.97);border:1px solid var(--line);border-radius:18px;backdrop-filter:blur(22px);box-shadow:0 25px 70px rgba(0,0,0,.55)}
.premium-mobile-menu.open{display:flex}
.premium-mobile-menu a{padding:14px 15px;border-radius:12px;color:#d8d8e4;font-size:15px;font-weight:700}
@media(max-width:900px){.links,.navbtn{display:none!important}.premium-menu-toggle{display:flex}.hero-grid,.split,.projects{grid-template-columns:1fr!important}.services,.pricing{grid-template-columns:1fr 1fr!important}.process{grid-template-columns:1fr 1fr!important}}
@media(max-width:640px){.wrap{width:calc(100% - 26px)}section{padding:78px 0}.nav{top:10px;width:calc(100% - 18px);height:58px}.hero{padding:105px 0 55px}.hero-grid{gap:22px}h1{font-size:clamp(46px,14vw,70px)}.lead{font-size:16px}.actions{flex-direction:column}.actions .btn{width:100%;text-align:center}.hero-art{min-height:315px}.services,.pricing,.process{grid-template-columns:1fr!important}.step{border-right:0!important}.project,.project.small{min-height:240px}.cta{padding:48px 18px}}
@media(max-width:380px){h1{font-size:44px}.hero-art{min-height:275px}}


@media (prefers-reduced-motion:reduce){.track{animation-duration:48s}}


/* GOTOWE ROZWIĄZANIA — karta premium */
.solutions-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:14px}
.solution-card{min-height:390px;border:1px solid var(--line);border-radius:29px;padding:29px;display:flex;flex-direction:column;justify-content:end;position:relative;overflow:hidden;background:linear-gradient(135deg,#12111c,#08080e);transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s ease,box-shadow .35s ease}
.solution-card:before{content:"";position:absolute;inset:-20%;background:conic-gradient(from 210deg,transparent 0 35%,rgba(48,241,255,.17),rgba(255,49,188,.17),transparent 70%);filter:blur(35px);transform:rotate(-10deg);transition:transform .6s ease}
.solution-card>*{position:relative;z-index:1}
.solution-card .solution-arrow{margin-top:22px;font-size:12px;font-weight:900;letter-spacing:.13em;color:#55efff;opacity:.85;transition:.3s}
.solution-card:hover{transform:translateY(-8px) scale(1.012);border-color:rgba(85,239,255,.38);box-shadow:0 24px 70px rgba(0,0,0,.38),0 0 38px rgba(85,239,255,.08)}
.solution-card:hover:before{transform:rotate(-10deg) translateX(8%)}
.solution-card:hover .solution-arrow{transform:translateX(6px);opacity:1}
.solution-card.small{min-height:188px}
.solution-card.small .solution-arrow{display:none}
.solutions-note{margin-top:18px;color:#777789;font-size:12px}
@media(max-width:900px){.solutions-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.track{animation-duration:48s}}
