/* ==========================================================================
   luckygreece.gr — promo landing
   Αισθητική: «Αιγαίο τα μεσάνυχτα» — μαίανδρος σε φύλλο χρυσού πάνω σε μελάνι.
   Γραμματοσειρές: GFS Didot (ελληνικό Didone) × Sofia Sans Extra Condensed × Manrope.

   Всё, что ниже, — только для промо-экрана. Блок казино и футер
   отрисовываются штатными классами Tailwind основного сайта и здесь
   НЕ переопределяются (кроме анимации появления, которая не трогает разметку).
   ========================================================================== */

:root {
	--ink: #04050c;
	--night: #080a1c;
	--abyss: #01020a;

	--indigo: #5250d8;
	--indigo-deep: #2a2977;

	--gold: #e3ce9b;
	--gold-hi: #fff6dc;
	--gold-deep: #a8853f;
	--gold-line: rgba(227, 206, 155, 0.38);

	--f-display: "GFS Didot", "EB Garamond", Georgia, "Times New Roman", serif;
	--f-label: "Sofia Sans Extra Condensed", "Manrope", system-ui, sans-serif;
	--f-body: "Manrope", system-ui, -apple-system, sans-serif;

	/* Ένα μοτίβο μαιάνδρου, ένα σημείο αλήθειας — χρησιμοποιείται και ως
	   γραμμή-διαχωριστικό και ως υφή φόντου. */
	--meander: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M0 38h40M4 38V6h30v24H14V16h12' fill='none' stroke='%23e3ce9b' stroke-width='4'/%3E%3C/svg%3E");
	/* Ίδιο μοτίβο στραμμένο κατά 90° — για τις κατακόρυφες πλευρές του πλαισίου */
	--meander-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath transform='rotate(90 20 20)' d='M0 38h40M4 38V6h30v24H14V16h12' fill='none' stroke='%23e3ce9b' stroke-width='4'/%3E%3C/svg%3E");

	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   Βάση
   -------------------------------------------------------------------------- */

html.promo {
	background: var(--abyss);
	scroll-behavior: smooth;
}

body.promo-body {
	background: transparent;
	color: #fff;
	font-family: var(--f-body);
	overflow-x: hidden;
}

.promo-body.is-locked {
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   Ατμόσφαιρα — σταθερά στρώματα πίσω από όλα
   -------------------------------------------------------------------------- */

.atmos {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
	background:
		radial-gradient(120% 80% at 50% -10%, #171647 0%, transparent 60%),
		radial-gradient(90% 60% at 85% 15%, rgba(82, 80, 216, 0.35) 0%, transparent 55%),
		radial-gradient(70% 50% at 10% 85%, rgba(168, 133, 63, 0.16) 0%, transparent 60%),
		linear-gradient(180deg, #05061a 0%, #04050f 45%, #01020a 100%);
}

/* Αργή αναπνοή φωτός — δίνει βάθος χωρίς να τραβά την προσοχή */
.atmos__bloom {
	position: absolute;
	left: 50%;
	top: -30vh;
	width: 130vmax;
	height: 130vmax;
	margin-left: -65vmax;
	background: radial-gradient(circle, rgba(82, 80, 216, 0.5) 0%, rgba(82, 80, 216, 0.12) 35%, transparent 68%);
	filter: blur(30px);
	animation: bloom 18s ease-in-out infinite alternate;
}

@keyframes bloom {
	from {
		transform: scale(0.88) translate(-4%, 0);
		opacity: 0.55;
	}
	to {
		transform: scale(1.08) translate(4%, 3%);
		opacity: 0.9;
	}
}

/* Ακτίνες — κωνική βεντάλια που γυρίζει πολύ αργά */
.atmos__rays {
	position: absolute;
	left: 50%;
	top: -60vmin;
	width: 160vmax;
	height: 160vmax;
	margin-left: -80vmax;
	opacity: 0.3;
	background: conic-gradient(
		from 0deg,
		transparent 0deg,
		rgba(227, 206, 155, 0.16) 6deg,
		transparent 14deg,
		transparent 40deg,
		rgba(82, 80, 216, 0.22) 47deg,
		transparent 56deg,
		transparent 96deg,
		rgba(227, 206, 155, 0.1) 103deg,
		transparent 112deg,
		transparent 180deg,
		rgba(82, 80, 216, 0.18) 190deg,
		transparent 200deg,
		transparent 300deg,
		rgba(227, 206, 155, 0.12) 308deg,
		transparent 318deg
	);
	-webkit-mask-image: radial-gradient(circle, #000 10%, transparent 62%);
	mask-image: radial-gradient(circle, #000 10%, transparent 62%);
	animation: rayspin 90s linear infinite;
}

@keyframes rayspin {
	to {
		transform: rotate(360deg);
	}
}

/* Υφή μαιάνδρου — μόλις που φαίνεται, μετακινείται πλάγια */
.atmos__meander {
	position: absolute;
	inset: -10%;
	background-image: var(--meander);
	background-size: 54px 54px;
	/* Υπόστρωση, όχι ταπετσαρία: πρέπει να γίνεται αντιληπτή μόνο περιφερειακά. */
	opacity: 0.022;
	animation: drift 80s linear infinite;
}

@keyframes drift {
	to {
		background-position: 540px 0;
	}
}

/* Κόκκος φιλμ — σπάει τα «καθαρά» ντεγκραντέ */
.atmos__grain {
	position: absolute;
	inset: 0;
	opacity: 0.4;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
	animation: grain 0.7s steps(2) infinite;
}

@keyframes grain {
	0% {
		transform: translate(0, 0);
	}
	50% {
		transform: translate(-3px, 2px);
	}
	100% {
		transform: translate(2px, -3px);
	}
}

/* Χρυσή σκόνη */
.atmos__dust span {
	position: absolute;
	bottom: -10vh;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--gold-hi);
	box-shadow: 0 0 8px 1px rgba(227, 206, 155, 0.8);
	opacity: 0;
	animation: dust linear infinite;
}

@keyframes dust {
	0% {
		transform: translate3d(0, 0, 0) scale(0.6);
		opacity: 0;
	}
	12% {
		opacity: 0.85;
	}
	80% {
		opacity: 0.5;
	}
	100% {
		transform: translate3d(var(--dx, 40px), -115vh, 0) scale(1.15);
		opacity: 0;
	}
}

/* Όλο το περιεχόμενο πάνω από την ατμόσφαιρα.
   Επιλέγονται ονομαστικά τα μπλοκ της σελίδας: ένας γενικός κανόνας
   «κάθε παιδί του body» θα ακύρωνε το position:fixed των επικαλύψεων
   (πύλη ηλικίας, banner cookies) που έρχονται από τον κύριο ιστότοπο. */
.disclosure,
.hero,
.promo-main,
.promo-body > footer {
	position: relative;
	z-index: 1;
}

/* --------------------------------------------------------------------------
   Γνωστοποίηση διαφήμισης — λεπτή ταινία στην κορυφή
   -------------------------------------------------------------------------- */

.disclosure {
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	background: rgba(0, 0, 0, 0.35);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

/* Πλήρες κείμενο γνωστοποίησης από τον κύριο ιστότοπο: πεζά-κεφαλαία όπως
   στο πρωτότυπο. Σε κεφαλαία μια τέτοια παράγραφος θα ήταν αδιάβαστη. */
.disclosure__inner {
	max-width: 1080px;
	margin: 0 auto;
	padding: 10px 16px;
	font-size: 11px;
	line-height: 1.55;
	text-align: center;
	color: rgba(255, 255, 255, 0.45);
}

@media (min-width: 768px) {
	.disclosure__inner {
		font-size: 12px;
		padding: 11px 20px;
	}
}

@media (max-width: 420px) {
	.disclosure__inner {
		font-size: 10px;
		padding: 8px 12px;
	}
}

/* --------------------------------------------------------------------------
   Γραμμή μαιάνδρου — το υπογραμμιστικό μοτίβο της σελίδας
   -------------------------------------------------------------------------- */

.meander-rule {
	height: 26px;
	background-image: var(--meander);
	background-size: 26px 26px;
	background-repeat: repeat-x;
	opacity: 0.55;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

/* --------------------------------------------------------------------------
   ΟΘΟΝΗ 1 — ήρωας
   -------------------------------------------------------------------------- */

.hero {
	position: relative;
	min-height: calc(100svh - 34px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/* Το κάτω περιθώριο κρατά τον δείκτη κύλισης μακριά από τα σήματα */
	padding: 44px 20px clamp(96px, 17vh, 156px);
	text-align: center;
	overflow: hidden;
}

/* Πλαίσιο μαιάνδρου γύρω από τον ήρωα: τέσσερις γραμμές που «χαράζονται» */
.hero__frame span {
	position: absolute;
	background-image: var(--meander);
	opacity: 0.4;
	pointer-events: none;
}

.hero__frame span:nth-child(1),
.hero__frame span:nth-child(2) {
	left: 4%;
	right: 4%;
	height: 18px;
	background-size: 18px 18px;
	background-repeat: repeat-x;
	transform: scaleX(0);
	animation: drawX 1.4s var(--ease-out) 0.15s forwards;
}

.hero__frame span:nth-child(1) {
	top: 22px;
}

.hero__frame span:nth-child(2) {
	bottom: 22px;
	transform: scaleX(0) rotate(180deg);
	animation-name: drawXflip;
}

@keyframes drawX {
	to {
		transform: scaleX(1);
	}
}

@keyframes drawXflip {
	to {
		transform: scaleX(1) rotate(180deg);
	}
}

.hero__frame span:nth-child(3),
.hero__frame span:nth-child(4) {
	top: 22px;
	bottom: 22px;
	width: 18px;
	background-image: var(--meander-v);
	background-size: 18px 18px;
	background-repeat: repeat-y;
	transform: scaleY(0);
	animation: drawY 1.4s var(--ease-out) 0.35s forwards;
}

.hero__frame span:nth-child(3) {
	left: 4%;
}

.hero__frame span:nth-child(4) {
	right: 4%;
}

@keyframes drawY {
	to {
		transform: scaleY(1);
	}
}

@media (max-width: 767px) {
	.hero__frame span:nth-child(3),
	.hero__frame span:nth-child(4) {
		display: none;
	}
	.hero__frame span:nth-child(1),
	.hero__frame span:nth-child(2) {
		left: 0;
		right: 0;
	}
}

.hero__inner {
	position: relative;
	max-width: 920px;
	width: 100%;
}

/* --- Λογότυπο με χρυσό στεφάνι ------------------------------------------ */

.hero__logo {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 20px 28px;
	margin-bottom: 32px;
}

.hero__logo img {
	position: relative;
	z-index: 2;
	height: 62px;
	width: auto;
	filter: drop-shadow(0 0 26px rgba(227, 206, 155, 0.45));
	animation: logoIn 1.1s var(--ease-out) 0.1s both, sway 8s ease-in-out 1.4s infinite;
}

@keyframes logoIn {
	from {
		opacity: 0;
		transform: scale(0.84) translateY(14px);
		filter: blur(14px) drop-shadow(0 0 0 transparent);
	}
	to {
		opacity: 1;
		transform: scale(1) translateY(0);
		filter: blur(0) drop-shadow(0 0 26px rgba(227, 206, 155, 0.45));
	}
}

@keyframes sway {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-7px);
	}
}

/* Λεπτό πλαίσιο-καρτούς γύρω από το λογότυπο, με χρυσή λάμψη που το διατρέχει.
   Το χρώμα ζει στο conic-gradient, το πάχος στη μάσκα «xor»: έτσι μένει
   ακριβώς 1px σε κάθε πλευρά, ανεξάρτητα από τις αναλογίες του λογοτύπου. */
.hero__logo::before {
	content: "";
	position: absolute;
	inset: -6px;
	border-radius: 16px;
	padding: 1px;
	background: conic-gradient(
		from var(--spin, 0deg),
		rgba(227, 206, 155, 0.35) 0deg,
		rgba(255, 246, 220, 1) 40deg,
		rgba(227, 206, 155, 0.35) 90deg,
		rgba(227, 206, 155, 0.3) 190deg,
		rgba(130, 128, 255, 0.95) 225deg,
		rgba(227, 206, 155, 0.3) 275deg,
		rgba(227, 206, 155, 0.35) 360deg
	);
	-webkit-mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	animation: spin-angle 9s linear infinite, fadeIn 1.2s ease 0.6s both;
}

/* Χωρίς @property το --spin δεν κινείται: το πλαίσιο μένει απλώς ακίνητο,
   που είναι αποδεκτή υποβάθμιση. */
@property --spin {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}

@keyframes spin-angle {
	to {
		--spin: 360deg;
	}
}

/* Απαλή λάμψη πίσω από το λογότυπο */
.hero__logo::after {
	content: "";
	position: absolute;
	inset: -60px;
	background: radial-gradient(circle, rgba(227, 206, 155, 0.22) 0%, transparent 62%);
	animation: fadeIn 1.6s ease 0.4s both;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* --- Κοινή είσοδος στοιχείων (σκάλα με --d) ------------------------------ */

.rise {
	opacity: 0;
	animation: rise 1s var(--ease-out) forwards;
	animation-delay: var(--d, 0s);
}

@keyframes rise {
	from {
		opacity: 0;
		transform: translateY(26px);
		filter: blur(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
		filter: blur(0);
	}
}

/* --- Eyebrow ------------------------------------------------------------- */

.eyebrow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-bottom: 22px;
	font-family: var(--f-label);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: var(--gold);
}

.eyebrow::before,
.eyebrow::after {
	content: "";
	height: 1px;
	width: clamp(24px, 9vw, 90px);
	background: linear-gradient(90deg, transparent, var(--gold-line));
}

.eyebrow::after {
	background: linear-gradient(90deg, var(--gold-line), transparent);
}

@media (min-width: 768px) {
	.eyebrow {
		font-size: 18px;
	}
}

/* Ο τίτλος του κύριου ιστότοπου δεν χωρά σε μία σειρά σε κινητό. Αντί να
   κρέμονται οι διακοσμητικές γραμμές πάνω από δύο σειρές, τις αποσύρουμε. */
@media (max-width: 560px) {
	.eyebrow {
		font-size: 12px;
		letter-spacing: 0.2em;
		gap: 10px;
	}

	.eyebrow::before,
	.eyebrow::after {
		display: none;
	}
}

/* --- Τίτλος -------------------------------------------------------------- */

.hero__title {
	font-family: var(--f-display);
	font-weight: 400;
	/* Ο τίτλος του κύριου ιστότοπου είναι μακρύτερος από μια σύντομη προωθητική
	   φράση — η κλίμακα είναι φτιαγμένη ώστε να μη σπάει σε τρίτη σειρά. */
	font-size: clamp(2.1rem, 6.4vw, 4.9rem);
	line-height: 1.04;
	letter-spacing: -0.01em;
	margin: 0 auto 24px;
	max-width: 20ch;
}

.hero__title .l1 {
	display: block;
	color: #fff;
	text-shadow: 0 0 42px rgba(82, 80, 216, 0.55);
}

/* Δεύτερη γραμμή σε φύλλο χρυσού, με λάμψη που περνά αργά */
.hero__title .l2 {
	display: block;
	background: linear-gradient(
		100deg,
		var(--gold-deep) 0%,
		var(--gold) 24%,
		var(--gold-hi) 42%,
		var(--gold) 58%,
		var(--gold-deep) 82%,
		var(--gold) 100%
	);
	background-size: 260% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	animation: goldflow 9s ease-in-out infinite;
}

@keyframes goldflow {
	0%,
	100% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
}

/* --- Υπότιτλος ----------------------------------------------------------- */

.hero__sub {
	max-width: 46ch;
	margin: 0 auto 40px;
	font-size: 15px;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.62);
}

.hero__sub b {
	color: #fff;
	font-weight: 700;
}

@media (min-width: 768px) {
	.hero__sub {
		font-size: 17px;
	}
}

/* --- CTA ----------------------------------------------------------------- */

.cta-wrap {
	position: relative;
	display: inline-block;
	margin-bottom: 44px;
}

.cta {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	min-width: 290px;
	padding: 21px 44px;
	border-radius: 999px;
	overflow: hidden;
	font-family: var(--f-label);
	font-weight: 800;
	font-size: 27px;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: #16120a;
	background: linear-gradient(160deg, var(--gold-hi) 0%, var(--gold) 38%, var(--gold-deep) 100%);
	box-shadow:
		0 0 0 1px rgba(255, 246, 220, 0.6) inset,
		0 18px 46px -14px rgba(227, 206, 155, 0.7),
		0 4px 18px rgba(0, 0, 0, 0.5);
	transition:
		transform 0.35s var(--ease-out),
		box-shadow 0.35s var(--ease-out),
		filter 0.35s ease;
	will-change: transform;
}

.cta:hover,
.cta:focus-visible {
	transform: translateY(-3px) scale(1.02);
	filter: saturate(1.12) brightness(1.05);
	box-shadow:
		0 0 0 1px rgba(255, 246, 220, 0.85) inset,
		0 26px 62px -14px rgba(227, 206, 155, 0.9),
		0 4px 22px rgba(0, 0, 0, 0.55);
}

.cta:active {
	transform: translateY(0) scale(0.99);
}

/* Λάμψη που διατρέχει το κουμπί μόνη της, και ξανά στο hover */
.cta::after {
	content: "";
	position: absolute;
	top: -60%;
	left: -60%;
	width: 45%;
	height: 220%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.85), transparent);
	transform: skewX(-22deg);
	animation: sheen 4.5s ease-in-out 2s infinite;
}

@keyframes sheen {
	0%,
	62% {
		left: -60%;
	}
	100% {
		left: 150%;
	}
}

.cta__arrow {
	display: inline-block;
	font-size: 0.72em;
	animation: nudge 1.9s ease-in-out infinite;
}

@keyframes nudge {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(4px);
	}
}

/* Δύο δακτύλιοι που εκπέμπονται από το κουμπί */
.cta-wrap::before,
.cta-wrap::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 999px;
	border: 1px solid rgba(227, 206, 155, 0.55);
	animation: halo 3.4s ease-out infinite;
	pointer-events: none;
}

.cta-wrap::after {
	animation-delay: 1.7s;
}

@keyframes halo {
	0% {
		transform: scale(1);
		opacity: 0.7;
	}
	70% {
		opacity: 0;
	}
	100% {
		transform: scale(1.38);
		opacity: 0;
	}
}

@media (max-width: 480px) {
	.cta {
		min-width: 0;
		width: 100%;
		font-size: 23px;
		padding: 19px 26px;
	}
	.cta-wrap {
		display: block;
	}
}

/* --- Σήματα εμπιστοσύνης ------------------------------------------------- */

.trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px 26px;
	list-style: none;
	padding: 0;
	margin: 0;
}

/* Μόνο σήματα, χωρίς λεζάντες — το ύψος της εικόνας ορίζει το πλαίσιο */
.trust li {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 11px 20px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.04);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	font-size: 12px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.72);
	transition:
		border-color 0.3s ease,
		background 0.3s ease,
		transform 0.3s var(--ease-out);
}

