/* =========================================================================
   Stealth — premium custom theme.
   Drop into the store's Custom CSS field. Targets both dark and light modes.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

/* -------------------------------------------------------------------------
   Shared tokens.
   ------------------------------------------------------------------------- */

:root {
	--stealth-gold: 38 55% 55%;
	--stealth-gold-soft: 38 50% 62%;
	--stealth-platinum: 240 5% 70%;

	--stealth-silver-1: #f7f7f8;
	--stealth-silver-2: #c4c4c9;
	--stealth-silver-3: #ededef;
	--stealth-silver-4: #d8d8dc;

	--stealth-graphite-1: #2a2a2e;
	--stealth-graphite-2: #595961;
	--stealth-graphite-3: #14141a;

	--stealth-display: 'Fraunces', 'Times New Roman', Georgia, serif;
	--stealth-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
	--stealth-eyebrow-tracking: 0.22em;
}

body {
	font-family: var(--stealth-body);
	font-feature-settings: 'ss01', 'cv11';
}

/* -------------------------------------------------------------------------
   Dark mode — black silk, overhead spotlight, brushed silver type.
   ------------------------------------------------------------------------- */

html.dark {
	--background: 240 10% 4%;
	--foreground: 0 0% 96%;
	--card: 240 8% 7% / 0.55;
	--card-foreground: 0 0% 96%;
	--muted: 240 4% 12%;
	--muted-foreground: 240 5% 68%;
	--border: 0 0% 98% / 14%;
	--ring: 38 55% 55%;
}

html.dark body {
	background-color: hsl(var(--background));
	background-image:
		radial-gradient(ellipse 70% 55% at 50% -8%, hsl(0 0% 100% / 0.12), transparent 60%),
		radial-gradient(circle at 8% 22%, hsl(0 0% 100% / 0.05), transparent 35%),
		radial-gradient(circle at 95% 78%, hsl(0 0% 100% / 0.04), transparent 40%),
		radial-gradient(circle at 20% 90%, hsl(var(--stealth-gold) / 0.04), transparent 45%);
	background-attachment: fixed;
}

html.dark img[data-icon] {
	filter: invert();
}


