body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
			background-image: url('//showcase.idmnet.pl/assets/mobile/tlo.jpg');
			background-repeat:no-repeat;
			background-size: cover;
            background-color: #f0f0f0;
            margin: 0;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        }

        .phone-mockup {
            position: relative;
            width: 375px; /* Oryginalna szerokość */
            height: 810px; /* Oryginalna wysokość */
            box-shadow: 0 40px 80px rgba(0, 0, 0, 0.3);
            border-radius: 55px; /* Zaokrąglenie krawędzi dla efektu telefonu */
            overflow: hidden; /* Upewnienie się, że zawartość mieści się w ramce */
            background-color: transparent; /* Upewnij się, że tło jest przezroczyste, aby ramka była widoczna */
            z-index: 1;
        }

        .phone-frame {
            position: absolute;
            top: 0;
            left: -5px;
            width: 385px;
            height: 795px;
            background-image: url('//showcase.idmnet.pl/assets/mobile/iphone-frame.png'); /* Ścieżka do Twojej ramki */
            background-size: 100% 100%;
            background-repeat: no-repeat;
            z-index: 10; /* Ramka zawsze na wierzchu */
            pointer-events: none; /* Pozwala na interakcję z zawartością pod ramką */
        }

        .screen-content {
            position: absolute;
            /* Te wartości są przykładem i mogą wymagać dostosowania do Twojego pliku iphone-frame.png */
            top: 15px; /* Odległość od góry ramki do początku ekranu */
            left: 15px; /* Odległość od lewej ramki do początku ekranu */
            width: calc(100% - 30px); /* Szerokość ekranu (100% - 2 * left) */
            height: calc(100% - 40px); /* Wysokość ekranu (100% - top - bottom-offset) */
            background-color: white; /* Tło dla zawartości ekranu */
            box-sizing: border-box;
            z-index: 5; /* Zawartość ekranu pod ramką, ale nad tłem */
            border-radius: 20px; /* Zaokrąglenie rogów ekranu, jeśli ramka ma takie wycięcie */
            overflow: hidden; /* Upewnij się, że zawartość nie wycieka */
        }

        .browser-top {
            position: absolute;
            top: -5px;
            left: 0;
            width: 100%;
            height: 90px; /* Dopasuj wysokość do obrazka */
            background-image: url('//showcase.idmnet.pl/assets/mobile/iphone-browser-top.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            background-color: white;
            padding: 20px 0;
            box-sizing: border-box;
        }

        .browser-bottom {
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 100%;
            height: 70px; /* Dopasuj wysokość do obrazka */
            background-image: url('//showcase.idmnet.pl/assets/mobile/iphone-browser-bottom.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            background-color: white;
            padding-bottom: 34px;
            box-sizing: border-box;
        }

        .main-view {
            position: absolute;
            top: 80px; /* Poniżej paska górnego */
            bottom: 64px; /* Powyżej paska dolnego (60px + 34px paska gestów) */
            left: 0;
            width: 100%;
            background-color: #ffffff;
            overflow-y: auto;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #333;
            font-size: 1.2em;
            text-align: center;
            border-top: 1px solid #eee;
            border-bottom: 1px solid #eee;
			overflow: scroll;      /* albo auto */
			scrollbar-width: none; /* Firefox */
			-ms-overflow-style: none; /* IE i Edge */
        }
		/* Container placed in the bottom-right corner */
		:root{
			--bg:#ffffff;
			--panel-bg: #fff;
			--accent: #0b74da;
			--text:#111;
			--muted:#555;
			--border: rgba(0,0,0,0.12);
			--shadow: 0 8px 24px rgba(0,0,0,0.08);
			--radius: 12px;
			font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
			--text-box-color: rgb(149, 149, 149);
			--size: 50px;
  			--color: white;
  			--ring-duration: 2s;
		}
		.spec-window{
			position: fixed;
			left: 20px;
			bottom: 20px;
			width: 340px; /* outer width to allow some padding — content area narrower */
			max-width: calc(100% - 40px);
			background: var(--panel-bg);
			color: var(--text);
			border-radius: var(--radius);
			box-shadow: var(--shadow);
			border: 1px solid var(--border);
			overflow: hidden;
			z-index: 9999;
			display: flex;
			flex-direction: column;
			padding: 10px;
			font-size: 12px;
		}


		/* Header */
		.spec-header{
			display:flex;
			align-items:center;
			justify-content:space-between;
			gap:12px;
			padding:12px 14px;
			background: linear-gradient(90deg, rgba(11,116,218,0.06), rgba(11,116,218,0.02));
			border-bottom: 1px solid rgba(11,116,218,0.06);
		}
		.spec-header h3{
			margin:0;
			font-size:13px;
			font-weight:700;
			color:var(--accent);
			letter-spacing:0.1px;
		}
		.spec-header .controls{
			display:flex;
			gap:8px;
			align-items:center;
		}
		.spec-close{
			appearance:none;
			border:0;
			background:transparent;
			padding:6px;
			border-radius:8px;
			cursor:pointer;
			font-size:14px;
			color:var(--muted);
		}
		.spec-close:hover{ background: rgba(0,0,0,0.04); }
		.spec-body { font-family: "Roboto", sans-serif; }
		/* Styl przycisku/odnośnika */
		.back-btn {
		  position: fixed;
		  top: 16px;
		  left: 16px;
		  display: inline-flex;
		  align-items: center;
		  gap: 10px;
		  padding: 10px 14px;
		  border-radius: 10px;
		  text-decoration: none;
		  background: rgba(17, 24, 39, 0.85); /* ciemne tło */
		  color: #ffffff;
		  font-weight: 600;
		  font-size: 14px;
		  box-shadow: 0 6px 18px rgba(15,23,42,0.25);
		  transform-origin: left top;
		  transition: transform 180ms ease, filter 180ms ease, box-shadow 180ms ease;
		  -webkit-tap-highlight-color: transparent;
		  z-index: 9999;
		}

		/* Ikona (opcjonalne) */
		.back-btn .icon {
		  width: 16px;
		  height: 16px;
		  display: inline-block;
		  flex: 0 0 16px;
		  /* prosta strzałka SVG background */
		  background: no-repeat center/contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>');
		}

		/* Hover / focus efekt */
		.back-btn:hover,
		.back-btn:focus {
		  transform: translateY(-2px) scale(1.06);
		  filter: brightness(1.08);
		  box-shadow: 0 10px 30px rgba(15,23,42,0.30);
		  text-decoration: none;
		}

		/* Wyraźne obramowanie dostępności przy klawiaturze */
		.back-btn:focus-visible {
		  outline: 3px solid rgba(99,102,241,0.18);
		  outline-offset: 3px;
		}

		/* Aktywny stan (kliknięcie) */
		.back-btn:active {
		  transform: translateY(0) scale(0.99);
		  box-shadow: 0 6px 14px rgba(15,23,42,0.22);
		}

		/* Szanuj użytkowników z reduced motion */
		@media (prefers-reduced-motion: reduce) {
		  .back-btn {
			transition: none;
		  }
		  .back-btn:hover,
		  .back-btn:focus,
		  .back-btn:active {
			transform: none;
		  }
		}

		/* Małe ekrany — nieco mniejsze odstępy */
		@media (max-width: 420px) {
		  .back-btn {
			padding: 8px 12px;
			font-size: 13px;
			border-radius: 8px;
			top: 12px;
			left: 12px;
		  }
		}
		
		/* szare artykuły */
		.article{
			display: inline-block;
			width: 85%;
			margin: auto;
			margin-top: -6px;
			padding-top: 20px;
			padding-bottom: 15px;
			padding-left: 20px;
			padding-right: 20px;
			text-align: center;
			background-color: white;
		}
		.column{
			display: block;
			width: 100%;
			margin: auto;
			margin-bottom: 20px;
		}
		.image_medium{
			width: 100%;
			height: 138px;
			background-color: var(--text-box-color);
			margin: auto;
		}
		.text_medium1{
			width: 85%;
			height: 10px;
			background-color: var(--text-box-color);
			margin-bottom: 10px;
			margin-top: 10px;
		}
		
		.text_medium2{
			width: 55%;
			height: 10px;
			background-color: var(--text-box-color);
			margin-bottom: 10px;
		}
		
		.text_medium3{
			width: 65%;
			height: 10px;
			background-color: var(--text-box-color);
			margin-bottom: 10px;
		}
		#latest{
		    width: 90%;
			margin: auto;
			margin-top: 20px;
		}
		.top{
			height: 45px;
			background-color: var(--text-box-color);
		}
		.short_article {
			padding: 17px 17px 5px 17px;
			border-bottom: 1px dotted var(--text-box-color);
		}
		
		.text_right1 {
			width: 85%;
			height: 10px;
			background-color: var(--text-box-color);
			margin-bottom: 10px;
			margin-top: 10px;
		}
		
		.text_right2 {
			width: 55%;
			height: 10px;
			background-color: var(--text-box-color);
			margin-bottom: 10px;
		}
		.pulse-hint{
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			top: 25px;
			z-index: 9999;
			text-decoration:none;
			display:flex;
			align-items:center;
			justify-content:center;
			width: var(--size);
			height: var(--size);
			border-radius: 999px;
		}

		.pulse-ring{
			width:100%;
			height:100%;
			display:flex;
			align-items:center;
			justify-content:center;
			border-radius:inherit;
			background:transparent;
			position:relative;
		}

		.pulse-ring::before{
			content:"";
			position:absolute;
			inset:0;
			border-radius:inherit;
			box-shadow: 0 0 0 0 var(--color);
			animation: ring var(--ring-duration) infinite;
			opacity: 0.6;
		}

		.pulse-arrow{
			width: 24px;
			height: 24px;
			color: var(--color);
			position:relative;
			z-index:2;
		}

		@keyframes ring{
			0%   { box-shadow: 0 0 0 0 var(--color); opacity: .6; transform: scale(.9); }
			70%  { box-shadow: 0 0 0 16px rgba(0,0,0,0); opacity: 0; transform: scale(1.05); }
			100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); opacity: 0; transform: scale(1.05); }
		}

		@media (prefers-reduced-motion: reduce){
			.pulse-ring::before { animation: none; display:none; }
		}