:root { color-scheme:dark; --tlo:#0b1516; --panel:#111e1f; --tekst:#f2f4ed; --szary:#a8b7b2; --mieta:#b4f9ca; --linia:rgba(190,231,212,.13); --promien:22px; --font:Arial,Helvetica,sans-serif; }
* { box-sizing:border-box; }
html { overflow-x:hidden; scroll-behavior:smooth; scroll-padding-top:30px; }
body { margin:0; background:var(--tlo); color:var(--tekst); font:16px/1.6 var(--font); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
button,input,a { -webkit-tap-highlight-color:transparent; }
button,input { font:inherit; }
a { color:inherit; text-decoration:none; }
button { color:inherit; cursor:pointer; }
button:disabled { cursor:default; }
button,summary,a,input { touch-action:manipulation; }
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible { outline:2px solid var(--mieta); outline-offset:6px; }
::selection { color:#0b1516; background:var(--mieta); }
h1,h2,h3,p { margin:0; }
.ikony { width:0; height:0; position:absolute; overflow:hidden; }
.ikona { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.kontener { width:min(1260px,88%); margin-inline:auto; }
.skip { position:fixed; left:20px; top:-90px; padding:12px 20px; background:var(--mieta); color:var(--tlo); z-index:100; border-radius:8px; }
.skip:focus { top:12px; }
.naglowek { height:113px; border-bottom:1px solid var(--linia); display:flex; align-items:center; justify-content:space-between; gap:24px; position:relative; z-index:5; }
.logo { display:inline-flex; gap:12px; align-items:center; flex-shrink:0; }
.logo img { display:block; }
.logo strong { display:block; font-size:29px; line-height:1.05; letter-spacing:-1.3px; font-weight:700; }
.logo small { display:block; color:#a7b9b1; font-size:10px; letter-spacing:.6px; margin-top:7px; line-height:1; }
.nawigacja { display:flex; gap:33px; margin-left:38px; }
.nawigacja a { color:#b4c1bb; font-size:13px; position:relative; padding:8px 0; }
.nawigacja a:after { content:""; height:1px; background:var(--mieta); position:absolute; bottom:0; left:0; right:100%; transition:right .25s; }
.nawigacja a:hover { color:var(--mieta); }
.nawigacja a:hover:after { right:0; }
.narzedzia { display:flex; align-items:center; gap:23px; }
.przycisk-efekty { display:flex; align-items:center; gap:8px; background:none; border:0; padding:8px 0; font-size:11px; color:var(--szary); }
.przycisk-efekty .ikona { width:19px; height:19px; }
.przycisk { display:inline-flex; align-items:center; justify-content:center; gap:23px; border-radius:9px; min-height:58px; padding:15px 24px; font-size:13px; font-weight:700; letter-spacing:.05px; border:1px solid transparent; position:relative; overflow:hidden; isolation:isolate; transition:background .25s,box-shadow .25s,border-color .25s,transform .25s; transform:translate(var(--bx,0px),var(--by,0px)); white-space:nowrap; }
.przycisk .ikona { width:20px; height:20px; transition:transform .25s; }
.przycisk:hover .ikona { transform:translate(2px,-2px); }
.glowny { background:var(--mieta); color:#10241a; box-shadow:0 0 0 0 rgba(180,249,202,0); }
.glowny:hover { background:#c9ffd9; box-shadow:0 5px 28px rgba(180,249,202,.13); }
.obrys { background:rgba(255,255,255,.015); border-color:rgba(190,231,212,.28); min-height:44px; padding:11px 17px; font-size:12px; gap:25px; }
.obrys:hover { background:rgba(180,249,202,.06); border-color:var(--mieta); }
.obrys .ikona { width:17px; height:17px; }
.hero { display:grid; grid-template-columns:1.02fr 1fr; align-items:center; gap:10px; min-height:638px; padding-top:40px; padding-bottom:42px; position:relative; }
.hero-tekst { position:relative; z-index:2; }
.etykieta { display:inline-flex; align-items:center; gap:10px; color:#c0d2c6; font:10px/1.4 var(--font); font-weight:700; letter-spacing:1.6px; margin-bottom:28px; }
.dioda { width:6px; height:6px; border-radius:50%; background:var(--mieta); display:inline-block; flex-shrink:0; box-shadow:0 0 12px rgba(180,249,202,.35); }
h1 { font-size:clamp(60px,6.5vw,95px); line-height:1.04; font-weight:500; letter-spacing:-6px; }
h1>span { color:var(--mieta); background:linear-gradient(100deg,#d1fce0,#a4f2b4 60%,#72c2a8); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero-opis { color:var(--szary); font-size:16px; line-height:1.85; margin-top:26px; }
.hero-opis strong { color:#e6eee5; font-weight:500; }
.hero-akcje { display:flex; align-items:center; gap:27px; margin-top:31px; }
.link-tekst { display:inline-flex; align-items:center; gap:14px; background:none; border:0; padding:8px 0; font-size:12px; color:#cbd8ce; transition:color .2s; }
.link-tekst:hover { color:var(--mieta); }
.link-tekst>span { font-size:18px; }
.link-tekst .ikona { width:16px; height:16px; }
.oferta { margin-top:38px; display:flex; gap:19px; align-items:center; }
.oferta>strong { font-size:39px; font-weight:400; line-height:1; letter-spacing:-2px; color:var(--mieta); }
.oferta>strong>span { font-size:25px; letter-spacing:-1px; }
.oferta-kreska { width:1px; height:33px; background:var(--linia); }
.oferta p { font-size:11px; line-height:1.7; color:#d1dcd5; }
.oferta p>span { color:#90a499; }
.oferta>.ikona { margin-left:7px; color:var(--mieta); width:20px; height:20px; }
.scena { height:550px; position:relative; min-width:0; }
.scena-podpis { position:absolute; top:4px; left:31px; font-size:8px; letter-spacing:1.9px; color:#839c8f; display:flex; gap:12px; align-items:center; }
.mini-plus { color:var(--mieta); font:19px/1 monospace; }
.scena-stopka { position:absolute; bottom:7px; left:31px; right:5px; display:flex; justify-content:space-between; font-size:7px; letter-spacing:1.35px; color:#839c8f; }
.orbita { position:absolute; inset:18px -12px 29px; transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .28s ease-out; }
#kula { position:absolute; inset:0; width:100%; height:100%; z-index:2; }
.kula-baza { position:absolute; width:60.2%; aspect-ratio:1; left:19.9%; top:44.5%; transform:translateY(-50%); border-radius:50%; background:radial-gradient(circle at 32% 21%,rgba(164,254,183,.11),transparent 53%),radial-gradient(circle at 68% 75%,rgba(59,135,111,.17),transparent 65%),#0b1b18; box-shadow:inset 3px 2px 14px rgba(160,251,183,.1),inset -18px -9px 24px rgba(0,0,0,.4),0 0 1px 1px rgba(144,220,161,.22); }
.kula-poswiata { position:absolute; inset:40px 12px; border-radius:50%; background:radial-gradient(ellipse,rgba(58,164,123,.12),transparent 69%); }
.kula-litera { position:absolute; left:0; right:0; top:74px; text-align:center; font-size:225px; line-height:1.15; font-weight:700; letter-spacing:-15px; color:#b6f9cb; background:linear-gradient(145deg,#efffdc 27%,#b7f4c8 43%,#62ad8d 68%,#bdedbc 80%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; filter:drop-shadow(3px 10px 0 #1f4838) drop-shadow(0 0 25px rgba(126,255,179,.10)); z-index:3; transform:rotate(-9deg); }
.orbita-linia { position:absolute; border:1px solid rgba(180,249,202,.35); width:100%; height:35%; border-radius:50%; left:0; top:30%; pointer-events:none; }
.orbita-a { transform:rotate(-28deg); box-shadow:0 1px 2px rgba(180,249,202,.1),0 -1px 3px rgba(180,249,202,.08); z-index:4; }
.orbita-b { transform:rotate(38deg); border-color:rgba(180,249,202,.10); top:29%; height:38%; z-index:1; }
.adres-dymek { position:absolute; display:flex; align-items:center; white-space:nowrap; padding:11px 15px; background:rgba(28,45,39,.88); border:1px solid rgba(171,210,180,.21); border-radius:9px; z-index:5; font-size:11px; box-shadow:0 8px 24px rgba(0,0,0,.1); backdrop-filter:blur(12px); }
.adres-dymek>span:not(.dioda):not(.dymek-ikona) { color:#8db39a; }
.dymek-1 { top:55px; right:15px; transform:rotate(7deg); }
.dymek-2 { top:236px; left:-6px; transform:rotate(-7deg); padding:12px 16px; }
.dymek-2 .dioda { margin-right:10px; }
.dymek-ikona { margin-right:9px; color:var(--mieta); display:flex; }
.dymek-ikona .ikona { width:17px; height:17px; }
.karta-przegladarki { position:absolute; left:20%; right:1%; bottom:53px; background:linear-gradient(120deg,rgba(50,79,59,.94),rgba(18,38,28,.96)); border:1px solid rgba(173,225,171,.38); border-radius:13px; z-index:7; transform:rotate(-6deg); box-shadow:0 22px 45px rgba(0,0,0,.26),inset 0 1px 0 rgba(204,255,210,.12); backdrop-filter:blur(16px); overflow:hidden; }
.karta-pasek { height:37px; display:flex; align-items:center; gap:14px; padding:0 17px; border-bottom:1px solid rgba(188,245,192,.14); font-size:6px; letter-spacing:1.5px; color:#a0c1a6; }
.karta-pasek>.ikona { margin-left:auto; width:12px; height:12px; }
.kropki { display:flex; gap:4px; }
.kropki i { width:4px; height:4px; border-radius:50%; background:#95af95; opacity:.7; }
.karta-adres { display:flex; align-items:center; justify-content:center; white-space:nowrap; padding:24px 8px 18px; font-size:clamp(17px,1.55vw,24px); letter-spacing:-1px; font-weight:400; }
.karta-adres strong { color:var(--mieta); font-weight:400; }
.karta-stopka { display:flex; align-items:center; justify-content:space-between; font-size:8px; padding:0 18px 16px; color:#a5bca8; }
.karta-stopka .dioda { width:4px; height:4px; margin-right:5px; }
.karta-stopka>.ikona { width:15px; height:15px; color:var(--mieta); }
.kursor { width:1px; height:23px; background:var(--mieta); margin-left:4px; }
.znaczek { position:absolute; right:-18px; bottom:10px; width:80px; height:80px; border-radius:50%; background:var(--mieta); color:#143025; display:flex; align-items:center; justify-content:center; flex-direction:column; transform:rotate(15deg); z-index:8; box-shadow:0 0 0 7px var(--tlo); }
.znaczek .ikona { width:21px; height:21px; margin-bottom:5px; }
.znaczek span { font-size:9px; line-height:1.15; font-weight:bold; text-align:center; letter-spacing:.5px; }
.gwiazdka { position:absolute; color:var(--mieta); z-index:6; font-size:35px; line-height:1; }
.gwiazdka-1 { top:71px; left:89px; }
.gwiazdka-2 { right:28px; top:260px; font-size:21px; }
@media(min-width:1600px) { .hero { padding-top:58px; padding-bottom:58px; min-height:690px; } }
@media(max-width:1120px) { .kontener { width:90%; } .nawigacja { margin-left:0; gap:22px; } .narzedzia { gap:16px; } h1 { font-size:7vw; letter-spacing:-4.5px; } .hero-akcje { gap:18px; } .hero-akcje .przycisk { padding-inline:19px; } .hero-opis { font-size:14px; } .kula-litera { font-size:200px; top:87px; } .dymek-2 { left:-5px; top:230px; } .orbita { inset:30px -9px 38px; } .scena { height:510px; } .znaczek { right:-4px; bottom:8px; } .karta-przegladarki { left:11%; bottom:41px; } }
@media(max-width:860px) { .nawigacja { display:none; } .hero { min-height:580px; gap:0; } h1 { letter-spacing:-3.5px; } .hero-opis { font-size:13px; } .hero-akcje { align-items:flex-start; flex-direction:column; gap:6px; } .hero-akcje .link-tekst { padding-top:9px; } .hero-tekst { padding-top:10px; } .scena { height:465px; } .kula-litera { font-size:170px; top:100px; } .adres-dymek { font-size:9px; padding:9px 11px; } .dymek-1 { right:0; top:70px; } .dymek-2 { left:5px; top:236px; } .karta-przegladarki { left:8%; right:2%; bottom:14px; } .karta-pasek { font-size:5px; padding:0 12px; } .karta-adres { font-size:19px; padding-top:19px; } .scena-podpis,.scena-stopka { font-size:6px; left:12px; } .znaczek { width:67px; height:67px; right:-5px; bottom:-13px; } .gwiazdka-1 { left:33px; top:74px; } .oferta { gap:13px; margin-top:26px; } }
@media(max-width:650px) { .kontener { width:89%; } .naglowek { height:93px; gap:8px; } .logo strong { font-size:25px; } .logo { gap:9px; } .logo img { width:34px; height:34px; } .logo small { font-size:8px; letter-spacing:.3px; margin-top:6px; } .narzedzia { gap:14px; } .przycisk-efekty { width:22px; } .przycisk-efekty span { display:none; } .kontakt-przycisk { padding:10px 12px; gap:10px; font-size:11px; min-height:40px; } .hero { display:flex; flex-direction:column; align-items:stretch; padding-top:43px; padding-bottom:25px; } .hero-tekst { padding:0; } .etykieta { font-size:8px; margin-bottom:23px; letter-spacing:1.4px; } h1 { font-size:clamp(56px,11.7vw,76px); line-height:1.07; letter-spacing:-3.5px; } .hero-opis { font-size:14px; margin-top:23px; line-height:1.8; } .hero-akcje { flex-direction:row; align-items:center; gap:20px; margin-top:25px; } .hero-akcje .przycisk { min-height:53px; font-size:11px; gap:15px; padding:14px 17px; } .hero-akcje .link-tekst { font-size:11px; gap:11px; } .oferta { margin-top:30px; } .oferta>strong { font-size:34px; } .oferta p { font-size:10px; } .oferta>.ikona { margin-left:auto; } .scena { margin:20px auto 0; width:min(460px,100%); height:440px; } .scena-podpis { top:15px; left:3px; font-size:6px; } .scena-stopka { bottom:0; left:3px; font-size:6px; } .orbita { inset:26px -8px 29px; } .kula-litera { top:62px; font-size:190px; } .karta-przegladarki { bottom:19px; left:13%; right:3%; } .karta-adres { font-size:23px; } .karta-pasek { font-size:6px; } .dymek-1 { right:0; top:51px; font-size:10px; } .dymek-2 { left:-3px; top:205px; font-size:10px; } .znaczek { right:0; bottom:-6px; } .gwiazdka-1 { top:62px; left:37px; font-size:28px; } .gwiazdka-2 { top:220px; right:15px; } .orbita-linia { top:29%; } }
@media(max-width:380px) { .naglowek { gap:6px; } .kontakt-przycisk { font-size:10px; padding:9px; gap:8px; } .logo strong { font-size:23px; } .logo img { width:29px; height:29px; } .logo small { font-size:7px; } .narzedzia { gap:10px; } h1 { font-size:12vw; letter-spacing:-2.8px; } .hero-opis { font-size:13px; } .hero-akcje { gap:14px; } .hero-akcje .przycisk { font-size:10px; gap:10px; padding-inline:13px; } .hero-akcje .link-tekst { font-size:10px; } .scena { height:395px; } .kula-litera { font-size:160px; } .karta-adres { font-size:19px; } .dymek-2 { top:185px; } }