/* Metallic silver headings. */
html.dark h1,
html.dark h2 {
	font-family: var(--stealth-display);
	font-weight: 600;
	letter-spacing: -0.015em;
	background: linear-gradient(
		180deg,
		var(--stealth-silver-1) 0%,
		var(--stealth-silver-3) 30%,
		var(--stealth-silver-4) 55%,
		var(--stealth-silver-2) 78%,
		var(--stealth-silver-3) 100%
	);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* -------------------------------------------------------------------------
   Light mode — ivory stage, engraved graphite type.
   ------------------------------------------------------------------------- */

html:not(.dark) {
	--background: 36 28% 96%;
	--foreground: 240 10% 8%;
	--card: 0 0% 100% / 0.7;
	--card-foreground: 240 10% 8%;
	--muted: 36 20% 92%;
	--muted-foreground: 240 4% 36%;
	--border: 240 10% 15% / 12%;
	--ring: 38 55% 45%;
}

html:not(.dark) body {
	background-color: hsl(var(--background));
	background-image:
		radial-gradient(ellipse 70% 55% at 50% -8%, hsl(38 40% 86% / 0.95), transparent 60%),
		radial-gradient(circle at 95% 82%, hsl(38 30% 88% / 0.55), transparent 40%),
		radial-gradient(circle at 5% 90%, hsl(var(--stealth-gold) / 0.06), transparent 45%);
	background-attachment: fixed;
}

html:not(.dark) h1,
html:not(.dark) h2 {
	font-family: var(--stealth-display);
	font-weight: 600;
	letter-spacing: -0.015em;
	background: linear-gradient(
		180deg,
		var(--stealth-graphite-1) 0%,
		var(--stealth-graphite-2) 55%,
		var(--stealth-graphite-3) 100%
	);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* -------------------------------------------------------------------------
   Eyebrow labels — uppercase, tracked, with a short gold hairline below.
   Targets the "COPY-TRADING · ...", "COME FUNZIONA", "STRATEGIA E TESI..."
   spans that sit above each <h1>/<h2> inside <header> banners.
   ------------------------------------------------------------------------- */

header > span[class*="uppercase"][class*="tracking-widest"],
header > span[class*="text-muted-foreground"][class*="uppercase"] {
	position: relative;
	display: inline-block;
	padding-bottom: 0.7rem;
	margin-bottom: 0.4rem;
	letter-spacing: var(--stealth-eyebrow-tracking);
	font-size: 0.72rem;
	font-weight: 600;
	color: hsl(var(--muted-foreground));
}

/* Default (left-aligned): solid at left, fades out to the right. */
header > span[class*="uppercase"][class*="tracking-widest"]::after,
header > span[class*="text-muted-foreground"][class*="uppercase"]::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: linear-gradient(
		90deg,
		hsl(var(--stealth-gold) / 0.9) 0%,
		hsl(var(--stealth-gold) / 0.9) 55%,
		transparent 100%
	);
}

/* Centered — symmetric fade on both sides. */
header[data-align="center"] > span[class*="uppercase"]::after {
	background: linear-gradient(
		90deg,
		transparent 0%,
		hsl(var(--stealth-gold) / 0.9) 25%,
		hsl(var(--stealth-gold) / 0.9) 75%,
		transparent 100%
	);
}

/* Right-aligned — solid at right, fades out to the left. */
header[data-align="end"] > span[class*="uppercase"]::after {
	background: linear-gradient(
		90deg,
		transparent 0%,
		hsl(var(--stealth-gold) / 0.9) 45%,
		hsl(var(--stealth-gold) / 0.9) 100%
	);
}

/* -------------------------------------------------------------------------
   Storefront section divider — replaces the flat dashed hr with a gold
   hairline broken by a centered diamond ornament.
   ------------------------------------------------------------------------- */

hr[class*="storefront-hr"] {
	border: 0 !important;
	height: 8px;
	width: min(28rem, 60%) !important;
	max-width: 100% !important;
	margin: 2.5rem auto !important;
	background-color: transparent !important;
	background-image:
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='7' height='7' viewBox='0 0 7 7'><path d='M3.5 0.5 L6.5 3.5 L3.5 6.5 L0.5 3.5 Z' fill='%23a8a8b0' fill-opacity='0.3'/></svg>"),
		linear-gradient(
			90deg,
			transparent 0%,
			hsl(var(--stealth-platinum) / 0.18) 15%,
			hsl(var(--stealth-platinum) / 0.18) calc(50% - 12px),
			transparent calc(50% - 8px),
			transparent calc(50% + 8px),
			hsl(var(--stealth-platinum) / 0.18) calc(50% + 12px),
			hsl(var(--stealth-platinum) / 0.18) 85%,
			transparent 100%
		);
	background-repeat: no-repeat, no-repeat;
	background-size: 7px 7px, 100% 1px;
	background-position: center center, center center;
}

/* -------------------------------------------------------------------------
   Glass cards — 1px top highlight catches the spotlight.
   ------------------------------------------------------------------------- */

article:not(article article):not([data-expanded=true] article) {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* -------------------------------------------------------------------------
   Primary CTA — polished metal pill with warm gold halo.
   Targets the theme's .blocks:cta anchor directly (not its children), so the
   whole pill becomes brushed metal instead of a silver bar inside a pill.
   ------------------------------------------------------------------------- */

:is(a, button)[class*="blocks:cta"] {
	background-image: linear-gradient(180deg, #f7f7f8 0%, #e9e9ec 55%, #d8d8dc 100%) !important;
	background-color: #e8e8eb !important;
	color: #0f0f14 !important;
	border: 0 !important;
	box-shadow:
		0 0 0 1px hsl(240 8% 40% / 0.22) inset,
		0 1px 0 hsl(0 0% 100% / 0.55) inset,
		0 8px 24px -14px hsl(var(--stealth-gold) / 0.5),
		0 2px 10px -6px hsl(0 0% 0% / 0.1);
	transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

:is(a, button)[class*="blocks:cta"]:hover {
	transform: translateY(-1px);
	filter: brightness(1.03);
	box-shadow:
		0 0 0 1px hsl(var(--stealth-gold) / 0.5) inset,
		0 1px 0 hsl(0 0% 100% / 0.65) inset,
		0 14px 32px -14px hsl(var(--stealth-gold) / 0.75),
		0 2px 10px -6px hsl(0 0% 0% / 0.12);
}

/* Inner wrapper must stay transparent — previous version painted it silver. */
:is(a, button)[class*="blocks:cta"] > *,
:is(a, button)[class*="blocks:cta"] > * > * {
	background: transparent !important;
	color: inherit !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* Secondary CTA — mailto contact. Ghost/outline, no metal. */
a[href^="mailto:"][class*="blocks:cta"] {
	background-image: none !important;
	background-color: transparent !important;
	color: hsl(var(--foreground)) !important;
	border: 0 !important;
	box-shadow: 0 0 0 1px hsl(var(--border)) inset !important;
}

a[href^="mailto:"][class*="blocks:cta"]:hover {
	background-color: hsl(var(--muted) / 0.4) !important;
	box-shadow:
		0 0 0 1px hsl(var(--stealth-gold) / 0.5) inset,
		0 8px 24px -14px hsl(var(--stealth-gold) / 0.4) !important;
}

/* -------------------------------------------------------------------------
   Hero headline — display bump. Only applies to landing-style heroes that
   have an uppercase eyebrow sibling, so product-page H1s stay their own size.
   ------------------------------------------------------------------------- */

header:has(> span[class*="uppercase"][class*="tracking-widest"]) > h1 {
	font-size: clamp(2.5rem, 6vw, 5rem);
	line-height: 1.02;
	font-variation-settings: 'opsz' 144;
}

/* -------------------------------------------------------------------------
   Paywall captions — "Abbonati per visualizzare…" on locked panels.
   Upgrade from flat muted grey to italic display caption + tinted lock icon.
   ------------------------------------------------------------------------- */

div[class*="flex-col"][class*="items-center"][class*="text-muted-foreground"]:has(> svg) {
	gap: 0.85rem !important;
}

div[class*="flex-col"][class*="items-center"][class*="text-muted-foreground"]:has(> svg)
	> svg {
	color: hsl(var(--stealth-gold) / 0.85);
	width: 1.35rem;
	height: 1.35rem;
	opacity: 0.9;
}

div[class*="flex-col"][class*="items-center"][class*="text-muted-foreground"]:has(> svg)
	> [class*="text-sm"] {
	font-weight: 500;
	font-size: 0.9rem;
	letter-spacing: 0.01em;
}

/* -------------------------------------------------------------------------
   Stat blocks ("CAGR 49.6%", "Total Return 270%", …)
   Big numbers get the same metal treatment as headings.
   ------------------------------------------------------------------------- */

[class*="text-4xl"],
[class*="text-5xl"],
[class*="text-6xl"] {
	font-family: var(--stealth-display);
	letter-spacing: -0.02em;
}

/* -------------------------------------------------------------------------
   FAQ buttons — foreground color only, no gold hairline.
   ------------------------------------------------------------------------- */

button[aria-expanded="true"] {
	color: hsl(var(--foreground));
}

/* -------------------------------------------------------------------------
   Nav / header bar — let the spotlight show through.
   ------------------------------------------------------------------------- */

body > header,
body > div > header:first-child,
nav[aria-label], header[class*="sticky"] {
	background: transparent !important;
	backdrop-filter: blur(10px) saturate(130%);
	-webkit-backdrop-filter: blur(10px) saturate(130%);
	border-bottom: 1px solid hsl(var(--border));
}

/* -------------------------------------------------------------------------
   Footer — drop the dashed top border.
   ------------------------------------------------------------------------- */

footer,
[role="contentinfo"] {
	border-top: 0 !important;
	border-style: none !important;
}

/* -------------------------------------------------------------------------
   Reduce motion — keep gradients, drop transitions.
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition: none !important;
	}
}