/*==========================================================================
  UNQUEST CAPITALS - MARKETING SITE BRAND LAYER

  The public pages are a scraped Elementor template. Rather than rebuild
  them, this sheet loads LAST and lifts the parts that carry the brand:
  type, buttons, cards, spacing and the header.

  Palette lives in theme.css. The template's own colours were retinted at
  source (#12BEBB and #041766 -> #3C3EA3, #111D29 -> #101137).

  Deliberately single-theme: the marketing pages keep one art direction,
  because the hero photography and video are lit for a dark treatment.
===========================================================================*/

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

/*--------------------------------------------------------------------------
  TYPE
  The template ships Roboto / Heebo / Inter. One family, properly scaled,
  reads more considered than three.
--------------------------------------------------------------------------*/
body,
.elementor-widget-text-editor,
.elementor-widget-heading .elementor-heading-title,
.elementor-button,
.elementor-icon-list-text,
.elementskit-infobox .elementskit-info-box-title,
.elementskit-infobox p,
p,
li,
a {
	font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/*
  Real headings only.

  `.elementor-heading-title` is NOT included here: the template also puts
  that class on <p> and <span> elements carrying body copy - the footer
  disclaimer among them - so blanket-bolding it made paragraphs heavy and
  cramped. Headings are targeted by element, and h-class-on-body-copy is
  corrected below.
*/
h1,
h2,
h3,
h4,
h5,
h6,
h1.elementor-heading-title,
h2.elementor-heading-title,
h3.elementor-heading-title,
h4.elementor-heading-title,
h5.elementor-heading-title,
h6.elementor-heading-title {
	letter-spacing: -0.03em !important;
	font-weight: 700 !important;
	text-wrap: balance;
}

/*
  Body copy that happens to wear a heading class. Normal weight, and room to
  breathe between lines - long legal copy set at heading line-height is what
  made the footer disclaimer read as a solid block.
*/
p.elementor-heading-title,
span.elementor-heading-title,
div.elementor-heading-title {
	font-weight: 400 !important;
	letter-spacing: 0 !important;
	line-height: 1.85 !important;
	text-wrap: pretty;
}

.elementor-widget-text-editor,
.elementor-widget-text-editor p {
	line-height: 1.7 !important;
	letter-spacing: 0.002em;
}

/*--------------------------------------------------------------------------
  BUTTONS
  Brand gradient, a real hover state, and a sheen that sweeps across.
--------------------------------------------------------------------------*/
.elementor-button,
.elementor-button-link {
	background-image: linear-gradient(135deg, #4e50d0 0%, #3c3ea3 55%, #2e308a 100%) !important;
	background-color: #3c3ea3 !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 14px !important;
	font-weight: 600 !important;
	letter-spacing: 0.01em !important;
	box-shadow: 0 6px 18px rgba(60, 62, 163, 0.28);
	position: relative;
	overflow: hidden;
	transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
	isolation: isolate;
}

.elementor-button::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.22) 45%, transparent 70%);
	transform: translateX(-120%);
	transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
	pointer-events: none;
}

.elementor-button:hover,
.elementor-button:focus {
	transform: translateY(-2px);
	box-shadow: 0 12px 30px rgba(60, 62, 163, 0.4);
	color: #fff !important;
}

.elementor-button:hover::after {
	transform: translateX(120%);
}

.elementor-button:focus-visible {
	outline: 2px solid #9d9ff0;
	outline-offset: 3px;
}

/*--------------------------------------------------------------------------
  HEADER / NAVIGATION
--------------------------------------------------------------------------*/
.elementor-location-header {
	position: relative;
	z-index: 100;
}

.elementor-nav-menu .elementor-item,
.elementor-nav-menu a {
	font-weight: 500 !important;
	letter-spacing: 0.005em;
	position: relative;
	transition: color 0.2s ease;
}

/* Underline that grows from the centre on hover */
.elementor-nav-menu .elementor-item::after {
	content: '';
	position: absolute;
	left: 50%;
	right: 50%;
	bottom: -4px;
	height: 2px;
	background: #6c6ee7;
	border-radius: 2px;
	transition: left 0.25s ease, right 0.25s ease;
}

.elementor-nav-menu .elementor-item:hover::after,
.elementor-nav-menu .elementor-item.elementor-item-active::after {
	left: 0;
	right: 0;
}