.trust li:hover {
	transform: translateY(-2px);
	border-color: var(--gold-line);
	background: rgba(227, 206, 155, 0.08);
}

.trust img {
	height: 30px;
	width: auto;
	display: block;
}

.trust a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: inherit;
}

/* --- Δείκτης κύλισης ----------------------------------------------------- */

.scrollcue {
	/* Πάνω από την κάτω γραμμή του πλαισίου, ώστε τα δύο να μην μπερδεύονται */
	position: absolute;
	left: 50%;
	bottom: 58px;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	font-family: var(--f-label);
	font-size: 13px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.42);
	opacity: 0;
	animation: fadeIn 1s ease 1.8s forwards;
	transition: color 0.3s ease;
}

.scrollcue:hover {
	color: var(--gold);
}

.scrollcue i {
	display: block;
	width: 2px;
	height: 38px;
	background: linear-gradient(180deg, rgba(227, 206, 155, 0.1), rgba(227, 206, 155, 0.55));
	position: relative;
	overflow: hidden;
}

.scrollcue i::after {
	content: "";
	position: absolute;
	left: 0;
	top: -50%;
	width: 2px;
	height: 50%;
	background: var(--gold-hi);
	animation: cue 2.2s ease-in-out infinite;
}

@keyframes cue {
	0% {
		top: -50%;
		opacity: 0;
	}
	30% {
		opacity: 1;
	}
	100% {
		top: 100%;
		opacity: 0;
	}
}

