/* ==========================================================================
   SKY TRANSFER — Design System (deep blue + amber)
   Loaded site-wide AFTER style.css to establish one cohesive identity.
   Token-first: remaps legacy theme variables so existing components recolor
   automatically, then layers modern primitives + tasteful motion.
   ========================================================================== */

:root {
	/* Brand — deep blue scale */
	--brand-950: #07182f;
	--brand-900: #0b2545;
	--brand-800: #102f57;
	--brand-700: #1b3a6b;
	--brand-600: #244c87;
	--brand-500: #2f5fa3;
	--brand-400: #5680bf;
	--brand-300: #93b1d9;
	--brand-100: #dde7f4;
	--brand-50:  #eef3fa;

	/* Accent — warm amber */
	--accent-600: #d98a00;
	--accent-500: #f4a300;
	--accent-400: #ffb627;
	--accent-300: #ffce6b;
	--accent-soft: #fff6e3;

	/* Neutrals */
	--ink-900: #0f1a2b;
	--ink-700: #334155;
	--ink-500: #64748b;
	--ink-300: #cbd5e1;
	--surface: #ffffff;
	--surface-alt: #f5f8fc;
	--surface-muted: #eef2f7;
	--line: #e3e9f2;

	/* Effects */
	--radius-sm: 10px;
	--radius: 16px;
	--radius-lg: 22px;
	--radius-pill: 999px;
	--shadow-xs: 0 1px 2px rgba(11, 37, 69, .06);
	--shadow-sm: 0 4px 14px rgba(11, 37, 69, .08);
	--shadow-md: 0 12px 30px rgba(11, 37, 69, .12);
	--shadow-lg: 0 26px 60px rgba(11, 37, 69, .18);
	--ring: 0 0 0 4px rgba(244, 163, 0, .25);

	/* Motion */
	--ease: cubic-bezier(.22, .61, .36, 1);
	--ease-out: cubic-bezier(.16, 1, .3, 1);
	--dur: .45s;

	/* Gradients */
	--grad-brand: linear-gradient(135deg, var(--brand-900) 0%, var(--brand-600) 100%);
	--grad-accent: linear-gradient(135deg, var(--accent-400) 0%, var(--accent-600) 100%);
	--grad-hero: linear-gradient(105deg, rgba(7, 24, 47, .92) 0%, rgba(16, 47, 87, .78) 45%, rgba(16, 47, 87, .25) 100%);

	/* ---- Remap legacy theme variables to the new identity ---- */
	--primary-color1: var(--brand-700);
	--primary-color1-opc: 27, 58, 107;
	--primary-color2: var(--accent-500);
	--primary-color2-opc: 244, 163, 0;
	--primary-color4: var(--brand-900);
	--primary: var(--brand-700);
	--dark: var(--ink-900);
	--bs-primary: var(--brand-700);
	--bs-primary-rgb: 27, 58, 107;
}

/* --------------------------------------------------------------------------
   Typography rhythm
   -------------------------------------------------------------------------- */
body {
	color: var(--ink-700);
	font-family: var(--font-montserrat);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
	color: var(--ink-900);
	letter-spacing: -.01em;
}
section h2, .section-title h2, .text-center > h2 {
	font-weight: 800;
	line-height: 1.15;
}
.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--brand-600);
	background: var(--brand-50);
	border: 1px solid var(--brand-100);
	padding: .45rem 1rem;
	border-radius: var(--radius-pill);
	margin-bottom: 1rem;
}
.eyebrow i { color: var(--accent-500); }
.text-accent { color: var(--accent-600) !important; }

/* --------------------------------------------------------------------------
   Buttons — recolor Bootstrap + theme primaries
   -------------------------------------------------------------------------- */
