html { scroll-behavior: smooth; }
:root {
  --bg: #0a0a0c;
  --card-bg: #16161a;
  --text: #f9f9f9;
  --accent: #635bff;
  --muted: #a1a1aa;
  --gradient: linear-gradient(90deg, #635bff, #00ffc2);
  --border: #27272a;
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; overflow-x: hidden; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 2rem; }
.section-intro { text-align: center; margin-bottom: 3rem; }
.section-h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); margin-top: 1rem; }

/* HERO — pt accounts for 64px fixed nav */
.hero { padding: 9rem 0 5rem; text-align: center; }
.badge { background: #1e1e24; color: var(--accent); padding: .5rem 1rem; border-radius: 20px; font-size: .8rem; font-weight: 600; margin-bottom: 2rem; display: inline-block; }
h1 { font-size: clamp(2.2rem, 6vw, 4rem); font-weight: 800; line-height: 1.1; margin-bottom: 1.5rem; }
.text-gradient { background: var(--gradient); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.sub-headline { font-size: clamp(.95rem, 2vw, 1.2rem); color: var(--muted); max-width: 700px; margin: 0 auto 2.5rem; }
.btn-primary { background: var(--accent); color: #fff; padding: 1rem 2rem; border-radius: 8px; text-decoration: none; font-weight: 600; transition: filter .25s, box-shadow .25s; display: inline-block; border: none; cursor: pointer; font-family: inherit; font-size: 1rem; }
.btn-primary:hover { filter: brightness(1.2); box-shadow: 0 0 20px rgba(99,91,255,.4); color: #fff; }
.btn-secondary { color: var(--text); border: 1px solid var(--border); padding: 1rem 2rem; border-radius: 8px; text-decoration: none; display: inline-block; transition: border-color .2s; }
.btn-secondary:hover { border-color: #635bff; }
.hero-btns { display: flex; justify-content: center; align-items: center; gap: 1rem; flex-wrap: wrap; }
.glow { position: absolute; width: 600px; height: 600px; border-radius: 50%; filter: blur(100px); pointer-events: none; z-index: 0; opacity: 0.15; }
.glow--indigo { background: rgba(99,91,255,1); }
.glow--blue { background: rgba(0,255,194,1); }
.glow--red { background: rgba(255,100,100,1); }


/* PROBLEM */
.problem { padding: 6rem 0; position: relative; overflow: hidden; }
.silo-container { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.silo-content { text-align: left; }
.silo-content h2 { font-size: clamp(2rem, 4vw, 3rem); margin: 1rem 0; line-height: 1.1; }
.silo-content p { color: var(--muted); margin-bottom: 1.5rem; font-size: 1.1rem; line-height: 1.6; }
.silo-visual { position: relative; display: flex; justify-content: center; align-items: center; min-height: 400px; }
.silo-diagram { position: relative; width: 100%; max-width: 400px; height: 400px; }
.silo-node { position: absolute; width: 80px; height: 80px; background: rgba(20,20,25,0.8); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; font-size: 0.8rem; color: #a1a1aa; backdrop-filter: blur(10px); z-index: 2; transition: all 0.3s ease; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.silo-node i { color: #fff; width: 24px; height: 24px; }
.silo-node--hr { top: 0; left: 50%; transform: translateX(-50%); border-color: rgba(99,91,255,0.4); }
.silo-node--it { bottom: 20%; left: 0; border-color: rgba(0,255,194,0.4); }
.silo-node--fin { bottom: 20%; right: 0; border-color: rgba(255,138,138,0.4); }
.silo-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 140px; height: 140px; background: linear-gradient(135deg, rgba(99,91,255,0.1), rgba(0,255,194,0.1)); border: 2px solid rgba(0,255,194,0.5); border-radius: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; font-weight: 600; color: #fff; z-index: 3; box-shadow: 0 0 40px rgba(0,255,194,0.2); backdrop-filter: blur(10px); }
.silo-center i { width: 32px; height: 32px; color: #00FFC2; }
.silo-line { position: absolute; background: linear-gradient(90deg, rgba(255,255,255,0.1), rgba(0,255,194,0.5)); height: 2px; z-index: 1; transform-origin: left center; top: 50%; left: 50%; }
.line-hr { width: 140px; transform: rotate(-90deg); }
.line-it { width: 150px; transform: rotate(153deg); }
.line-fin { width: 150px; transform: rotate(27deg); }

/* SOLUTIONS */
.grid-section { border-top: 1px solid var(--border); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; padding: 5rem 0; }
.card { background: var(--card-bg); padding: 2.5rem 2rem; border-radius: 12px; border: 1px solid var(--border); transition: border-color .3s, transform .3s, box-shadow .3s; color: inherit; display: block; }
.card:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: 0 12px 40px rgba(99,91,255,.15); }
.card .icon { font-size: 2.5rem; margin-bottom: 1.5rem; }
.card h3 { margin-bottom: 1rem; font-size: 1.1rem; }
.card p { color: var(--muted); font-size: .95rem; }
.card--link { cursor: pointer; user-select: none; }
.card-arrow { font-size: 1rem; opacity: 0; transition: opacity .2s, transform .2s; display: inline-block; margin-left: 4px; }
.card--link:hover .card-arrow { opacity: 1; transform: translateX(4px); }

/* INDUSTRIES */
.industries-section { padding: 5rem 0; background: #0d0d10; border-top: 1px solid var(--border); }
.ind-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.ind-tile { background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 1.2rem 1rem; text-align: center; transition: border-color .25s, transform .25s; }
.ind-tile:hover { border-color: #635bff; transform: translateY(-3px); }
.ind-icon { font-size: 1.6rem; margin-bottom: .6rem; }
.ind-tile p { font-size: .82rem; color: var(--text); font-weight: 600; line-height: 1.3; }
@media (max-width: 900px) { .ind-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) {
  .ind-grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
  .industries-section { padding: 3.5rem 0; }
}

/* TRUSTED BY */
.trusted-section { padding: 4rem 0; background: var(--bg); border-top: 1px solid var(--border); overflow: hidden; position: relative; }
.trusted-fade { position: absolute; top: 0; height: 100%; width: 100px; z-index: 2; pointer-events: none; }
.trusted-fade--left { left: 0; background: linear-gradient(to right, var(--bg), transparent); }
.trusted-fade--right { right: 0; background: linear-gradient(to left, var(--bg), transparent); }
.trusted-track { display: flex; gap: 1.5rem; width: max-content; animation: scroll-logos 28s linear infinite; margin-top: 1rem; }
.trusted-section:hover .trusted-track { animation-play-state: paused; }
@keyframes scroll-logos { to { transform: translateX(-50%); } }
.logo-tile { width: 150px; height: 80px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; display: flex; align-items: center; justify-content: center; padding: 12px; flex-shrink: 0; transition: border-color .25s; }
.logo-tile:hover { border-color: #635bff; }
.logo-tile img { max-width: 100%; max-height: 44px; object-fit: contain; opacity: .8; transition: opacity .25s; }
.logo-tile:hover img { opacity: 1; }
@media (max-width: 600px) { .logo-tile { width: 115px; height: 64px; } .trusted-fade { width: 50px; } }

/* WHY XSP */
.why-xsp { padding: 8rem 0; background: #0d0d10; border-top: 1px solid var(--border); }
.xsp-header { text-align: center; margin-bottom: 4rem; }
.xsp-header h2 { font-size: clamp(2rem, 4vw, 3rem); margin-top: 1rem; }
.xsp-header p { color: var(--muted); max-width: 700px; margin: 1rem auto 0; }
.comparison-table { background: var(--card-bg); border-radius: 16px; border: 1px solid var(--border); overflow: hidden; margin-top: 2rem; }
.comp-row { display: grid; grid-template-columns: repeat(3, 1fr); padding: 1.5rem 2rem; border-bottom: 1px solid var(--border); align-items: center; transition: all .3s; }
.comp-row:last-child { border-bottom: none; }
.comp-row:not(.header):hover { background: rgba(99,91,255,.05); border-left: 4px solid var(--accent); padding-left: calc(2rem - 4px); }
.comp-row .check { color: #00FFC2; font-weight: 600; padding: .75rem 1rem; border-radius: 8px; background: rgba(0,255,194,.05); border: 1px solid rgba(0,255,194,.1); display: flex; align-items: flex-start; gap: 8px; }
.comp-row:hover .check { background: rgba(0,255,194,.1); border-color: rgba(0,255,194,.2); box-shadow: 0 4px 12px rgba(0,255,194,.1); }
.comp-row.header { background: #1e1e24; font-weight: 600; }
.comp-row.header:hover { background: #1e1e24; border-left: none; padding-left: 2rem; }
.comp-row .trad { color: var(--muted); font-size: .9rem; display: flex; align-items: flex-start; gap: 8px; }
.comp-row .label { font-weight: 600; }
.icon-x { color: #ff5e5e; flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; }
.icon-zap { color: #00ffc2; flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; }
@media (max-width: 768px) {
  .why-xsp { padding: 5rem 0; }
  .comp-row { grid-template-columns: 1fr; gap: .5rem; padding: 1.2rem 1.5rem; }
  .comp-row.header { display: none; }
  .comp-row .label { color: #635bff; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }
  .comp-row:not(.header):hover { padding-left: calc(1.5rem - 4px); }
}

/* CTA */
.cta-final { padding: 8rem 0; text-align: center; background: radial-gradient(circle at center, #1e1b4b, #0a0a0c); border-top: 1px solid var(--border); }
.cta-final h2 { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: .5rem; }
.cta-final p { color: var(--muted); }
.cta-wrapper { margin-top: 2.5rem; display: flex; justify-content: center; }
@media (max-width: 768px) { .cta-final { padding: 5rem 0; } }

/* MODAL */
.modal { display: none; position: fixed; z-index: 1000; inset: 0; background: rgba(0,0,0,.85); backdrop-filter: blur(8px); align-items: center; justify-content: center; }
.modal-content { background: var(--card-bg); margin: auto; padding: 3rem; border: 1px solid var(--accent); border-radius: 16px; width: 90%; max-width: 500px; text-align: center; position: relative; }
.close-modal { position: absolute; right: 16px; top: 8px; color: var(--muted); font-size: 2rem; cursor: pointer; background: none; border: none; line-height: 1; }
.close-modal:hover { color: #fff; }
form input, form select { width: 100%; padding: 1rem; margin-top: 1rem; background: #0a0a0c; border: 1px solid var(--border); border-radius: 8px; color: #fff; font-family: inherit; font-size: .9rem; }
form input:focus, form select:focus { outline: none; border-color: #635bff; }
form button { width: 100%; margin-top: 2rem; }
.success-msg h3 { color: #00ffc2; margin-bottom: .5rem; }
.success-msg p { color: var(--muted); }

/* MOBILE */
@media (max-width: 768px) {
  .container { padding: 0 1.2rem; }
  .hero { padding: 7rem 0 3.5rem; }
  .hero-btns { flex-direction: column; align-items: center; }
  .hero-btns a { width: 100%; text-align: center; max-width: 300px; }
  .modal-content { padding: 2rem 1.2rem; }
}
@media (max-width: 480px) { .hero { padding: 6rem 0 3rem; } }
@media (max-width: 900px) {
  .silo-container { grid-template-columns: 1fr; gap: 3rem; }
  .silo-content { text-align: center; }
  .silo-visual { min-height: 350px; transform: scale(0.9); }
}