/**
 * Rankiva — identity layer.
 *
 * Loaded after main.css. main.css holds the layout and component structure;
 * this file gives the site its Rankiva look:
 *
 *   Ink       #17123F  headings, dark surfaces
 *   Violet    #5B3DF5  the brand signal: buttons, links, active states
 *   Deep      #4326D6  hover and pressed states, text links
 *   Lilac     #F4F1FF  soft section surfaces
 *   Summit    #FFB547  used only where something reaches the top: the #1
 *                      position, star ratings, the closing CTA marker
 *
 *   Display   Bricolage Grotesque — tight, characterful headlines
 *   Text      Instrument Sans — calm, open body copy
 *
 * The one recurring motif is the contour line: rankings as elevation. It
 * appears behind the hero and on the dark surfaces, nowhere else.
 *
 * (Token names such as --green are kept from the original framework so every
 * component in main.css picks up the new palette; they now hold violet.)
 *
 * 01 Tokens   02 Type   03 Buttons & links   04 Header   05 Hero
 * 06 Sections 07 Dark surfaces   08 Footer   09 Elementor   10 Responsive
 */

/* == 01 Tokens ============================================================ */
:root {
	--ink: #17123f;
	--navy: #17123f;
	--green: #5b3df5;
	--green-deep: #4326d6;
	--green-ink: #2a1690;
	--summit: #ffb547;
	--summit-ink: #8a5300;

	--mint-050: #f7f5ff;
	--mint-100: #f4f1ff;
	--mint-200: #eae5ff;
	--mint-300: #d9d1ff;
	--surface-2: #faf9ff;
	--surface-3: #f4f1ff;
	--rule: #e7e3f4;
	--rule-mint: #e2dcfb;
	--body: #4d4868;
	--muted: #7f7a99;

	--contour-light: url("../images/contours-light.svg");
	--contour-dark: url("../images/contours-dark.svg");

	--surface-premium: var(--contour-dark) 50% 50% / cover no-repeat, #17123f;
	--surface-premium-hero: var(--contour-dark) 50% 50% / cover no-repeat, #17123f;
	--surface-premium-linear: linear-gradient(#17123f, #17123f);
	--surface-premium-flat: #17123f;
	--premium-text: #ece9fb;
	--premium-text-soft: rgba(236, 233, 251, 0.76);
	--premium-highlight: #c9bcff;

	--r-sm: 8px;
	--r: 16px;
	--r-lg: 28px;

	--display: "Bricolage Grotesque", "Instrument Sans", "Segoe UI", system-ui, sans-serif;
	--sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

	--shadow-sm: 0 1px 2px rgba(23, 18, 63, 0.06);
	--shadow: 0 24px 48px -32px rgba(23, 18, 63, 0.35);
	--header-h: 78px;
}

/* == 02 Type ============================================================== */
body {
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--body);
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 700;
	letter-spacing: -0.028em;
	font-variation-settings: "opsz" 48;
}

h1 { font-size: clamp(2.5rem, 5.4vw, 4.4rem); line-height: 1; letter-spacing: -0.04em; font-weight: 800; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.85rem); line-height: 1.05; letter-spacing: -0.035em; }
h3 { font-size: clamp(1.14rem, 1.5vw, 1.3rem); line-height: 1.25; letter-spacing: -0.018em; font-variation-settings: "opsz" 24; }
h6 { text-transform: none; letter-spacing: 0; }

::selection { background: var(--summit); color: var(--ink); }

/* Section labels: sentence case and quiet, a signpost rather than a banner. */
.eyebrow,
.hero__eyebrow {
	gap: 0.55rem;
	font-family: var(--sans);
	font-size: 0.94rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--green-deep);
	margin-bottom: 0.9rem;
}

.eyebrow::before,
.hero__eyebrow::before {
	width: 8px;
	height: 8px;
	border-radius: 2px;
	background: var(--green);
	transform: rotate(45deg);
}

.band--navy .eyebrow,
.network-panel .eyebrow,
.network-cta .eyebrow,
.gp-selected .eyebrow { color: var(--premium-highlight); }

.band--navy .eyebrow::before,
.network-panel .eyebrow::before,
.network-cta .eyebrow::before { background: var(--summit); }

.section-head p { font-size: 1.08rem; }

.demo-flag {
	border-radius: 999px;
	letter-spacing: 0.02em;
	text-transform: none;
	font-size: 0.7rem;
	background: #fff4e0;
	border-color: #ffe2ad;
	color: var(--summit-ink);
}