.btn {
	border-radius: var(--radius-pill);
	font-weight: 700;
	letter-spacing: .01em;
	transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.btn-primary,
.btn-primary:focus {
	background: var(--grad-brand);
	border: none;
	color: #fff;
}
.btn-primary:hover {
	background: var(--brand-800);
	color: #fff;
	transform: translateY(-2px);
}
.btn-outline-primary {
	border: 1.5px solid var(--brand-300);
	color: var(--brand-700);
	background: transparent;
}
.btn-outline-primary:hover {
	background: var(--brand-700);
	border-color: var(--brand-700);
	color: #fff;
	transform: translateY(-2px);
}
.btn-warning,
.btn-warning:focus {
	background: var(--grad-accent);
	border: none;
	color: var(--brand-950);
}
.btn-warning:hover {
	background: var(--accent-600);
	color: var(--brand-950);
	transform: translateY(-2px);
}
.btn-lg { padding: .9rem 2rem; }

/* Bootstrap utility recolours so legacy markup matches */
.text-primary { color: var(--brand-700) !important; }
.bg-primary { background-color: var(--brand-700) !important; }
.badge.bg-primary { background: var(--brand-700) !important; }
.badge.bg-warning { background: var(--grad-accent) !important; color: var(--brand-950) !important; }
.bg-primary.bg-opacity-10 { background: var(--brand-50) !important; }
.link-primary, a.text-primary:hover { color: var(--brand-800) !important; }
::selection { background: var(--accent-300); color: var(--brand-950); }

/* --------------------------------------------------------------------------
   Header / navigation polish (applies to the global header)
   -------------------------------------------------------------------------- */
.header-area.style-3 {
	transition: background-color .35s var(--ease), box-shadow .35s var(--ease), backdrop-filter .35s var(--ease);
}
.header-area.style-3.is-scrolled {
	background: rgba(11, 37, 69, .92) !important;
	backdrop-filter: saturate(160%) blur(10px);
	box-shadow: var(--shadow-sm);
}
/* Nav links sit on the transparent/dark header — keep them light, hover amber.
   (Theme uses --primary-color1 here, which we remapped to deep blue, so set
   an explicit readable colour rather than relying on the token.) */
header.style-3 .main-menu > ul > li > a {
	color: #fff;
	transition: color .25s var(--ease), border-color .25s var(--ease);
}
header.style-3 .main-menu > ul > li > a:hover,
header.style-3 .main-menu > ul > li > a.active {
	color: var(--accent-400);
}
.currency-selector-trigger .currency-code {
	color: var(--accent-400) !important;
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   Section rhythm + dividers
   -------------------------------------------------------------------------- */
.bg-light { background: var(--surface-alt) !important; }
section > .container > hr,
.container > hr {
	border: none;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--line), transparent);
	opacity: 1;
	margin: 1.5rem auto 2.5rem;
	max-width: 220px;
}

/* --------------------------------------------------------------------------
   Footer accent
   -------------------------------------------------------------------------- */
.footer-section { background: var(--brand-950); }
/* Footer sits on dark navy — keep all headings/titles + links legible.
   (Our global heading colour above is dark ink, which we must not inherit here.) */
.footer-section h1,
.footer-section h2,
.footer-section h3,
.footer-section h4,
.footer-section h5,
.footer-section h6,
.footer-section .footer-menu-wrap .footer-widget .widget-title h6 { color: #fff; }
.footer-section .widget-list li a { color: rgba(255, 255, 255, .72); }
.footer-section .widget-list li a:hover { color: var(--accent-400); }
.footer-section .address-area span { color: rgba(255, 255, 255, .72); }
.footer-section .social-list a {
	transition: transform .25s var(--ease), background-color .25s var(--ease);
}
.footer-section .social-list a:hover {
	background: var(--accent-500);
	transform: translateY(-3px);
}
.footer-bottom a strong { color: var(--accent-400) !important; }

/* --------------------------------------------------------------------------
   Motion — scroll reveal primitives (driven by reveal.js)
   Respects reduced-motion: everything is visible by default if JS/anim off.
   -------------------------------------------------------------------------- */
[data-reveal] {
	opacity: 1;
}
.js-reveal-ready [data-reveal] {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
	will-change: opacity, transform;
}
.js-reveal-ready [data-reveal="left"]  { transform: translateX(-32px); }
.js-reveal-ready [data-reveal="right"] { transform: translateX(32px); }
.js-reveal-ready [data-reveal="zoom"]  { transform: scale(.94); }
.js-reveal-ready [data-reveal].is-visible {
	opacity: 1;
	transform: none;
}
/* Stagger children inside a [data-reveal-group] */
.js-reveal-ready [data-reveal-group] > * {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.js-reveal-ready [data-reveal-group].is-visible > * {
	opacity: 1;
	transform: none;
}
.js-reveal-ready [data-reveal-group].is-visible > *:nth-child(1) { transition-delay: .05s; }
.js-reveal-ready [data-reveal-group].is-visible > *:nth-child(2) { transition-delay: .12s; }
.js-reveal-ready [data-reveal-group].is-visible > *:nth-child(3) { transition-delay: .19s; }
.js-reveal-ready [data-reveal-group].is-visible > *:nth-child(4) { transition-delay: .26s; }
.js-reveal-ready [data-reveal-group].is-visible > *:nth-child(5) { transition-delay: .33s; }
.js-reveal-ready [data-reveal-group].is-visible > *:nth-child(6) { transition-delay: .40s; }
.js-reveal-ready [data-reveal-group].is-visible > *:nth-child(7) { transition-delay: .47s; }
.js-reveal-ready [data-reveal-group].is-visible > *:nth-child(8) { transition-delay: .54s; }

@media (prefers-reduced-motion: reduce) {
	.js-reveal-ready [data-reveal],
	.js-reveal-ready [data-reveal-group] > * {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.badge-content, .discount-badge { animation: none !important; }
	html { scroll-behavior: auto; }
}

html { scroll-behavior: smooth; }

/* Generic hover lift used by cards */
.lift { transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.lift:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
</content>
</invoke>