/*--------------------------------------------------------------------------
  ICON / IMAGE BOXES
  The template renders these flat. Giving them a real surface is most of
  what makes the page read as premium rather than as a stock template.
--------------------------------------------------------------------------*/
.elementskit-infobox {
	border-radius: 18px;
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.elementor-widget-elementskit-icon-box .elementskit-infobox:hover,
.elementor-widget-elementskit-image-box .elementskit-infobox:hover {
	transform: translateY(-6px);
	box-shadow: 0 22px 48px rgba(16, 17, 55, 0.13);
}

.elementskit-infobox .elementskit-box-header .elementkit-infobox-icon,
.elementskit-infobox .elementskit-info-box-icon {
	color: #3c3ea3 !important;
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.elementskit-infobox:hover .elementkit-infobox-icon,
.elementskit-infobox:hover .elementskit-info-box-icon {
	transform: scale(1.08);
}

.elementskit-infobox .elementskit-info-box-title {
	letter-spacing: -0.02em;
	font-weight: 700;
}

/* Images inside boxes and figures */
.elementor-widget-image img,
.elementskit-image-box img,
.elementor-widget-elementskit-image-box img {
	border-radius: 16px;
}

/*--------------------------------------------------------------------------
  DIVIDERS
--------------------------------------------------------------------------*/
.elementor-widget-divider .elementor-divider-separator {
	border-top-color: rgba(60, 62, 163, 0.28) !important;
}

/*--------------------------------------------------------------------------
  TESTIMONIALS
--------------------------------------------------------------------------*/
.elementor-testimonial__content,
.elementor-widget-testimonial-carousel .elementor-testimonial {
	border-radius: 18px;
}

.elementor-swiper-button {
	color: #3c3ea3 !important;
}

.swiper-pagination-bullet-active {
	background: #3c3ea3 !important;
}

/*--------------------------------------------------------------------------
  VIDEO
--------------------------------------------------------------------------*/
.elementor-widget-elementskit-video video,
video {
	border-radius: 18px;
}

/*--------------------------------------------------------------------------
  SELECTION + FOCUS
--------------------------------------------------------------------------*/
::selection {
	background: rgba(60, 62, 163, 0.2);
	color: #101137;
}

a:focus-visible,
button:focus-visible {
	outline: 2px solid #3c3ea3;
	outline-offset: 3px;
	border-radius: 6px;
}

/*--------------------------------------------------------------------------
  BRAND LOCKUP
  The header logo is now an SVG; keep it crisp and correctly proportioned
  regardless of the inline width the template put on it.
--------------------------------------------------------------------------*/
.site-brand-logo,
img[alt='Unquest Capitals'] {
	width: auto !important;
	max-width: 100%;
	object-fit: contain;
}

/*--------------------------------------------------------------------------
  MOTION
--------------------------------------------------------------------------*/
@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/*--------------------------------------------------------------------------
  PRICING CARDS
  Four plans across on desktop, rendered from UserInvestment::PLANS.
--------------------------------------------------------------------------*/
.uq-plan-card {
	background: #fff;
	border: 1px solid #e1e4ee;
	border-radius: 18px;
	padding: 28px 22px;
	height: 100%;
	box-shadow: 0 10px 26px rgba(16, 17, 55, 0.06);
}

.uq-plan-card .elementskit-info-box-title {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #6e7590;
	margin-bottom: 6px;
}

.uq-plan-card .uq-plan-roi {
	font-size: 44px;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
	margin: 0 0 18px;
	background: linear-gradient(135deg, #4e50d0 0%, #3c3ea3 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: #3c3ea3;
}

.uq-plan-card p {
	font-size: 15px !important;
	color: #3b415a !important;
	margin: 0 0 8px !important;
	line-height: 1.6 !important;
	text-align: center !important;
}

.uq-plan-card .uq-plan-yield {
	font-weight: 600;
	color: #047857 !important;
	margin-top: 14px !important;
	padding-top: 14px;
	border-top: 1px solid #eef0f6;
}

.uq-plan-card .uq-plan-note {
	display: inline-block;
	margin-top: 10px !important;
	padding: 4px 12px;
	border-radius: 999px;
	background: #fdf8ec;
	border: 1px solid #e6cd8b;
	color: #9a7c30 !important;
	font-size: 12px !important;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

@media (max-width: 1024px) {
	.uq-plan-card {
		margin-bottom: 18px;
	}
}

/*--------------------------------------------------------------------------
  FOOTER LEGAL COPY
  Long disclaimer + copyright line, in section .elementor-element-1c52621
  (this template has no .elementor-location-footer wrapper). Quieter than
  the rest of the footer,
  measured for readability, and given real space between the two blocks.
--------------------------------------------------------------------------*/
.elementor-element-1c52621 p.elementor-heading-title,
.elementor-element-1c52621 span.elementor-heading-title {
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1.9 !important;
	letter-spacing: 0.005em !important;
	/* Softer than the pure white it inherits, so it reads as fine print. */
	color: rgba(255, 255, 255, 0.62) !important;
	max-width: 78ch;
	margin: 0 auto 18px !important;
}

.elementor-element-1c52621 span.elementor-heading-title {
	display: block;
	margin-bottom: 0 !important;
	padding-top: 18px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	font-size: 13px !important;
	color: rgba(255, 255, 255, 0.5) !important;
}

@media (max-width: 768px) {

	.elementor-element-1c52621 p.elementor-heading-title,
	.elementor-element-1c52621 span.elementor-heading-title {
		font-size: 13px !important;
		line-height: 1.8 !important;
		text-align: left;
	}
}
