/* Supplier.Travel / Violet glass — reference wordmark palette, October 2026. */
:root{--bg:#09080e;--panel:#15111e;--line:#e7daff1c;--muted:#a49caf;--green:#bc92ff;--white:#f7f4fc;--brand:#802ee6;--brand-light:#b477ff;--glass:linear-gradient(125deg,#eee2ff12,#9b72db08 55%,#d5c0ff0a)}
body{background:radial-gradient(ellipse at 85% 8%,#6226b619,transparent 27%),radial-gradient(ellipse at 0% 30%,#58399112,transparent 32%),#09080e;isolation:isolate}
body:before{content:'';position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.045;background-image:url('/assets/grain.svg');background-repeat:repeat}
::selection{background:#9851ed66;color:#fff}:focus-visible{outline:2px solid #bc92ff;outline-offset:5px}
.announcement{background:linear-gradient(90deg,#21152b88,#32204380,#17102088);color:#c0b3d0;border-bottom-color:#b28ae323;letter-spacing:.15px}.announcement a{color:#e6d8f7}.dot{background:#c097ff;box-shadow:0 0 12px #a568ff80}.dim{color:#78688c}
header{margin:18px auto 0;max-width:1200px;height:82px;padding:0 28px;border:1px solid #dac6ff22;border-radius:18px;background:linear-gradient(125deg,#ffffff09,#ad80f408);box-shadow:inset 0 1px #ffffff0e,0 12px 45px #0002;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);position:relative;z-index:3}
.brand{font-family:'DM Sans',sans-serif;font-size:27px;font-weight:700;letter-spacing:-1.5px;color:#fbf9ff}.brand-light{color:#a665f4;font-weight:700;letter-spacing:-1.5px}header>.brand,footer>.brand{position:relative;padding-bottom:14px}header>.brand:after,footer>.brand:after{content:'Connect with suppliers';position:absolute;bottom:0;right:0;font:400 9px 'DM Sans',sans-serif;letter-spacing:.2px;color:#aaa0b7}nav{color:#b9afc7}.nav-demo{background:linear-gradient(130deg,#dbc5ff19,#ffffff05);border-color:#d5b5ff35;border-radius:9px;color:#eee5fc}.nav-demo:hover{border-color:#ba89ff88}.tiny{color:#a08bb9}
.hero{padding-top:64px;isolation:isolate}.hero:before{width:1100px;height:650px;top:120px;background:radial-gradient(ellipse at 50% 65%,#893aef25,transparent 57%);z-index:-1}.hero:after{content:'';position:absolute;inset:100px 0 0;z-index:-1;pointer-events:none;background-image:linear-gradient(#bd9ded05 1px,transparent 1px),linear-gradient(90deg,#bd9ded05 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse,#000,transparent 68%)}
.hero h1{font-weight:550;letter-spacing:-3.5px}.hero h1 span{background:linear-gradient(105deg,#f5eaff 0%,#d6bcf4 28%,#ad72f0 74%,#8b3fea);color:transparent;background-clip:text;-webkit-background-clip:text}.hero p{color:#ada2ba}.hero-note{color:#93869f}.pill{background:linear-gradient(130deg,#d8c1ff10,#9466d10b);border-color:#bd90ef36;color:#d4bbe9;box-shadow:inset 0 1px #ffffff0b;backdrop-filter:blur(10px)}.eyebrow,.section .eyebrow{color:#baa1d2}.btn{border-radius:10px;background:linear-gradient(130deg,#e8d7ff12,#ffffff04);border-color:#e3ceff26;box-shadow:inset 0 1px #ffffff09;transition:transform .2s,box-shadow .2s,background .2s}.btn.primary{background:linear-gradient(135deg,#9546f0,#7020d5);color:#fff;border-color:#c594ff55;box-shadow:inset 0 1px #eacaff50,0 5px 28px #7e26df29}.btn.primary:hover{background:linear-gradient(135deg,#a15bf5,#8132e4);box-shadow:0 8px 32px #8b3be945}.btn:hover{border-color:#c9a5fc60;background-color:#ac76f31a}
.network-scene{margin-top:36px}.node{background:linear-gradient(125deg,#d5b7ff16,#22162fd9);border-color:#d9baff35;border-radius:12px;box-shadow:inset 0 1px #ffffff16,0 12px 34px #0003;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);color:#e3d7f0}.node .ico{color:#cfaaef}.node small{color:#a08eaf}.hub{background:linear-gradient(130deg,#d5b8ff27,#8b49d825 50%,#231330bb);border:1px solid #d8b0ff66;box-shadow:inset 0 1px #f5e5ff44,inset 0 -1px #b16aff22,0 0 90px #953de325,0 18px 40px #0004;border-radius:22px}.hub:before{content:'';position:absolute;inset:-9px;border:1px solid #bf8cff15;border-radius:30px;pointer-events:none}.hub .brand{font-size:26px}.hub p{color:#c2a8da;letter-spacing:1.5px}.wire{stroke:#af75e947}.pulse{stroke:#d6adff}.scene-caption{color:#8a759d}.scene-grid{background-image:linear-gradient(#d7b5ff06 1px,transparent 1px),linear-gradient(90deg,#d7b5ff06 1px,transparent 1px)}
.trust{margin-top:14px;background:linear-gradient(90deg,transparent,#c5a0f504,transparent);border-color:#c8a2ed18}.trust p{color:#9783aa}.wordmarks{color:#b2a8bc}.section h2{font-weight:500}.section-intro{color:#aaa0b7}.subtle-bg{background:radial-gradient(ellipse at 85% 50%,#7834ac0d,transparent 60%),linear-gradient(180deg,#c59cf706,transparent);border-color:#e6c9ff12}
.glass,.role-card,.directory,.stat,.result,.tech-flow div{background:var(--glass);border:1px solid #d7b7ff26;box-shadow:inset 0 1px #ffffff0d,0 20px 60px #0002;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}.glass{border-radius:18px}.glass-top{background:#ddc1ff05;color:#bca8cc}.lights{color:#9272b3}.label{color:#c3a4dc;border-color:#c3a0e42e;background:#bd85f508}.code{color:#b1a3ba}.code .green{color:#c6a1f5}.code .white{color:#eee6f5}.code-footer{color:#ad96c0}.feature>span{color:#be92ec}.feature p{color:#a99ab5}.role-card{border-radius:17px;position:relative;transition:transform .25s,border-color .25s}.role-card:hover{transform:translateY(-4px);border-color:#b787ef66}.role-card:before{content:'';position:absolute;top:0;left:20%;right:20%;height:1px;background:linear-gradient(90deg,transparent,#d5b4ff66,transparent)}.role-card .number,.step b{color:#b18acf}.role-card a{color:#d7bdeb}.step{border-color:#c99deb44}.step p{color:#a598b0}.cta{position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 120%,#9c47f43b,transparent 66%),linear-gradient(120deg,#dec6ff0d,#d4b3ff03);border:1px solid #d1adff30;border-radius:24px;box-shadow:inset 0 1px #ffffff13,0 20px 80px #0002}.cta p{color:#b6a6c3}footer{border-color:#ddc2ff1c}footer p,footer small{color:#998aa6}
.integration-heading h2 span,.integration-heading h1 span{color:#bb9cd5}.integration-showcase{isolation:isolate}.integration-showcase:before{content:'';position:absolute;inset:20% -15px 15%;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 20% 40%,#8b46d515,transparent 60%),radial-gradient(ellipse at 90% 80%,#ae65ed0c,transparent 60%)}.integration-intro p{color:#ad9fbc}.integration-count{color:#b29ac5}.integration-count b,.integration-count>span{color:#ddc0fa}.integration-toolbar{padding:14px;border:1px solid #e1c8ff1d;border-radius:13px;background:linear-gradient(110deg,#ffffff07,#b789f306);backdrop-filter:blur(14px)}.integration-filter{color:#b7a5c8}.integration-filter span{color:#a58bbd}.integration-filter.active{background:linear-gradient(125deg,#a465eb30,#9450cf1a);border-color:#c599f94a;color:#f0e1ff;box-shadow:inset 0 1px #e5cfff13}.integration-filter.active span{color:#dcc3f4}.integration-filter:hover{color:#f3e6ff;background:#b983f318}.integration-search{background:#10091e66;border-color:#d3b6f126}.integration-search>span,.integration-search input::placeholder{color:#a087b6}.integration-search input{color:#ede1f9}.integration-search:focus-within{border-color:#c594ff99;box-shadow:0 0 0 3px #a265f00d}.integration-results-line{color:#ac97bc}.integration-results-line>span:last-child{color:#8b749e}.integration-card{padding:11px 11px 0;border-radius:17px;border-color:#d9b8ff2b;background:linear-gradient(135deg,#e4ccff12,#b07dec08 55%,#e0c6ff08);box-shadow:inset 0 1px #ffffff10,0 12px 28px #0002;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.integration-card:hover{border-color:#c391ff80;box-shadow:inset 0 1px #ffffff20,0 12px 38px #803cc019}.integration-logo{border-radius:8px;box-shadow:0 2px 12px #0001}.integration-card-title h3{color:#f0e7f8;font-size:13px}.integration-category{color:#c4a8d9;border-color:#b58acf30;background:#b483db0a}.integration-card-body p{color:#af9abc}.integration-note{color:#aa95b9}.integration-note a{color:#d1b1ed}.integration-footnote{color:#9a83ab}.integration-module-list span{background:#ad7dd209;color:#b69cca;border-color:#c497e725}.integration-modules p{color:#aa94bd}.integration-empty{background:#bc85ed07;border-color:#c79eec40}.integration-empty>span{color:#bd8bea}
.console{background:#100c15a6;border-color:#ceb0ea29;border-radius:18px;box-shadow:inset 0 1px #ffffff0a,0 22px 80px #0004}.sidebar{background:linear-gradient(180deg,#c799ff0d,#1b102480)}.sidebar button{color:#b6a1c6}.sidebar button.active{background:linear-gradient(110deg,#9750e52c,#b677e911);color:#edddff}.sidebar small{color:#a28aae}.demo-banner{background:#ab73e710;border-color:#c496ef2e;color:#c9b0de}.console input,.console select{background:#1b1325;border-color:#d5b1f52a;color:#efe4f8}.console option{background:#1b1325}.console label{color:#c0abce}.console th{color:#b297c4}.console td small{color:#ae96bc}.toggle{background:#a058df50;border-color:#bc83ed77}.toggle:before{background:#d6a9ff}.toggle[aria-checked=false]{background:#ffffff08;border-color:#ffffff25}.toggle[aria-checked=false]:before{background:#8d7c9b}.empty{color:#b09abe}.inline-link{color:#d5aff7}.upload{border-color:#b880e95c}.progress-list span{color:#b49bc6}#toast{background:#ead6ff;color:#2d1045;box-shadow:0 8px 35px #0005}
@media(max-width:1250px){header{margin-inline:24px}}@media(max-width:800px){header{height:76px;padding:0 20px;margin-inline:20px;border-radius:14px}.brand{font-size:24px}.hero{padding-top:46px}.hub .brand{font-size:21px}.hero h1{letter-spacing:-2px}.integration-toolbar{padding:10px}.integration-card-title h3{font-size:12px}}@media(max-width:520px){header{margin:12px 14px 0;padding:0 14px;height:72px}.brand{font-size:22px;letter-spacing:-1.2px}.brand-light{letter-spacing:-1.2px}.nav-demo{font-size:10px;padding:10px 11px;gap:12px}header>.brand:after{font-size:8px}.hero{padding-top:38px}.hero h1{font-size:42px}.hero p{font-size:12px}.hub .brand{font-size:22px}.hub p{font-size:7px}.integration-card{padding:8px 8px 0;border-radius:13px}.integration-card-title h3{font-size:11px}.integration-toolbar{padding:9px}.integration-filter{font-size:9px}.integration-grid{gap:10px}.integration-logo{padding:15px}.integration-logo-riya{padding:8px}.role-card,.glass{backdrop-filter:none;-webkit-backdrop-filter:none}}
@supports not (backdrop-filter:blur(1px)){header,.node,.glass,.integration-card{background-color:#1b1425}}
/* Keep decorative illumination inside its section on narrow screens. */
.integration-showcase:before{inset:20% 0 15%}body{overflow-x:clip}
@media(max-width:520px){.hero h1{font-size:36px;letter-spacing:-1.8px;line-height:1.17}.hero .actions .btn{font-size:11px;gap:12px;padding:12px}.hero .actions{gap:9px}}