:root {
	--rd-orange: #ff4a1c;
	--rd-orange-2: #ff7a35;
	--rd-ink: #0e1a24;
	--rd-ink-2: #142533;
	--rd-teal: #0f8f88;
	--rd-blue: #2764e6;
	--rd-green: #13a76f;
	--rd-cream: #fff7f1;
	--rd-paper: #ffffff;
	--rd-soft: #f6f8fb;
	--rd-line: rgba(14, 26, 36, 0.12);
	--rd-muted: #63717d;
	--rd-faint: #92a0ab;
	--font-heading: "Poppins", sans-serif;
	--font-body: "Inter", sans-serif;
	--container: 1180px;
	--radius: 8px;
	--radius-lg: 18px;
	--shadow: 0 22px 60px rgba(14, 26, 36, 0.12);
	--shadow-soft: 0 14px 40px rgba(14, 26, 36, 0.10);
}
section { scroll-margin-top: 90px; }
.container { width: min(100% - 48px, var(--container)); margin: 0 auto; padding: 0 25px; }
.container-wide { width: min(100% - 48px, 1320px); margin: 0 auto; padding: 25px; }
.section-kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px; color: var(--rd-orange); font-size: 12px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; }
.section-kicker::before { content: ""; width: 26px; height: 2px; background: currentColor; }
.section-title { max-width: 760px; font-size: clamp(28px, 3.6vw, 46px); color: var(--rd-ink); margin-bottom: 18px; letter-spacing: -0.02em; }
.section-copy { max-width: 620px; color: var(--rd-muted); font-size: 16px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 52px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 22px; border: 1px solid transparent; border-radius: 6px; font-size: 14px; font-weight: 800; cursor: pointer; transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 200ms ease, border-color 200ms ease, background 200ms ease, color 200ms ease; white-space: nowrap; }
.btn:hover { transform: translateY(-3px); }
.btn-primary { background: linear-gradient(135deg, var(--rd-orange), var(--rd-orange-2)); color: #fff; box-shadow: 0 16px 34px rgba(255, 74, 28, 0.28); }
.btn-primary:hover { box-shadow: 0 24px 44px rgba(255, 74, 28, 0.36); }
.btn-ghost { background: rgba(255, 255, 255, 0.06); color: #fff; border-color: rgba(255, 255, 255, 0.28); backdrop-filter: blur(14px); }
.btn-ghost:hover { background: #fff; color: var(--rd-ink); border-color: #fff; }
.btn-dark { background: var(--rd-ink); color: #fff; }
.btn-dark:hover { box-shadow: 0 20px 40px rgba(14, 26, 36, 0.28); }
.btn-light { background: #fff; color: var(--rd-ink); }
.text-link { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-size: 14px; color: var(--rd-orange); transition: gap 200ms ease, color 200ms ease; }
.text-link i { color: var(--rd-orange); transition: transform 200ms ease; }
.text-link:hover { color: var(--rd-orange); }
.text-link:hover i { transform: translateX(4px); }
[data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity 800ms cubic-bezier(0.22, 1, 0.36, 1), transform 800ms cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; }
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal="left"] { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="zoom"] { transform: scale(0.96); }
.mask-reveal { clip-path: inset(0 100% 0 0); transition: clip-path 900ms cubic-bezier(0.22, 1, 0.36, 1); }
.mask-reveal.is-visible { clip-path: inset(0 0 0 0); }
.hero { position: relative; padding: 150px 0 90px; background: radial-gradient(1200px 600px at 78% 8%, rgba(255, 74, 28, 0.16), transparent 60%), linear-gradient(180deg, #0b141d 0%, #0e1a24 60%, #0e1a24 100%); color: #fff; isolation: isolate; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 96px), repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 96px); mask-image: radial-gradient(1000px 600px at 60% 30%, #000 30%, transparent 78%); z-index: -1; pointer-events: none; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.hero-badge { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; margin-bottom: 26px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 99px; background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.88); font-size: 12.5px; font-weight: 700; letter-spacing: 0.3px; backdrop-filter: blur(12px); }
.hero-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rd-green); box-shadow: 0 0 0 4px rgba(19, 167, 111, 0.22); }
.hero h1 { color: #fff; font-size: clamp(38px, 5.4vw, 72px); font-weight: 900; line-height: 1.02; letter-spacing: -0.03em; margin-bottom: 22px; }
.hero h1 .accent { color: transparent; background: linear-gradient(120deg, var(--rd-orange), var(--rd-orange-2)); -webkit-background-clip: text; background-clip: text; }
.hero-copy { max-width: 520px; font-size: clamp(16px, 1.4vw, 18px); color: rgba(255, 255, 255, 0.74); margin-bottom: 32px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 38px; }
.hero-trust { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.hero-trust .avatars { display: flex; }
.hero-trust .avatars span { width: 40px; height: 40px; margin-left: -12px; border-radius: 50%; border: 2px solid #0e1a24; background-size: cover; background-position: center; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; color: #fff; }
.hero-trust .avatars span:first-child { margin-left: 0; }
.hero-trust .avatars span:nth-child(1) { background: linear-gradient(135deg, var(--rd-orange), var(--rd-orange-2)); }
.hero-trust .avatars span:nth-child(2) { background: linear-gradient(135deg, var(--rd-teal), #0bbfb4); }
.hero-trust .avatars span:nth-child(3) { background: linear-gradient(135deg, var(--rd-blue), #5b8bff); }
.hero-trust .avatars span:nth-child(4) { background: linear-gradient(135deg, var(--rd-green), #2ad18c); }
.hero-trust .trust-copy strong { display: block; color: #fff; font-family: var(--font-heading); font-size: 15px; }
.hero-trust .trust-copy span { font-size: 12.5px; color: rgba(255, 255, 255, 0.6); }
.hero-trust .stars { color: #ffb020; font-size: 12px; letter-spacing: 2px; }
.hero-visual { position: relative; min-height: 480px; }
.hv-card { position: absolute; border-radius: 16px; background: #fff; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.38); overflow: hidden; }
.hv-dash { top: 0; left: 0; width: 62%; padding: 18px; z-index: 2; animation: floatY 7s ease-in-out infinite; }
.hv-dash-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.hv-dash-head small { font-size: 11px; font-weight: 800; color: var(--rd-muted); text-transform: uppercase; letter-spacing: 0.6px; }
.hv-badge-up { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 99px; background: rgba(19, 167, 111, 0.12); color: var(--rd-green); font-size: 11px; font-weight: 800; }
.hv-metric { font-family: var(--font-heading); font-size: 30px; font-weight: 800; color: var(--rd-ink); line-height: 1; margin-bottom: 2px; }
.hv-metric-sub { font-size: 11.5px; color: var(--rd-muted); margin-bottom: 16px; }
.hv-chart { display: flex; align-items: flex-end; gap: 7px; height: 78px; }
.hv-chart span { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, var(--rd-orange), var(--rd-orange-2)); opacity: 0.9; transform-origin: bottom; animation: barGrow 1s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
.hv-chart span:nth-child(1) { height: 40%; background: rgba(14,26,36,0.12); animation-delay: .05s; }
.hv-chart span:nth-child(2) { height: 58%; background: rgba(14,26,36,0.16); animation-delay: .12s; }
.hv-chart span:nth-child(3) { height: 46%; background: rgba(14,26,36,0.12); animation-delay: .19s; }
.hv-chart span:nth-child(4) { height: 70%; animation-delay: .26s; }
.hv-chart span:nth-child(5) { height: 88%; animation-delay: .33s; }
.hv-chart span:nth-child(6) { height: 66%; background: rgba(14,26,36,0.16); animation-delay: .4s; }
.hv-chart span:nth-child(7) { height: 100%; animation-delay: .47s; }
.hv-reel { right: 0; top: 46px; width: 40%; aspect-ratio: 9 / 16; max-height: 360px; z-index: 3; border: 6px solid #0b1017; border-radius: 26px; box-shadow: 0 34px 80px rgba(0, 0, 0, 0.5); animation: floatY 8s ease-in-out infinite reverse; }
.hv-reel img { width: 100%; height: 100%; object-fit: cover; }
.hv-reel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.55)); }
.hv-reel .reel-play { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; }
.hv-reel .reel-play i { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.92); color: var(--rd-ink); font-size: 14px; box-shadow: 0 8px 20px rgba(0,0,0,0.3); }
.hv-reel .reel-tag { position: absolute; left: 12px; bottom: 12px; z-index: 2; color: #fff; font-size: 11px; font-weight: 800; }
.hv-social { left: 4%; bottom: 0; width: 46%; padding: 14px; z-index: 4; display: flex; align-items: center; gap: 12px; animation: floatY 9s ease-in-out infinite; }
.hv-social .ig { width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; background: linear-gradient(135deg, #feda75, #d62976 45%, #962fbf 75%, #4f5bd5); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; }
.hv-social strong { display: block; font-family: var(--font-heading); font-size: 16px; color: var(--rd-ink); line-height: 1; }
.hv-social span { font-size: 11.5px; color: var(--rd-muted); font-weight: 700; }
.hv-chip { position: absolute; right: 6%; bottom: 20px; z-index: 5; display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 99px; background: #fff; color: var(--rd-ink); font-size: 12px; font-weight: 800; box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24); animation: floatY 6s ease-in-out infinite; }
.hv-chip i { color: var(--rd-orange); }
.trust { padding: 34px 0; background: var(--rd-ink); border-top: 1px solid rgba(255, 255, 255, 0.08); }
.trust-label { text-align: center; color: rgba(255, 255, 255, 0.5); font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; margin-bottom: 22px; }
.marquee { position: relative; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: 56px; width: max-content; animation: marquee 32s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item { display: inline-flex; align-items: center; gap: 12px; color: rgba(255, 255, 255, 0.72); font-family: var(--font-heading); font-size: 19px; font-weight: 700; white-space: nowrap; }
.marquee-item i { font-size: 22px; color: rgba(255, 255, 255, 0.85); }
.services { position: relative; padding: 104px 0 60px; background: radial-gradient(900px 420px at 8% 0%, rgba(255, 74, 28, 0.07), transparent 55%), radial-gradient(700px 380px at 92% 18%, rgba(39, 100, 230, 0.06), transparent 55%), linear-gradient(180deg, #fff 0%, var(--rd-soft) 100%); overflow: hidden; }
.services::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(14, 26, 36, 0.025) 0 1px, transparent 1px 72px), repeating-linear-gradient(0deg, rgba(14, 26, 36, 0.02) 0 1px, transparent 1px 72px); mask-image: linear-gradient(180deg, #000 0%, transparent 92%); pointer-events: none; }
.services .container { position: relative; z-index: 1; }
.services-intro { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center; margin-bottom: 36px; }
.services-intro .section-title { margin-bottom: 14px; }
.services-hub { position: relative; min-height: 400px; padding-bottom: 88px; border: 1px solid var(--rd-line); border-radius: var(--radius-lg); background: linear-gradient(145deg, #fff 0%, var(--rd-soft) 100%); box-shadow: var(--shadow-soft); overflow: hidden; }
.services-hub::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(255, 74, 28, 0.08), transparent 52%), repeating-linear-gradient(45deg, rgba(14, 26, 36, 0.02) 0 1px, transparent 1px 18px); }
.services-hub-orbit { position: absolute; top: 38%; left: 50%; width: 220px; height: 220px; margin: -110px 0 0 -110px; border: 1px dashed rgba(14, 26, 36, 0.14); border-radius: 50%; animation: hubSpin 48s linear infinite; }
.services-hub-core { position: absolute; top: 38%; left: 50%; transform: translate(-50%, -50%); z-index: 3; width: 92px; height: 92px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: linear-gradient(135deg, var(--rd-orange), var(--rd-orange-2)); color: #fff; box-shadow: 0 18px 40px rgba(255, 74, 28, 0.35); animation: hubPulse 4s ease-in-out infinite; }
.services-hub-core strong { font-family: var(--font-heading); font-size: 22px; line-height: 1; }
.services-hub-core span { font-size: 9px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; opacity: 0.9; }
.hub-node { position: absolute; top: 38%; left: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #fff; box-shadow: 0 12px 28px rgba(14, 26, 36, 0.22); transform: rotate(var(--angle)) translateY(-118px) rotate(calc(-1 * var(--angle))); transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 400ms ease; animation: hubNodeIn 700ms cubic-bezier(0.22, 1, 0.36, 1) backwards; animation-delay: var(--delay, 0ms); }
.hub-node:hover { transform: rotate(var(--angle)) translateY(-128px) rotate(calc(-1 * var(--angle))) scale(1.08); box-shadow: 0 18px 36px rgba(14, 26, 36, 0.28); }
.hub-node:nth-of-type(1) { --angle: 0deg;   --delay: 80ms;  background: var(--rd-orange); }
.hub-node:nth-of-type(2) { --angle: 60deg;  --delay: 140ms; background: var(--rd-blue); }
.hub-node:nth-of-type(3) { --angle: 120deg; --delay: 200ms; background: var(--rd-teal); }
.hub-node:nth-of-type(4) { --angle: 180deg; --delay: 260ms; background: var(--rd-green); }
.hub-node:nth-of-type(5) { --angle: 240deg; --delay: 320ms; background: var(--rd-orange); }
.hub-node:nth-of-type(6) { --angle: 300deg; --delay: 380ms; background: var(--rd-blue); }
.hub-preview { position: absolute; inset: auto 14px 14px 14px; z-index: 2; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.hub-thumb { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 2px solid #fff; box-shadow: 0 8px 20px rgba(14, 26, 36, 0.14); animation: hubThumbIn 600ms cubic-bezier(0.22, 1, 0.36, 1) backwards; }
.hub-thumb:nth-child(1) { animation-delay: 200ms; } .hub-thumb:nth-child(2) { animation-delay: 280ms; } .hub-thumb:nth-child(3) { animation-delay: 360ms; } .hub-thumb:nth-child(4) { animation-delay: 440ms; } .hub-thumb:nth-child(5) { animation-delay: 520ms; } .hub-thumb:nth-child(6) { animation-delay: 600ms; }
.hub-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; }
.hub-thumb:hover img { transform: scale(1.12); }
.hub-thumb i { position: absolute; inset: auto 5px 5px auto; width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.92); color: var(--rd-ink); font-size: 10px; }
.services-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin-bottom: 28px; }
.strip-card { position: relative; padding: 14px 12px; border: 1px solid var(--rd-line); border-radius: 12px; background: #fff; text-align: center; overflow: hidden; transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease; }
.strip-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 300ms ease; }
.strip-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 40%, white); box-shadow: 0 14px 30px color-mix(in srgb, var(--accent) 12%, transparent); }
.strip-card:hover::before { transform: scaleX(1); }
.strip-card i { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-bottom: 8px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 12%, white); color: var(--accent); font-size: 16px; }
.strip-card strong { display: block; font-family: var(--font-heading); font-size: 11.5px; color: var(--rd-ink); line-height: 1.3; }