/* Homepage presentation; shared merchant and admin styles stay independent. */
:root { --bg-main: #fff; --text-main: #172b3a; --text-muted: #596975; --text-light: #657783; --border-color: #e2e8eb; --radius-lg: 18px; --shadow-premium: 0 8px 30px rgba(23,43,58,.04); }
html { scroll-padding-top: 100px; }
body { background: #fff; }
.mesh-bg, .poly-accents { display: none; }
.header, .header.scrolled { height: 80px; background: rgba(255,255,255,.97); box-shadow: none; }
.container, .nav-container { max-width: 1240px; }
.nav-menu { gap: 1.5rem; }
.nav-link { font-size: .88rem; white-space: nowrap; }
.nav-actions .system-status-badge { display: none; }
.logo { text-transform: none; letter-spacing: -.7px; }
.btn, .btn-pill { border-radius: 8px; font-weight: 600; }
.btn-primary { background: var(--primary); box-shadow: 0 4px 10px rgba(23,43,58,.08); }
.hero-actions .btn { box-shadow: none !important; padding: .95rem 1.2rem; }
.hero-section { padding: 145px 0 0; background: linear-gradient(115deg,#f4f8f7,#f9fafb 65%,#edf3f3); border-bottom: 1px solid var(--border-color); }
.hero-grid { grid-template-columns: 1fr 1fr; gap: 4rem; padding-bottom: 64px; }
.hero-badge { background: transparent; border: 0; padding: 0; color: var(--text-muted); font-size: .72rem; letter-spacing: 2px; margin-bottom: 20px; }
.hero-badge i { color: var(--primary); }
.hero-title { font-size: clamp(2.6rem,4.2vw,3.65rem); line-height: 1.09; font-weight: 600; letter-spacing: -2px; }
.gradient-text, .hero-title span { background: none; color: var(--primary); -webkit-text-fill-color: currentColor; }
.hero-description { font-size: 1.05rem; line-height: 1.8; max-width: 465px; margin-bottom: 28px; }
.hero-actions { gap: 12px; flex-wrap: wrap; margin-bottom: 0; }
.hero-content, .hero-illustration { animation: none; }
.payment-preview { width: 100%; background: #fff; border: 1px solid #dce5e5; border-radius: 16px; box-shadow: 0 24px 65px -28px rgba(29,62,68,.32); overflow: hidden; text-align: left; }
.preview-top { padding: 17px 24px; border-bottom: 1px solid #e9eeef; display: flex; justify-content: space-between; align-items: center; font-size: .85rem; font-weight: 600; }
.preview-top i { color: var(--primary); margin-right: 8px; }
.preview-demo { font-size: .58rem; letter-spacing: 1px; color: #63777b; background: #eff4f3; padding: 4px 7px; border-radius: 4px; }
.preview-body { padding: 25px; }
.preview-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.preview-heading p { font-size: .57rem; letter-spacing: 1.3px; color: #687b83; margin-bottom: 5px; }
.preview-heading h2 { font-size: 1.2rem; font-weight: 600; }
.preview-heading > span { border: 1px solid #e2e8eb; padding: 5px 9px; border-radius: 5px; font-size: .65rem; color: #60717c; }
.preview-balance { margin-top: 24px; color: #65747c; font-size: .75rem; }
.preview-balance strong { display: block; color: #183840; font-size: 2.25rem; font-weight: 600; letter-spacing: -1px; line-height: 1.5; }
.preview-balance strong small { font-size: 1rem; letter-spacing: 0; }
.preview-balance strong span { color: #8a9b9f; }
.preview-balance p { color: #24715c; font-size: .68rem; }
.preview-chart { height: 112px; display: flex; gap: 12px; align-items: end; margin-top: 20px; border-bottom: 1px solid #dce5e5; background: repeating-linear-gradient(to top,transparent 0,transparent 35px,#f0f3f4 36px,#f0f3f4 37px); }
.preview-chart span { flex: 1; height: var(--bar); background: #bfd8ce; border-radius: 4px 4px 0 0; }
.preview-chart span:nth-last-child(-n+3) { background: #367861; }
.preview-chart-labels { display: flex; justify-content: space-between; font-size: .58rem; color: #6b7c85; padding-top: 8px; }
.preview-recent { display: flex; justify-content: space-between; font-size: .8rem; font-weight: 600; margin: 24px 0 5px; }
.preview-recent span { font-size: .65rem; font-weight: 400; color: #74838a; }
.preview-payment { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid #edf0f2; }
.preview-payment > i { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 8px; background: #edf5f2; color: #377762; font-size: .8rem; }
.preview-payment strong { display: block; font-size: .72rem; font-weight: 500; }
.preview-payment small { display: block; font-size: .63rem; color: #78878e; margin-top: 2px; }
.preview-amount { margin-left: auto; text-align: right; }
.preview-amount small { color: #287659; }
.preview-bottom { background: #f6f9f8; text-align: center; padding: 13px; color: #5d7771; font-size: .66rem; }
.preview-bottom i { margin-right: 6px; }
.trust-bar { margin-top: 0; padding: 26px 0 30px; border-top: 1px solid #dce5e5; }
.trust-label { font-size: .65rem; letter-spacing: 1.7px; color: #697c83; }
.trust-badges { gap: 26px; }
.trust-badge-item { background: none; border: 0; box-shadow: none; padding: 5px 0; font-size: .85rem; }
.discover-section, .products-section, .spotlight-section, .pricing-section, .faq-section { padding-top: 80px; padding-bottom: 80px; }
.section-title, .discover-text h2, .spotlight-text h2 { font-weight: 600; letter-spacing: -1px; }
.section-badge { border-radius: 5px; font-size: .68rem; letter-spacing: 1px; }
.products-section, .pricing-section { background: #f6f8f8; }
.glass-card, .product-card, .pricing-card, .faq-item { background: #fff; border-color: #e2e8eb; box-shadow: 0 4px 18px rgba(23,43,58,.03); }
.glass-card:hover, .product-card:hover, .pricing-card:hover { transform: translateY(-3px); }
.pricing-card.popular { box-shadow: 0 12px 35px rgba(23,43,58,.08); }
.footer { background: #f5f7f7; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--primary); outline-offset: 4px; }
@media (min-width: 769px) and (max-width: 1100px) { .nav-menu { gap: .75rem; } .nav-container { padding: 0 20px; } .nav-actions .btn { padding: .5rem .7rem; } .logo-img { max-width: 145px; object-fit: contain; } }
@media (max-width: 991px) { .hero-grid { grid-template-columns: 1fr; gap: 36px; } .hero-content { max-width: 640px; margin: auto; } .hero-description { margin: 0 auto 25px; } .payment-preview { max-width: 530px; } .hero-title { font-size: 3.4rem; } }
@media (max-width: 768px) { .hero-section { padding-top: 120px; } .hero-title { font-size: 2.75rem; letter-spacing: -1.4px; } .hero-grid { padding-bottom: 35px; } .hero-description { font-size: 1rem; } .hero-actions { flex-direction: column; } .hero-actions .btn { width: 100%; } .preview-body { padding: 18px; } .preview-top { padding: 15px 18px; } .preview-chart { gap: 8px; } .trust-badges { gap: 12px 22px; } .discover-section, .products-section, .spotlight-section, .pricing-section, .faq-section { padding-top: 55px; padding-bottom: 55px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
/* Full-page visual refresh */
.header,.header.scrolled { border-bottom:1px solid #e9ebf2; backdrop-filter:blur(18px); background:rgba(255,255,255,.94); }
.logo-img { max-width:170px; object-fit:contain; }
.btn,.btn-pill { border-radius:12px !important; }
.hero-section { background:radial-gradient(ellipse at 83% 26%,#eae6ff 0,transparent 48%),linear-gradient(135deg,#fafbff,#f3f5fc); padding-top:155px; overflow:hidden; }
.hero-grid { gap:64px; padding-bottom:72px; }
.hero-badge { background:#fff; border:1px solid #e3e3f2; border-radius:100px; padding:9px 14px; letter-spacing:1.3px; color:var(--primary); }
.hero-title { font-size:clamp(2.8rem,4.8vw,4.25rem); font-weight:600; letter-spacing:-2.7px; line-height:1.07; }
.hero-description { margin-top:24px; line-height:1.75; }
.payment-preview { border-radius:20px; border-color:#dddfee; box-shadow:0 28px 70px -30px #45417555; transform:rotate(-2deg); }
.preview-top { background:#fafaff; }
.preview-balance strong { color:#24273e; }
.preview-chart span { background:#dcd8f8; }
.preview-chart span:nth-last-child(-n+3) { background:var(--primary); }
.preview-payment > i { background:#eeecfc; color:var(--primary); }
.preview-bottom { background:#f6f5fc; }
.trust-bar { border-color:#e0e2ee; padding:28px 0; }
.trust-label { font-size:.63rem; }
.trust-badge-item { font-weight:500; }
.section-header { max-width:700px; margin-left:auto; margin-right:auto; }
.section-title,.discover-text h2,.spotlight-text h2 { font-size:clamp(2rem,3.3vw,2.9rem); line-height:1.16; letter-spacing:-1.5px; }
.section-badge { background:#eeecfc; color:var(--primary); border:0; padding:7px 12px; border-radius:7px; text-transform:uppercase; font-weight:600; }
.section-desc { font-size:1.02rem; line-height:1.75; }
.discover-section,.products-section,.spotlight-section,.simulator-section,.pricing-section,.faq-section { padding:96px 0; }
.discover-grid { gap:72px; }
.discover-text p { font-size:1rem; margin-bottom:20px; }
.hub-container { background:radial-gradient(ellipse,#eeecfc,transparent 70%); }
.hub-center-phone { border-color:#e0ddef; box-shadow:0 20px 50px -25px #51477b66; }
.hub-node { border-radius:14px; box-shadow:0 8px 24px #26204509; }
.products-section { background:#f7f8fc; border-block:1px solid #eceef5; }
.product-card { border-radius:18px; box-shadow:none; }
.product-img-box { background:linear-gradient(145deg,#f0edfb,#f6f7fc); height:215px; }
.product-content { padding:26px; }
.product-content h3 { font-size:1.2rem; font-weight:600; }
.product-content p { line-height:1.75; }
.spotlight-grid { gap:72px; }
.spotlight-subtitle { font-size:1rem; line-height:1.8; }
.spotlight-features li { font-weight:500; }
.simulator-section { background:#f7f8fc; border-block:1px solid #eceef5; }
.glass-card { border-radius:18px; box-shadow:0 8px 28px #20284606; }
#developers { padding:96px 24px !important; }
.pricing-section { background:#f7f8fc; }
.pricing-grid { align-items:stretch; gap:24px; }
.pricing-card { border-radius:18px; padding:32px 26px; display:flex; flex-direction:column; box-shadow:none; }
.pricing-card.popular { border:2px solid var(--primary); transform:none; box-shadow:0 16px 40px #48407812; }
.pricing-card .plan-features { flex:1; }
.plan-name { font-weight:600; }
.plan-desc { min-height:48px; }
.price-val { letter-spacing:-2px; }
.ready-banner-section { padding:80px 0 0; }
.ready-banner { border-radius:24px; background:radial-gradient(ellipse at 100% 0,#44456e,transparent 70%),#171d33; box-shadow:none; padding:56px 64px; }
.ready-text h2 { font-size:clamp(2.2rem,4vw,3.6rem); font-weight:600; letter-spacing:-1.5px; }
.ready-text p { font-size:1rem; color:#cdd2e5; }
.ready-phone-frame { transform:rotate(7deg); box-shadow:0 20px 45px #0004; }
.faq-container { max-width:840px; }
.faq-item { border-radius:12px; margin-bottom:12px; box-shadow:none; }
.faq-header { width:100%; border:0; background:transparent; text-align:left; font-family:inherit; font-weight:500; gap:20px; }
.faq-item.active { background:#f9f8ff; border-color:#d9d3f1; box-shadow:none; }
.footer { background:#f7f8fc; border-top:1px solid #e5e8f0; padding-top:64px; }
.footer-title { font-size:.85rem; letter-spacing:.4px; }
.footer-desc,.footer-link { font-size:.9rem; line-height:1.8; }
.footer-bottom { font-size:.75rem; }
.skip-link { position:fixed; top:-80px; left:20px; z-index:10000; background:#fff; color:var(--primary); padding:12px 20px; border-radius:8px; }
.skip-link:focus { top:12px; }
@media(max-width:1100px) and (min-width:769px) { .nav-menu { gap:10px; } .nav-link { font-size:.76rem; } .logo-img { max-width:120px; } .nav-actions .btn { font-size:.75rem; padding:9px; } }
@media(max-width:992px) { .hero-grid,.discover-grid,.spotlight-grid { gap:40px; } .payment-preview { transform:none; } .hero-title { font-size:3.5rem; } .ready-banner { padding:40px; } }
@media(max-width:768px) { .container { padding-left:22px; padding-right:22px; } .hero-section { padding-top:120px; } .hero-title { font-size:2.85rem; letter-spacing:-1.6px; } .hero-grid { padding-bottom:40px; } .discover-section,.products-section,.spotlight-section,.simulator-section,.pricing-section,.faq-section { padding:60px 0; } .section-title,.discover-text h2,.spotlight-text h2 { letter-spacing:-1px; } #developers { padding:60px 22px !important; } .ready-banner { padding:36px 24px; } .ready-phone-frame { transform:none; } .ready-banner-section { padding-top:50px; } .pricing-card { padding:28px 22px; } .faq-header { padding:20px; font-size:.95rem; } .faq-body { padding:0 20px 20px; } .footer-grid { gap:32px; } .floating-contact-btn { width:46px; height:46px; right:16px; bottom:16px; } }
@media(max-width:380px) { .hero-title { font-size:2.5rem; } .hub-node { width:94px; padding:12px 6px; } .hub-center-phone { width:170px; } .preview-top { gap:8px; } }
@media(max-width:768px) { .api-tabs { flex-wrap:wrap; width:100%; gap:6px; } .api-tab-btn { flex:1 1 40%; justify-content:center; } .carousel-dots { display:none; } }
/* Expanded business stories and product detail sections. */
.business-stories,.detail-section,.operations-section,.onboarding-section { padding:88px 0; }
.business-stories .section-header { max-width:780px; }
.merchant-story-image { margin:40px 0 0; position:relative; border-radius:24px; overflow:hidden; background:#e6e9ed; }
.merchant-story-image > img { display:block; width:100%; height:440px; object-fit:cover; }
.merchant-story-image::after { content:''; position:absolute; inset:30% 0 0; background:linear-gradient(transparent,rgba(14,24,38,.77)); pointer-events:none; }
.merchant-story-image figcaption { position:absolute; bottom:32px; left:36px; right:36px; z-index:1; color:#fff; }
.merchant-story-image figcaption span { display:block; font-size:.7rem; font-weight:600; letter-spacing:1.7px; margin-bottom:8px; }
.merchant-story-image figcaption strong { display:block; font-weight:500; font-size:2rem; letter-spacing:-.8px; }
.merchant-story-image figcaption small { display:block; margin-top:9px; color:#e1e7ed; font-size:.68rem; }
.business-usecases { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; margin-top:36px; }
.business-usecases article { padding:8px 0 0; }
.usecase-icon { display:grid; place-items:center; width:42px; height:42px; border-radius:12px; background:#eef2fe; color:var(--primary); margin-bottom:18px; }
.business-usecases h3,.operations-features h3 { font-size:1.12rem; font-weight:600; margin-bottom:9px; }
.business-usecases p,.operations-features p,.onboarding-grid p { color:var(--text-muted); font-size:.94rem; line-height:1.8; }
.business-usecases a { display:inline-flex; gap:10px; align-items:center; font-size:.88rem; color:var(--primary); font-weight:600; margin-top:18px; }
.detail-section,.onboarding-section { background:#f7f8fc; border-block:1px solid #e9ecf3; }
.detail-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:80px; align-items:center; }
.detail-image { margin:0; background:#f1f4fb; border:1px solid #e7eaf1; border-radius:24px; overflow:hidden; }
.detail-image img { display:block; width:100%; height:auto; }
.detail-image figcaption { text-align:center; padding:12px 16px; font-size:.7rem; color:#596975; background:#fff; }
.detail-copy h2 { font-size:clamp(2rem,3.3vw,2.9rem); font-weight:600; line-height:1.18; letter-spacing:-1.4px; margin:18px 0; }
.detail-copy > p { color:var(--text-muted); font-size:1rem; line-height:1.85; }
.detail-steps { list-style:none; padding:0; display:grid; gap:22px; margin:28px 0; }
.detail-steps li { display:flex; align-items:flex-start; gap:16px; }
.detail-steps li > span { flex-shrink:0; width:34px; height:34px; border:1px solid #dce2f0; border-radius:50%; display:grid; place-items:center; font-size:.72rem; color:var(--primary); background:#fff; }
.detail-steps h3 { font-size:1rem; font-weight:600; margin:1px 0 5px; }
.detail-steps p { color:var(--text-muted); font-size:.9rem; line-height:1.7; }
.operations-features { display:grid; gap:24px; margin:30px 0; }
.operations-features article { display:flex; gap:16px; }
.operations-features article > i { color:var(--primary); margin-top:6px; width:22px; flex-shrink:0; }
.onboarding-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.onboarding-grid article { background:#fff; border:1px solid #e4e8f0; border-radius:18px; padding:30px; }
.onboarding-grid article > span { color:var(--primary); font-size:.68rem; font-weight:600; letter-spacing:1.4px; }
.onboarding-grid h3 { font-size:1.3rem; font-weight:600; margin:20px 0 12px; line-height:1.4; }
.setup-note { display:flex; align-items:center; gap:12px; padding:24px 0 0; color:var(--text-muted); font-size:.85rem; }
.setup-note > i { color:var(--primary); }
.setup-note a { margin-left:auto; white-space:nowrap; color:var(--primary); font-weight:600; }
@media(max-width:992px) { .detail-grid { gap:36px; } .business-usecases { gap:24px; } .onboarding-grid article { padding:24px; } }
@media(max-width:768px) { .business-stories,.detail-section,.operations-section,.onboarding-section { padding:56px 0; } .business-usecases,.onboarding-grid,.detail-grid { grid-template-columns:1fr; } .merchant-story-image { margin-top:28px; border-radius:18px; } .merchant-story-image > img { height:340px; object-position:42% center; } .merchant-story-image figcaption { left:22px; right:22px; bottom:22px; } .merchant-story-image figcaption strong { font-size:1.6rem; } .business-usecases { gap:28px; } .business-usecases article + article { padding-top:26px; border-top:1px solid #e5e8f0; } .detail-image { max-width:480px; width:100%; justify-self:center; } .detail-copy h2 { letter-spacing:-1px; } .detail-copy .btn { width:100%; justify-content:center; } .operations-section .detail-image { order:-1; } .setup-note { align-items:flex-start; flex-wrap:wrap; } .setup-note p { flex:1; } .setup-note a { margin-left:28px; } }
/* Animated payment ecosystem: retain crisp, accessible HTML labels. */
.animated-hub { isolation:isolate; min-height:420px; margin-bottom:38px; }
.animated-hub .hub-center-phone { background:linear-gradient(150deg,#fff 40%,#f0f5ff); animation:hub-phone-float 6s ease-in-out infinite; }
.animated-hub .hub-center-phone > div:nth-child(2) { filter:drop-shadow(0 6px 9px #367dff30); }
.animated-hub .hub-node { animation:hub-card-float 5s ease-in-out infinite; }
.animated-hub .hub-node:nth-child(2) { animation-delay:-1.3s; }
.animated-hub .hub-node:nth-child(3) { animation-delay:-2.6s; }
.animated-hub .hub-node:nth-child(4) { animation-delay:-.7s; }
.animated-hub .hub-node:nth-child(5) { animation-delay:-3.4s; }
.animated-hub .hub-node:nth-child(6) { animation-delay:-2s; }
.animated-hub .hub-svg-connectors line { stroke:var(--primary); opacity:.38; stroke-dasharray:5 7; animation:hub-connection-flow 3s linear infinite; }
.hub-orbit { position:absolute; width:350px; height:350px; border:1px solid #377dff17; border-radius:50%; z-index:0; pointer-events:none; animation:hub-orbit-turn 28s linear infinite; }
.hub-orbit::before { content:''; position:absolute; top:35px; left:60px; width:8px; height:8px; border-radius:50%; background:var(--primary); box-shadow:0 0 0 5px #377dff10; opacity:.55; }
.hub-orbit-two { width:410px; height:410px; animation-duration:36s; animation-direction:reverse; }
.hub-orbit-two::before { width:5px; height:5px; top:49px; left:60px; }
.hub-motion-toggle { position:absolute; bottom:-38px; left:50%; transform:translateX(-50%); background:#fff; border:1px solid #dfe5ee; color:#596975; border-radius:999px; padding:7px 13px; font:inherit; font-size:.7rem; cursor:pointer; white-space:nowrap; }
.animated-hub.motion-paused *, .animated-hub.motion-paused *::before { animation-play-state:paused !important; }
@keyframes hub-card-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-9px); } }
@keyframes hub-phone-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(6px); } }
@keyframes hub-connection-flow { to { stroke-dashoffset:-48; } }
@keyframes hub-orbit-turn { to { transform:rotate(360deg); } }
@media(max-width:768px) { .animated-hub { min-height:390px; } .hub-orbit { width:280px; height:280px; } .hub-orbit-two { width:330px; height:330px; } .animated-hub .hub-center-phone { width:180px; height:290px; } .animated-hub .hub-node { width:105px; } .animated-hub .node-top-left,.animated-hub .node-bottom-left { left:0; } .animated-hub .node-top-right,.animated-hub .node-bottom-right { right:0; } .animated-hub .node-mid-left { left:-8px; } .animated-hub .node-mid-right { right:-8px; } }
@media(prefers-reduced-motion:reduce) { .animated-hub *, .animated-hub *::before { animation:none !important; } .hub-motion-toggle { display:none; } }
/* Unified solutions carousel. */
.solutions-section { padding:90px 0; background:#f7f9fd; }
.solutions-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:34px; }
.solutions-heading h2 { font-size:clamp(2rem,3.2vw,2.8rem); line-height:1.18; letter-spacing:-1.3px; font-weight:600; margin-top:16px; }
.solutions-heading h2 span { color:var(--primary); }
.solutions-heading > p { max-width:320px; color:var(--text-muted); font-size:.95rem; line-height:1.8; }
.solutions-shell { background:white; border:1px solid #e1e7f1; border-radius:24px; overflow:hidden; box-shadow:0 20px 60px -35px #203b7138; }
.solutions-toolbar { padding:22px 30px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #e8edf5; }
.solutions-tabs { display:flex; gap:6px; padding:5px; background:#f0f3f9; border-radius:12px; }
.solutions-tabs button { font:inherit; font-size:.88rem; font-weight:500; border:0; background:transparent; color:#66758b; padding:11px 20px; border-radius:9px; cursor:pointer; }
.solutions-tabs button[aria-selected=true] { color:var(--primary); background:white; box-shadow:0 3px 9px #203b7110; }
.solutions-count { font-size:.75rem; letter-spacing:2px; color:#7a879a; }
.solutions-slide[hidden] { display:none !important; }
.solutions-slide { animation:solution-reveal .45s ease both; }
.solutions-slide .spotlight-grid { gap:0; grid-template-columns:.9fr 1.1fr; min-height:490px; align-items:stretch; }
.solutions-slide .spotlight-visual-box { margin:26px; padding:18px; background:radial-gradient(ellipse at 45% 35%,#e0e9ff,#f0edff 65%,#f6f8fc); border-radius:18px; overflow:hidden; }
.solutions-slide .spotlight-visual-box svg { filter:drop-shadow(0 20px 15px #586aaa15); animation:solution-art-float 7s ease-in-out infinite; }
.solutions-slide .spotlight-text { padding:42px 40px 36px 22px; align-self:center; }
.solution-eyebrow { display:block; color:var(--primary); font-size:.67rem; letter-spacing:2px; font-weight:600; margin-bottom:18px; }
.solutions-slide .spotlight-text h2 { font-size:clamp(1.9rem,2.7vw,2.55rem); }
.solutions-slide .spotlight-subtitle { font-size:.94rem; margin-bottom:22px; }
.solutions-slide .spotlight-features { gap:12px; }
.solutions-slide .spotlight-features li { align-items:flex-start; font-size:.85rem; line-height:1.6; }
.solutions-slide .spotlight-features i { margin-top:4px; color:var(--primary); }
.solutions-bottom { border-top:1px solid #e8edf5; padding:18px 30px; display:flex; justify-content:space-between; align-items:center; gap:18px; }
.solutions-caption { font-size:.8rem; color:#78869a; }
.solutions-controls { display:flex; gap:9px; align-items:center; }
.solutions-controls button { border:1px solid #dfe6f1; border-radius:50%; width:38px; height:38px; background:white; color:#334d76; cursor:pointer; }
.solutions-controls .solutions-next { background:var(--primary); border-color:var(--primary); color:white; }
.solutions-controls .solutions-play { width:auto; padding:0 14px; border-radius:20px; font:inherit; font-size:.75rem; }
@keyframes solution-reveal { from { opacity:0; transform:translateX(15px); } to { opacity:1; transform:translateX(0); } }
@keyframes solution-art-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-8px); } }
@media(max-width:768px) { .solutions-section { padding:56px 0; } .solutions-heading { display:block; } .solutions-heading > p { margin-top:18px; max-width:none; } .solutions-toolbar { padding:15px; } .solutions-tabs { gap:2px; } .solutions-tabs button { padding:10px 12px; font-size:.76rem; } .solutions-count { font-size:.65rem; letter-spacing:0; } .solutions-slide .spotlight-grid { grid-template-columns:1fr; } .solutions-slide .spotlight-visual-box { height:250px; margin:16px 16px 0; padding:15px; } .solutions-slide .spotlight-visual-box > div { max-width:280px !important; } .solutions-slide .spotlight-text { padding:26px 22px; } .solutions-slide .spotlight-text .btn { width:100%; justify-content:center; font-size:.8rem; } .solutions-bottom { padding:16px; } .solutions-caption { max-width:130px; font-size:.7rem; } }
@media(prefers-reduced-motion:reduce) { .solutions-slide,.solutions-slide .spotlight-visual-box svg { animation:none !important; } }
/* Cinematic checkout illustration, built as a lightweight looping animation. */
.ready-banner { background:radial-gradient(ellipse at 86% 25%,#334d8070,transparent 55%),#111a2e; }
.ready-grid { grid-template-columns:1.1fr 1fr; gap:40px; }
.checkout-film { position:relative; display:flex; justify-content:center; align-items:center; min-height:580px; padding:16px 0 48px; isolation:isolate; }
.film-halo { position:absolute; width:390px; height:390px; max-width:100%; border-radius:50%; background:radial-gradient(circle,#367dff30,transparent 70%); border:1px solid #9dbbff15; z-index:-1; }
.real-phone { width:270px; height:510px; flex-shrink:0; padding:7px; background:linear-gradient(130deg,#91a0b6,#253043 25%,#080f1d 55%,#6e7f96); border-radius:43px; position:relative; transform:rotate(-5deg); box-shadow:20px 32px 50px #0006,inset 0 0 0 1px #b8c6df55; animation:real-phone-float 9s ease-in-out infinite; }
.phone-side-key { position:absolute; width:3px; height:52px; background:#64748b; right:-3px; top:112px; border-radius:0 3px 3px 0; }
.phone-screen { position:relative; height:100%; border-radius:36px; background:#f8faff; overflow:hidden; color:#17283f; border:3px solid #0a1120; }
.phone-status { height:39px; padding:12px 15px 0; display:flex; justify-content:space-between; font-size:9px; font-weight:600; }
.phone-status i { font-size:9px; }
.phone-island { position:absolute; top:8px; left:50%; transform:translateX(-50%); width:76px; height:20px; background:#080e18; border-radius:20px; }
.phone-app-bar { display:flex; gap:8px; align-items:center; padding:12px 18px; border-bottom:1px solid #e8edf4; font-size:13px; }
.phone-app-icon { background:#e7efff; color:var(--primary); width:25px; height:25px; display:grid; place-items:center; border-radius:7px; }
.phone-app-bar > i { margin-left:auto; color:#7b8aa0; font-size:10px; }
.film-checkout { padding:20px 18px; animation:checkout-scene 9s linear infinite; }
.phone-kicker { font-size:8px; letter-spacing:1.4px; font-weight:600; color:#64809d; }
.phone-screen h3 { font-size:20px; line-height:1.2; letter-spacing:-.6px; margin:7px 0; }
.phone-screen p { font-size:10px; line-height:1.6; color:#7a899b; margin:0; }
.phone-order { display:flex; gap:8px; align-items:center; padding:14px 0; font-size:10px; border-bottom:1px solid #e5eaf3; }
.phone-order > div { padding:10px; border-radius:9px; background:#e9effb; color:var(--primary); }
.phone-order small { display:block; font-size:8px; color:#8793a5; margin-top:4px; }
.phone-order b { margin-left:auto; font-size:8px; color:#7a899b; }
.phone-total { padding:12px 0; }
.phone-total > span { display:block; font-size:9px; color:#8793a5; }
.phone-total strong { font-size:24px; letter-spacing:-.7px; }
.phone-total small { font-size:11px; }
.phone-card { padding:13px; background:linear-gradient(120deg,#21458e,#377ef0); color:#fff; border-radius:12px; box-shadow:0 9px 18px #2452a529; }
.phone-card > div { display:flex; justify-content:space-between; font-size:16px; margin-bottom:12px; opacity:.8; }
.phone-card > strong { font-size:12px; letter-spacing:1.1px; }
.phone-card > span { margin-top:9px; display:flex; justify-content:space-between; font-size:7px; letter-spacing:1px; }
.phone-card > span i { font-size:18px; }
.phone-pay { margin-top:14px; background:#182f58; color:white; padding:12px 10px; border-radius:9px; display:flex; justify-content:space-between; font-size:10px; font-weight:600; }
.film-processing,.film-success { position:absolute; top:110px; left:16px; right:16px; text-align:center; opacity:0; }
.film-processing { top:195px; animation:processing-scene 9s linear infinite; }
.payment-spinner { display:block; width:42px; height:42px; margin:0 auto 24px; border:3px solid #e0e9fc; border-top-color:var(--primary); border-radius:50%; animation:payment-spin 1s linear infinite; }
.film-success { padding-top:34px; animation:success-scene 9s linear infinite; }
.payment-check { width:72px; height:72px; margin:0 auto 24px; border-radius:50%; background:#def8ed; box-shadow:0 0 0 10px #edfaf4; }
.payment-check svg { width:72px; height:72px; }
.payment-check path { fill:none; stroke:#1ba779; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:55; animation:payment-tick 9s linear infinite; }
.phone-receipt { margin:24px 0 0; background:white; border:1px solid #e4eaf3; border-radius:12px; padding:18px 10px; }
.phone-receipt span,.phone-receipt small { display:block; color:#7c8da3; font-size:9px; }
.phone-receipt strong { display:block; font-size:19px; margin:8px 0; }
.phone-safe { position:absolute; bottom:25px; width:100%; text-align:center; font-size:8px; color:#8392a8; }
.phone-safe i { color:#28a179; margin-right:4px; }
.phone-home-bar { position:absolute; bottom:8px; left:50%; transform:translateX(-50%); width:80px; height:4px; border-radius:5px; background:#1c293d; }
.film-notification { position:absolute; bottom:104px; right:-5px; display:flex; align-items:center; gap:10px; background:#fff; color:#233c55; padding:14px 16px; border:1px solid #fff; border-radius:14px; box-shadow:0 18px 40px #0003; animation:payment-toast 9s ease infinite; }
.film-notification > span { width:31px; height:31px; display:grid; place-items:center; background:#e0f8eb; color:#159b66; border-radius:50%; }
.film-notification strong { font-size:11px; display:block; }
.film-notification small { color:#7a8899; font-size:9px; display:block; margin-top:4px; }
.film-notification > i { color:#e5ad3d; font-size:13px; margin-left:12px; }
.film-control { position:absolute; bottom:0; border:1px solid #ffffff30; color:#cbd7ef; background:#ffffff08; border-radius:30px; padding:9px 16px; font:inherit; font-size:.7rem; cursor:pointer; }
.film-paused *, .film-paused *::before { animation-play-state:paused !important; }
@keyframes real-phone-float { 0%,100% { transform:rotate(-5deg) translateY(0); } 50% { transform:rotate(-2deg) translateY(-8px); } }
@keyframes checkout-scene { 0%,30%,100% { opacity:1; transform:translateY(0); } 36%,94% { opacity:0; transform:translateY(-8px); } }
@keyframes processing-scene { 0%,34%,56%,100% { opacity:0; } 39%,51% { opacity:1; } }
@keyframes success-scene { 0%,55%,98%,100% { opacity:0; transform:translateY(10px); } 61%,91% { opacity:1; transform:translateY(0); } }
@keyframes payment-spin { to { transform:rotate(360deg); } }
@keyframes payment-tick { 0%,57% { stroke-dashoffset:55; } 65%,100% { stroke-dashoffset:0; } }
@keyframes payment-toast { 0%,62%,97%,100% { opacity:0; transform:translateY(14px); } 70%,90% { opacity:1; transform:translateY(0); } }
@media(max-width:992px) { .ready-grid { grid-template-columns:1fr; } .checkout-film { max-width:420px; width:100%; margin:auto; } }
@media(max-width:768px) { .ready-banner { padding:32px 22px; } .ready-text h2 { font-size:2.35rem; } .ready-grid { gap:30px; } .checkout-film { min-height:558px; } .real-phone { transform:none; animation-name:mobile-phone-float; } .film-notification { right:-4px; bottom:94px; padding:12px; } .ready-text .btn { width:100%; justify-content:center; } }
@keyframes mobile-phone-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-7px); } }
@media(max-width:380px) { .real-phone { width:250px; } .phone-card { padding:11px; } .ready-banner { padding:30px 16px; } }
@media(prefers-reduced-motion:reduce) { .checkout-film * { animation:none !important; } .film-checkout { opacity:1; } .film-processing,.film-success,.film-notification { display:none; } .film-control { display:none; } }
/* Keep the payment button clear of the phone's fixed footer. */
.film-checkout { padding-top:14px; }
.phone-order { padding:10px 0; }
.phone-total { padding:9px 0; }
.phone-card > div { margin-bottom:8px; }
.phone-card { padding:11px 13px; }
.phone-pay { margin-top:10px; padding:10px; }
.phone-order { padding:8px 0; }
.phone-total { padding:7px 0; }
.phone-card > span { margin-top:7px; }
/* Product suite: dimensional, animated miniatures. */
.product-art { height:270px; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; border-bottom:1px solid #e3e9f2; background:radial-gradient(ellipse at 50% 40%,#e0e9ff,#f2f5fc 75%); isolation:isolate; color:#203550; }
.product-art::before { content:''; position:absolute; width:200px; height:200px; border:1px solid #a8c1ed40; border-radius:50%; z-index:-1; }
.product-art strong,.product-art small { display:block; }
.art-label { color:#6782a6; font-size:8px; letter-spacing:1px; font-weight:600; }
.art-demo { position:absolute; bottom:10px; left:0; right:0; text-align:center; font-size:7px; letter-spacing:1.3px; color:#7184a1; }
.mini-device { position:relative; width:140px; height:211px; background:linear-gradient(140deg,#fff,#f6f9ff); border:4px solid #243753; border-radius:24px; padding:24px 12px 12px; text-align:center; box-shadow:8px 15px 24px #2c42632b,inset 0 0 0 1px #fff; transform:rotate(-6deg); animation:product-device-float 6s ease-in-out infinite; }
.mini-speaker { position:absolute; top:7px; left:50%; transform:translateX(-50%); width:35px; height:5px; background:#233651; border-radius:8px; }
.art-shop { width:40px; height:40px; display:grid; place-items:center; margin:12px auto; border-radius:12px; background:#e7eeff; color:var(--primary); font-size:19px; }
.mini-device > strong { font-size:13px; margin-bottom:5px; }
.mini-device small { font-size:7px; color:#7b8da6; }
.mini-pay { border-radius:7px; padding:9px 6px; background:var(--primary); color:#fff; font-size:8px; font-weight:600; margin-top:12px; }
.art-bubble { position:absolute; bottom:32px; right:17px; display:flex; align-items:center; gap:7px; background:#fff; padding:10px 12px; border:1px solid #e3eaf4; border-radius:10px; color:#35516b; box-shadow:0 8px 20px #23374f18; font-size:9px; font-weight:500; animation:product-confirm 6s ease-in-out infinite; }
.art-bubble i { color:#16a77d; }
.art-gateway { background:radial-gradient(ellipse at center,#dbe6fd,#f0f4fc); }
.mini-browser { width:195px; padding:0 14px 15px; background:#fff; border:1px solid #d9e3f3; border-radius:13px; box-shadow:0 14px 25px #263c601a; transform:translateX(-12px); }
.browser-dots { margin:0 -14px 14px; padding:5px 12px; background:#f1f5fc; color:#a7b6cc; border-bottom:1px solid #e6ecf6; border-radius:13px 13px 0 0; }
.browser-dots i { float:right; font-size:8px; margin-top:7px; }
.mini-browser > strong { font-size:15px; margin:8px 0 13px; }
.mini-field { border:1px solid #e0e8f4; padding:8px; border-radius:6px; color:#8090a9; font-size:7px; }
.mini-field span { display:block; font-size:10px; color:#354e70; margin-top:5px; }
.art-bank-card { position:absolute; width:116px; height:75px; top:57px; right:18px; background:linear-gradient(125deg,#203b79,#4388ff); border:1px solid #6599ef; color:#fff; padding:10px; border-radius:9px; box-shadow:0 12px 20px #1c47823b; animation:product-card-tap 6s ease-in-out infinite; }
.art-bank-card > i { color:#e6d6a3; font-size:13px; }
.art-bank-card > strong { font-size:9px; letter-spacing:1px; margin:8px 0; }
.art-bank-card > span { display:flex; justify-content:space-between; font-size:5px; }
.art-bank-card > span i { font-size:12px; }
.art-currency { background:radial-gradient(ellipse,#e5e0ff,#f7f5fc); }
.art-globe { width:145px; height:145px; display:grid; place-items:center; border-radius:50%; background:radial-gradient(circle at 30% 20%,#90c1ff,#5b6dea 60%,#393f95); box-shadow:inset -12px -12px 22px #20296b4a,0 18px 30px #626ad233; }
.art-globe > i { font-size:132px; color:#d9e5ff60; }
.currency-chip { position:absolute; background:#fff; padding:12px 14px; border:1px solid #e2e8f2; border-radius:12px; box-shadow:0 10px 24px #35427e14; color:var(--primary); font-size:16px; animation:currency-bob 5s ease-in-out infinite; }
.currency-chip b { font-size:9px; margin-left:5px; }
.chip-usd { top:37px; left:28px; }.chip-eur { top:56px; right:18px; animation-delay:-1.7s; color:#956ed2; }.chip-lkr { bottom:61px; left:28px; animation-delay:-3.3s; color:#169b80; }
.art-qr { background:radial-gradient(ellipse,#d7f1ed,#f1f9f8); }
.qr-scan { position:relative; width:79px; margin:14px auto 12px; overflow:hidden; border-radius:5px; }
.qr-scan > i { font-size:79px; line-height:1; display:block; }
.qr-scan > span { position:absolute; top:0; left:0; width:100%; height:3px; background:#27d7ac; box-shadow:0 -9px 18px 5px #27d7ac4a; animation:qr-sweep 3s ease-in-out infinite; }
.art-subscription { background:radial-gradient(ellipse,#e6e5ff,#f5f5fc); }
.billing-calendar { width:177px; padding:0 16px 16px; border-radius:15px; background:white; border:1px solid #dce3f2; box-shadow:0 15px 30px #30385620; transform:rotate(-5deg); }
.calendar-top { background:var(--primary); margin:0 -16px 13px; height:29px; border-radius:15px 15px 0 0; display:flex; justify-content:space-between; padding:0 25px; }
.calendar-top span { height:15px; width:5px; background:#bed2f7; border-radius:4px; transform:translateY(-5px); }
.billing-calendar strong { font-size:16px; margin:7px 0 12px; }
.calendar-days { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; }
.calendar-days span { padding:6px 0; text-align:center; font-size:8px; color:#91a1b7; background:#f3f6fb; border-radius:5px; }
.calendar-days .billing-day { animation:billing-highlight 5s ease infinite; color:var(--primary); background:#e3ecfe; }
.billing-loop { position:absolute; top:40px; right:36px; width:43px; height:43px; display:grid; place-items:center; color:#fff; background:var(--primary); border-radius:50%; box-shadow:0 9px 15px #326fed33; }
.billing-loop i { animation:billing-rotate 6s ease-in-out infinite; }
.product-motion-control { border:1px solid #dce4f0; border-radius:25px; padding:11px 14px; font:inherit; font-size:.72rem; color:#607590; background:#fff; cursor:pointer; }
.product-motion-paused .product-art *, .product-motion-paused .product-art::before { animation-play-state:paused !important; }
@keyframes product-device-float { 0%,100% { transform:rotate(-6deg) translateY(0); } 50% { transform:rotate(-3deg) translateY(-6px); } }
@keyframes product-confirm { 0%,12%,100% { opacity:0; transform:translateY(7px); } 24%,86% { opacity:1; transform:translateY(0); } }
@keyframes product-card-tap { 0%,100% { transform:translateY(-7px) rotate(12deg); } 40%,65% { transform:translate(-7px,10px) rotate(4deg); } }
@keyframes currency-bob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-9px); } }
@keyframes qr-sweep { 0%,100% { transform:translateY(0); } 50% { transform:translateY(76px); } }
@keyframes billing-highlight { 0%,100% { box-shadow:0 0 0 0 #397fff00; } 50% { box-shadow:0 0 0 3px #397fff25; background:#367dff; color:white; } }
@keyframes billing-rotate { 0%,25% { transform:rotate(0); } 75%,100% { transform:rotate(360deg); } }
@media(max-width:768px) { .product-art { height:270px; } .products-header .carousel-controls { width:100%; justify-content:flex-end; }.product-motion-control { margin-right:auto; } }
@media(prefers-reduced-motion:reduce) { .product-art *, .product-art::before { animation:none !important; } .product-motion-control { display:none; } }