/* == 03 Buttons & links =================================================== */
a { color: var(--green-deep); }
a:hover { color: var(--ink); }

.btn {
	border-radius: 999px;
	font-weight: 600;
	letter-spacing: -0.005em;
	box-shadow: none;
	transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.btn::before,
.btn::after { display: none; }
.btn:hover { transform: none; }

.btn--primary,
.btn--primary:visited {
	background: var(--green);
	color: #fff;
	border-color: var(--green);
	box-shadow: none;
}

.btn--primary:hover,
.btn--primary:focus-visible {
	background: var(--ink);
	border-color: var(--ink);
	color: #fff;
	box-shadow: none;
}

.btn--quiet,
.btn--ghost {
	background: transparent;
	color: var(--ink);
	border: 1.5px solid var(--ink);
	box-shadow: none;
}

.btn--quiet:hover,
.btn--ghost:hover {
	background: var(--ink);
	color: #fff;
	border-color: var(--ink);
	box-shadow: none;
}

.btn--lg { border-radius: 999px; min-height: 56px; padding: 1rem 1.9rem; }
.btn--sm { border-radius: 999px; }

.btn:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--green); }

/* On dark surfaces: the primary turns white, the secondary is a white outline. */
.band--navy .btn--primary,
.network-panel .btn--primary,
.network-cta .btn--primary,
.cta-band .btn--primary,
.offer-card .btn--primary {
	background: #fff;
	border-color: #fff;
	color: var(--ink);
}

.band--navy .btn--primary:hover,
.network-panel .btn--primary:hover,
.network-cta .btn--primary:hover,
.cta-band .btn--primary:hover,
.offer-card .btn--primary:hover {
	background: var(--summit);
	border-color: var(--summit);
	color: var(--ink);
}

.band--navy .btn--ghost,
.network-panel .btn--ghost,
.network-cta .btn--ghost,
.offer-card .btn--ghost,
.cta-band .btn--ghost {
	background: transparent;
	color: #fff;
	border: 1.5px solid rgba(255, 255, 255, 0.55);
	backdrop-filter: none;
	box-shadow: none;
}

.band--navy .btn--ghost:hover,
.network-panel .btn--ghost:hover,
.network-cta .btn--ghost:hover,
.offer-card .btn--ghost:hover,
.cta-band .btn--ghost:hover {
	background: #fff;
	color: var(--ink);
	border-color: #fff;
	box-shadow: none;
}

.band--navy .btn:focus-visible,
.network-panel .btn:focus-visible,
.network-cta .btn:focus-visible,
.offer-card .btn:focus-visible,
.cta-band .btn:focus-visible { box-shadow: 0 0 0 3px var(--ink), 0 0 0 5px var(--summit); }

.textlink {
	color: var(--green-deep);
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 100% 1.5px;
}

.textlink:hover { color: var(--ink); }

/* == 04 Header ============================================================ */
/* A night-ink bar on every page: the logo's white variant, quiet white
   navigation and a glowing violet call to action. */