/* Σε χαμηλές ή στενές οθόνες ο δείκτης δεν χωρά κάτω από τα σήματα —
   και δεν χρειάζεται: το βέλος μέσα στο κουμπί λέει ήδη πού πάει η σελίδα. */
@media (max-height: 700px), (max-width: 767px) {
	.scrollcue {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   ΟΘΟΝΗ 2 — επικεφαλίδα καταλόγου καζίνο
   -------------------------------------------------------------------------- */

.list-head {
	text-align: center;
	padding: 78px 0 46px;
}

.list-head__title {
	font-family: var(--f-display);
	font-weight: 400;
	font-size: clamp(2.1rem, 6vw, 3.6rem);
	line-height: 1.06;
	color: #fff;
	margin-bottom: 16px;
}

.list-head__note {
	max-width: 60ch;
	margin: 0 auto 26px;
	font-size: 14px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.55);
}

.list-head .meander-rule {
	max-width: 420px;
	margin: 0 auto;
}

/* Εμφάνιση καρτών με κύλιση — χωρίς καμία αλλαγή στη δομή τους */
.casino-list > article {
	opacity: 0;
	transform: translateY(34px);
	transition:
		opacity 0.85s var(--ease-out),
		transform 0.85s var(--ease-out);
	transition-delay: var(--d, 0s);
}

.casino-list > article.is-in {
	opacity: 1;
	transform: none;
}

/* Λεπτό χρυσό περίγραμμα στο hover — προσθήκη, όχι αλλαγή */
.casino-list > article {
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
	transition:
		opacity 0.85s var(--ease-out),
		transform 0.85s var(--ease-out),
		box-shadow 0.4s ease;
}

.casino-list > article:hover {
	box-shadow:
		0 0 0 1px rgba(227, 206, 155, 0.35),
		0 26px 60px -30px rgba(82, 80, 216, 0.9);
}

/* --------------------------------------------------------------------------
   Κινητό: σφιχτότερος κάθετος ρυθμός
   Το πλήρες κείμενο γνωστοποίησης πιάνει έξι-εφτά σειρές σε στενή οθόνη.
   Μαζεύουμε τα κενά του ήρωα ώστε ο πρώτος «όροφος» να μένει μία οθόνη.
   -------------------------------------------------------------------------- */

@media (max-width: 560px) {
	.hero__logo {
		padding: 16px 22px;
		margin-bottom: 20px;
	}

	.hero__logo img {
		height: 50px;
	}

	.eyebrow {
		margin-bottom: 14px;
	}

	.hero__title {
		margin-bottom: 16px;
	}

	.hero__sub {
		margin-bottom: 26px;
	}

	.cta-wrap {
		margin-bottom: 26px;
	}

	.trust {
		gap: 10px 12px;
	}

	.trust li {
		padding: 9px 16px;
	}

	.trust img {
		height: 24px;
	}
}

/* --------------------------------------------------------------------------
   Προσβασιμότητα και προτίμηση μειωμένης κίνησης
   -------------------------------------------------------------------------- */

.promo-body a:focus-visible,
.promo-body button:focus-visible {
	outline: 2px solid var(--gold-hi);
	outline-offset: 3px;
	border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
	html.promo {
		scroll-behavior: auto;
	}

	.atmos__bloom,
	.atmos__rays,
	.atmos__meander,
	.atmos__grain,
	.atmos__dust,
	.cta::after,
	.cta__arrow,
	.cta-wrap::before,
	.cta-wrap::after,
	.scrollcue i::after {
		animation: none !important;
	}

	.atmos__dust {
		display: none;
	}

	.rise,
	.hero__logo img,
	.hero__logo::before,
	.hero__logo::after,
	.scrollcue,
	.hero__title .l2 {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
	}

	.hero__frame span {
		transform: none !important;
		animation: none !important;
	}

	.casino-list > article {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}