/* =========================================================
1) BRAND TOKENS — edit these to re-theme the whole site
========================================================= */
:root{
	--ink:#0A1240;
	--ink-soft:#5B6178;
	--ink-faint:#8A8FA3;
	--bg-soft:#F6F7FB;
	--bg-soft-2:#EFF1FA;
	--blue:#2F6BFF;
	--violet:#8B3FE0;
	--cyan:#22C7F0;
	--line:#E7E9F5;
	--line-strong:#D8DBEE;
	--grad: linear-gradient(120deg, var(--cyan) 0%, var(--blue) 48%, var(--violet) 100%);
	--grad-soft: linear-gradient(120deg, rgba(34,199,240,.12) 0%, rgba(47,107,255,.12) 48%, rgba(139,63,224,.12) 100%);
	--shadow-btn: 0 8px 24px -8px rgba(47,107,255,.45);

	/* Re-theme Bootstrap itself to match the brand */
	--bs-primary:#2F6BFF;
	--bs-primary-rgb:47,107,255;
	--bs-link-color:#2F6BFF;
	--bs-link-color-rgb:47,107,255;
	--bs-link-hover-color:#1d4fd6;
	--bs-body-font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	--bs-body-color:#0A1240;
	--bs-border-color:#E7E9F5;
}

body{ -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4,h5,h6{ font-family:'Sora', -apple-system, sans-serif; color:var(--ink); letter-spacing:-0.01em; margin-bottom:0; }
a{ text-decoration:none; }
img{ display:block; }
html{ scroll-behavior:smooth; }

@media (prefers-reduced-motion: reduce){
	*{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* =========================================================
2) BUTTONS — custom color variants on top of Bootstrap .btn
========================================================= */
.btn{ font-weight:600; }
.btn-gradient{
	background:var(--grad);
	border:none;
	color:#fff;
	box-shadow:var(--shadow-btn);
	position:relative;
	overflow:hidden;
	background-size:200% 100%;
	animation:gradientFlow 6s ease infinite;
}
.btn-gradient:hover{ color:#fff; transform:translateY(-2px); box-shadow:0 12px 28px -8px rgba(47,107,255,.55); }
@keyframes gradientFlow{ 0%,100%{background-position:0% 50%;} 50%{background-position:100% 50%;} }
.btn-outline-brand{ border:1px solid var(--line-strong); color:var(--ink); background:#fff; }
.btn-outline-brand:hover{ border-color:var(--ink); background:var(--bg-soft); color:var(--ink); }

/* =========================================================
3) NAVBAR
========================================================= */
.navbar-glass{
	background:rgba(255,255,255,.82);
	backdrop-filter:blur(14px);
	-webkit-backdrop-filter:blur(14px);
	border-bottom:1px solid var(--line);
}
.navbar-glass .nav-link{ color:var(--ink-soft); font-weight:500; }
.navbar-glass .nav-link:hover, .navbar-glass .nav-link:focus{ color:var(--ink); }
.navbar-brand img{ height:26px; }

/* =========================================================
4) HERO
========================================================= */
.hero{ position:relative; overflow:hidden; padding:6.5rem 0 2.5rem; }
.hero-blobs{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.blob{ position:absolute; border-radius:50%; filter:blur(70px); animation:blobFloat 22s ease-in-out infinite alternate; }
.blob-1{ width:520px;height:520px; background:var(--cyan); opacity:.35; top:-220px; left:-160px; }
.blob-2{ width:480px;height:480px; background:var(--violet); opacity:.28; top:-120px; right:-200px; animation-delay:-9s; }
@keyframes blobFloat{ from{transform:translate(0,0) scale(1);} to{transform:translate(26px,20px) scale(1.08);} }

.hero h1{ font-size:clamp(34px,4.6vw,56px); font-weight:700; line-height:1.08; }
.hero .lead{ font-size:18px; color:var(--ink-soft); max-width:520px; }

.node-label{ font-family:'Sora',sans-serif; font-size:15px; font-weight:600; fill:var(--ink); }
.node-pill{ fill:#fff; stroke:var(--line-strong); stroke-width:1.4; }
.sync-line{ stroke:var(--line-strong); stroke-width:1.6; fill:none; }
.pulse-dot-out{ filter:drop-shadow(0 0 4px rgba(47,107,255,.65)); }
.pulse-dot-in{ filter:drop-shadow(0 0 6px rgba(34,199,240,.85)); }
.hub-ring{ fill:none; stroke:url(#hubGrad); stroke-width:2; opacity:.55; transform-origin:300px 300px; animation:spin 34s linear infinite; }
.orbit-ring{ fill:none; stroke:var(--line-strong); stroke-width:1; stroke-dasharray:2 8; transform-origin:300px 300px; animation:spinSlow 46s linear infinite; }
.radar-sweep{ transform-origin:300px 300px; animation:spin 6.5s linear infinite; }
.ping{ fill:none; stroke:var(--blue); stroke-width:1.4; transform-origin:300px 300px; }
.ping1{ animation:pingOut 3.4s ease-out infinite; }
.ping2{ animation:pingOut 3.4s ease-out infinite; animation-delay:1.7s; }
.node-glow rect{ animation:nodeGlow 4.8s ease-in-out infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes spinSlow{ to{ transform:rotate(-360deg); } }
@keyframes breathe{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.05);} }
@keyframes pingOut{ 0%{ transform:scale(.55); opacity:.55; } 100%{ transform:scale(1); opacity:0; } }
@keyframes nodeGlow{ 0%,100%{ opacity:0; } 50%{ opacity:1; } }
.hub-glow{ animation:breathe 4.5s ease-in-out infinite; transform-origin:300px 300px; }
.orbit-legend{ font-size:13px; color:var(--ink-faint); }
.orbit-legend .dot{ width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:6px; }

/* =========================================================
5) INTEGRATIONS MARQUEE
========================================================= */
.marquee{
	overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track{ display:flex; gap:.6rem; width:max-content; animation:marqueeScroll 28s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes marqueeScroll{ from{ transform:translateX(0); } to{ transform:translateX(-25%); } }
.badge-soft{
	font-size:.85rem; font-weight:500; color:var(--ink-soft);
	background:var(--bg-soft); border:1px solid var(--line);
	padding:.5rem 1rem;
	transition:transform .15s ease, border-color .15s ease, color .15s ease;
}
.badge-soft:hover{ transform:translateY(-2px); border-color:var(--line-strong); color:var(--ink); }

/* =========================================================
6) FEATURE SECTIONS + ANIMATED BACKGROUND FIELD
========================================================= */
.features-field{ position:relative; overflow:hidden; background:linear-gradient(180deg, #FDFEFF 0%, #F7F8FE 45%, #FDFEFF 100%); }
.features-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; background-image:radial-gradient(rgba(47,107,255,.06) 1px, transparent 1.6px); background-size:30px 30px; }
.fblob{ position:absolute; border-radius:50%; filter:blur(90px); }
.fblob-1{ width:420px;height:420px; background:var(--cyan); opacity:.14; top:2%; left:-9%; animation:fblobFloat 26s ease-in-out infinite alternate; }
.fblob-2{ width:460px;height:460px; background:var(--violet); opacity:.12; top:26%; right:-11%; animation:fblobFloat 32s ease-in-out infinite alternate; animation-delay:-9s; }
.fblob-3{ width:400px;height:400px; background:var(--blue); opacity:.12; top:56%; left:-7%; animation:fblobFloat 29s ease-in-out infinite alternate; animation-delay:-15s; }
.fblob-4{ width:380px;height:380px; background:var(--cyan); opacity:.13; top:80%; right:-9%; animation:fblobFloat 24s ease-in-out infinite alternate; animation-delay:-4s; }
@keyframes fblobFloat{ from{transform:translate(0,0) scale(1);} to{transform:translate(30px,26px) scale(1.1);} }

.feature{ position:relative; z-index:1; }
.f-label{ font-size:14px; font-weight:600; color:var(--blue); }
.feature-list li{ font-size:15.5px; color:var(--ink); }
.feature-list .fa-circle-check{ color:var(--blue); margin-top:3px; }

/* Glassmorphism mock panels with a slow rotating gradient edge */
.panel-glow{ position:relative; border-radius:20px; padding:1.5px; overflow:hidden; box-shadow:0 24px 60px -24px rgba(47,107,255,.3); }
.panel-glow::before{
	content:''; position:absolute; inset:-60%;
	background:conic-gradient(from 0deg, var(--cyan), var(--blue), var(--violet), var(--cyan));
	animation:rotateBorder 7s linear infinite;
}
@keyframes rotateBorder{ to{ transform:rotate(360deg); } }
.panel{
	position:relative; margin:1.5px;
	background:rgba(255,255,255,.72);
	backdrop-filter:blur(18px) saturate(160%);
	-webkit-backdrop-filter:blur(18px) saturate(160%);
	border-radius:18.5px;
}
.panel-dots span{ width:8px; height:8px; border-radius:50%; background:var(--line-strong); display:inline-block; }

.row-bar{ background:rgba(255,255,255,.78); border:1px solid var(--line); border-radius:10px; }
.row-dot{ width:34px; height:34px; border-radius:9px; flex-shrink:0; }
.row-lines .l1{ height:8px; width:70%; background:var(--line-strong); border-radius:4px; }
.row-lines .l2{ height:6px; width:40%; background:var(--line); border-radius:4px; }
.row-tag{ font-size:11.5px; font-weight:600; padding:.25rem .55rem; border-radius:6px; color:#fff; transition:box-shadow .3s ease; }

/* Uploading carousel — each row loops: fade in, upload 0→100, hold + glow, fade out, reset */
.upload-row{ animation:rowUpload 6s ease-in-out infinite; }
.upload-row .upload-fill{ animation:fillUpload 6s ease-in-out infinite; }
.upload-row .row-tag{ animation:tagComplete 6s ease-in-out infinite; }
.upload-row.r2, .upload-row.r2 .upload-fill, .upload-row.r2 .row-tag{ animation-delay:-2s; }
.upload-row.r3, .upload-row.r3 .upload-fill, .upload-row.r3 .row-tag{ animation-delay:-4s; }
@keyframes rowUpload{
	0%{ opacity:.35; transform:translateY(3px); }
	7%{ opacity:1; transform:translateY(0); }
	55%{ opacity:1; }
	63%{ opacity:1; }
	75%{ opacity:.35; transform:translateY(-3px); }
	100%{ opacity:.35; transform:translateY(3px); }
}
@keyframes fillUpload{
	0%{ width:0%; } 7%{ width:0%; } 52%{ width:100%; } 63%{ width:100%; } 74%{ width:0%; } 100%{ width:0%; }
}
@keyframes tagComplete{
	0%,50%{ box-shadow:0 0 0 rgba(39,174,96,0); }
	58%{ box-shadow:0 0 14px rgba(39,174,96,.6); }
	70%{ box-shadow:0 0 14px rgba(39,174,96,.6); }
	100%{ box-shadow:0 0 0 rgba(39,174,96,0); }
}

/* Inventory meters — Bootstrap .progress + shimmer sweep overlay */
.progress{ background-color:var(--line); }
.meter-fill{ position:relative; overflow:hidden; width:0; transition:width 1.1s cubic-bezier(.16,.84,.32,1); }
.panel.in-view .meter-fill{ width:var(--w); }
.meter-fill::after{
	content:''; position:absolute; inset:0;
	background:linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
	transform:translateX(-100%);
	animation:shimmerSweep 2.6s ease-in-out infinite;
}
@keyframes shimmerSweep{ to{ transform:translateX(220%); } }

/* Order rows — Font Awesome fa-spin for "processing" + synced glow pulse */
.row-tag.pulse-green{ animation:tagPulseGreen 3.4s ease-in-out infinite; }
@keyframes tagPulseGreen{ 0%,100%{ box-shadow:0 0 0 rgba(39,174,96,0); } 50%{ box-shadow:0 0 12px rgba(39,174,96,.55); } }

/* Analytics bars — gentle continuous breathing */
.bars{ height:150px; }
.bars .bar{ border-radius:6px 6px 0 0; background:var(--grad-soft); transform-origin:bottom; animation:barBreathe 4.6s ease-in-out infinite; }
.bars .bar.active{ background:var(--grad); }
.bars .bar:nth-child(1){ animation-delay:0s; }
.bars .bar:nth-child(2){ animation-delay:-.5s; }
.bars .bar:nth-child(3){ animation-delay:-1s; }
.bars .bar:nth-child(4){ animation-delay:-1.5s; }
.bars .bar:nth-child(5){ animation-delay:-2s; }
.bars .bar:nth-child(6){ animation-delay:-2.5s; }
.bars .bar:nth-child(7){ animation-delay:-3s; }
@keyframes barBreathe{ 0%,100%{ transform:scaleY(1); } 50%{ transform:scaleY(1.07); } }

/* =========================================================
7) HOW IT WORKS / STATS
========================================================= */
.how{ background:var(--bg-soft); }
.step-connector{ display:none; }
@media (min-width:768px){
	.step-connector{ display:block; position:absolute; top:22px; left:calc(100%/6); right:calc(100%/6); height:1px; background:var(--line-strong); z-index:0; }
}
.step-num{
	width:44px; height:44px; border-radius:50%; background:#fff; border:1.5px solid var(--line-strong);
	font-family:'Sora',sans-serif; font-weight:700; font-size:16px; color:var(--blue);
	position:relative; z-index:1;
}
.stat-num{ font-family:'Sora',sans-serif; font-size:clamp(26px,3vw,36px); font-weight:700; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* =========================================================
8) TESTIMONIALS
========================================================= */
.t-card{ border:1px solid var(--line) !important; position:relative; }
.t-card::before{ content:''; position:absolute; top:0; left:28px; right:28px; height:2px; background:var(--grad); border-radius:0 0 3px 3px; }

/* =========================================================
9) SCROLL REVEAL
========================================================= */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .75s cubic-bezier(.16,.84,.32,1), transform .75s cubic-bezier(.16,.84,.32,1); }
.reveal.in-view{ opacity:1; transform:translateY(0); }

/* =========================================================
10) FINAL CTA — dark drifting-grid band
========================================================= */
.cta-band{ position:relative; overflow:hidden; background:linear-gradient(120deg, #0A1240 0%, #17205C 55%, #2A1666 100%); }
.cta-grid{ position:absolute; inset:-20%; z-index:0; pointer-events:none; background-image:radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.6px); background-size:26px 26px; animation:driftGrid 44s linear infinite; }
@keyframes driftGrid{ from{ transform:translate(0,0); } to{ transform:translate(-26px,-26px); } }
.cta-band .blob{ opacity:.5; }

/* =========================================================
11) FOOTER
========================================================= */
footer{ background:var(--bg-soft); border-top:1px solid var(--line); }
footer a{ color:var(--ink-soft); }
footer a:hover{ color:var(--ink); }
.social-icon{
	width:34px; height:34px; border:1px solid var(--line-strong); border-radius:50%;
	display:inline-flex; align-items:center; justify-content:center; color:var(--ink-soft);
	transition:all .15s ease;
}
.social-icon:hover{ border-color:var(--ink); color:var(--ink); }