.site-header,
.site-header.is-scrolled {
	background: #0f0b2b;
	backdrop-filter: saturate(170%) blur(16px);
	-webkit-backdrop-filter: saturate(170%) blur(16px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: none;
	transition: background-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.site-header.is-scrolled {
	background: rgba(15, 11, 43, 0.9);
	box-shadow: 0 18px 40px -24px rgba(5, 3, 20, 0.8);
}

.site-header::before,
.site-brand::before { display: none; }

.rk-logo { display: block; width: auto; height: 40px; max-width: 100%; }
.site-brand .rk-logo { height: 38px; }
.footer-brand .rk-logo { height: 40px; }

.site-brand__name {
	font-family: var(--display);
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: -0.045em;
	color: #fff;
}

.site-brand__name span,
.site-brand__name em { color: inherit; font-style: normal; }

.nav a {
	font-size: 0.95rem;
	font-weight: 500;
	color: rgba(236, 233, 251, 0.82);
	border-radius: 999px;
}

.nav a:hover { background: rgba(255, 255, 255, 0.08); color: #fff; box-shadow: none; }

.nav .current-menu-item > a,
.nav .current-menu-parent > a,
.nav .current_page_item > a {
	background: transparent;
	color: #fff;
	box-shadow: none;
	font-weight: 600;
}

.nav .current-menu-item > a::after,
.nav .current-menu-parent > a::after,
.nav .current_page_item > a::after {
	left: 50%;
	right: auto;
	width: 6px;
	height: 6px;
	margin-left: -3px;
	bottom: 0;
	border-radius: 1px;
	transform: rotate(45deg);
	background: var(--summit);
	box-shadow: 0 0 10px rgba(255, 181, 71, 0.7);
}

.nav > ul > .menu-item-has-children > a::before { opacity: 0.7; }

.nav .sub-menu {
	background: #fff;
	border: 1px solid var(--rule);
	border-top: 0;
	border-radius: var(--r);
	box-shadow: 0 30px 60px -30px rgba(5, 3, 20, 0.6);
}

.nav .sub-menu a { color: var(--ink); }
.nav .sub-menu a:hover { background: var(--mint-100); color: var(--green-deep); }

.nav__toggle { border-color: rgba(255, 255, 255, 0.2); }
.nav__toggle:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.3); }
.nav__toggle-bar { background: #fff; }

.header-cta { box-shadow: 0 8px 24px -10px rgba(91, 61, 245, 0.9); transform: none; }
.header-cta:hover { box-shadow: 0 10px 28px -10px rgba(255, 181, 71, 0.7); transform: none; background: var(--summit); border-color: var(--summit); color: var(--ink); }
.site-header .btn:focus-visible { box-shadow: 0 0 0 3px #0f0b2b, 0 0 0 5px var(--summit); }

/* == 05 Hero ============================================================== */
/* Night ink, lit from behind the artwork, with contour lines and fine grain.
   This is the page's one dark, dramatic moment above the fold. */
.hero {
	--hero-ink: #0f0b2b;
	background:
		radial-gradient(52% 64% at 78% 38%, rgba(91, 61, 245, 0.42) 0%, rgba(91, 61, 245, 0) 62%),
		radial-gradient(38% 46% at 6% 102%, rgba(116, 87, 255, 0.22) 0%, rgba(116, 87, 255, 0) 70%),
		var(--contour-dark) 60% 30% / 1500px auto no-repeat,
		linear-gradient(180deg, var(--hero-ink) 0%, #17123f 100%);
	color: rgba(236, 233, 251, 0.76);
	border-bottom: 0;
	padding-top: clamp(4rem, 8vw, 7rem);
	padding-bottom: 0;
	isolation: isolate;
}

/* Film grain: a few kilobytes of SVG noise that keep the gradients from
   banding and give the surface a printed, premium texture. */
.hero::after {
	content: "";
	display: block;
	position: absolute;
	inset: 0;
	z-index: -1;
	width: auto;
	height: auto;
	border-radius: 0;
	filter: none;
	animation: none;
	translate: none;
	opacity: 0.32;
	mix-blend-mode: soft-light;
	pointer-events: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Cursor spotlight (assets/js/rankiva-motion.js sets --mx / --my). */
.hero::before {
	content: "";
	display: block;
	position: absolute;
	inset: 0;
	z-index: -1;
	width: auto;
	height: auto;
	border-radius: 0;
	filter: none;
	translate: none;
	animation: none;
	pointer-events: none;
	opacity: var(--spot, 0);
	transition: opacity 0.5s var(--ease);
	background: radial-gradient(420px circle at var(--mx, 70%) var(--my, 40%), rgba(201, 188, 255, 0.14), transparent 70%);
}

.hero .lattice,
.hero__visual::before,
.hero__visual::after { display: none; }

.hero__inner {
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	padding-bottom: clamp(3.5rem, 7vw, 6rem);
}

.hero__eyebrow {
	display: inline-flex;
	padding: 0.42rem 0.95rem 0.42rem 0.8rem;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.05);
	color: #ddd6ff;
	font-size: 0.88rem;
	margin-bottom: 1.5rem;
}

.hero__eyebrow::before { background: var(--summit); box-shadow: 0 0 12px rgba(255, 181, 71, 0.8); }

.hero__title {
	color: #fff;
	max-width: 13ch;
	margin-bottom: 1.5rem;
	font-size: clamp(2.6rem, 5.8vw, 4.75rem);
}

/* The one emphasis: a summit-coloured stroke drawn under the phrase. */
.hero__title em {
	color: #fff;
	white-space: normal;
	padding-inline: 0;
	background: linear-gradient(var(--summit), var(--summit)) 0 92% / var(--draw, 100%) 0.11em no-repeat;
	transition: background-size 0.9s cubic-bezier(0.65, 0, 0.25, 1);
}

.hero__title em::after { display: none; }

.hero__lead { font-size: clamp(1.08rem, 1.4vw, 1.22rem); max-width: 50ch; color: rgba(236, 233, 251, 0.74); }

.hero .btn--primary { box-shadow: 0 14px 34px -12px rgba(91, 61, 245, 0.95); }
.hero .btn--primary:hover { background: #fff; border-color: #fff; color: var(--ink); }
.hero .btn--quiet { color: #fff; border-color: rgba(255, 255, 255, 0.38); }
.hero .btn--quiet:hover { background: #fff; color: var(--ink); border-color: #fff; }
.hero .btn:focus-visible { box-shadow: 0 0 0 3px var(--hero-ink), 0 0 0 5px var(--summit); }

.hero__meta { border-top-color: rgba(255, 255, 255, 0.1); gap: 0.6rem 1.75rem; padding-left: 0; }
.hero__meta li { font-size: 0.92rem; color: rgba(236, 233, 251, 0.86); }
.hero__meta li::before {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	box-shadow: none;
	background: rgba(255, 255, 255, 0.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.3l2.4 2.4L13 6.2' fill='none' stroke='%23ffb547' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
}

.hero__scrim { background: linear-gradient(100deg, rgba(15, 11, 43, 0.96) 0%, rgba(15, 11, 43, 0.88) 45%, rgba(15, 11, 43, 0.55) 100%); }

/* Moving service strip along the base of the hero. */
.hero__marquee {
	position: relative;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(8, 6, 26, 0.35);
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.hero__marquee-track { display: flex; width: max-content; }

.hero__marquee-list {
	display: flex;
	align-items: center;
	gap: 2.75rem;
	margin: 0;
	padding: 1.25rem 1.375rem;
	list-style: none;
}

.hero__marquee-list li {
	display: inline-flex;
	align-items: center;
	gap: 2.75rem;
	font-family: var(--display);
	font-size: clamp(1.05rem, 1.6vw, 1.3rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	color: rgba(236, 233, 251, 0.7);
	white-space: nowrap;
}

.hero__marquee-list li::after {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 1.5px;
	background: var(--summit);
	transform: rotate(45deg);
	opacity: 0.85;
}

@media (prefers-reduced-motion: no-preference) {
	.hero__marquee-track { animation: rk-marquee 42s linear infinite; }
	.hero__marquee:hover .hero__marquee-track { animation-play-state: paused; }
}

@keyframes rk-marquee { to { transform: translateX(-50%); } }

/* The rank climb ---------------------------------------------------------- */
.climb {
	--row: 68px;
	position: relative;
	max-width: 520px;
	margin-left: auto;
	padding-bottom: 64px;
	font-family: var(--sans);
}

.climb__window {
	background: #fff;
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 26px;
	padding: 18px;
	box-shadow:
		0 0 0 8px rgba(255, 255, 255, 0.05),
		0 60px 120px -50px rgba(3, 2, 15, 0.85),
		0 0 90px -30px rgba(124, 99, 255, 0.65);
}

.climb__bar {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 50px;
	padding: 0 18px;
	border: 1px solid var(--rule);
	border-radius: 999px;
	background: var(--surface-2);
	color: var(--ink);
	margin-bottom: 12px;
}

.hero__visual .climb svg { width: auto; height: auto; filter: none; animation: none; overflow: visible; }
.hero__visual .climb .climb__bar svg { width: 18px; height: 18px; color: var(--green); flex: none; }
.climb__query { font-size: 0.98rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.climb__caret { width: 1.5px; height: 20px; background: var(--green); animation: climb-caret 1.1s steps(1) infinite; }

@keyframes climb-caret { 50% { opacity: 0; } }

.climb__list { list-style: none; margin: 0; padding: 0; position: relative; }

.climb__row {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr) 44px;
	align-items: center;
	gap: 14px;
	height: var(--row);
	padding: 0 12px;
	border-radius: 14px;
}

.climb__row + .climb__row { margin-top: 4px; }

.climb__fav {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--mint-100);
	color: var(--green-deep);
	font-weight: 700;
	font-size: 0.85rem;
}

.climb__text { display: grid; gap: 7px; min-width: 0; }
.climb__skel { display: block; height: 8px; border-radius: 4px; background: var(--rule); }
.climb__skel--s { width: 34%; height: 6px; background: var(--mint-200); }

.climb__pos {
	position: relative;
	display: grid;
	place-items: center;
	height: 30px;
	border-radius: 999px;
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--muted);
	background: var(--surface-2);
	font-variant-numeric: tabular-nums;
}

.climb__row--you {
	position: relative;
	z-index: 2;
	background: #fff;
	box-shadow: 0 0 0 1.5px var(--green), 0 18px 34px -20px rgba(67, 38, 214, 0.55);
}

.climb__domain { font-size: 0.78rem; color: var(--muted); line-height: 1; }
.climb__title {
	font-family: var(--display);
	font-size: 0.98rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: var(--green-deep);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.climb__row--you .climb__fav { background: var(--green); color: #fff; }
.climb__row--you .climb__pos { background: var(--summit); color: var(--ink); overflow: hidden; }
.climb__pos-old,
.climb__pos-new { grid-area: 1 / 1; }
.climb__pos-old { opacity: 0; }
.climb__pos-new::before { content: "#"; }
.climb__pos-old::before { content: "#"; }

.climb__track {
	position: absolute;
	left: -36px;
	bottom: 0;
	width: 260px;
	padding: 16px 18px 12px;
	background: linear-gradient(150deg, #6a4ef7 0%, #3a1fc4 100%);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 20px;
	box-shadow: 0 30px 60px -24px rgba(3, 2, 15, 0.8);
	z-index: 3;
}

.climb__track-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 0.78rem; color: rgba(255, 255, 255, 0.78); }
.climb__track-head strong { font-family: var(--display); font-size: 1.05rem; color: #fff; letter-spacing: -0.02em; white-space: nowrap; }
.climb__track-head strong span { color: var(--summit); }
.hero__visual .climb .climb__chart { display: block; width: 100%; height: auto; margin: 8px 0 6px; overflow: visible; }
.climb__grid { stroke: rgba(255, 255, 255, 0.16); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.climb__line { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.climb__dot { fill: var(--summit); }
.climb__months { display: flex; justify-content: space-between; font-size: 0.66rem; color: rgba(255, 255, 255, 0.7); }

/* Floating proof chips around the results window. */
.climb__chip {
	position: absolute;
	z-index: 4;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px 10px 10px;
	background: rgba(255, 255, 255, 0.96);
	border: 1px solid rgba(255, 255, 255, 0.7);
	border-radius: 16px;
	box-shadow: 0 24px 50px -20px rgba(3, 2, 15, 0.7);
	color: var(--ink);
	backdrop-filter: blur(10px);
}

.climb__chip--clicks { top: -26px; left: -44px; }
.climb__chip--link { right: -34px; top: 47%; }

.climb__chip-icon {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 11px;
	background: var(--mint-100);
	color: var(--green-deep);
	flex: none;
}

.climb__chip-icon--up { background: var(--summit); color: var(--ink); }
.hero__visual .climb .climb__chip svg { width: 16px; height: 16px; }
.climb__chip-text { display: grid; line-height: 1.15; }
.climb__chip-text small { font-size: 0.72rem; color: var(--muted); }
.climb__chip-text strong { font-family: var(--display); font-size: 1.02rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: no-preference) {
	.climb__chip--clicks { animation: rk-float 7s ease-in-out 2.6s infinite; }
	.climb__chip--link { animation: rk-float 8s ease-in-out 3.2s infinite reverse; }
	.climb__track { animation: rk-float 9s ease-in-out 3s infinite; }
}

@keyframes rk-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}

/* The single orchestrated moment: the client result climbs from #4 to #1
   while the others step down, and the tracking line draws in. */
@media (prefers-reduced-motion: no-preference) {
	.climb__row--you { animation: climb-up 1.15s cubic-bezier(0.65, 0, 0.25, 1) 0.7s both; }
	.climb__row--other { animation: climb-down 1.15s cubic-bezier(0.65, 0, 0.25, 1) 0.7s both; }
	.climb__row--other[style*="--i:5"] { animation: none; }
	.climb__pos-old { animation: climb-fade-out 0.3s ease 1.35s both; }
	.climb__pos-new { animation: climb-fade-in 0.3s ease 1.45s both; }
	.climb__line { stroke-dashoffset: 1; animation: climb-draw 1.6s ease-out 0.9s forwards; }
	.climb__dot { animation: climb-fade-in 0.3s ease 2.4s both; }
}

@keyframes climb-up { from { transform: translateY(calc((var(--row) + 4px) * 3)); } to { transform: none; } }
@keyframes climb-down { from { transform: translateY(calc((var(--row) + 4px) * -1)); } to { transform: none; } }
@keyframes climb-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes climb-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes climb-draw { to { stroke-dashoffset: 0; } }

/* Inner-page heroes share the home hero's surface: white paper with contour
   lines on the right, no glows. */
.page-hero,
.page-hero--service,
.page-hero--about,
.page-hero--order,
.page-hero--contact,
.page-hero--services,
.page-hero--network,
.page-hero--sitemap,
.page-hero--legal {
	background:
		var(--contour-light) 100% 0 / 1100px auto no-repeat,
		linear-gradient(180deg, #ffffff 0%, var(--mint-100) 100%);
	border-bottom: 1px solid var(--rule);
}

.page-hero::before,
.page-hero::after,
.hero-glow { display: none !important; }

.page-hero__title { letter-spacing: -0.045em; font-weight: 800; }
.page-hero__kicker { text-transform: none; letter-spacing: 0; font-size: 0.94rem; }

.crumbs { font-size: 0.86rem; }

/* == 06 Sections ========================================================== */
.band--soft { background: var(--surface-2); border-color: var(--rule); }
.band--mist { background: var(--mint-100); border-color: var(--rule-mint); }
.band--atmos::before,
.band--atmos::after { display: none; }

/* Cards: one radius for cards, a larger one for panels, hairline borders and
   no resting shadow, so hierarchy comes from layout rather than effects. */
.standard__item,
.tcard,
.faq__item,
.faq-section__aside,
.offer-card,
.card,
.post-card,
.svc-card {
	border-radius: var(--r);
}

.standard__item {
	background: #fff;
	border: 1px solid var(--rule);
	box-shadow: none;
}

.standard__item:nth-child(even) { margin-top: 0; }

.standard__num,
.cap__num,
.journey__num,
.principle__num { font-family: var(--display); font-variant-numeric: tabular-nums; }

.standard__icon,
.faq__mark {
	border-radius: 10px;
	background: var(--mint-100);
	color: var(--green-deep);
	border: 0;
}

.cap { border-color: var(--rule); }
.cap__title { font-family: var(--display); letter-spacing: -0.03em; }
.cap.is-open .cap__num { color: var(--green); }
.cap__sign { border-radius: 50%; }
.cap.is-open .cap__sign { background: var(--ink); border-color: var(--ink); color: #fff; }

.caps__count { font-family: var(--display); font-weight: 800; letter-spacing: -0.05em; }

.orbit-node__pill { border-radius: 999px; }
.orbit-core { font-family: var(--display); }

.principle { border-color: var(--rule); }

/* Principles and the standard are parallel ideas, not a sequence, so they
   carry a marker rather than a number. Numbers stay on the process steps. */
.principle::before {
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	border-radius: 2px;
	background: var(--green);
	transform: rotate(45deg);
	margin: 0.3rem 0 1.1rem 0.15rem;
}

.standard__num { display: none; }
.standard__head { justify-content: flex-start; }

/* The old hairline grid texture is retired; contours replace it. */
.lattice { display: none !important; }

.journey__step::before { border-radius: 2px; }

.faq__item {
	border: 1px solid var(--rule);
	box-shadow: none;
	background: #fff;
}

.faq__item[open],
.faq__item.is-open { border-color: var(--green); }
.faq__label { font-family: var(--display); letter-spacing: -0.02em; }

.tcard__frame,
.tcard__head,
.tcard__body,
.tcard__foot { border-color: var(--rule); }
.tcard { box-shadow: 0 30px 60px -40px rgba(23, 18, 63, 0.35); border-color: var(--rule); }
.tcard__stars .is-on,
.tcard__stars svg.is-on,
.tcard__stars .is-on svg { color: var(--summit); fill: var(--summit); }
.tcard__quote { border-left-color: var(--summit); font-family: var(--display); letter-spacing: -0.015em; }
.tcards__dot.is-active { background: var(--ink); }

/* == 07 Dark surfaces ===================================================== */
.network-panel {
	background: var(--surface-premium);
	border: 0;
	border-radius: var(--r-lg);
	box-shadow: none;
}

.network-panel > .lattice,
.cta-band .lattice,
.band--navy .lattice { display: none; }

.network-checks li { border-color: rgba(255, 255, 255, 0.12); }
.network-checks svg { color: var(--summit); }

.cta-band {
	background: var(--surface-premium);
	text-align: left;
	border-top: 0;
	padding-block: clamp(4.5rem, 9vw, 7.5rem);
}

.cta-band::before { display: none; }

.cta-band__inner {
	max-width: var(--wrap);
	padding-inline: var(--gutter);
	margin-inline: auto;
}

.cta-band .btn-row { justify-content: flex-start; margin-top: 2.25rem; }

.cta-band h2 {
	font-size: clamp(2.4rem, 5.6vw, 4.6rem);
	line-height: 0.98;
	letter-spacing: -0.045em;
	font-weight: 800;
	max-width: 14ch;
}

.cta-band p { max-width: 52ch; color: var(--premium-text-soft); margin-bottom: 0; }

.band--navy { background: var(--surface-premium); }

/* == 08 Footer ============================================================ */
/* The footer continues the closing CTA's night ink, so the page ends the way
   it opened: dark, quiet, with the wordmark set large at the very bottom. */
.site-footer {
	background:
		radial-gradient(50% 60% at 85% 0%, rgba(91, 61, 245, 0.22) 0%, rgba(91, 61, 245, 0) 70%),
		linear-gradient(180deg, #17123f 0%, #0f0b2b 100%);
	color: rgba(236, 233, 251, 0.7);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.site-footer::before,
.site-footer .lattice,
.footer-brand::before,
.footer-bottom::before,
.footer-bottom::after { display: none; }

.footer-brand p { color: rgba(236, 233, 251, 0.66); }
.footer-brand .site-brand__name { color: #fff; }

.footer-col h3 {
	font-family: var(--display);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -0.015em;
	text-transform: none;
	border-bottom: 0;
	padding-bottom: 0;
	margin-bottom: 1rem;
	color: #fff;
}

.footer-col h3::after { display: none; }
.footer-col a { color: rgba(236, 233, 251, 0.7); }
.footer-col a:hover { color: #fff; }
.footer-col:not(.footer-col--contact) a::after { background: var(--summit); }

.footer-col--contact {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--r-lg);
	box-shadow: none;
	backdrop-filter: none;
	color: rgba(236, 233, 251, 0.76);
}

.footer-col--contact h3 { color: #fff; }
.footer-col--contact p,
.footer-contact__intro { color: rgba(236, 233, 251, 0.72); }
.footer-col--contact hr,
.contact-channels { border-color: rgba(255, 255, 255, 0.1); }

.contact-channels .contact-channels__link {
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.1);
	box-shadow: none;
	color: #fff;
}

.contact-channels .contact-channels__link:hover { background: #fff; color: var(--ink); }

.footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); color: rgba(236, 233, 251, 0.55); }
.footer-bottom a { color: rgba(236, 233, 251, 0.75); }
.footer-bottom a:hover { color: #fff; }

/* The wordmark, outlined, cropped by the bottom edge. */
.site-footer::after {
	content: "Rankiva";
	display: block;
	font-family: var(--display);
	font-weight: 800;
	font-size: clamp(5rem, 21vw, 19rem);
	line-height: 0.74;
	letter-spacing: -0.065em;
	color: transparent;
	-webkit-text-stroke: 1px rgba(201, 188, 255, 0.28);
	background: linear-gradient(180deg, rgba(124, 99, 255, 0.22), rgba(124, 99, 255, 0));
	-webkit-background-clip: text;
	background-clip: text;
	text-align: center;
	margin-top: clamp(1rem, 3vw, 2rem);
	margin-bottom: -0.06em;
	user-select: none;
	pointer-events: none;
	white-space: nowrap;
	overflow: hidden;
}

/* The closing CTA and the footer read as one dark surface. */
.cta-band { border-bottom: 0; }
.cta-band + .site-footer,
.cta-band ~ .site-footer { border-top-color: rgba(255, 255, 255, 0.06); }

/* == 08b Premium details ================================================== */
/* Cards lift and pick up a violet edge when pointed at. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.standard__item,
	.feature-card,
	.offer-card,
	.work-card,
	.benefit-card,
	.post-card,
	.publisher,
	.faq__item {
		transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
	}

	.standard__item:hover,
	.feature-card:hover,
	.benefit-card:hover,
	.post-card:hover,
	.publisher:hover {
		transform: translateY(-6px);
		border-color: rgba(91, 61, 245, 0.45);
		box-shadow: 0 30px 60px -36px rgba(67, 38, 214, 0.55);
	}
}

/* Dark panels get the same cursor spotlight as the hero. */
.network-panel,
.cta-band { position: relative; isolation: isolate; }

.network-panel::after,
.cta-band::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: var(--spot, 0);
	transition: opacity 0.5s var(--ease);
	background: radial-gradient(480px circle at var(--mx, 50%) var(--my, 50%), rgba(201, 188, 255, 0.16), transparent 70%);
}

.cta-band h2 em,
.network-panel h2 em { font-style: normal; color: var(--summit); }

/* Primary buttons: the arrow moves forward on hover. */
.btn svg { transition: transform 0.3s var(--ease); }
.btn:hover svg { transform: translateX(4px); }

/* Section headings settle in word by word when they enter the viewport. */
.rk-motion [data-rk-split] .rk-w {
	display: inline-block;
	opacity: 0;
	transform: translateY(0.55em);
	filter: blur(6px);
	transition: opacity 0.7s var(--ease), transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.7s var(--ease);
	transition-delay: calc(var(--i, 0) * 55ms);
}

.rk-motion [data-rk-split].is-in .rk-w { opacity: 1; transform: none; filter: none; }
.rk-motion .hero__title em { --draw: 0%; }
.rk-motion .hero__title.is-in em { --draw: 100%; transition-delay: 0.6s; }

/* Generic reveal used on section heads, cards and grids. */
.rk-motion [data-rk-reveal] {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.8s var(--ease), transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
	transition-delay: calc(var(--i, 0) * 80ms);
}

.rk-motion [data-rk-reveal].is-in { opacity: 1; transform: none; }

/* Hero copy plays in on load, after the header. */
.rk-motion .hero__eyebrow,
.rk-motion .hero__lead,
.rk-motion .hero__actions,
.rk-motion .hero__meta {
	opacity: 0;
	transform: translateY(18px);
	animation: rk-in 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

.rk-motion .hero__eyebrow { animation-delay: 0.05s; }
.rk-motion .hero__lead { animation-delay: 0.55s; }
.rk-motion .hero__actions { animation-delay: 0.7s; }
.rk-motion .hero__meta { animation-delay: 0.85s; }
.rk-motion .hero__visual { opacity: 1; transform: none; }
.rk-motion .climb__window { animation: rk-in-scale 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s both; }
.rk-motion .climb__chip--clicks { animation: rk-in 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 1.9s both, rk-float 7s ease-in-out 2.7s infinite; }
.rk-motion .climb__chip--link { animation: rk-in 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 2.2s both, rk-float 8s ease-in-out 3s infinite reverse; }
.rk-motion .climb__track { animation: rk-in 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.8s both, rk-float 9s ease-in-out 1.6s infinite; }

@keyframes rk-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes rk-in-scale { from { opacity: 0; transform: translateY(30px) scale(0.96); } to { opacity: 1; transform: none; } }

/* Slow drift of the contour lines in the hero. */
@media (prefers-reduced-motion: no-preference) {
	.hero { animation: rk-contour 60s ease-in-out infinite alternate; }
}

@keyframes rk-contour {
	from { background-position: 0 0, 0 0, 60% 30%, 0 0; }
	to { background-position: 0 0, 0 0, 48% 40%, 0 0; }
}

/* Header progress line: how far down the page the reader is. */
.rk-progress {
	position: absolute;
	left: 0;
	bottom: -1px;
	height: 2px;
	width: 100%;
	transform-origin: 0 50%;
	transform: scaleX(var(--progress, 0));
	background: linear-gradient(90deg, var(--green), var(--summit));
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.rk-motion [data-rk-split] .rk-w,
	.rk-motion [data-rk-reveal] { opacity: 1; transform: none; filter: none; transition: none; }
}

/* == 09 Elementor ========================================================= */
.elementor-widget-container .eyebrow { margin-bottom: 0.9rem; }
.elementor .btn { text-decoration: none; }

/* == 10 Responsive ======================================================== */
@media (max-width: 1100px) {
	.climb__track { left: 0; }
	.climb__chip--clicks { left: -8px; }
	.climb__chip--link { right: -8px; }
}

@media (max-width: 980px) {
	.hero__inner { grid-template-columns: 1fr; }
	.hero__title { max-width: 16ch; }
	.climb { margin: 1rem auto 0; }
	.hero__copy { order: 1; }
	.hero__visual { order: 2; }
	}

@media (max-width: 600px) {
	.climb { --row: 60px; padding-bottom: 92px; }
	.climb__window { padding: 12px; border-radius: 20px; }
	.climb__row { grid-template-columns: 30px minmax(0, 1fr) 40px; gap: 10px; padding: 0 8px; }
	.climb__fav { width: 30px; height: 30px; }
	.climb__track { width: auto; left: 12px; right: 12px; }
	.climb__chip--clicks { top: -30px; left: 4px; }
	.climb__chip--link { display: none; }
	.hero__title { font-size: clamp(2.4rem, 11vw, 3.2rem); }
	.hero { background-size: 800px auto, auto; }
	.site-footer::after { font-size: 26vw; }
}

/* Footer contact panel divider on the dark surface. */
.footer-col--contact .footer-contact__intro { border-bottom-color: rgba(255, 255, 255, 0.12); }