/* =========================================================== RK MERCHANT SOLUTIONS — Design System "Beyond Payments. We Power Your Potential." Premium FinTech: institutional trust + cutting-edge AI =========================================================== */ /* ---------- Fonts ---------- */ /* Clash Display + Satoshi via Fontshare, IBM Plex Mono via Google (loaded in ) */ /* ---------- Tokens ---------- */ :root { /* Brand navy scale */ --navy-950: #07142a; --navy-900: #0a1a33; --navy-800: #0d2240; --navy-700: #12305c; --navy-600: #1a3d6e; --navy-500: #234c84; /* Steel / slate (tech accent) */ --steel-600: #2f4a63; --steel-500: #3e5c76; --steel-400: #5b7b9a; --steel-300: #8aa3bc; /* Signal accent (AI / tech glow) */ --cyan: #38c6e0; --cyan-bright: #5fe0f2; --cyan-deep: #1597b4; /* Metals & neutrals */ --silver: #c5cedb; --silver-2: #aab7c8; --mist: #e3e8ef; --gray-50: #f7f9fb; --gray-100: #f1f4f8; --gray-200: #e6ebf1; --gray-300: #d4dce5; --charcoal: #141a22; --ink: #0b0e13; /* Semantic */ --bg: #ffffff; --bg-soft: var(--gray-50); --text: #1a222e; --text-soft: #56657a; --text-faint: #8593a6; --line: #e6ebf1; --line-strong: #d4dce5; /* Gradients */ --grad-navy: linear-gradient(135deg, #0d2240 0%, #1a3d6e 100%); --grad-steel: linear-gradient(135deg, #1a3d6e 0%, #3e5c76 100%); --grad-deep: linear-gradient(160deg, #07142a 0%, #0d2240 45%, #12305c 100%); --grad-metal: linear-gradient(120deg, #c5cedb 0%, #eef2f7 22%, #ffffff 40%, #c8d2de 58%, #97a6b8 78%, #e3e8ef 100%); --grad-cyan: linear-gradient(135deg, #1597b4 0%, #38c6e0 50%, #5fe0f2 100%); /* Effects */ --shadow-sm: 0 1px 2px rgba(13, 34, 64, .06), 0 2px 8px rgba(13, 34, 64, .05); --shadow-md: 0 4px 14px rgba(13, 34, 64, .08), 0 12px 30px rgba(13, 34, 64, .07); --shadow-lg: 0 10px 30px rgba(10, 26, 51, .12), 0 30px 70px rgba(10, 26, 51, .14); --shadow-navy: 0 14px 40px rgba(13, 34, 64, .28); --glow-cyan: 0 0 0 1px rgba(56, 198, 224, .35), 0 8px 30px rgba(56, 198, 224, .28); --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 34px; --ease: cubic-bezier(.22, 1, .36, 1); --ease-in-out: cubic-bezier(.65, .05, .36, 1); --container: 1200px; --gutter: clamp(20px, 5vw, 56px); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } body { font-family: "Satoshi", system-ui, sans-serif; color: var(--text); background: var(--bg); line-height: 1.65; font-size: 1.0625rem; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; } ul { list-style: none; } ::selection { background: var(--navy-700); color: #fff; } /* ---------- Typography ---------- */ h1, h2, h3, h4 { font-family: "Clash Display", "Satoshi", sans-serif; font-weight: 600; line-height: 1.04; letter-spacing: -0.015em; color: var(--navy-900); } .display { font-size: clamp(2.7rem, 6.4vw, 5.1rem); font-weight: 600; letter-spacing: -0.03em; line-height: 0.98; } h2.section-title { font-size: clamp(2rem, 4.4vw, 3.3rem); letter-spacing: -0.025em; } h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); } p { color: var(--text-soft); } .lead { font-size: clamp(1.1rem, 1.6vw, 1.32rem); color: var(--text-soft); line-height: 1.6; } .eyebrow { font-family: "IBM Plex Mono", monospace; font-size: .72rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--cyan-deep); display: inline-flex; align-items: center; gap: .7em; } .eyebrow::before { content: ""; width: 28px; height: 1px; background: linear-gradient(90deg, var(--cyan), transparent); } .eyebrow.center::before { display: none; } .metal-text { background: var(--grad-metal); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .cyan-text { color: var(--cyan-deep); } /* ---------- Layout ---------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: clamp(72px, 11vw, 140px); position: relative; } .section.tight { padding-block: clamp(56px, 8vw, 96px); } .bg-soft { background: var(--bg-soft); } .bg-mist { background: linear-gradient(180deg, #fff 0%, var(--gray-100) 100%); } .center { text-align: center; } .mx-auto { margin-inline: auto; } .maxw-680 { max-width: 680px; } .maxw-760 { max-width: 760px; } .grid { display: grid; gap: clamp(20px, 2.4vw, 32px); } .cols-2 { grid-template-columns: repeat(2, 1fr); } .cols-3 { grid-template-columns: repeat(3, 1fr); } .cols-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 940px) { .cols-3, .cols-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; } } /* =========================================================== BUTTONS =========================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .6em; font-family: "Satoshi", sans-serif; font-weight: 700; font-size: .98rem; letter-spacing: -0.01em; padding: .95em 1.6em; border-radius: 100px; position: relative; overflow: hidden; isolation: isolate; transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), color .3s; white-space: nowrap; cursor: pointer; } .btn svg { width: 1.05em; height: 1.05em; transition: transform .35s var(--ease); } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn-primary { color: #fff; background: var(--grad-navy); box-shadow: var(--shadow-navy); } .btn-primary::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; background: linear-gradient(135deg, #12305c, #234c84); transition: opacity .35s var(--ease); } .btn-primary:hover::after { opacity: 1; } .btn-primary:hover { box-shadow: 0 18px 44px rgba(13,34,64,.34), var(--glow-cyan); } .btn-primary:hover svg { transform: translateX(3px); } /* sheen sweep */ .btn-primary::before { content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; z-index: 1; background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent); transform: skewX(-18deg); transition: left .7s var(--ease); } .btn-primary:hover::before { left: 160%; } .btn-cyan { color: var(--navy-900); background: var(--grad-cyan); box-shadow: 0 12px 30px rgba(56,198,224,.32); } .btn-cyan:hover { box-shadow: 0 18px 42px rgba(56,198,224,.42); } .btn-cyan:hover svg { transform: translateX(3px); } .btn-ghost { color: var(--navy-800); background: #fff; box-shadow: inset 0 0 0 1.5px var(--line-strong); } .btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--navy-600); background: var(--gray-50); } .btn-ghost-light { color: #fff; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.28); backdrop-filter: blur(6px); } .btn-ghost-light:hover { background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55); } .btn-lg { padding: 1.1em 2em; font-size: 1.05rem; } .btn-block { width: 100%; } .link-arrow { display: inline-flex; align-items: center; gap: .5em; font-weight: 700; color: var(--navy-700); transition: gap .3s var(--ease), color .3s; } .link-arrow svg { width: 1em; height: 1em; transition: transform .3s var(--ease); } .link-arrow:hover { color: var(--cyan-deep); gap: .8em; } .link-arrow:hover svg { transform: translateX(2px); } /* =========================================================== HEADER / NAV =========================================================== */ .site-header { position: fixed; top: 0; inset-inline: 0; z-index: 100; transition: background .4s var(--ease), box-shadow .4s var(--ease), backdrop-filter .4s, padding .4s var(--ease); padding-block: 16px; background: rgba(255,255,255,.78); backdrop-filter: saturate(180%) blur(16px); box-shadow: 0 1px 0 rgba(13,34,64,.05); } .site-header.scrolled { padding-block: 11px; background: rgba(255,255,255,.9); box-shadow: 0 1px 0 rgba(13,34,64,.07), 0 10px 34px rgba(13,34,64,.09); } .nav { display: flex; align-items: center; justify-content: space-between; gap: clamp(28px, 4vw, 64px); } .nav-links { margin-left: clamp(16px, 2vw, 40px); } .brand { display: flex; align-items: center; gap: 12px; } .brand img, .brand-mark { height: 40px; width: auto; } .brand-mark { filter: drop-shadow(0 2px 6px rgba(13,34,64,.16)); transition: transform .4s var(--ease); } .brand:hover .brand-mark { transform: rotate(-6deg) scale(1.05); } .brand-text { display: flex; align-items: center; line-height: 1; } .brand-text .bt-name { font-family: "Clash Display"; font-weight: 600; font-size: 1.18rem; color: var(--navy-900); letter-spacing: -0.01em; white-space: nowrap; } .brand-text .bt-sub { display: none; } @media (max-width: 1180px) { .brand-text { display: none; } } .nav-links { display: flex; align-items: center; gap: 4px; } .nav-links a { font-weight: 500; font-size: .96rem; color: var(--navy-800); padding: .55em .9em; border-radius: 100px; position: relative; transition: color .25s, background .25s; white-space: nowrap; } .nav-links a:hover { color: var(--navy-900); background: var(--gray-100); } .nav-links a.active { color: var(--cyan-deep); } .nav-links a.active::after { content: ""; position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); } .nav-cta { display: flex; align-items: center; gap: 10px; } .nav-toggle { display: none; width: 44px; height: 44px; border-radius: 12px; align-items: center; justify-content: center; } .nav-toggle span { width: 22px; height: 2px; background: var(--navy-800); position: relative; transition: .3s; } .nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: var(--navy-800); transition: .3s; } .nav-toggle span::before { top: -7px; } .nav-toggle span::after { top: 7px; } .nav-open .nav-toggle span { background: transparent; } .nav-open .nav-toggle span::before { top: 0; transform: rotate(45deg); } .nav-open .nav-toggle span::after { top: 0; transform: rotate(-45deg); } @media (max-width: 900px) { .nav-toggle { display: flex; } .nav-links, .nav-cta .btn-ghost { display: none; } .mobile-menu.show .nav-links { display: flex; } } .mobile-menu { position: fixed; inset: 0 0 0 auto; top: 0; width: min(86vw, 360px); height: 100dvh; z-index: 99; background: var(--grad-deep); color: #fff; transform: translateX(100%); transition: transform .5s var(--ease); padding: 100px 32px 32px; display: flex; flex-direction: column; gap: 6px; box-shadow: -20px 0 60px rgba(0,0,0,.3); } .nav-open .mobile-menu { transform: translateX(0); } .mobile-menu a { color: rgba(255,255,255,.86); font-family: "Clash Display"; font-size: 1.5rem; font-weight: 500; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.08); transition: color .25s, padding-left .25s; } .mobile-menu a:hover, .mobile-menu a.active { color: var(--cyan-bright); padding-left: 8px; } .mobile-menu .btn { margin-top: 20px; } .menu-overlay { position: fixed; inset: 0; background: rgba(7,20,42,.5); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: .4s; z-index: 98; } .nav-open .menu-overlay { opacity: 1; visibility: visible; } /* =========================================================== HERO (dark gradient mesh) =========================================================== */ .hero { position: relative; overflow: hidden; background: var(--grad-deep); color: #fff; padding-top: clamp(140px, 18vh, 200px); padding-bottom: clamp(80px, 12vw, 140px); isolation: isolate; } .hero::before { /* mesh blobs */ content: ""; position: absolute; inset: -20%; z-index: -2; background: radial-gradient(40% 50% at 78% 18%, rgba(56,198,224,.22), transparent 60%), radial-gradient(46% 55% at 12% 30%, rgba(35,76,132,.55), transparent 62%), radial-gradient(50% 60% at 60% 100%, rgba(26,61,110,.5), transparent 60%); animation: meshDrift 22s ease-in-out infinite alternate; } .hero::after { /* fine grid + grain */ content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 64px 64px, 64px 64px; -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 78%); mask-image: radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 78%); } @keyframes meshDrift { 0% { transform: translate3d(0,0,0) scale(1); } 100% { transform: translate3d(-3%, 2%, 0) scale(1.08); } } .hero h1, .hero h2, .hero h3 { color: #fff; } .hero .lead { color: rgba(226,234,243,.82); } .hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 5vw, 72px); align-items: center; } @media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; } } .hero-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; } .trust-chip { display: inline-flex; align-items: center; gap: .55em; font-family: "IBM Plex Mono", monospace; font-size: .74rem; letter-spacing: .04em; color: rgba(226,234,243,.92); padding: .5em .85em; border-radius: 100px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); backdrop-filter: blur(4px); } .trust-chip svg { width: 1.05em; height: 1.05em; color: var(--cyan-bright); } .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; } /* =========================================================== ANIMATED CIRCUIT-INFINITY (signature mark) =========================================================== */ .node-stage { position: relative; aspect-ratio: 1; width: 100%; max-width: 460px; margin-inline: auto; display: grid; place-items: center; } .node-ring { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(56,198,224,.12), transparent 65%); animation: pulseGlow 5s ease-in-out infinite; } @keyframes pulseGlow { 0%,100% { transform: scale(.92); opacity: .6; } 50% { transform: scale(1.05); opacity: 1; } } .node-stage svg.circuit { width: 78%; height: 78%; overflow: visible; } .circuit .trace { fill: none; stroke: url(#cyanGrad); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: draw 3s var(--ease) .3s forwards; } .circuit .trace.delay { animation-delay: .7s; } .circuit .glowdot { fill: var(--cyan-bright); filter: drop-shadow(0 0 6px var(--cyan)); } .circuit .glowdot.travel { animation: travelDot 4s linear infinite; } @keyframes draw { to { stroke-dashoffset: 0; } } .float-card { position: absolute; background: rgba(255,255,255,.07); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 18px 40px rgba(0,0,0,.3); border-radius: 14px; padding: 12px 16px; color: #fff; display: flex; align-items: center; gap: 10px; animation: floaty 6s ease-in-out infinite; } .float-card .fc-num { font-family: "Clash Display"; font-weight: 600; font-size: 1.3rem; } .float-card .fc-lbl { font-family: "IBM Plex Mono", monospace; font-size: .64rem; letter-spacing: .12em; color: rgba(226,234,243,.7); text-transform: uppercase; } .float-card.fc-1 { top: 6%; left: -4%; } .float-card.fc-2 { bottom: 10%; right: -6%; animation-delay: 1.5s; } .float-card .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan-bright); box-shadow: 0 0 10px var(--cyan); } @keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } /* =========================================================== STATS =========================================================== */ .stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); } @media (max-width: 760px) { .stats-row { grid-template-columns: repeat(2, 1fr); } } .stat { background: #fff; padding: 30px clamp(18px, 2.4vw, 34px); } .stat .num { font-family: "Clash Display"; font-weight: 600; font-size: clamp(2rem, 3.6vw, 3rem); color: var(--navy-800); letter-spacing: -0.02em; line-height: 1; } .stat .num .unit { color: var(--cyan-deep); } .stat .lbl { margin-top: 8px; font-size: .92rem; color: var(--text-soft); } /* =========================================================== CARDS =========================================================== */ .card { background: #fff; border-radius: var(--r-lg); padding: clamp(26px, 3vw, 38px); box-shadow: var(--shadow-sm); position: relative; overflow: hidden; transition: transform .45s var(--ease), box-shadow .45s var(--ease); border: 1px solid var(--line); } .card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--gray-300); } .card .card-ic { width: 56px; height: 56px; border-radius: 15px; display: grid; place-items: center; background: var(--grad-navy); color: #fff; margin-bottom: 22px; box-shadow: var(--shadow-navy); position: relative; } .card .card-ic svg { width: 26px; height: 26px; } .card:hover .card-ic::after { content:""; position:absolute; inset:0; border-radius:15px; box-shadow: var(--glow-cyan); opacity:0; animation: none; } .card h3 { margin-bottom: 10px; } .card p { font-size: .98rem; } .card .card-num { position: absolute; top: 22px; right: 26px; font-family: "IBM Plex Mono", monospace; font-size: .8rem; color: var(--text-faint); letter-spacing: .1em; } /* feature card with top accent line on hover */ .card.accent-top::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad-cyan); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); } .card.accent-top:hover::before { transform: scaleX(1); } /* glass card on dark */ .glass { background: rgba(255,255,255,.05); backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); border-radius: var(--r-lg); color: #fff; padding: clamp(24px, 3vw, 34px); } .glass h3, .glass h4 { color: #fff; } .glass p { color: rgba(226,234,243,.78); } /* =========================================================== SPLIT / FEATURE ROWS =========================================================== */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 84px); align-items: center; } .split.reverse > :first-child { order: 2; } @media (max-width: 880px) { .split { grid-template-columns: 1fr; } .split.reverse > :first-child { order: 0; } } .check-list li { display: flex; gap: 14px; padding: 12px 0; align-items: flex-start; border-bottom: 1px solid var(--line); } .check-list li:last-child { border-bottom: none; } .check-list .ci { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: rgba(56,198,224,.12); color: var(--cyan-deep); margin-top: 2px; } .check-list .ci svg { width: 15px; height: 15px; } .check-list strong { color: var(--navy-900); font-weight: 700; display: block; } .check-list span { color: var(--text-soft); font-size: .96rem; } /* media frame */ .frame { border-radius: var(--r-lg); overflow: hidden; position: relative; background: var(--grad-deep); box-shadow: var(--shadow-lg); padding: clamp(28px, 4vw, 48px); color: #fff; } .frame::before { content:""; position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 34px 34px; -webkit-mask-image: radial-gradient(120% 100% at 100% 0, #000, transparent 75%); mask-image: radial-gradient(120% 100% at 100% 0, #000, transparent 75%); } /* =========================================================== RATE / PRICING TRANSPARENCY TABLE =========================================================== */ .rate-card { background:#fff; border-radius: var(--r-lg); box-shadow: var(--shadow-md); border:1px solid var(--line); overflow:hidden; } .rate-head { background: var(--grad-deep); color:#fff; padding: 26px clamp(22px,3vw,34px); display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; } .rate-head h3 { color:#fff; } .rate-head .tag { font-family:"IBM Plex Mono",monospace; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--cyan-bright); } .rate-row { display:grid; grid-template-columns: 1.6fr 1fr 1fr; gap:16px; padding: 18px clamp(22px,3vw,34px); align-items:center; border-bottom:1px solid var(--line); font-size:.96rem; } .rate-row:last-child { border-bottom:none; } .rate-row.head { background: var(--gray-50); font-family:"IBM Plex Mono",monospace; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); } .rate-row .strike { color: var(--text-faint); text-decoration: line-through; } .rate-row .ours { font-family:"Clash Display"; font-weight:600; color: var(--cyan-deep); font-size:1.05rem; } .rate-row strong { color: var(--navy-900); } @media (max-width:560px){ .rate-row{ grid-template-columns: 1.4fr 1fr 1fr; font-size:.84rem;} } /* =========================================================== PROCESS / STEPS =========================================================== */ .steps { display:grid; gap: clamp(20px,2.4vw,28px); grid-template-columns: repeat(4,1fr); counter-reset: step; } @media (max-width:940px){ .steps{ grid-template-columns: repeat(2,1fr);} } @media (max-width:520px){ .steps{ grid-template-columns: 1fr;} } .step { position:relative; padding-top: 26px; } .step .sn { font-family:"Clash Display"; font-weight:600; font-size: 1rem; width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:#fff; color:var(--navy-700); box-shadow: var(--shadow-sm); border:1.5px solid var(--line-strong); margin-bottom:18px; position:relative; z-index:1; } .step h4 { font-size:1.18rem; margin-bottom:8px; } .step p { font-size:.96rem; } .steps.lined .step::before { content:""; position:absolute; top: 49px; left: 46px; right:-14px; height:1.5px; background: linear-gradient(90deg, var(--line-strong), transparent); } .steps.lined .step:last-child::before { display:none; } /* =========================================================== CTA BAND =========================================================== */ .cta-band { position:relative; overflow:hidden; background: var(--grad-deep); color:#fff; border-radius: var(--r-xl); padding: clamp(44px,6vw,80px); isolation:isolate; } .cta-band::before { content:""; position:absolute; inset:0; z-index:-1; background: radial-gradient(60% 90% at 85% 20%, rgba(56,198,224,.24), transparent 60%), radial-gradient(50% 80% at 5% 90%, rgba(35,76,132,.5), transparent 60%); } .cta-band::after { content:""; position:absolute; inset:0; z-index:-1; opacity:.5; background-image: linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px,transparent 1px); background-size:46px 46px; -webkit-mask-image: radial-gradient(100% 100% at 50% 0,#000,transparent 80%); mask-image: radial-gradient(100% 100% at 50% 0,#000,transparent 80%); } .cta-band h2 { color:#fff; } .cta-band p { color: rgba(226,234,243,.82); } /* =========================================================== FORMS =========================================================== */ .form-card { background:#fff; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); border:1px solid var(--line); padding: clamp(26px,3.4vw,44px); } .field { margin-bottom: 18px; } .field label { display:block; font-weight:700; font-size:.86rem; color:var(--navy-900); margin-bottom:7px; letter-spacing:-0.01em; } .field label .req { color: var(--cyan-deep); } .field input, .field select, .field textarea { width:100%; font:inherit; font-size:1rem; color:var(--text); padding: .85em 1em; border-radius: var(--r-sm); background: var(--gray-50); border:1.5px solid var(--line-strong); transition: border-color .25s, box-shadow .25s, background .25s; } .field textarea { min-height: 130px; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color: var(--cyan); background:#fff; box-shadow: 0 0 0 4px rgba(56,198,224,.14); } .field input::placeholder, .field textarea::placeholder { color: var(--text-faint); } .field-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; } @media (max-width:560px){ .field-row{ grid-template-columns:1fr; gap:0;} } .form-note { font-size:.82rem; color:var(--text-faint); margin-top:6px; display:flex; align-items:center; gap:8px; } .form-note svg { width:14px; height:14px; color:var(--cyan-deep); flex:none; } .form-success { display:none; text-align:center; padding: 30px 10px; } .form-success.show { display:block; } .form-success .fs-ic { width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin:0 auto 18px;background:var(--grad-cyan); color:var(--navy-900); } /* =========================================================== BADGES / TRUST STRIP =========================================================== */ .badge-strip { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap: clamp(20px,4vw,52px); } .badge { display:flex; align-items:center; gap:10px; color:var(--steel-500); font-weight:600; font-size:.92rem; opacity:.9; } .badge svg { width:26px; height:26px; color:var(--navy-600); } .pill { display:inline-flex; align-items:center; gap:.5em; font-family:"IBM Plex Mono",monospace; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--navy-700); background:var(--gray-100); padding:.5em 1em; border-radius:100px; box-shadow: inset 0 0 0 1px var(--line-strong); } .pill .dot{ width:7px;height:7px;border-radius:50%;background:var(--cyan); box-shadow:0 0 8px var(--cyan); } /* =========================================================== FOOTER =========================================================== */ .site-footer { background: var(--grad-deep); color:#fff; position:relative; overflow:hidden; padding-top: clamp(64px,8vw,96px); } .site-footer::before { content:""; position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px,transparent 1px); background-size:58px 58px; -webkit-mask-image: radial-gradient(120% 80% at 50% 0,#000,transparent 80%); mask-image: radial-gradient(120% 80% at 50% 0,#000,transparent 80%); } .footer-grid { display:grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: clamp(28px,4vw,48px); position:relative; } @media (max-width:880px){ .footer-grid{ grid-template-columns:1fr 1fr;} } @media (max-width:520px){ .footer-grid{ grid-template-columns:1fr;} } .footer-brand .fbrand { display:flex; align-items:center; gap:12px; margin-bottom:18px; } .footer-brand .fbrand img { height:46px; } .footer-brand .fb-name { font-family:"Clash Display"; font-weight:600; font-size:1.15rem; color:#fff; } .footer-brand .fb-sub { font-family:"IBM Plex Mono",monospace; font-size:.56rem; letter-spacing:.22em; color:var(--steel-300); text-transform:uppercase; } .footer-brand p { color: rgba(226,234,243,.7); font-size:.96rem; max-width:300px; } .footer-col h5 { font-family:"IBM Plex Mono",monospace; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--cyan-bright); margin-bottom:18px; font-weight:500; } .footer-col a { display:block; color: rgba(226,234,243,.72); padding:7px 0; font-size:.96rem; transition: color .25s, padding-left .25s; } .footer-col a:hover { color:#fff; padding-left:5px; } .footer-contact li { display:flex; gap:11px; align-items:flex-start; padding:7px 0; color: rgba(226,234,243,.78); font-size:.95rem; } .footer-contact svg { width:17px;height:17px;color:var(--cyan-bright); flex:none; margin-top:3px; } .footer-bottom { display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between; margin-top: clamp(40px,5vw,64px); padding: 26px 0; border-top:1px solid rgba(255,255,255,.1); position:relative; } .footer-bottom p { color: rgba(226,234,243,.6); font-size:.88rem; } .footer-bottom .socials { display:flex; gap:10px; } .footer-bottom .socials a { width:40px;height:40px;border-radius:11px; display:grid;place-items:center; background:rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); transition:.3s; } .footer-bottom .socials a:hover { background:var(--cyan); color:var(--navy-900); transform:translateY(-3px); } .footer-bottom .socials svg { width:18px;height:18px; } /* =========================================================== FLOATING AI WIDGET =========================================================== */ .ai-fab { position: fixed; right: clamp(16px,3vw,28px); bottom: clamp(16px,3vw,28px); z-index: 90; display:flex; align-items:center; gap:12px; } .ai-fab .ai-btn { display:flex; align-items:center; gap:11px; background: var(--grad-navy); color:#fff; padding: 14px 20px 14px 16px; border-radius:100px; box-shadow: var(--shadow-navy), var(--glow-cyan); font-weight:700; font-size:.95rem; transition: transform .35s var(--ease), box-shadow .35s; } .ai-fab .ai-btn:hover { transform: translateY(-3px) scale(1.02); } .ai-fab .ai-orb { position:relative; width:34px;height:34px;border-radius:50%; display:grid;place-items:center; background: var(--grad-cyan); color:var(--navy-900); flex:none; } .ai-fab .ai-orb::after { content:""; position:absolute; inset:-5px; border-radius:50%; box-shadow:0 0 0 2px rgba(56,198,224,.4); animation: ripple 2.4s ease-out infinite; } @keyframes ripple { 0%{ transform:scale(.85); opacity:.9;} 100%{ transform:scale(1.5); opacity:0;} } .ai-fab .ai-txt { display:flex; flex-direction:column; line-height:1.1; text-align:left; } .ai-fab .ai-txt small { font-family:"IBM Plex Mono",monospace; font-size:.58rem; letter-spacing:.12em; color: var(--cyan-bright); text-transform:uppercase; } @media (max-width:560px){ .ai-fab .ai-txt{ display:none; } .ai-fab .ai-btn{ padding:14px; } } /* =========================================================== REVEAL ANIMATIONS =========================================================== */ .reveal { opacity:0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); } .reveal.in { opacity:1; transform:none; } .reveal.d1 { transition-delay:.08s; } .reveal.d2 { transition-delay:.16s; } .reveal.d3 { transition-delay:.24s; } .reveal.d4 { transition-delay:.32s; } .reveal.d5 { transition-delay:.4s; } /* page-load hero stagger */ .hero .stagger > * { opacity:0; transform: translateY(20px); animation: rise .9s var(--ease) forwards; } .hero .stagger > *:nth-child(1){ animation-delay:.1s;} .hero .stagger > *:nth-child(2){ animation-delay:.22s;} .hero .stagger > *:nth-child(3){ animation-delay:.34s;} .hero .stagger > *:nth-child(4){ animation-delay:.46s;} .hero .stagger > *:nth-child(5){ animation-delay:.58s;} .hero .stagger > *:nth-child(6){ animation-delay:.7s;} @keyframes rise { to { opacity:1; transform:none; } } /* ---------- Page hero (interior) ---------- */ .page-hero { background: var(--grad-deep); color:#fff; position:relative; overflow:hidden; padding-top: clamp(140px,17vh,180px); padding-bottom: clamp(56px,8vw,88px); isolation:isolate; } .page-hero::before { content:""; position:absolute; inset:0; z-index:-1; background: radial-gradient(50% 70% at 80% 10%, rgba(56,198,224,.18), transparent 60%), radial-gradient(40% 60% at 0% 60%, rgba(35,76,132,.45), transparent 60%); } .page-hero::after { content:""; position:absolute; inset:0; z-index:-1; opacity:.6; background-image: linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px,transparent 1px); background-size:60px 60px; -webkit-mask-image: radial-gradient(120% 90% at 50% 0,#000 40%,transparent 80%); mask-image: radial-gradient(120% 90% at 50% 0,#000 40%,transparent 80%); } .page-hero h1 { color:#fff; } .page-hero .lead { color: rgba(226,234,243,.82); } .breadcrumb { font-family:"IBM Plex Mono",monospace; font-size:.74rem; letter-spacing:.1em; color: var(--steel-300); margin-bottom:22px; } .breadcrumb a:hover { color: var(--cyan-bright); } .breadcrumb .sep { margin:0 .6em; opacity:.5; } /* =========================================================== MOTION ENHANCEMENTS (site-wide) =========================================================== */ /* scroll progress bar */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: var(--grad-cyan); z-index: 200; will-change: transform; box-shadow: 0 0 14px rgba(56,198,224,.65); } /* continuous metallic shimmer */ .metal-text { animation: shimmer 7s linear infinite; } @keyframes shimmer { 0% { background-position: 0% center; } 100% { background-position: -200% center; } } /* ambient floating particles (injected into dark sections) */ .particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; } .particle { position: absolute; bottom: -12px; border-radius: 50%; background: radial-gradient(circle, var(--cyan-bright), rgba(95,224,242,0) 70%); opacity: 0; animation: drift linear infinite; will-change: transform, opacity; } @keyframes drift { 0% { transform: translateY(0) translateX(0) scale(.6); opacity: 0; } 12% { opacity: .55; } 85% { opacity: .4; } 100% { transform: translateY(-130px) translateX(22px) scale(1); opacity: 0; } } /* keep section content above particle layer */ .hero > .container, .page-hero > .container, .site-footer > .container { position: relative; z-index: 2; } .cta-band > * { position: relative; z-index: 2; } .cta-band > .particles { z-index: 1; } /* aurora drift on CTA bands */ .cta-band::before { animation: auroraShift 18s ease-in-out infinite alternate; } @keyframes auroraShift { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(4%,-3%) scale(1.12); } } /* slow-rotating glow ring behind hero node mark */ .node-ring::after { content: ""; position: absolute; inset: 8%; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 60%, rgba(56,198,224,.22) 75%, transparent 100%); animation: spin 14s linear infinite; -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%); mask: radial-gradient(circle, transparent 58%, #000 60%); } @keyframes spin { to { transform: rotate(360deg); } } /* cursor spotlight on cards */ .card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .45s var(--ease); background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(56,198,224,.12), transparent 42%); } .card:hover::after { opacity: 1; } .card { transform-style: preserve-3d; will-change: transform; } .card .card-ic, .card h3, .card p { transform: translateZ(0); } .card:hover .card-ic { animation: iconPop .5s var(--ease); } @keyframes iconPop { 0%{ transform: translateY(0) rotate(0); } 40%{ transform: translateY(-4px) rotate(-4deg); } 100%{ transform: translateY(0) rotate(0); } } /* magnetic buttons keep a smooth return */ .btn[data-magnetic] { transition: transform .25s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease); } /* pulsing active nav dot */ .nav-links a.active::after { animation: dotPulse 2.2s ease-in-out infinite; } @keyframes dotPulse { 0%,100%{ box-shadow: 0 0 0 0 rgba(56,198,224,.5);} 50%{ box-shadow: 0 0 0 5px rgba(56,198,224,0);} } /* animated gradient underline under nav links on hover */ .nav-links a::before { content:""; position:absolute; left:14px; right:14px; bottom:6px; height:2px; border-radius:2px; background: var(--grad-cyan); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); opacity:.0; } .nav-links a:hover::before { transform: scaleX(1); opacity:.9; } .nav-links a.active::before { display:none; } /* reveal direction variants (opt-in) */ .reveal.from-left { transform: translateX(-42px); } .reveal.from-right { transform: translateX(42px); } .reveal.zoom { transform: scale(.93); } .reveal.from-left.in, .reveal.from-right.in, .reveal.zoom.in { transform: none; } /* float cards parallax hint */ .float-card { will-change: transform; } @media (prefers-reduced-motion: reduce) { .particles, .node-ring::after { display: none !important; } .metal-text { animation: none !important; } } /* small helpers */ .mt-s{margin-top:14px}.mt-m{margin-top:26px}.mt-l{margin-top:44px} .mb-l{margin-bottom:44px}.mb-m{margin-bottom:26px} .tcenter{text-align:center} .section-head{max-width:680px} .section-head.center{margin-inline:auto; text-align:center;}